文本标签与区块标签

最新推荐文章于 2023-03-06 21:30:00 发布

原创最新推荐文章于 2023-03-06 21:30:00 发布 · 514 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

html 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了HTML中的文本标签，如标题h1~h6、段落p、文本格式化，以及区块标签div和span的用法。内容涵盖了各种标签的属性、样式和在网页布局中的作用，是理解HTML文本格式化和区块划分的基础教程。

文本标签与区块标签

1. 标题标签h1~h6

标题标签直观的告诉用户，网页哪部分是重要的，哪些是不那么重要的。标题标签通常用来为用户展现网页的结构。

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
<h1> 定义最大的标题。 <h6> 定义最小的标题，字体均为加粗，h1 标签字体最大，h6 标签字体最小。
标题标签都为双标签，所以必须要有起始标签与结束标签。
标题标签均为块级元素，既默认占一整行，自带换行效果。
标题标签均有上下边距，既 CSS 中的外边距。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MADM8OGw-1649347992876)(https://raw.githubusercontent.com/xiaofeilalala/DocsPics/main/imgs/20210611203058.png)]

2. 段落标签p

P 标签用来定义段落。当我们需要在网页上显示一段一段的内容时，就可以使用 P 标签。

段落是通过 <p> 标签定义的。
p 标签为双标签，所以必须有首尾标签。段落的内容既为 p 标签的内容。
p 标签为块级元素，内容会默认占一整行，即使内容很少，自带换行效果。
p 标签里面可以嵌套其他标签。
p 标签默认会自带上下边距的样式，既 CSS 中的外边距。

<p>段落标签</p>

3. 文本格式化标签

文本格式化标签是对输出的文本进行格式化。

3-1 粗体与斜体

<b> 定义粗体文本
<i> 定义斜体文本

<b>粗体文本</b>
<i>斜体文本</i>

在 HTML 4.01 中，<i> 标签呈现斜体的文本。然而，在 HTML5 中没有必要这么做，可以使用样式表来格式化 <i> 元素中的文本。

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。

3-2 上标和下标

<sup> 定义上标文本，上标文本将会显示在当前文本流中字符高度的一半为基准线的上方，与当前文本流中文字的字体和字号都是一样的。
<sub> 定义下标文本，下标文本将会显示在当前文本流中字符高度的一半为基准线的下方，与当前文本流中文字的字体和字号都是一样的。

上标<sup>[1]</sup>
H<sub>2</sub>o

3-3 加粗和强调

<strong> 定义重要的文本，默认在浏览器显示为粗体
<em> 定义被强调的文本，默认在浏览器显示斜体

<strong>重要内容</strong>
<em>强调作用</em>

在 HTML 4.01 中，<strong> 标签定义加粗的被强调的文本，在 HTML 5 中，<strong> 标签定义重要的文本。

3-4 内容的修改

<ins> 定义插入字
<del> 定义删除字

<ins>插入的文本</ins>
<del>删除的文本</del>

<del> 和 <ins> 一起使用，描述文档中的更新和修正。浏览器通常会在已删除文本上添加一条删除线，在新插入文本下添加一条下划线。

3-5 定义大小字体

<big> 定义大号字
<small> 定义小号字

<big>大的字体</big>
<small>小的字体</small>

4. 引文、引用、及标签定义

4-1 引用

<blockquote> 定义长的引用，左、右两边缩进（增加外边距）
<q> 定义短的应用，浏览器经常在引用的内容周围添加引号

<blockquote> 和 <q>都有一个属性cite，值为 URL，规定引用的源 URL

<p>
    <blockquote cite="http://www.baidu.com">每一位开发者都在贡献和更新技术内容，共同参与社区建设，维护社区秩序。如果你和我们一样有技术理想，并愿意贡献自己的力量，欢迎加入我们。</blockquote>
</p>
<p>
    <q cite="http://www.baidu.com">定义长的引用</q>
</p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-amwRqbw5-1649347992881)(https://raw.githubusercontent.com/xiaofeilalala/DocsPics/main/imgs/20210614183631.png)]

4-2 缩写词与首字母缩写

通过对缩写词语进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息

<abbr> 用来表示一个缩写词或者首字母缩略词
<acronym> 定义首字母缩写，HTML5不支持此标签

<abbr> 和 <acronym> 都有一个共同属性title ，当您把鼠标移至带有 <abbr> 或者 <acronym> 标签的缩写词/首字母缩略词上时，就会展示缩写词/首字母缩略词的完整版本。

<p>
    <abbr title="Hyper Text Markup Language">HTML</abbr> 是超文本标记语言
</p>
<p>
    <acronym title="Cascading Style Sheets">CSS</acronym> 是层叠样式表
</p>

4-3 引文和定义

<cite> 定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题，浏览器通常会以斜体显示 <cite> 元素
- 在 HTML5 中，<cite> 标签定义作品的标题。在 HTML 4.01 中，<cite> 标签定义一个引用。
<dfn> 定义项目或缩写的定义，HTML5 标准中的用法：
- 如果设置了 <dfn> 元素的 title 属性，则定义项目
- 如果 <dfn> 元素包含具有标题的 <abbr> 元素，则 title 定义项目
- 不设置 title 属性，不包含具有标题的<abbr> 元素时，<dfn> 文本内容即是项目，并且父元素包含定义

<!-- 引文和定义 -->
<p>
    <cite>哈利波特</cite> 是一部非常好看的电影
</p>
<!-- dfn在html5中3中场景的定义 -->
<!-- 场景1 -->
<p>
    <dfn title="Hyper Text Markup Language">HTML</dfn> 是超文本标记语言
</p>
<!-- 场景2 -->
<p>
    <dfn><abbr title="Hyper Text Markup Language">HTML</abbr></dfn> 是超文本标记语言
</p>
<!-- 场景3 -->
<p>
    <dfn>HTML</dfn> Hyper Text Markup Language 是超文本标记语言
</p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TiPS74VC-1649347992882)(https://raw.githubusercontent.com/xiaofeilalala/DocsPics/main/imgs/20210615184214.png)]

4-4 设计者信息与文字方向

<address> 定义文档或文章的作者/拥有者的联系信息，元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。
- 如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。
- 如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。
<bdo> 可覆盖默认的文本方向，有一个属性 dir
- dir="rtl" 字体重右到左显示
- dir="ltr" 字体从左到右显示（默认）

HTML 4.01 不支持 <article> 标签，因此在 HTML 4.01 中，<address> 标签始终定义文档作者/拥有者的联系信息。

 <!-- 设计者信息和文字方向 -->
<address>Written by <a href="mailto:2738389567@qq.com">JSX</a></address>
<!-- 文字方向 -->
<p>
    <bdo dir="ltr">从左到右</bdo>
</p>
<p>
    <bdo dir="rtl">从右到左</bdo>
</p>

5. 计算机输出标签与转义字符

5-1 计算机输出标签

<code> ：定义计算机代码。
<kbd> ：定义键盘码。
<samp> ：定义计算机代码样本。
<var> ：定义变量。
<pre> ：定义预格式文本。
- 该标签的一个常见应用就是用来表示计算机的源代码。
- 被包围在 pre 元素中的文本通常会保留空格和换行符，并且文本会呈现为等宽字体。
- 标签中的特殊符号被转换为符号实体
- 该元素中允许的文本可以包括物理样式和基于内容的样式变化，还有链接、图像和水平分隔线。

<!-- 定义代码 -->
<code>
   let con = funtion() {
       console.log("hello world")
   }
</code>

<!-- 定义键盘码 -->
<p>
    <kbd>ctrl</kbd>
</p>

<!-- 定义代码样本 -->
<p>
    <samp>计算机样本</samp>
</p>

<!-- 定义变量 -->
<p>
    <var>变量</var>
</p>

<!-- 定义预格式文本 -->
<p>
    <pre>&lt;p&gt; HTML源代码，请使用符号实体来表示特殊字符 &lt;p/&gt;</pre>
</p>

5-2 转义字符

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

HTML 中的常用字符实体是不间断空格( )。

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`'` (IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

6. 换行、水平线、HTML 注释

6-1 换行标签 br

br 标签为空标签，没有结束标签，可以写成<br>，也可以写成 <br/>
br 标签用于换行
一个 br 标签代表换一行，如果需要换多行，就需要写多个 br 标签

<p>据国家卫健委官网消息，截至2021年6月14日，31个省（自治区、直辖市）和新疆生产建设兵团<br/>累计报告接种新冠病毒疫苗90413.4万剂次。</p>

6-2 水平线 hr

hr 标签在 HTML 页面中创建一条水平线。水平分隔线可以在视觉上将文档分隔成各个部分。hr 标签为单标签，其表现形式为一条横线，默认为黑色。

Tips：HTML5 不支持 </hr> 标签的任何属性

align="属性值"：设定线条置放位置。属性值可选择：left、right、center。
size="2" ：设定线条粗细。以像素为单位，内定为2。
width="500"或width="70%"：设定线条长度。可以是绝对值（单位是像素）或相对值。如果设置为相对值的话，内定为100%。
color="#0000FF"：设置线条颜色。
noshade：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体。

<p>江苏东部沿海有着丰富的旅游资源、产业优势以及增长潜力,像一颗颗珍贵的珠宝,而沈海高速就是贯穿其中的一条珠链。</p>
<hr/>
<p>随着经济社会的持续发展,高速公路建设、管养、运营等领域,也不断注入新的发展理念,从“生态高速”到“智慧高速”,再到“平安高速”,沈海高速打造了一道又一道靓丽风景线,为沿线地区高质量发展赋能增效。</p>

6-3 HTML注释

HTML 注释标签是在 HTML 源代码中添加说明/注释，使用该标签注释的内容将不在浏览器中显示。

注释可以写在 HTML 文件的任意位置。
注释内容必须写在中，否则不会生效。
注释的内容只是解释，并不会实际的显示在页面上。
编写代码时，尽量把注释写的简单明了，通俗易懂，不仅方便自己维护代码，也方便与他人的协同开发。
注释标签可以自定义内容，也可以注释已写的HTML标签。

<!-- --> 注释

7. 区块标签

7-1 div 标签

HTML <div> 标签是块级元素，定义文档的区域，用来为 HTML 文档中的内容提供结构和背景的元素。

div 标签为双标签，必须有首尾标签，区域内的内容既为 div 标签的内容
div 标签是块级元素，默认占一整行，可以设置宽高。
div 没有任何的默认样式，可以给 div 设置任意的样式。
div 可以嵌套任意标签，可以让其他标签和 div 标签任意组合，来构成我们的网页。

<div>
    <h1>标题</h1>
    <a href="javascript:;">链接</a>
    <p>文本内容</p>
    <img src="" alt="图片">
</div>

7-2 span 标签

span 标签用来定义文本内容，可以是单独的一句话，一些内容，也可以是段落里面的内容。

span 标签为双标签，必须有首尾标签。
span 标签为行内元素，默认是在同一排排列，左右会有间隙，不会自动换行。
span 不能使用 CSS 为其设置宽高，即使设置了宽高也会无效。（为其设置宽高，可以利用 CSS 的 display 属性将其设置为行内块元素即可）
span 标签里也可以嵌套其他标签，用于对文档中的行内元素进行组合。

<div>
    <span><a href="">链接一</a></span>
    <span><a href="">链接二</a></span>
    <span><a href="">链接三</a></span>
</div>

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`'` (IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`'` (IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`

显示结果	描述	实体名称	实体编号
	空格	` `	` `
<	小于号	`<`	`<`
>	大于号	`>`	`>`
&	和号	`&`	`&`
"	引号	`"`	`"`
’	撇号	`'` (IE不支持)	`'`
￠	分	`¢`	`¢`
£	镑	`£`	`£`
¥	人民币/日元	`¥`	`¥`
€	欧元	`€`	`€`
§	小节	`§`	`§`
©	版权	`©`	`©`
®	注册商标	`®`	`®`
™	商标	`™`	`™`
×	乘号	`×`	`×`
÷	除号	`÷`	`÷`