1.HTML语言
无论是html5还是html4...他们都是html语言
HTML5就是html这种网页标记语言的一个版本
HTML5网页标记语HTML5新增的标记和属性
1.用于绘画的 canvas 元素
2.用于媒介回放的 video 和 audio 元素
3.对本地离线存储的更好的支持
4.新的特殊内容元素,比如 article、footer、header、nav、section
5.新的表单控件,比如 calendar、date、time、email、url、search
1.1HTML5 语义元素
HTML5 提供了新的语义元素来明确一个网页的不同部分
HTML5 语义元素--语义元素 = 有意义的元素
当我们看到元素的名称之后,就能知道这个html元素的作用语义元素:header nav section article aside figcaption figure footer
例如:我们设置一个表头
header 元素描述了网页内容的顶部区域
<html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="head" style="background-color: aquamarine;width: 100px;height: 50px;"> </div><br /> <header style="background-color: aquamarine;width: 100px;height: 50px;"> </header> </body> </html>
可以看到俩个元素完成的效果完全相同,我们可以简单的认为HTML5语义元素<header></header>代替<div id="head"></div>
由此可以说明 语义元素 就是一个带有名称的 div容器
nav 标签定义导航链接的部分
footer 元素描述了文档的底部区域
<div id="head" style="background-color: royalblue;width: 100%;height: 50px;"> </div><br /> <nav style="background-color: royalblue;width: 100%;height: 50px;"> </nav><br> <footer style="background-color: royalblue;width: 100%;height: 50px;"> </footer>
我们可以看出nav,footer元素也是可以代替div的。
那么header,nav和footer都是一样可以代替div,为什么会有多个语义元素?
可以看到所有的语义元素都有自己所负责的地方。
大家可以看到其中 article 元素和 section 元素是嵌套关系。
article 标签定义独立的区域内容。
section 标签定义文档中的节(section、区段)
<article> <h3>文章标题</h3> <section> <h4>第一节</h4> <p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p> </section> <section> <h4>第二节</h4> <p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p> </section> <section> <h4>第三节</h4> <p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p> </section> </article>
效果如下:
aside 标签定义页面主区域内容之外的内容(比如侧边栏)
<ul> <aside> <span>这是菜单</span> </aside> <aside> <span>这是菜单</span> </aside> <aside> <span>这是菜单</span> </aside> </ul>
aside是主区域内容之外的内容
figure 标签规定独立的流内容(图像、图表、照片、代码等等)
figcaption 标签定义figure元素的标题<figure> <figcaption>我的相册</figcaption> <img src="../imgs/veer-352390696.jpg" style="width: 150px;height: 100px;"/> <img src="../imgs/veer-352390696.jpg" style="width: 150px;height: 100px;"/> <img src="../imgs/veer-352390696.jpg" style="width: 150px;height: 100px;"/> </figure>
以上这些语义元素都是块级元素
1.2HTML新增的元素
details 用于描述文档或文档某个部分的细节
summary 设置details元素的标题<details open="open"> <summary>我是details元素的标题</summary> <p>内容</p> </details>
目前,只有 Chrome 和 Safari 6 支持 details 标签。
details 标签规定了用户可见的或者隐藏的需求的补充细节
dialog 元素定义对话框,比如提示框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function testdialog(){ var open=document.getElementById("dialog1").open;