HTML详解

最新推荐文章于 2024-03-07 11:34:56 发布

探鱼不是鱼

最新推荐文章于 2024-03-07 11:34:56 发布

阅读量1.2k

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/RollsRoycewk/article/details/109712881

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

定义

HTML

Hyper Text Mark-up Language

W3C

word wide web

网页的组成

结构

结构用于对网页元素进行整理和分类，主要是HTML。(决定你是否有个好天然身体)

样式

表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。(决定你是否打扮的美丽外观)

行为

行为是指网页模型的定义及交互的编写，主要包括DOM和ECMAScript两个部分(决定你是否有吸引人的行为)

html5是html语言的第五次重大修改

html5是在2014年10月29日宣布完成

实体

空格

&nbsp

<

&lt

>

&gt

"

&quot

’

&apos

&

&amp

HTML格式

<!DOCTYPE html>

版本声明

给浏览器声明，告诉浏览器应该按照html5的规范来解析当前的文档

如果不书写，那么按照什么规范解析，就看浏览器心情

必须定义在 HTML 文档的第一行，在 HTML 标签之前

<!DOCTYPE html> 不是html标签，他只是一条浏览器的指令，在所有版本中，这条指令对大小写都不敏感

<html lang=“en”></html>

<head></head>

<meta>

• charset属性

• 告诉浏览器强制使用`某个编码`来对这个HTML文档进行解释。<meta
charset=“UTF-8”>

• name属性

• 其中的值是固定好的 <meta name=“viewport” content=“width=device-width,
initial-scale=1.0”>

• name的值为keywords时

• 作用：搜索引擎在抓取网页时将这些关键字提取出来保留在搜索引擎内部。

• 可以设置多个关键字，每个关键字之间使用逗号进行分隔。

• name的值为description时

• 作用：搜索引擎搜索关键字结果标题下面的内容。

• keywords属性

• 用来指定网页的关键字

• description属性

• 指定网页的描述

• content属性
<title></title>

•
搜索引擎在搜索的时候，会将title当做关键字来显示,网页中只有一个title<title>Document</title>
<script></script>

• defer属性

• 仅可以使用在外部引入的js上，代表当前js并行下载，并且在读取完html之后才执行
<link></link>

• rel属性

• rel=“stylesheet”

• href属性

• href=""

<body></body>

在html中，所有我们能够看到的内容全部书写在body中

注释

shift + alt + a 注释的快捷键

ctrl + /

HTML标签

块元素

<div></div>

没有任何具体的含义，主要用于网页的布局
通过一个一个的div将页面划分为不同的部分，之后在针对部分进行开发

<h></h>

定义文字的标题,n表示的是数字`1~6`被`h`标签标记的文本会自动加粗并且自动换行。

•
不要因为标题的字号大小很小，而使用低级别的标题,字号大小可以通过css的font-size来控制

• 尽量避免跳过某一级标题，依次使用

• 需要避免在同一个网页中多次使用h1元素，h1经常用在网页的标题或者是logo上

• 默认上下有一定的间隙-

<p></p>

定义一个段落,p标签会在每个段落前后自动创建一行空白。
<br>标签表示换行，为单标签，通常出现在 p 标签中
每个 p标签表示一个段落，而使用 br
标签换行，通常被称为软换行，段落的文本从一个新行开始，但是这些文本依旧是一个段落
br标签是一个单标签也是一个空元素,早期版本 <br /> ,但是在h5中，已经把 /
给省略了

<hr>

定义一条水平线。用来进行内容的分隔。
h5规范：语义表示段落之间的主题转换，并不仅仅用在表现层上
旧版本中：他仅仅就是一个横线只是表现层没有什么语义
横线默认和父级一样宽

• 其实hr标签的表现是一个高度为0 宽度和父级一样宽的元素
拥有上下左右各1像素的边框，所以默认hr的线高度是2px

• 我们可以通过css来控制hr的样式

列表

ul 无序列表

• <li></li>

• ul的子元素必须是li

• li中包含列表的每一项

• ul元素前边的符号可以是任何的形式 ,我们可以通过css的list-style-type属性控制
ol 有序列表

• <li></li>

• ol的子元素必须是li

• li中包含列表的每一项

• ol元素前边的编号可以是任何的形式我们可以通过css的list-style-type属性控制
dl 自定义列表

• <dt></dt>

• 定义列表中的项目（标题）

• <dd></dd>

• 描述列表中的项目

li的父元素只能是ol或ul

行元素

<span></span>

没有任何特殊的含义
主要是为了增加额外的结构，方便我们控制样式或者是数据
并且使用要求：在其他语义化标签不适用的情况下再使用

语义化标签

<b> & <strong>

• 加粗文本

•
strong-强调（更强的强调）作用：表示文本十分重要，主要也给SEO（搜索引擎优化）强调，呈现的是一个加粗

• strong代表更强:比如对某一句话直接强调
<i> & <em>

• 斜体文本

•
在目前使用最多的是i标签-通常在开发过程中，小图标之类的元素我们习惯用i标签来表示

•
em标签-强调作用：标出用户着重需要阅读的内容，但是主要也给SEO（搜索引擎优化）强调，呈现的是倾斜的状态

• em对某一个关键词强调
<u> & <ins>

• 文本下划线
<s> & <del>

• 文本删除线
<var> & </&>

• 并没有起到强调或提示用户注意的作用。默认倾斜。var的语义是包含变量的

<a></a>

路径

• 绝对路径

• 在前端开发中大多数使用相对路径。个别在服务器环境下会使用绝对路径

• 相对路径

•
相对路径就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。使用相对路径可以为我们带来非常多的便利。

• ./ ：代表文件所在的目录（可以省略不写）

• 网络路径

• 如果需要链接网络上的资源的时候，可以使用网络路径 http://www.baidu.com
href属性

• 要跳转的页面，值为一个URL，可以是绝对路径也可以是相对路径。

• 如果是网络地址
需要写全http://或者https://协议。如果写本地地址，使用相对路径即可
title属性

• 鼠标移动上去时给出提示
target属性

• _blank

• 在新窗口打开

• _self

• 在本窗口打开。这个是默认值
锚点

• 效果1

• 在当前页面中跳转.：通过元素的ID进行跳转 <a href="#name"></a>

• 效果2

• 在a标签的href中书写 #+名字(自由命名，注意规范)

• 在相对应的跳转点标签书写id属性值为
锚链接中的名字,这样点击锚链接就能跳转到相对应的位置
其他功能

• -a标签下载

• 当连接的文件能够使用浏览器打开，那么可以进行打开，否则将直接下载

• 也可以给a标签一个download属性书写下载文件的路径，那么可以直接下载

•
a标签必须书写href属性，哪怕为空都可以执行download下载，否则a标签不具有任何功能

• a标签对电话短信email的支持主要针对移动端

• a标签的打电话是在href属性中书写 tel:电话号码这样的格式

• <a href=“tel:15701665563”>给李沛华打电话</a>

• a标签的发短信是在href属性中书写 sms:电话号码这样的格式

• <a href=“sms:15701665563”>给李沛华发短信</a>

• a标签的发送邮件是在href属性中书写 mailto:邮箱地址这样的格式

• <a href=“mailto:lipeihua@atguigu.com”>给李沛华发邮件</a>

<img>

向网页中嵌入一张图像
src属性

• 必须，值为一个URL。

• 用于设置图像路径（本地相对路径或网络路径）
alt属性

• 图像不能正常显示的时候告诉浏览网页的人和搜索引擎这张图片应该表示什么内容。
title

• 用于鼠标放在图片上显示出来的对图片的解释
width

• 单位:px，`pixel`的缩写
height
创建img标签可以直接实例化Image对象即可
var newImg = new Image();
img是可替换元素所有的可替换标签都是可以设置宽高的（我们可以称之为行内块标签）

表单元素

<form></form>

作用

• 为用户创建html表单

• 表单可以向服务器发送数据

• form标签中可以包含很多表单元素
属性

• action

• 表单提交的地址

• method

• 表单提交的方式数据传输的方式

• get

• get是从服务器上获取数据，post是向服务器传送数据

• post

•
在做数据查询时，建议用Get方式；而在做数据添加、修改或删除时，建议用Post方式
表单提交

• 表单提交需要在表单中书写提交按钮

• 提交按钮可以是 <button type=submit></button> 或 <input type=submit
value=’’ >

• 提交按钮只会提交当前按钮所在的form表单中的内容
如果没有form标签，表单提交失效
form

• 如果input存在form属性，表示当前的input属于某一个表单

• 此时form表单的id的值就是这个input的值

• 那么form表单和当前的input就进行关联了

• 无论input书写在哪里，都能随着表单发送数据

<input></input>

type属性

• text值

• 单行文本输入框（文本域）没有长度和内容限制，只能输入一行，明文显示
表单提交都是以键值对的形式提交的比如 user = lipeihua

• name属性

• 就是给表单起一个名字（自己命名，一般是后台提供）
value属性就是表单的值，可以预定义也可以等待用户输入
name和value就构成了一个键值对如果构不成一个键值对，就不会进行提交

• disabled属性

• 表示禁用此输入框

• value属性

• 默认显示值

• maxlength属性

• 表示允许的最大输入字符串的个数。

• size

• 用来设置显示字符的宽度(输入框长度,)。（知道一下就行。）~~

• password值

• name属性

• 该文本框传递数据到服务器上的标识

• sumbit值

• value属性

• 提交按钮 input标签的type类型是submit代表提交 value是按钮显示的内容
提交按钮只会提交当前按钮所在的form表单中的内容
如果没有form标签，表单提交失效

• radio值

• name属性

• 该文本框传递数据到服务器上的标识

• 注意：多个单选框中的name值必须相同，否则不会出现单选效果。

• value属性

• 传递到服务器上的值

• checked属性

• checked=checked

• 如果属性名和属性值相同那么可以只写属性名

• 默认选中该单选按钮

• checkbox值

• name属性

• 传递到服务器上的标识

• 每个复选框name的值需要相同，名字后面要加上`[]`，表示的是传递一组值过去。

• value属性

• 传递到服务器上的值

• 因为用户不能输入内容所以必须使用value属性事先定义好要传递给服务器的值

• checked属性

• 默认选中,同radio中的checked

• file值

• name属性

• 该上传框传递到服务器上的标识

• 调用摄像头

• <input type=“file” accept=“image/*” capture=“camera”>

• 文件域的 accept属性书写 image/* 代表接受任何格式的图片

• capture=camera 代表从相机拍照接收

• capture=photo 代表从相册选取照片

• 但是在pc端的表现都是选取文件

• hidden值

• 提交隐藏内容
在表单提交过程中有的数据需要提交，但是不需要用户输入或者是修改，那么直接使用隐藏域提交

• image值

• 图像按钮,用图片代替submit按钮原来的样式

• rest

• 重置按钮当重置按钮被点击，就会重置当前reset所在的表单，变成默认的状态

• button

• 按钮
HTML5新增

• placeholdder属性

• 对用户输入进行提示

• autofocus属性

• 用来指定打开页面时光标定位在哪里(只设置一个input)

• autocomplete属性

• 关闭浏览器自带的提交记录。

• on值

• 显示指定的后补的数据列表

• off值

• 关闭指定后补输入的数据列表

• required属性

• input不检查该输入框是否为空,除非加上required属性

• disabled属性

• 禁用任何表单元素，这个元素就被禁止输入或选择等等操作

• 使用disabled禁用表单，表单元素是不会在被提交了

• readonly属性

• 对于可编辑的表单来说表示不能再次被编辑但是是可以被提交的

• 对单选多选按钮不支持

• 值

• color值

• 用于选取颜色

• date值

• 选择年/月/日

• week值

• 日期的控件（年周）（火狐不支持）

• month值

• 日期的控件（年月）（火狐不支持）

• email值

• 必须输入一个email地址.否则不允许提交

• 自带验证，但是验证不完整，一般还是自己书写

• 在移动端上有相对应的自动弹出键盘包含 @ .com 等按键

• number值

• 用来输入数字的控件

• 多了一个上下的按键，可以增加和降低数字大小

• 验证必须是数字

• 属性

• min：最少数量

• max：最大数量

• value：当前数量

• step：每次累加累减数量

• search值

•
用来搜索框，当用户输入内容后，在末尾有一个删除按钮，单击可以删除输入好的文字

• tel

• 电话号码输入框

• url

• url地址

• range

• 输入一个拖拽的控件

• max：最大值

• min：最小值

• step：每次走的最小单位

• value：当前值

• <datalit></datalist>

• <option></option>

•
datalist表示可选的数据的列表，通常和input标签配合使用用来制作输入值的下拉列表。

•
使用datalist的id属性和input表单中的list属性，他们的值设置成相同，绑定为一组。

• datalist中设定每一项使用`<option>`标签。
• 示例

<input list="cars">  
    <datalist id="cars">  
    <option value="RollsRoyce"></option>  
    <option value="Benz"></option>  
    <option value="BMW"></option>  
    <option value="Audi"></option>  
    <option value="Land"></option>  
</datalist\>

• <select></select>

• 属性

• selected： 默认选中项

• multiple： 让select可以进行多选（按住ctrl键进行多选）

• \<option\>\</option\>

获取焦点个失去焦点

• 获取

• 当表单元素变成一个可以输入的状态的时候，被称作为获取焦点

• 失去

• 当表单元素失去可以输入状态的时候，被称作为失去焦点
h5规范允许当属性名和属性值相等的时候可以直接书写属性名即可

<select></select>

name属性

• 这个下拉列表叫什么名字
disabled属性

• 禁用下拉列表
multiple属性

• 可以进行多选
<option></option>

• 用来定义列表中的每一项

<textarea></textarea>

多行文本输入框.右下角可以放大缩小
cols和rows用来控制宽和高

• cols代表一行有几个字符（一个汉字算两个字符）

• rows代表总共几行，超出是要生成滚动条的

• 但是：我们很少这样控制，主要通过css的width和height控制

• textarea没有value属性，输入的值直接就是textarea标签中的内容
name属性

• 传递给服务器的标识

<button></button>
type属性

• button

• 此按钮没有默认行为。它可以有与元素事件相关的客户端脚本，当事件出现时可触发

• submit

•
此按钮将表单数据提交给服务器。如果未指定属性，或者属性动态更改为空值或无效值，则此值为默认值。

• reset

• 此按钮重置所有组件为初始值

<label></label>

for属性

• 和input进行绑定,值为标注的input输入框的ID值
写法

• 1.<label>
测试
<input type=“checkbox”>
</label>

• label不能出现for属性

• 2.label标签包含住标注元素，让label标签的for属性和
被标注的表单元素的id属性值相等

• <label for=“test”>测试</label>
<input type=“radio” id=“test”>
还可以给select和textarea使用

<table></table>

<caption></caption>

给表格添加标题

<thead></thead>

<tr></tr>

• <th></th>

<tbody></tbody>

<tr><tr>

• <td></td>

<tfoot></tfoot>

<tr><tr>

• <td></td>

属性

colspan

• 单元格可以横跨的列数
rowspan

• 单元格可以竖跨的行数
这些属性都已经废弃

• border

• 这个整型元素使用像素，定义了表格边框的大小

• cellspacing

•
这个属性（使用百分比或像素）定义了两个单元格之间空间的大小（从水平和垂直方向上）

• cellpadding

• width

<iframe></iframe>

能够将另一个HTML页面嵌入到当前页面中

每个嵌入的浏览上下文（embedded browsing context）都有自己的会话历史记录(session history)和DOM树。包含嵌入内容的浏览上下文称为父级浏览上下文。

src 属性

打开网页时你要载入哪个文档,路径

frameborder属性,显示内框架的边框

1 显示边框
0 隐藏边框

name属性

给这个窗口起一个名字。然后我们就可以配合页面中的target
来在这个窗口中打开指定的网页。

width

height

<abbr></abbr>

<abbr title=“world wide web”>www</abbr>

HTML5新增标签

html标签的语义化

语义化标签更具有可读性，便于团队的开发和维护
没有css的情况下，网页也能很好的呈现出内容结构和代码结构
关于SEO，搜索引擎更能理解到网页中各部分之间的关系，更准确更快速搜索信息

<audio></audio>

src属性

• 要播放的音频地址
controls属性

• 定义播放器的控制条,控制条中有播放/静音/音量大小(必填)
muted属性

• 如果被设置默认是被静音的
autoplay属性

• 自动播放(有些浏览器会自动播放,有些浏览器不会自动播放)
loop属性

• 循环播放
支持格式

• mp3/ogg/wav

<video></video>

src属性

• 视屏要播放的地址
controls属性

• 定义播放器的控制条,控制条中有播放/静音/音量的大小
autoplay属性

• 自动播放
poster属性

• 封面使用一张图片代替
width属性

• 视屏的宽度
height属性

• 视屏的高度
支持的格式

• mp4、ogg、webm
<source></source>

•
将多个格式的音频或视频罗列起来，如果遇到播放不了的情况(各个浏览器之间能够识别的格式不同)，将会自动的读取下一个source中的文件。

• 示例:

<video controls>
<source src=“xxx.webm” type=“video/webem”/>
<source src=“movie.ogg” type=“video/ogg”/>
</video>

向上面这样将多个格式的音频或视频罗列起来，如果遇到播放不了的情况，将会自动的读取下一个source中的文件。

data-xxx 属性

data-*自定义属性。我们可以使用以data-为前缀来设置我们需要的自定义属性，来进行一些数据的存放
<div id=“user” data-uid=“12345” data-uname=“ifanybug”></div>

<header></header>

header标签表示页面中一个内容区块（section）或整个页面的标题。
header标签是一种具有引导和导航作用的结构标签，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他内容，例如数据表格、搜索表单或相关的LOGO图片。
注意：
一个网页内并不限制只能有一个header标签，可以拥有多个，可以为每个内容区块加一个header标签。
一个header标签通常包括至少一个heading标签（h1~h6），根据W3C HTML
5标准，还可以包括nav标签。

用来定义文档（网页或者是某一个段落）的页眉（头部）
可能包含一些标题元素，也可能包含其他元素，比如logo、搜索框、作者信息等等
<header> 元素不是分段内容，而是属于独立分块的头部.因此不会往大纲
中引入新的段落。也就是说，<header> 元素通常用于包含周围部分的标题（h1 至
h6 元素），但这不是必需的。
完成的网页或者是完整的块（网页的一个独立区域）是头部、内容、
尾部组成的（并不是强制）
整个页面没有header限制个数，可以使用多个
<header> 元素不能作为 <address>、<footer> 或另一个 <header>
元素的子元素

<footer></footer>

footer标签可以作为其上层父级内容区块或一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者、相关阅读链接以及版权信息等。
与header标签一样，一个页面中也不限制只可以用一个footer标签。同时，可以为section标签添加footer标签。

footer标签代表一个网页或者章节内容的底部区域（页脚）
footer通常包含章节的作者，版权数据和文章的其他链接
其他和header同理，比如不是独立的区域，应该是隶属于一个章节或者是网页
<footer> 元素不能作为 <address>、<header> 或另一个 <footer>
元素的子元素

<nav></nav>

nav标签是一个可以用来作为页面导航的链接组，其中的导航标签链接到其他页面或当前页面的其他部分。并不是所有的链接组都要放进nav标签，只需要将主要的、基本的链接组放进nav标签即可。
一个页面中可以拥有多个nav标签，作为页面整体或不同部分的导航。
nav标签的使用场景：
侧边栏导航，现在主流博客网站及商品网站上都有侧边栏导航，用来将页面从当前文章或当前商品跳转到其他文章或其他商品页面。可以用nav标签实现侧边栏导航。
导航菜单，可以用nav标签实现导航菜单，用来在本页面几个主要组成部分之间跳转。
翻页操作，nav标签可以用在多个页面的前后页或博客网站的前后篇文章的滚动中。
nav标签也可以用在其他所有你觉得重要的、基本的导航链接组中。

表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接
导航部分的常见示例是菜单，目录和索引
并不是所有的导航都需要用nav标签，只是当前页面中比较重要的热门的可以使用nav，比如在底部导航，就没有必要加入链接
一个网页可能会有多个导航，比如整个网页的导航，也可以是某一块区域的导航
注意

• 当nav中的导航列表是静态的：nav中直接嵌套a标签使用即可

•
当nav中的导航是动态的（需要滑动查看更多，主要出现在移动端）：nav中最好嵌套ul>li>a标签

<section></section>

section标签表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2、h3、h4、h5、h6等标签结合使用，标示文档结构。
内容区块是指将HTML页面按逻辑进行分割后的单位。例如，对书籍来说，章、节都可以称为内容区块；对博客网站来说，导航菜单、文章正文、文章的评论等每一个部分都可称为内容区块。
一个section标签通常由内容及其标题组成（通常不推荐为那些没有标题的内容使用section）。
可以这样理解：section标签中的内容可以理解为单独存储到数据库中或输出到word文档中的内容。

section是html中一个独立的区域（主要针对网页分块），没有其他语义，一般会包含一个独立的标题
假设有一个效果，上边是nav导航栏，导航栏一般对对应一个区域，用来显示这个导航到的内容，这个区域我们就可以使用section
section主要是对网页进行分块，也可以对网页中的某块内容进行分块
通常一个完整的section是有标题和内容组成的，不推荐给没有标题的区域设置section
如果想要给一个内容设置有个容器用来书写样式，那么还是推荐使用div

<article></article>

article标签代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报章杂志中的文章、一篇论坛帖子、一段用户评论或一个独立的插件，或者其他任何独立的内容。
一个article标签通常有它自己的标题（标题通常放在header中）和脚注。
article标签是可以嵌套使用的，内层的内容在原则上需要与外层内容相关联。
article和section的不同点：
article标签可以看成是一种特殊种类的section标签，它比section标签更强调独立性。
section标签强调分段或分块，而article强调独立性，具体来说，如果一块内容相对来说比较独立、完整的时候，应该使用article标签，但是如果想将一块内容分成几段的时候，应该使用section标签进行分段。

代表文档、页面、或程序中，可以独立的完整的被外部引用的内容
比如一篇博客、一篇文章、一段用户的评论、一个日历插件，或者是其他独立内容
一般来说一个article也有自己的头部header，或者是footer

<aside></aside>

aside标签，aside标签用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条，以及其他类似的有别于主要内容的部分。
aside标签主要有以下两种使用方法：
article
包含在article标签中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名词解释等。
在article之外标签使用，作为页面或站点全局的附属信息部分。最典型的形式是侧边栏，其中的内容可以是友情链接、博客中其他文章列表或广告单元等。

表示一个和其余页面内容几乎无关的区域
被认为是独立于内容的一部分，并且可以拆出来而不会使整体收到影响，通常表现为侧边栏
这个里边的内容和其他元素内容关联性不强

div article和section

article和section

• article元素可以看做是特殊的section，但是强调独立性比section更强

• section主要强调分段分块，article是强调很强的独立性

•
原则上来说能用article的时候，也可以使用section，但是假设用article更合适，请使用article
div、article和section

• div、section、article语义依次递增

•
div没有任何的语义，仅仅是用作样式，可以用在任何场景，但是我们容易看不清上下文关系

• 对于主题性的区域，我们可以使用section

• 加入这个区域可以脱离上下文，作为完整独立的内容存在，使用article

<figure></figure>

<figure>
<figcaption>海贼王的图片</figcaption>
<img src="…/images/05.jpg" alt="" width=“300”>
</figure>

代表一块独立的内容，是一个独立的引用单元
这个标签在主文中用来引用图片、插画、表格、代码段等等信息
一般会在figure元素中插入figcaption元素（标题元素），将figcaption代表的标题与figure内容相关联
如果是单独一张图片或者
单独的表格等等，那么直接使用相应的标签即可，如果存在图片和标题，那么请使用figure标签

<mark></mark>

标签，定义带有记号的文本（加上背景颜色）。

mark标签用来吸引当前用户的注意，因为标识出来的文字与当前的用户操作有关系。

为引用的内容进行标记或突出显示文本，用来表示和上下文之间的关联性
突出显示的文本通常可能和用户当前的活动等有一定的关联性
比如，用户搜索的时候，它可以显示搜索之后的关键字
不要把mark和
em、strong进行混淆。em、strong都是表示文本在上下文的重要性，而mark只是为了表示关联性
mark标签是行内标签，默认黄色背景颜色

<timer></timer>

用来表示24小时制或者是一个公历时间

• <time datetime=“2019-9-12 18:00:00”>一小时之前</time>

• <time>2019-9-12 19:00:00</time>
作用：以机器可读的格式去表示日期和时间，安排日程表的应用就可以使用这个time标签
通用时间格式 XXXX-XX-XX XXXXXX

<ruby></ruby>

<rt></rt>

• 标签定义文字的解释或发音。
<rp></rp>

• 在ruby中使用定义不支持ruby的浏览器所显示的内容。
示例:

<ruby>
饕餮
<rp>
(tāo tiè)
<rt>tāo tiè</rt>
</rp>
</ruby>

<datalist></datalist>

<body>
<input list=“city” type=“text”>
<datalist id=“city”>
<option value=“河南”>河南</option>
<option value=“河北”>河北</option>
<option value=“湖北”>湖北</option>
<option value=“湖南”>湖南</option>
<option value=“胡建”>胡建</option>
</datalist>
</body>