微信信息发布流程图:0.HTML文本格式示例

来源：百度文库 编辑：中财网 时间：2024/05/03 07:56:38

HTML文本格式示例

一个非常简单的HTML文件这是一个非常简单的HTML。
HTML简单段落

这是第一段。

这是第二段。

这是第三段。

在HTML里，用p来定义段落。

在HTML写多个段落

这一段  在源代码里  包含很多分行，  但是浏览器忽略  这些分行。

这一段       在浏览器里包含    很多   空格，但是    浏览器忽略多余空格。

你使用的浏览器的窗口大小决定了段落的行数。如果你改编浏览器窗口的大小，段落的行数会因此改变。


在HTML里如何换行

要
在一段
里
换行
请使用
br这个Tag


HTML正文标题

这是1号标题

这是2号标题

这是3号标题

这是5号标题
这是6号标题

HTML居中显示的标题

这是标题

上面的标题是居中显示的。

在HTML文件里加一条横线(horizontal rule)

用hr这个Tag可以在HTML文件里加一条横线。

村妇想像皇宫的生活：皇后得用金扁担挑水吧。

问：谁是世界上最可怜的人？答：炮兵连炊事班战士！问：为什么？答：戴绿帽背黑锅看别人打炮。

初中某数学老师讲方程式变换，在讲台上袖子一挽大声喝道：同学们注意！我要变形了！……


HTML文件的代码注释

代码注释是不会显示在网页里的。

HTML常用格式Tag

粗体用b表示。

斜体用i表示。

芙蓉姐姐这个词当中划线表示删除。

想唱就唱这个词下划线插

X2其中的2是下标

X2其中的2是上

好好学习，天天向上。这句话缩进表示引用

这是 预设(preformatted)文本. 在pre这个tag里的文本      保留 空格和 分行。
call getOrders

用code显示计算机代码，code里显示的字符是等宽字符。

HTML预格式文本(preformatted text)

这是预格式(preformatted)文本 浏览器会保留pre里面的           空格和分行。

pre用来表示计算机代码，效果很好。看如下代码显示：

 for i = 1 to 10 print I  next I

HTML不同计算机输出的Tag计算机代码 Computer code
键盘键入 Keyboard input
电报文本 Teletype text示例文本 Sample text
计算机变量 Computer variable

注:以上这些Tag都可以用来显示计算机程序代码。


HTML里加入地址
上海站长网 站长学院路1000号
站长网 站长学院大楼101室

邮编:200000

HTML里表示删除插入的Tag

我要删除插入文字。

还可以使用strike表示删除，效果和del一样。但是HTML国际标准推荐使用del，不再建议使用strike。

HTML超链接示例

如何创建HTML超链接(hyperlinks)

这是一个链接

站长网 站长学院站点链接

将图片作为一个超链接

你可以将一张图片作为一个链接，点击这个图片。

在HTML文件里跳转

参见第六章

第1章

这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。

第2章

这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。

第3章

这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。

第4章

这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。

第5章

这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。

第6章

这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。

第7章

这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。

第8章

这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。

第9章

这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。

第10章

这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。

第11章

这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。

第12章

这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。

第13章

这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。

第14章

这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。

第15章

这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。

第16章

这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。

第17章

这是站长网 站长学院admin5.com/html- 网页教程与代码的中文站点。

在新窗口打开一个链接一则笑话

如果你将target的属性值设成_blank，你点击这个链接的时候，网页就会在一个新窗口出现。


链接到一个邮箱地址

这是一个最简单的邮箱地址的链接：给新浪网站发信

这个邮箱地址的链接写了subject内容：给新浪网站发信

这个邮箱地址链接写了to, cc, bcc, subject, body的内容：写信给新浪

注:空格请用%20表示。

HTML表格(Table)示例

HTML简单表格

表格所用到的Tag：整个表格开始要用table；每一行开始要用tr；每一单元格开始要用td。

只有一行(Row)一列(Column)的表格

100

一行三列的表格

100200300

两行三列的表格

100200300400500

没有边界的表格

缺省情况下，表格没有边界

100200300
400500600

表格Border设为0，也不显示边界：

border="0">100200300400500600

有边界的表格

表格的边界值设为1：

第一行
第二行

表格的边界值设为8，边界更粗：

第一行
第二行

表格的边界值设为15，边界更粗：

第一行
第二行

HTML表格的表头

有表头的表格：

姓名电话传真
Bill Gates555 77 854555 77 855

竖直方向的表头：

姓名Bill Gates
电话555 77 854
传真555 77 855

表格空单元格

Some textSome text
Some text

上面的表格中，有一个单元格里是没有任何内容的，这个空的单元格没有显示边界，虽然整个表格设了边界值。

Some textSome text
 Some text

上面的例子，你可以看到，给这个单元格加上一个空格符号之后，单元格的边界就显示出来了。

注意：空格符要用&bsp;表示。 是一个HTML特别字符，参见HTML特别字符(HTML Character Entities)。

带标题的表格

这个表格有标题：

表格标题
100200300
400500600

包含多行或多列的表格单元格

用colpsan属性，设置包含多列的单元格：

姓名联系方式
Bill Gates555 77 854555 77 855

用rowspan这个属性，设置包含多行的单元格：

姓名Bill Gates
联系方式555 77854
555 77 855

一个表格单元格里的内容

这是一段

这是另外一段。

这个单元格里包含了一个表格：
AB
CD
这个单元格里包含了一个图片：HELLO

表格的单元格内容和单元格边界之间的距离(CellPadding)

没有cellpadding的表格：

FirstRow
SecondRow

设置cellpadding属性，可以改变单元格内容和单元格边界之间的距离。

以下是设置了cellpadding属性的表格：

第一行
第二行

cellpadding属性值设置为30的表格：

第一行
第二行

表格中单元格之间的距离(Cellspacing)

Cellspacing属性表示单元格之间的距离。

如果表格里没有设置cellspacing属性，缺省情况下，cellspacing值为1。

第一行
第二行

Cellspacing属性值设为0的表格：

第一行
第二行

Cellspacing属性值设为20的表格：

第一行
第二行
/html>
给表格加背景颜色或者背景图片

给表格设置背景颜色：

第一行
第二行

给表格加背景图片：

第一行
第二行

表格单元格对齐方式(align)

align="right">5000.45

分数期中考试期末考试
芙蓉姐姐250.1050000.20
程菊花1000.00
周笔畅2000.40500.00
黄新300.50800.65

表格的单元格背景颜色和背景图片

单元格背景色：

第一行
第二行

HTML框架(Frame)示例

列分的框架(Frame, cols)
行分的框架(Frame, rows)
既有行分又有列分的框架(Frame, rows, cols)

src="../asdocs/html_tutorials/Frame_c.html">
用框架(Frame)导航

使用内嵌框架(IFrame)

用 IFRAME 可以在HTML文件里显示另一个网页。

这个 HTML 文档中使用 IFRAME 来显示另外一个叫Frame_a.html 的网页。

如何固定框架(Frame)大小

 

HTML列表(List)示例

不排序列表(Unordered List)

不排序列表(Unordered List)：

  • 站长网 站长学院之网页课程
  • 站长网 站长学院之网页代码
  • 站长网 站长学院之魔兽世界

排序列表(ordered list)

一个排序列表(Ordered List)：

  1. 站长网 站长学院之网页课程
  2. 站长网 站长学院之网页代码
  3. 站长网 站长学院之魔兽世界

不排序列表的类型(Type)设置

Type设为disc的列表，列表项前面的符号是圆黑点：

  • 站长网 站长学院之网页课程
  • 站长网 站长学院之网页代码
  • 站长网 站长学院之魔兽世界

Type设为circle的列表，列表项前面的符号是空心圆：

  • 站长网 站长学院之网页课程
  • 站长网 站长学院之网页代码
  • 站长网 站长学院之魔兽世界

Type设为square的列表，列表项前面的符号是黑方块：

  • 站长网 站长学院之网页课程
  • 站长网 站长学院之网页代码
  • 站长网 站长学院之魔兽世界

嵌套的列表(nested list)

嵌套一层的列表：

  • 肉类
  • 蔬菜
    • 番茄
    • 青菜
  • 酒类

嵌套2层的列表：

  • 动物
    • 两栖动物
    • 哺乳动物
      • 人
      • 猩猩
    • 鱼类
  • 植物

定义列表(definition list)

定义列表(Definition List)：

野生动物
所有非经人工饲养而生活于自然环境下的各种动物。
宠物
指猫、狗以及其它供玩赏、陪伴、领养、饲养的动物，又称作同伴动物。

HTML不同类型(Type)的排序列表

排序列表，不设Type属性：

  1. 站长网 站长学院之网页课程
  2. 站长网 站长学院之网页代码
  3. 站长网 站长学院之魔兽世界

排序列表，Type属性设为A：

  1. 站长网 站长学院之网页课程
  2. 站长网 站长学院之网页代码
  3. 站长网 站长学院之魔兽世界

排序列表，Type属性设为a：

  1. 站长网 站长学院之网页课程
  2. 站长网 站长学院之网页代码
  3. 站长网 站长学院之魔兽世界

排序列表，Type属性设为I：

  1. 站长网 站长学院之网页课程
  2. 站长网 站长学院之网页代码
  3. 站长网 站长学院之魔兽世界

排序列表，Type属性设为i：

  1. 站长网 站长学院之网页课程
  2. 站长网 站长学院之网页代码
  3. 站长网 站长学院之魔兽世界

HTML表单(Form)示例

HTML表单控件-单行文本输入框输入用户姓名请输入你的姓名：

HTML表单控件-密码输入框输入用户姓名和密码

请输入你的姓名：
请输入你的密码：

HTML表单控件-复选框(checkbox)选择请选择你喜欢的水果：

苹果
桔子
芒果

HTML表单控件-复选框(checkbox)缺省已选(checked)选择请选择你喜欢的水果：
苹果
桔子
芒果

HTML表单控件-单选框(radio)选择请选择你最喜欢的水果：

苹果
桔子
芒果

HTML表单控件-单选框(radio)缺省已选(checked)选择请选择你最喜欢的水果：

苹果
桔子
芒果

HTML表单控件(Form Control)-下拉框(select)单选

你最喜欢的水果是：

HTML表单控件-下拉框(select)多选(multiple)选择

你最喜欢的水果是：

HTML表单控件-下拉框多选-下拉框设置(size)选择

你最喜欢的水果是：

HTML表单控件-多行输入框(textarea)请提宝贵意见

请提宝贵意见：

HTML表单控件-图片提交(input type=image)输入用户姓名请输入你的姓名

HTML图片(Image)示例

在HTML里插入图片

站长网 站长学院Logo图片：

HTML里图片的对齐方式(Align)

图片的上下对齐方式：

"../images/logo/blabla_logo.gif" align="top">对齐方式:top

对齐方式:middle

对齐方式:bottom

图片的左右对齐方式：

对齐方式:left

对齐方式:center

对齐方式:right


HTML的图片大小(Height,Width)

你可以使用Height和Width属性来改变图片的大小。

width="300"height="300">

HTML图片的说明(Alt属性)

将鼠标停留在图片上，你可以看到Alt属性里写的内容。

站长网 站长学院的Logo标志
芙蓉姐姐照片：红配绿一台戏

HTML字体(font)示例

HTML字体大小(font size)字体大小 font size

这段文字的字体大小值为1。

这段文字的字体大小值为2。

这段文字的字体大小值为3。

这段文字的字体大小值为4。

这段文字的字体大小值为5。

这段文字的字体大小值为6。

这段文字的字体大小值为7。

HTML字体颜色(font color)字体颜色 font color

这段文字用的是缺省的字体颜色。

这段文字的字体颜色为红色。

这段文字的字体颜色为灰色。

这段文字的字体颜色为绿色。


HTML字体风格(font face)字体风格 font face

以下第一段用的是arial字体，第二段用的是courier字体，第三段用的是verdana字体。

arial courier verdana

arial courier

verdana

arial courier verdana

HTML网页背景颜色和背景图片示例

HTML背景颜色

看，这个页面是黄色的。

HTML里加背景图片

这个网页有背景图片哦！

如果图片比页面小，图片会自动重复。

HTML头部信息(Head)示例

利用Meta的Refresh自动跳转到指定页面

由于网站版本更新，站长网 站长学院网站的HTML中文教程链接已改为

href="http://www.admin5.com/html/html_tutorials/index.html">http://www.admin5.com/html/html_tutorials/index.html 。

如果在5秒钟后网页没有自动跳转，请点击上面的链接，进入站长网 站长学院网站的HTML中文教程。

怎样把txt文本变成html格式 如何将foxmail中的html邮件导出为文本格式? HTML语言中的各种文本格式、字符格式、段落设置、列表、标记的作用 Outlook Express 可以发送纯文本格式的邮件，也可以发送HTML格式的邮件。 Outlook Express 可以发送纯文本格式的邮件，也可以发送HTML格式的邮件。 什么叫HTML格式,什么叫文本格式??分别什么时候用比较好?? HTML文本域问题 在HTML中只显实文本 文本格式？ 关于文本文档转换为Html格式时的换行问题 文本内容以html格式存在数据库中,如何截取部分显示? html文本编辑器下载地址 哪位高台帮助一下,在下万分感激怎么找到htm格式的文本来编辑Html语句网页？记事本是txt格式呀？谢谢! 什么是文本格式 什么是无格式文本？ 文本格式如何转换? 文本格式如何转换? 用文本文档能编写html吗 文本文档如何转换成HTML文件??? 一段故障的HTML文本，求高手。 如何调用在线html文本编辑器 请问什么是HTML格式? HTML格式是什么含义？ 什么是HTML文档格式?