绝大多数静态页面由文本、图片、超链接、音频/视频组成,在 HTML 文本中,主要有标题、段落、换行、文本、水平线、特殊符号六种内容标签。
一、标题标签
标题标签有六个级别:h1、h2、h3、h4、h5、h6,h 为 header 的缩写,表示标题,一个页面只能有一个 h1 标签,其他标题标签数量不做限制,写法:
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
在浏览器中效果展示如下:
这是一级标题
这是二级标题
这是三级标题
这是四级标题
这是五级标题
这是六级标题
注:h 标签随着数字的增大,重要性递减,用好 h 标签,能让页面的层级关系表现得更清楚,也能让搜索引擎更好的抓取页面的主题内容,提高页面的关键词权重;乱用 h 标签有可能被搜索引擎判定为作弊,最后导致 K 站。
二、段落标签
段落标签的表示形式:<p> </p> ,两组段落标签之间会自动换行,且两个段落之间有一定的间距。
三、换行标签
换行标签的表示形式:<br/>,用于给文字换行,换行后的两行文字中间没有间距,多个 br 标签可以叠加,表现为多次换行。
四、文本标签
在 HTML 中,可以用文本标签对文字进行修饰。
1、粗体标签
使用方式:<strong> </strong> 或 <b> </b>,这两者都能达到相同的加粗效果,但在使用中 b 标签仅仅表明字体加粗,strong 标签代表加强,即字体和内容上的加强,表明内容的重要性,更具有语义性。
2、斜体标签
使用方式:<i> </i> 或 <em> </em> 或 <cite> </cite>,i 本意是样式标签,仅作为斜体展示;cite 本意为引用;em 是强调文本,在使用中,尽量使用 em 标签,因为其语义性更好。
3、上标标签
使用方式:<sup> </sup>,来实现文本的上标效果,如<p>(a+b)<sup> 2 </sup></p>在浏览器中显示为:
4、下标标签
使用方式:<sub> </sub>,来实现文本的下标效果,如<p>H<sub> 2 </sub></p>,在浏览器中显示为:
5、中划线标签
使用方式:<s> </s>,实现文本的划线效果,如<p><s>删除</s></p>,在浏览器中显示为:删除
6、下划线标签
使用方式:<u> </u>,实现文本的下划线效果,如<p><u>下标文字</u></p>,在浏览器中显示为:
7、大字号标签和小字号标签
使用方式:<big> </big> 和 <small> </small> 来实现字体的变大变小。
注:在实际使用中,一般不用标签来控制字的效果,常用 CSS 来控制。
五、水平线标签
使用方式:<hr/> 为自闭合标签,用于在页面中显示一条水平线。
六、div 标签
使用方式:<div> </div> 用来划分 HTML 结构,和 CSS 一起控制某一块的样式。
七、一般标签和自闭合标签
-
一般标签:有开始符号和结束符号,可以在之间插入其他标签或者文字,如
<div> 其他内容 </div>; -
自闭合标签:只有开始符号而没有结束符号,因此不可以在内部插入标签或者文字,如
<br/>
八、块元素和行内元素
在 HTML 中,根据元素的表现形式,一般可以分为两类:块元素(block)和行内元素(inline)
1、块元素
- 常见块元素:h1-h6、p、div、hr、ul 等;
- 块元素特点:独占一行,排除其他元素;可以容纳其他块元素和行内元素。
2、行内元素
- 常见行内元素:strong、em、a、span 等;
- 行内元素特点:可以和其他行内元素位于同一行;内部可以容纳其他行内元素,不可以容纳块元素。
九、特殊符号
| 符号 | 代码 | 备注 |
|---|---|---|
| 空格 |  ; | 一个汉字宽度为三个  ; |
| 双引号 | "; | 英文引号 |
| 左单引号 | &lsquo; | ' |
| 右单引号 | &rsquo; | ' |
| …… | …… | …… |
为什么要用代码来表示特殊符号呢? 因为某些符号在 HTML 中有特殊含义(如 <、> 等),需要对其进行转义,否则在解析时会出现错误。