一个网页的内容像一篇文档一样,需要控制格式,使内容看起来美观紧凑。本文将学习HTML文本及格式控制方面的标记。
1 文本标签
-
b是将标签之间的文本内容显示为粗体;
<b>加粗</b>
-
i将标签之间的文本内容显示为斜体;
<i>斜体</i>
-
u将标签之间的文本内容显示为加下滑线;
<u>下划线</u>
-
s将标签之间的文本内容显示为删除线;
<s>删除线</s>
-
sup将标签之间的文本内容显示为上标签;
上标x<sup>2</sup>
-
sub将标签之间的文本内容显示为下标签;
下标x<sub>2</sub>
-
font标签指定文本的字形、大小、颜色;但这个标签在HTML5中一般不用了,用span标签来替代;
<font face="宋体" size="5" color="#003366">字体字型字号以及颜色设置</font>
下图是上述代码在浏览器中的显示效果。
-
HTML中使用h1~h6的标签来标记文本中的标题,标签使用的数字越大,则字体越小;
该标签默认是左对齐,可以使用align属性修改对齐方式,其值可以是left、center、right;下面的代码将h1标题居中对齐,h2标题右对齐,h3标题默认左对齐;
<h1 align="center">h1的标题居中对齐</h1> <h2 align="right">h2的标题右对齐</h2> <h3>h3的标题默认左对齐</h3>
-
p标签为网页段落标签。浏览器会自动在段落的前后添加空行;
-
br标签为换行标签,相当于按一次回车键所产生的效果;
该标签单独使用无结束标签;
-
pre标签为预格式化标签,可以将标签中的文本内容按原有的格式显示;
当需要多次使用br进行换行或者使用nbsp加入空格时,可以考虑使用pre标签来提高效率;
<!doctype html> <html> <head> <meta charset='UTF-8' /> <title>HTML入门</title> </head> <body> <p>HTML入门:02HTML文本及格式标记</p> CSDN <br> 专业开发者社区 <font size="4"> <pre> CSDN是全球知名中文IT技术交流平台, 创建于1999年,包含原创博客、精品问答、 职业培训、技术论坛、资源下载等产品服务, 提供原创、优质、完整内容的专业IT技术开发社区。 </pre> </font> </body> </html>
下面是上述代码的网页效果:p标签产生一个段落,并且上下有段落间距,br标签仅产生换行,pre标签以代码中的原格式效果显示。
2 文本块标签
在格式化文本块时,还有两个常用的容器标签div和span。
-
div定义文档中的分区或节,浏览器会自动在div所标记区域前后自动放置一个换行符;
-
span是定义文档中的一行的一部分。
<!doctype html> <html> <head> <meta charset='UTF-8' /> <title>HTML入门</title> </head> <body> <div>标题</div> <div>段落</div> <span>文本1</span> <span>文本2</span> </body> </html>
下图为上述代码的显示效果,div标签属于块内元素,两个div表示两个块区域,宽度为页面的100%,并且后面带有换行符;
span是行内元素,没有固定的宽度,所以两个span的内容连续。
通常情况下。div和span标签与css结合可以呈现出不同的页面效果。
3 列表标签
列表分为有序列表和无序列表。
3.1 有序列表
有序列表是指包含有顺序内容的列表,可以用来表示连续的信息,一般用阿拉伯数字、英文字母或罗马数字等编号。
有序列表包含在标签ol和/ol中,列表项用li标签来定义,ol的type属性值决定了编号的形式:
-
当type值省略时,列表以阿拉伯数字编号;
-
当设置为A,列表以大写英文字母编号,a则是以小写英文字母编号;
-
设置为I,列表以罗马字母编号,i则会变成小写。
<!doctype html> <html> <head> <meta charset='UTF-8' /> <title>HTML入门</title> </head> <body> <ol> <li>第一章</li> <li>第二章</li> </ol> <ol type='A'> <li>第一章</li> <li>第二章</li> </ol> <ol type='a'> <li>第一章</li> <li>第二章</li> </ol> <ol type="I"> <li>第一章</li> <li>第二章</li> </ol> <ol type="i"> <li>第一章</li> <li>第二章</li> </ol> </body> </html>
3.2 无序列表
无序列表是指包含的内容项没有指定顺序,无序列表的每一项不再用编号表示,而是用某种类型的标志表示,类似于word中的项目符号。
无序列表包含在标签ul和/ul中,列表项仍用li标记来定义,type属性值省略,浏览器中的显示列表符号为黑色的小圆点。
- type属性取值:disc、circle、square
<!doctype html>
<html>
<head>
<meta charset='UTF-8' />
<title>HTML入门</title>
</head>
<body>
<ul>
<li>第一章</li>
<li>第二章</li>
</ul>
<ul type='disc'>
<li>第一章</li>
<li>第二章</li>
</ul>
<ul type="circle">
<li>第一章</li>
<li>第二章</li>
</ul>
<ul type="square">
<li>第一章</li>
<li>第二章</li>
</ul>
</body>
</html>
文本及格式控制标签在页面常规的文本编辑、布局排版方面构建了基本的HTML规范,结合CSS将更能突出这方面的效果。