HTML进阶知识点--HTML5标签变化
2019-12-22 本文已影响0人
梦幽辰
HTML <!DOCTYPE> 标签
定义和用法
<!DOCTYPE>声明必须是 HTML 文档的第一行，位于<html>标签之前
不是HTML标签
指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令
文档类型定义（DTD）
DTD
DTD 可定义合法的XML文档构建模块，它使用一系列合法的元素来定义文档的结构
在HTML中
DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容
HTML5
HTML5 不基于 SGML，所以不需要引用 DTD
HTML5新增标签
结构标签
结构标签（块级元素）——有意义的div
| 标签 | 作用 |
|---|---|
<article> |
标记定义一篇文章 |
<header> |
标记定义一个页面或一个区域的头部 |
<nav> |
标记定义导航链接 |
<section> |
标记定义一个区域 |
<aside> |
标记定义页面内容部分的侧边栏 |
<hgroup> |
标记定义文件中一个区块的相关信息 |
<figure> |
标记定义一组媒体内容以及它们的标题 |
<figcaption> |
标签定义figure元素的标题 |
<footer> |
标记定义一个页面或一个区域的底部 |
<dialog> |
标记定义一个对话框（会话框）类似微信 |
多媒体标签
| 标签 | 作用 |
|---|---|
<video> |
标记定义一个视频 |
<audio> |
标记定义音频内容 |
<source> |
标记定义媒体资源 |
<canvas> |
标记定义图片（诸多API） |
<embed> |
标记定义外部的可交互的内容或插件，比如 flash |
<video>和<audio>可以嵌套<source>，<source>标签主要用来存放视频资源和文件转码
标签意义
多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大地提升了用户体验
audio标签和video标签常用属性
| 属性 | 作用 |
|---|---|
| src | 音频或视频路径 |
| autoplay | 自动播放 |
| loop | 重复几次（当值为-1时，无限重复） |
| controls | 出现控制音频的进度条 |
source标签常用属性
type属性
type属性规定媒体资源的类型。
常用的类型：
-
用于视频：
-
video/ogg
-
video/mp4
-
video/webm
-
-
用于音频：
-
audio/ogg
-
audio/mpeg
-
Web应用标签
状态标签
| 标签 | 作用 |
|---|---|
<meter> |
实时状态显示：气压、气温 |
<progress> |
任务过程：安装、加载 |
meter标签常用属性
| 属性 | 作用 |
|---|---|
| value | 表示进度当前的值 |
| min | 进度条最小值 |
| max | 进度条最大值 |
| low | 低于此值将会出现样式变化，类似气温过低，气温测量器会报警 |
| high | 高于此值将会出现样式变化，类似气温过高，气温测量器会报警 |
| optimum | 标准值（最适宜） |
列表标签
| 标签 | 作用 |
|---|---|
<datalist> |
为 input 标记定义一个下拉菜单，配合 option |
<details> |
标记定义一个元素的详细内容 |
datalist使用
input的list与datalist的id一样
<input list="a">
<datalist id="a">
<option>雪佛兰</option>
<option>大众</option>
<option>现代</option>
</datalist>
<input list="a">
<datalist id="a">
<option>雪佛兰</option>
<option>大众</option>
<option>现代</option>
</datalist>
details使用
<details>
<summary>展开</summary>
<p>12344</p>
</details>
<details>
<summary>展开</summary>
<p>12344</p>
</details>
注释标签
| 标签 | 作用 |
|---|---|
<ruby> |
标记定义注释或音标 |
<rt> |
标记定义对ruby的注释内容文本 |
<rp> |
告诉那些不支持 ruby 元素的浏览器如何去显示 |
注释标签的使用
<ruby>魑<rp>(</rp><rt>chi</rt><rp>)</rp></ruby>
<ruby>魑<rp>(</rp><rt>chi</rt><rp>)</rp></ruby>
其他标签
| 标签 | 作用 |
|---|---|
<mark> |
标记定义有标记的文本（黄色选中状态） |
<output> |
标记定义一些输出类型，计算表单结果配合 oninput 事件 |
