HTML5新增标记及属性

1、新增语义化结构标签

1.1 新增常用结构化标签

<header></header>          <!-- 作为整个页面的头部区域或者是文章的头部区域-->
<footer></footer>          <!-- 作为整个页面的脚部区域或者作为文章的脚部区域 -->
<nav></nav>                <!-- 页面中凡是存在导航的区域都可以使用该标记 -->
<section></section>        <!-- 在HTML5中，为页面划分区块的标签；和div的区别是div用在比栏目更小的内容的分组中（有争议） -->
<article></article>        <!-- 标签定义外部内容，重点表现的是可以被独立引用的部分（文章、博客、说明、评论） -->
<aside></aside>            <!-- 网页中的侧栏，侧栏中的内容与页面的主体内容之间应该有所关联（侧边、边栏） -->

1.2 figure组合标签

标签规定独立的流内容(图像、图表、照片、代码等等)。 figure元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

<figure>
    <img src="a.png">
    <figcaption>苏州风景</figcaption>
</figure>

1.3 详情折叠组合标签

<details>
    <summary>优秀员工展示</summary>
    <ul>
        <li>张三</li>
        <li>李四</li>
    </ul>
</details>

1.4 智能下拉菜单选项组合标签

<input type="search" list="us"/>
<datalist id="us">
    <option value ="养老金新政">养老金新政</option>
    <option value ="健健康康喝咖啡">健健康康喝咖啡</option>
    <option value ="四月樱花盛开,龙王塘樱花园欢迎您">四月樱花盛开,龙王塘樱花园欢迎您</option>
    <option value ="大棚房再次暴雷,发改委连夜派出督查组">大棚房再次暴雷,发改委连夜派出督查组</option>
</datalist>

1.5 媒体元素标签

视频标签

<video src="a.mp4" controls autoplay Loop Poster="url" preload autobuffer></video>
<!--autobuffer:设置为浏览器缓冲方式，不设置autoply才有效-->

音频标记

<audio src="yun.mp3" controls autoplay Loop Poster="url" preload autobuffer></audio>

视频&音频源标签

<video controls autoplay Loop>
    <source src="a.mp4" type="video/mp4"></source>
    <source src="a.avi" type="video/avi"></source>
</video>
<!--音频文件同样操作-->

媒体标签（例如：flash）

<embed src="test.swf"></embed>

1.6 文字注音标签组

<ruby>
  汉 <rp>(</rp><rt>Han</rt><rp>)</rp>
  字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

1.7 其它新增标记

<mark>周杰伦</mark>                                                   <!--突出显示标记-->
<meter max="100" min="0" value="45"></meter>                        <!--以仪表盘似的方式显示数据-->
<progress max="100" min="0" value="45"></progress>                    <!--进度条标签-->
<time datetime="2021-02-14"  pubdate="true">2021年情人节</time>          <!--表示当前内容为日期和时间-->

<bdo dir="rtl">该段落文字从右到左显示</bdo>                            <!--控制文字的显示方向。属性值还可以选择：ltr-->

<canvas width="400" height="200"></canvas>

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">        <!--output输出标记>-->
    0<input type="range" id="a" value="50">100
    +<input type="number" id="b" value="50">
    =<output name="x" for="a b"></output>
</form>

2、新增表单控件相关

新增表单控件类别

<input type="search">
<input type="email">
<input type="url">
<input type="number">
<input type="tel">
<input type="range" min="0" max="100" value="45" step="10">
<input type="color">
<input type="time">
<input type="date">
<input type="month">
<input type="week">

新增表单相关属性

• placeholder：输入框提示信息
• autofocus ：指定表单获取输入焦点
• required：此项必填，不能为空
• pattern ：正则验证 ，例如：pattern=”\d{1,5}“
• formaction ：在submit里定义提交地址
• novalidate：加给form元素的属性，表示本表单不需要验证
• autocomplete ：是否保存用户输入值

3、HTML5新增属性

• contenteditable ：控制元素是否能够被编辑
• draggable：控制元素是否能被拖动，值为布尔值。

• data-或data-x-：自定义元素属性

  • 在js中用dataset属性获取值

    <div id="app" data-box="我是自定义元数据的值"></div>
    <script type="text/javascript">
    var val=document.querySelector('#app').dataset.box
    console.log(val)
    </script>