标题标签

语法　　

html
....
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
...
<h6>h6</h6>
....

说明　　

标题标签h1到h6，字号逐渐减小、重要性程度逐渐递减　　　　　　

段落标签

html
<p>
  这是段落标签  
</p>

指定细则

通常指旁注，包括免责声明、注意事项、法律限制、版权信息等

html
<p>
  这是段落标签  
  <small>
    &copy2021 By LS
  </small>
</p>

标记重要和强调文本

strong元素表示内容的重要性，em强调内容的着重点

HTML5中新的标签相比于旧标签语义更强

语法

html
<!--标记重要文本-->
<p>
   123<strong>4</strong>56
   <!--旧方式为 <b></b>加粗-->
<p>
<!--强调内容着重点-->
<p>
   12345<em>6</em>
    <!--旧方式为 <i></i>加粗-->
<p>

说明

默认情况下，strong文本以粗体显示，em文本以斜体显示若em为strong子元素，则同时以粗体和斜体显示文本

添加删除线、下划线和水平线

添加删除线

html
<del>text</del> 
 <!--旧方式为 <s></s>删除-->

添加下划线

html
<ins>text</ins>  
 <!--旧方式为 <u></u>下划线-->

水平线

html
<hr>

换行标签

作用

br实现强制换行

语法

html
<p>123456<br><p>

注意

br是一个单标签
强制换行，所以上下文本之间并不会添加垂直间距

指明引用或参考

cite

cite元素可以指明对某内容源的引用或参考。如对戏剧、脚本或图书标题、法律文件等

语法

html
<p>书中<cite>《精通CSS高级web标准解决方案（第8版）》</cite>讲述了margin使用会遇到的问题与解决方案
</p>

说明

默认情况下，cite元素以斜体显示

引述块级文本

blockquote元素表示单独存在的引述，用于引述块级文本

归属

双标签
块级元素

语法

html
<blockquote cite="https://www.baidu.com">百度上指出关于XX的问题...
</blockquote>

注意

对于blockquote和q使用可选属性cite="url"，默认情况下浏览器不会将url呈现给用户；若需要访问者看到此URL，可以使用a标签重复这个URL
若blockquote中仅包含一个单独的段落或短语，可以直接将内容放在blockquote中
浏览器默认对blockquote文本进行缩进，cite属性的值不会显示出来

引述行内文本

归属

双标签
内联元素

语法

html
<p>问题在...<q cite="url"  lang="xx">javascript</q>中有描述</p>

说明

浏览器默认为q元素加上特定语言的引号【由其属性lang的值变化不同语言中的引号】
因为q元素的跨浏览器问题，因避免使用q元素
q元素引用的内容不能跨越不同的段落，在这种情况下因使用blockquote

指定准确时间、日期或时间段

说明

用来指定准确时间、日期

归属

内联元素
双标签

语法

html
<time datetime="time">  文本</time>

注意

其属性datetime的值为文本转为机器可读时间格式【有效时间格式】
文本指要显示再浏览器中的表示时间、日期或时间端的文本
不能在time元素中嵌套另一个time元素，也不能在没有datetime属性的time元素中包含其他元素(只能包含文本)
datetime属性不会单独产生任何效果，但可以配合其他web应用使用，因此必须使用机器可读格式

解释缩写词

语法

html
<abbr title="缩写词全称">缩写词</abbr>

注意

用括号提供缩写词的全称是最直接的方式
默认情况下，对用户的视觉提示，firefox和Opera等浏览器会对带title属性的abbr元素使用虚线下划线。若看不到下划线，试着为其父元素的CSS添加line-height属性

创建上下标

语法

html
<sup>创建上标</sup>
<sub>创建下标</sub>

注意

上下标会扰乱行间距，需要通过css调整

标记代码或文件名

语法

html
<code> 代码或文件名</code>

图像类标签

创建图

图可以是图表、照片、图形、插图、代码片段，以及其他类似的独立类容

语法

html
<figure>
  <figcaption>图表、图片标题</figcaption>
  <img src="" />
</figure>

注意点

figure中可以包含多个图表、但是只能有一个figcaption
不要简单的将figgure作为在文本中嵌入独立内容实列的方法，在这种情况下，通常更适合aside元素

链接标签

说明

链接主要有两个组成部分

目标
目标可以指定访问者点击链接时会发送什么。【Eg: 实现页面内跳转、显示图像、下载文件等】
标签
标签指访问者在浏览器中可以看到或屏幕阅读器中听到的部分

超链接

语法

html
<a href="https://www.w3school.com.cn/">W3C学习</a>

注意

链接中href值为同主机下不同文件时，可以是相对路径或绝对路径；若创建的是指向其他Web页面的链接，则href的值必须为绝对URL【Eg: https://www.w3school.com.cn/ ]
通常，对指向站内网站页面的链接使用相对URL；对指向站外网站页面的链接使用绝对URL

Eg

创建块级链接

a标签的name属性用于规定锚的名称，href用于指定链接目标

html
<a href="#commpany-name">公司名称</a>
...
<a name="commpany-name">XX公司</a>

创建锚并链接到锚

通常，实现回到顶部或跳转指特定区域的效果

html
<a href="#commpany-name">公司名称</a>
...
<a id="commpany-name">XX公司</a>

目录