h5新特性

新增语义化标签

• header:整个页面或部分区域的头部

• footer:整个页面，或者部分区域的底部

• nav:导航

• article:文章、帖子、杂志、博客、评论等

• section:页面中的某段文字或者文章中的某段文字

• aside:侧边栏

• main:文档的主要内容,(WHATWG没有语义,IE不支持)

• hgroup:包裹连续的标题,如文章主标题、副标题的组合(W3C删除)

  artical里面可以有多个section

  section强调的是分段或分块，如果想将一块内容分成几块的时候，可以使用section

  article比section更强调独立性,一块内容如果比较独立、完整，使用article

新增状态标签

meter

定义已知范围内的标量测量，例如电量、磁盘用量等等

<!-- 场景一 --> 
<meter max="100" min="0" value="66"  low="10" high="80"></meter>

<!-- 

max:规定最大值
min:规定最小值
value:规定当前值
low:规定低值
high:规定高值

类似手机电量，最高100，最低0，当前剩余66的电，进度填充66，10~80区间正常显示，低于low值显示警告颜色，高于high值显示警告颜色	

 -->

<!-- 场景二 -->
<meter max="100" min="0" value="66"  low="10" high="20" optimum="90"></meter>


<!--
optimum:规定最优值
类似手机电量显示，低于low显示红色，low~high区间显示黄色，high以上显示绿色

-->


progress

显示某个任务完成的进度，一般用于表示进度条

<progress max="100" value="30"></progress>    
<!--
max:目标值
value:当前值
相当于是一个进度条，按百分比填充

-->

新增列表标签

datalist

一般用于搜索框的关键字提示

<form action="#">
       			<!-- 使用list关联id为mydata的datalist -->
            <input type="text" list="mydata">
            <button>搜索</button>
       			<!--  给datalist设置ID为mydata-->
            <datalist id="mydata"> 
                <option value="test1">test1</option>
                <option value="test2">test2</option>
                <option value="test3">test3</option>
                <option value="test4">test4</option>
            </datalist>
        </form>
<!--
鼠标点击输入框
默认显示test1~test4
如果输入test，类似模糊搜索4个都显示
如果输入1，只显示test1
-->

details

用于展示问题和答案，或对专有名词进行解释

<details>
            <summary>这是一个收起的文章</summary>
            <p>文章内容</p>
        </details>

<!-- details必须和summary一起使用

details相当于是一个标题说明，summary是对该说明的具体内容，默认是收起状态，点击箭头展开状态
-->

新增文本标签

ruby

一般用于汉字注音

<!-- ruby 和rt配合使用，rt是对文字的注音 -->
<ruby>
    <span>一二三四</span>
    <rt>yi er san si</rt>
</ruby>

mark

一般用于文字标记，比如我使用关键字搜索，页面呈现出来相关关键字的结果，关键字可以特殊标注

<p>一<mark>二</mark>三四</p>

新增表单控件属性

placeholder

提示文字，适用于文字输入类的表单控件

<!-- 输入框文本的占位属性，鼠标点击输入框后消失-->
        <form action="">
            账号: <input type="text" name="account" placeholder="请输入账号">
            密码: <input type="password" name="password" placeholder="请输入密码">
        
            其他: <textarea name="other" placeholder="输入内容" ></textarea>
        </form>

required

设置选项为必填项，不设置的话提交的时候会弹出对应提示，可以用在除了buuton外任意表单控件

账号: <input type="text" name="account" placeholder="请输入账号" required>
密码: <input type="password" name="password" placeholder="请输入密码" required>

autofocus

自动获取焦点,适用于所有表单控件,默认是没有默认选中某个输入框或者内容,该属性可以打开表单的时候默认获取焦点,一个表单只有一个控件可以获取焦点

账号: <input type="text" name="account" placeholder="请输入账号" required autofocus>
密码: <input type="password" name="password" placeholder="请输入密码" required>

autocomplete

自动完成,可以用在正常的文本输入上，根据历史输入记录提示补全,密码输入框和多行输入框不使用

账号: <input type="text" name="account" placeholder="请输入账号" required autofocus autocomplete="on">
<!-- 
属性值
on:开启
off:关闭

-->

pattren

用正则表达式控制输入规则，适用于文本输入类控件,

账号: <input type="text"
             name="account" placeholder="请输入账号" 
             required autofocus autocomplete="on"
             pattern="\w{6}
             >

<!-- 
\w 匹配数字字母下划线，且是六位，如果不满足匹配规则，弹出提示
且要有required属性，如果不是必填项，为空可以提交

-->

input新增type属性值

<!--        必须输入邮箱格式-->
        <input type="email" name="email">
        <!--        必须输入URL格式-->
        <input type="url" required name="url">
        <!--        输入框自带上下箭头，可以递增、递减 step每次步进的数量-最大值-最小值 -->
        <input type="number" required name="number" step="2" max="32" min="12">
        <!--      搜索  ，自带清除搜索内容按钮-->
        <input type="search" name="keyword">
        <!--        电话，移动端上掉期数字输入键盘 -->
        <input type="tel" name="tel">
        <!--        范围,可拖动范围进度条，最大值、最小值、默认值-->
        <input type="range" name="range" max="100" min="10" value="22">
        <!--        颜色选择器，默认黑色，点击调起颜色选择框-->
        <input type="color" name="color">
        <!--        日期选择框 年月日 -->
        <input type="date" name="date">
        <!--        日期选择框-月 -->
        <input type="month" name="month">
        <!--        日期选择框-周 -->
        <input type="week" name="week">
        <!--        时间选择框-->
        <input type="time" name="time">
        <!--        日期选择器 YYYY-mm-dd HH:mm:ss-->
        <input type="datetime-local" name="time2">

<!-- 表单不进行验证，表单中的任何条目校验规则失效-->
    <form action="" novalidate>

多媒体标签

视频标签

<!--    视频标签 -->
    <!--    controls 视频播放控件-->
    <!--    muted 默认静音状态 -->
    <!--    autoplay 是否自动播放，常规必须是静音状态才可以，如果媒体参与度满足条件,有声音也会自动播放-->
    <!--    loop 循环播放-->
    <video src="./小电影.mp4" controls muted autoplay loop></video>

<!--    视频封面，不自动播放的情况下展示，默认第一帧-->
    <video src="./小电影.mp4" controls muted  loop  poster></video>
<!--    视频封面，指定图片-->
    <video src="./小电影.mp4" controls  poster="./images/seckill.png"></video>
<!--    视频预加载，auto:浏览器根据网速等自动预加载整个文件，none：不预加载  metadata:加载基本信息，例如视频长度 -->
    <video src="./小电影.mp4" controls  preload="auto"></video>

音频标签

<!--    音频标签-->
    <!--   controls 音频控件 -->
    <!--   autoplay 自动播放-->
    <!--  muted 静音   -->
    <!--    loop  循环播放-->
    <!--    preload 预加载-->
    <audio src="./小曲.mp3" controls autoplay muted loop preload="auto"></audio>

新增全局属性

<!--  contenteditable,是否可编辑   -->
    <div contenteditable="true">Lorem ipsum dolor sit amet.</div>
    <!-- 是否可拖动-->
    <div draggable="true">Lorem ipsum dolor sit amet.</div>
    <!--   隐藏元素  -->
    <div hidden></div>
    <!--    拼写检查 需要浏览器支持检查设置-->
    <div spellcheck="true"></div>


    <!--   设置元素的上下文菜单-鼠标右键点击元素时显示的右键菜单 -->
    <div oncontextmenu=""></div>
    <!--    存储页面的私有定制数据-->
    <div data-*></div>

兼容性处理

部分浏览器不支持h5,例如ie8,判断版本小于ie9 引入兼容的js文件，否则不引入

<![if lt ie 9] -->

    <script src="./html5shiv.js"></script>
    <![endif] -->

让ie浏览器处于最优的渲染模式

<meta http-equiv="X-UA-Compatible" content="IE=edge">

针对一些国产的双核浏览器，优先使用webkit内核渲染网页

<meta name="render" content="webkit">