HTML 文本

281 阅读4分钟

绝大多数静态页面由文本、图片、超链接、音频/视频组成,在 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>在浏览器中显示为:(a+b)2(a+b)^2

4、下标标签

使用方式:<sub> </sub>,来实现文本的下标效果,如<p>H<sub> 2 </sub></p>,在浏览器中显示为:H2H_2

5、中划线标签

使用方式:<s> </s>,实现文本的划线效果,如<p><s>删除</s></p>,在浏览器中显示为:删除

6、下划线标签

使用方式:<u> </u>,实现文本的下划线效果,如<p><u>下标文字</u></p>,在浏览器中显示为:下标文字\underline{下标文字}

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 等;
  • 行内元素特点:可以和其他行内元素位于同一行;内部可以容纳其他行内元素,不可以容纳块元素。

九、特殊符号

符号代码备注
空格&nbsp;一个汉字宽度为三个 &nbsp;
双引号&quot;英文引号
左单引号&lsquo;'
右单引号&rsquo;'
………………

为什么要用代码来表示特殊符号呢? 因为某些符号在 HTML 中有特殊含义(如 <、> 等),需要对其进行转义,否则在解析时会出现错误。