HTML 5学习要点汇总（之篇一HTML5新元素）

我不是女神ヾ 2022-05-20 23:46 154阅读 0赞

[HTML 参考手册][HTML]（此处仅是资源的重要链接，本文并非HTML参考手册）

*   *   *  一、HTML 5 浏览器支持
         *  二、HTML 5新元素

### 一、HTML 5 浏览器支持 ###

![这里写图片描述][70]  
为 HTML 添加新元素

你可以为 HTML 添加新的元素。

该实例向 HTML 添加的新的元素，并为该元素定义样式，元素名为 ：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>为 HTML 添加新元素</title>
      <script>document.createElement("myHero")</script>
      <style> myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px; } </style>
    </head>
    
    <body>
    
    <h1>我的第一个标题</h1>
    
    <p>我的第一个段落。</p>
    
    <myHero>我的第一个新元素</myHero>
    
    </body>
    </html>

JavaScript 语句 document.createElement(“myHero”) 是为了为 IE 浏览器添加新的元素。  
![这里写图片描述][70 1]  
![这里写图片描述][70 2]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Styling HTML5</title>
      
    </head>
    
    <body>
    
    <h1>我的第一篇文章</h1>
    
    <article>
    学技术，从W3Cschool开始！
    </article>
    
    </body>
    </html>

html5shiv.js 引用代码必须放在 `<head>`元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

### 二、HTML 5新元素 ###

自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。

为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页应用程序缓存，存储，网络工作者，等。

**HTML canvas 标签**  
`<canvas>`标签是 HTML5 中新定义的标签，它是一个画布标签，只是作为一个图形容器，必须使用脚本来绘制图形。  
通过 元素来显示一个红色的矩形：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
          <canvas id="myCanvas"></canvas>
          <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); var ctx=canvas.getContext('2d'); ctx.fillStyle="red"; ctx.fillRect(0, 0, 80, 100); </script>
        </body>
    </html>

![这里写图片描述][70 3]  
如想了解 canvas 对象的所有属性和方法，请参阅[HTML 画布参考手册][HTML 1]  
![这里写图片描述][70 4]

**HTML audio 标签**  
`<audio>` 标签是 HTML5 提供的用来播放音频文件的。

<audio controls>
      <source src="/statics/demosource/horse.ogg" >
      <source src="/statics/demosource/horse.mp3" >
    您的浏览器不支持 audio 元素。
    </audio>

![这里写图片描述][70 5]  
![这里写图片描述][70 6]  
全局属性  
`<audio>` 标签支持 HTML 的全局属性。

事件属性  
`<audio>`标签支持 HTML 的事件属性。

详见[HTML 参考手册][HTML]

**HTML video 标签**  
`<video>` 标签可以将视频内容嵌入到HTML文档中，请参考下述示例：

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
    </video>

![这里写图片描述][70 7]  
![这里写图片描述][70 8]  
![这里写图片描述][70 9]  
HTML5中新属性  
![这里写图片描述][70 10]

**HTML datalist标签**  
`<datalist>` 标签需要与`<input>` 标签配合使用，用来表示可选的列表。  
下面是一个 `<input>`元素，`<datalist>` 中描述了其可能的值：

`注意:` Internet Explorer 9（更早IE版本），Safari不支持 datalist 标签。  
[HTML表单元素手册][HTML 2]

**HTML article标签**  
`<article>` 标签是 HTML5 新增标签。  
`<article>` 标签表示页面中与上下文不相关的独立的内容部分  
![这里写图片描述][70 11]

**HTML aside 标签**  
`<aside>` 标签为语义化标签。  
![这里写图片描述][70 12]

的的内容可用作文章的侧栏。

![这里写图片描述][70 13]

[HTML]: https://www.w3cschool.cn/htmltags/ref-eventattributes.html
[70]: /images/20220521/af343fe9f6d74aa6a4b6a808d75a6f9b.png
[70 1]: /images/20220521/3b9f0761a6cb4d138fe0eb5b991951e6.png
[70 2]: /images/20220521/3d275df7864b420db96a47a7bd0c6491.png
[70 3]: /images/20220521/0b93819858144e3db6e384d2d90c51ce.png
[HTML 1]: https://www.w3cschool.cn/htmltags/ref-canvas.html
[70 4]: /images/20220521/083865568dcd41f28474b90af9788792.png
[70 5]: /images/20220521/9c6af13557014416a066d11b61ef0792.png
[70 6]: /images/20220521/55a11be882784e9585c75cf1de4c34c2.png
[70 7]: /images/20220521/f2044cf6945b472db2c43e620bdc420a.png
[70 8]: /images/20220521/5439c0ebb8b94f2b8996aaf7940af894.png
[70 9]: /images/20220521/3007ecc165bd4a86a2c0e07af0724fcb.png
[70 10]: /images/20220521/dddaf09192414ce98a876944e15ccf8c.png
[HTML 2]: https://www.w3cschool.cn/html/html-form.html
[70 11]: /images/20220521/dd5a86c113144602a2dffb0fd5e0422a.png
[70 12]: /images/20220521/9cbefc7419e34179a21fe893eb320681.png
[70 13]: /images/20220521/f1fed39a9ed3454eaa37852d542dfe6a.png