html5标签变化知识点汇总

我会带着你远行 2021-11-26 14:12 435阅读 0赞

HTML5在移动互联网中的优势之一：  
它是唯一一个通吃Mac、PC、iPhone、Android等主流平台的跨平台语言。所以只要开发一遍，就可以在各个平台使用。  
Web改变趋势：Native APP ——>Web APP ——> Hybrid APP

> ##### 一、HTML5标签变化 #####

**1、DOCTYPE声明**  
（1）DOCTYPE声明必须是HTML文档的第一行，位于html标签之前，它不是HTML标签，是用来指示web浏览器关于页面使用哪个HTML版本进行编写的指令。  
（2）DOCTYPE声明有哪几种类型：HTML4.0、HTML5、XHTML

*  HTML5是目前最常用的模式，直接在DOCTYPE后面加html，即< !DOCTYPE html>
 *  HTML4.0分为三种模式：严格的、过渡的·、框架的  
    严模式：  
    < !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “[http://www.w3.org/TR/html4/strict.dtd][http_www.w3.org_TR_html4_strict.dtd]”>  
    过渡模式：  
    < !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “[http://www.w3.org/TR/html4/loose.dtd][http_www.w3.org_TR_html4_loose.dtd]”>  
    Frameset模式  
    < !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “[http://www.w3.org/TR/html4/frameset.dtd][http_www.w3.org_TR_html4_frameset.dtd]”>
 *  XHTML版本  
    XHTML是一种比较严格的模式，所有元素必须以XML格式编写。分类和HTML4.0比较类似，分为严格模式、过渡模式、Frameset模式，同时添加了1.1模式。  
    补充：  
    **HTML和XHTML编写区别**  
    XHTML要求编写符合XML的语法。主要区别  
    XML区分大小写  
    XML标签必须闭合，单元素需要以/作为闭合结尾，嵌套不能出错。  
    XML属性必须放在引号中  
    XML属性必须有属性值，不能省略  
    XML中空格不会被自动删除

（3）从上面可以发现HTML5没有引用DTD,而其它版本引用了。  
DTD——文档类型定义：DTD可以定义合法的XML文档构建模块，它使用一系列合法的元素来定义文档的结构。在HTML中DTD规定了标记语言的规则，这样浏览器才可以正确的呈现内容。  
SGML——标准通用标记语言，例如想a标签它是写超链接的，规定它的规范就是写在SGML中的，DTD是源于SGML规范的。而HTML5不是基于SGML的，也就不用引用DTD。

**2、HTML5新增的标签**  
**目录：** 分为结构标签、多媒体标签、Web应用标签、其它标签、删除的标签、重定义的标签

**（1）结构标签（块状元素）**——有意义的div即就是给div标签换了个名字

*  **< article>:** 标记定义一篇文章
 *  **< header>:** 标记定义一个页面或者一个区域的头部
 *  **< nav>:** 标记定义导航链接
 *  **< section>:** 标记定义一个区域
 *  **< aside>:** 标记定义页面内容部分的侧边栏
 *  **< hgroup>:** 标记定义文件中一个区块的信息，例如很多< h1>< h2>相关的标题副标题标签，就可以把它们放在一块，集中在< hgroup>标签里面
 *  **< figure>:** 标记定义一组媒体内容以及它们的标题
 *  **< figcaption>:** 定义figure元素的标题
 *  **< footer>:** 标记定义一个页面或一个页面的头部
 *  **< dialog>:** 标记定义一个对话框（会话框）类似微信

要把内容写在对应的标签里，不然搜索引擎会很苦恼  
大概使用方法如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>结构标签</title>
        <style>
        </style>
    </head>
    <body>
    <header>
        <div>logo</div>
        <nav>
            <a href="index.html">首页</a>
            <a href="#">标签变化</a>
            <a href="#">网页布局</a>
            <a href="">属性变化</a>
            <a href="">音视频</a>
            <a href="">表单验证</a>
            <a href="">基础测试</a>
        </nav>
    </header>
    <section>
        <aside>
            <a href="#sec1">section1</a>
            <a href="#sec2">section2</a>
            <a href="#sec3">section3</a>
        </aside>
        <article>
            文章内容
        </article>
    </section>
    <section>
        <figure>
            <figcaption>音视频标题名称</figcaption>
            <div class="video">...</div>
        </figure>
    </section>
    <section>
           <h1></h1>
           <h2></h2>
           <h3></h3>
    </section>
    <section>
        <dialog>
            <dl>
                <dt>标题</dt>
                <dd>内容一</dd>
                <dd>内容二</dd>
            </dl>
        </dialog>
        <dialog></dialog>
        <dialog></dialog>
    </section>
    <footer>
        someContent...
    </footer>
    </body>
    </html>

看完上面示例后要 **补充** 的是：

*  建议这几个标签不要嵌套写：**header/section/aside/article/footer**
 *  标签级别的高低：**header/section/footer > aside/article/figure/hgroup/nav > div/figcaption**（根据谁写在外面和里面来判断级别） 写的时候要养成好的习惯

**（2）多媒体标签**

*  **< source>——标记定义媒体资源**
 *  **< audio>——标记定义一个音频**

写法如下：

发现写完之后并没有声音，是因为它没有播放，可以给它添加相关属性，如下：

<audio src="../source/audio.mp3" autoplay="autoplay" loop="-1" controls="controls">您的浏览器也该退休了，是否考虑一下Chrome这样的新鲜血液呢</audio>

autoplay属性表示会自动播放；loop="-1"表示会无限循环播放；controls属性会出现控制条对播放进度进行控制；其中写的文字是会当audio这个标签不被浏览器识别时就会出现这段文字

另一种写法如下：  
用到< source>标签，其中的type属性是对mp3文件进行转码的

*  **< video>——标记定义一个视频**

和audio标签用法类似，不过这个标签可以设置一下样式

其中的type属性是对mp4文件解码

*  **< canvas>** 标记定义图片，一个画布
 *  **< embed>:** 标记定义外部的可交互的内容或插件，比如flash

**多媒体标签的意义：** 它的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大的提升用户体验。（富媒体指具有动画、声音、视频和/或交互性的信息传播方法。包含流媒体、声音、Flash、以及Java、Javascript、DHTML等程序设计语言的形式之一或者几种的组合)例如我们要在网页中插入flash的时候，至少要安装一个flash player的插件，但是现在不需要这样，可以直接使用

**（3）Web应用标签**

——>**状态标签：**

*  **< meter>标签**——实时状态显示：气压、气温

例如写一个电压的例子：

//它的值是220v;最小值是20v;最大值是380v；低值是200v，小于它就会有颜色警告，高值是240v,高于它也是会有颜色警告的；最优值为220v
    <meter value="220" min="20" max="380" low="200" high="240" optimum="220"></meter>

结果如图：  
![在这里插入图片描述][20190726105211467.png]  
![在这里插入图片描述][20190726105915901.png]把value值改为190，小于low的值时，会有颜色警告，如下：  
![在这里插入图片描述][20190726105343614.png]  
![在这里插入图片描述][20190726105959721.png]把value值改为280，高于high值时，如下：  
![在这里插入图片描述][20190726105612390.png]  
![在这里插入图片描述][20190726110216279.png]把value的值改为390时，它会被填满，但是它的值只会是最大值380  
![在这里插入图片描述][20190726110559745.png]  
![在这里插入图片描述][20190726110856780.png]另一中写法：就是只写一个value属性，那它就会以百分比的形式显示，如下：

![在这里插入图片描述][20190726110819253.png]

*  **< progress>标签**——任务过程：安装、加载

用法如下

结果图：它会自己以10为单位分成10份然后占了3份  
![在这里插入图片描述][20190726111525528.png]  
如果不写value属性，里面的蓝色块会循环的左右移动，显示为加载的样子

**——列表标签：**  
之前写列表的时候会用到< select>下拉菜单标签，发现的是它下拉的箭头特别小，整个样式不好看。或者写下拉列表的时候先写一个< input>标签，在它下面再写一个div,div里面写ul li,再通过JS控制选项和value值，会觉得特别麻烦，于是有了下面的标签

*  **< datalist>**——为input标记定义一个下拉列表，配合option

效果图如下：看着更人性化了，还可以根据关键词进行搜索  
![在这里插入图片描述][20190726173958129.gif]  
它的搜索框

*  **< details>**——标记定义一个元素的详细内容，配合summary

<details>
           <summary>详细信息</summary>
           <article>
                   <p>商品详情：</p>
                   <dl>
                       <dt>屏幕</dt>
                       <dd>5.96” 2560x1440 QHD AMOLED display (493 ppi)</dd>
                       <dt>电池</dt>
                       <dd>3220 mAh</dd>
                       <dt>相机</dt>
                       <dd>13MP rear-facing with optical image stabilization 2MP front-facing</dd>
                       <dt>处理器</dt>
                       <dd>Qualcomm® Snapdragon™ 805 processor</dd>
                   </dl>
           </article>
       </details>

效果图如下：  
![在这里插入图片描述][20190726174604897.gif]  
**——>注释标签:**

*  < ruby>：定义注释或音标
 *  < rt>：定义对< ruby>里面内容要注释的内容文本

<p><ruby>邉<rt>bian</rt></ruby>邉面好吃么？</p>

效果图：  
![在这里插入图片描述][20190726195657759.png]

*  < rp>：告诉那些不支持ruby元素得浏览器如何去显示

但是如果是不兼容的浏览器，显示结果就如下：  
![在这里插入图片描述][20190726195755939.png]  
所以就可以用到< rp>标签：

<p><ruby>邉<rp>(</rp><rt>bian</rt><rp>)</rp></ruby>邉面好吃么？</p>

对于不兼容ruby标签的浏览器显示结果结果如下：  
![在这里插入图片描述][20190726195933416.png]  
对于兼容它的浏览器，< rp>标签里面的就不会显示出来

**(4)其他标签**

*  **< mark>标签**——标记标签

此处开始<mark>我是被标记的文字</mark>此处结束

![在这里插入图片描述][20190729134848632.png]

*  **< output>标签**

会用到**oninput**事件，它可以实时监听文本框的输入变化，output标签会用到for属性，用来关联相关元素

![在这里插入图片描述][2019072914312732.gif]  
**（5）删除的标签**

*  **纯表现的元素**  
    html主张的是结构与表现分离，所以用于纯表现的一些结构元素就需要删除。还有就是能用HTML完成的就尽量不用CSS；能用CSS完成的东西就尽量不用JS；这样可以增加性能。有如下元素被删除：  
    basefont、big、center、font、s、strike、tt、u
 *  **对可用性产生负面影响的元素**  
    frame、frameset、noframe(三个在后台经常使用的)

**（6）重定义的标签**  
显示不变，只是表达的含义进行重新了定义的标签

*  **< b>:** 代表内联文本，通常是粗体
 *  **< i>:** 代表内联文本，通常是斜体
 *  **< dd>:** 可以同details与figure一同使用，定义包含文本，dialog也可用
 *  **< dt>:** 可以同details与figure一同使用，汇总细节，dialog也可用
 *  **< hr>:** 表示主题结束，而不是水平线，虽然显示相同
 *  **< menu>:** 重新定义用户界面的菜单，配合command和menuitem使用
 *  **< samll>:** 表示小字体，例如打印注释或者法律条款，虽然big标签已被删除，但是放小字体是需要用到的
 *  **< strong>：** 表示重要性而不是强调符号

[http_www.w3.org_TR_html4_strict.dtd]: http://www.w3.org/TR/html4/strict.dtd
[http_www.w3.org_TR_html4_loose.dtd]: http://www.w3.org/TR/html4/loose.dtd
[http_www.w3.org_TR_html4_frameset.dtd]: http://www.w3.org/TR/html4/frameset.dtd
[20190726105211467.png]: /images/20211126/e7246c31a24f4b9bac2eb11eb87023a4.png
[20190726105915901.png]: /images/20211126/83f5639b629b4eddba1af719c33ec197.png
[20190726105343614.png]: /images/20211126/2e6843918a094e169ac11d7b1ddc0291.png
[20190726105959721.png]: /images/20211126/04642970c9334a3ebad441f2addebc88.png
[20190726105612390.png]: /images/20211126/717b8ed7107e43c38953dd159ef86881.png
[20190726110216279.png]: /images/20211126/0668c57bb7284726a2ed248e55f8bb5a.png
[20190726110559745.png]: /images/20211126/820eeb11bb794cffa63916aba817a3f4.png
[20190726110856780.png]: /images/20211126/27a0d55221f44a0a9aeb615987f892dd.png
[20190726110819253.png]: /images/20211126/7a12fe97b3a84bbbb9dbb60e10c26a0f.png
[20190726111525528.png]: /images/20211126/2f0a6c100fcc439baad4d73092714428.png
[20190726173958129.gif]: /images/20211126/5f238b69ac6b457f999a1c3d269412fd.png
[20190726174604897.gif]: /images/20211126/9a99ae9b724346cc9f3faf0732909987.png
[20190726195657759.png]: /images/20211126/d566f6101e9240e19c96672fa0b7ae41.png
[20190726195755939.png]: /images/20211126/bf5e71c853bc417c9466506a76c74a4a.png
[20190726195933416.png]: /images/20211126/7f5c074e264d4e0281f9c513a2840ae0.png
[20190729134848632.png]: /images/20211126/97166b66a95c4aef8b768c47d299e69c.png
[2019072914312732.gif]: /images/20211126/2a69ec91d6bb41a8b34987a2fcd60dbd.png