前端之html5

     目录

html5优势：

    语义化标签：

            布局标签：

             状态标签：

        列表标签：

       文本标签：

         表单控件：

        视频标签：

         音频标签：

        全局属性：

article和section区别：

兼容性处理：

---

html5优势：

           1 针对javascript，新增了很多可操作的接口

           2 新增一些语义化标签，全局属性

           3 新增多媒体标签，可以很好代替flash

           4 更加语义化，对于seo（搜索引擎）友好

           5 可移植性好，可以在移动设备使用

           6 支持chrome，safari，Opera，firfox，ie（9版本以上）浏览器

    语义化标签：

            布局标签：

                     header 头部标签

                     footer   底部标签

                      nav      导航标签

                      article   文章标签

                     section   文章中某段文字标签

                    aside       侧边栏标签

                    main          内容标签（IE不支持）

                     hgroup      包裹连续标题（w3c不支持）

             状态标签：

                  meter   例如电量显示                       

<meter max="100" min="0" low="20" high="90" optimum="90" value="5"></meter>

  属性：
       max :最大值
       min :最小值
       value: 取值
       low :低值
       high:高值
       optimum :最佳值

                progress  进度条值     

  <progress max="100" value="10"></progress>
  属性：
     max 最大值
     value 取值

        列表标签：

               datalist （不同浏览器显示不同的样式）类似于百度搜索的下拉提示                      

<input type="text" list="lists">
  <datalist id="lists">
     <option value="测试111"></option>
     <option value="测11"></option>
     <option value="11"></option>
  </datalist>

           details 展示问题和答案

<details>
        <summary>使用标题</summary>
        <div>使用内容</div>
</details>

       文本标签：

             ruby 文本注音

<ruby>
     <span>测试</span>
     <rt>ceshi</rt>
</ruby>

        mark   文本标记

 <mark>标记</mark>

         表单控件：

               placeholder  提示语

                       用于文字输入的功能

                required  设置为必填项

                           按钮不可使用

              autofocus 自动获取焦点

              autocomplete  自动完成

                    密码，多行框，单选框，多选框不可使用

                    属性：on 打开

                                off 关闭

              pattern  正则表达式

                    添加required属性，效果最好

                       密码，多行框，单选框，多选框不可使用 

          form属性：

                 novalidate 不效验属性

            input属性：

                   添加required使用，效果更好

                      type：

                           email  邮箱

                           url       网址

                           number 数值             

 <input type="number" name="" id="" step="" max="" min="">

                          search   搜索

                           tel          手机号---用于移动端

                           range     范围选择

                          color      颜色选择

                           date       日期选择

                          month    月份选择

                          week        一周选择         

                          time         时间选择

                          datetime-local    年月日选择    

        视频标签：

                video

    <video src="" width="" height=""  controls muted autoplay loop/>
         <video src="" width="" height=""  controls muted  poster="视频封面路径"/>
         <video src="" width="" height=""  controls muted  preload="metadata"/>

         音频标签：

                      audio

<audio  src="" controls loop preload="auto"   @error="" @play="" @pause="" @timeupdate="" @ended="" />

        全局属性：

                 contenteditable  可编辑

                  draggable           可拖动

                  hidden                  隐藏元素

                  spellcheck             拼写检查

article和section区别：

                    1 article内可以含有多个section

                    2 section强调的是分段或者分块

                    3 article比section更强调独立性

兼容性处理：

        1  引入js文件

//ie浏览器使用最优的渲染模式 
<meta http-equiv="X-UA-Compatible" content="IE=edge">
//优先使用webkit内核渲染（谷歌内核）
  <meta name="render" content="webkit">
//ie9及以下版本浏览器加载此文件 
<!--[If lt ie 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->

//扩展：
<!–[if !IE]><!–><!–<![endif]–>   <!–除IE外都可识别（IE10版本以上也可以识别）–>

<!–[if IE]><![endif]–>                 <!–IE9以及以下版本可识别–>

<!–[if IE 5]><![endif]–>              <!–仅IE5可识别–>

<!–[if IE 5.0]><![endif]–>            <!–仅IE5.0可识别–>

<!–[if IE 5.5]><![endif]–>             <!–仅IE5.5可识别–>

<!–[if IE 6]><![endif]–>               <!–仅IE6可识别–>

<!–[if IE 7]><![endif]–>               <!–仅IE7可识别–>

<!–[if IE 8]><![endif]–>               <!–仅IE8可识别–>

<!–[if IE 9]><![endif]–>                <!–仅IE9可识别–>

<!–[if lt IE 5]><![endif]–>             <!–IE5以下版本可识别–>

<!–[if lt IE 5.0]><![endif]–>            <!–IE5.0以下版本可识别–>

<!–[if lt IE 5.5]><![endif]–>            <!–IE5.5以下版本可识别–>

<!–[if lt IE 6]><![endif]–>              <!–IE6以下版本可识别–>

<!–[if lt IE 7]><![endif]–>              <!–IE7以下版本可识别–>

<!–[if lt IE 8]><![endif]–>              <!–IE8以下版本可识别–>

<!–[if lt IE 9]><![endif]–>              <!–IE9以下版本可识别–>

<!–[if lte IE 5]><![endif]–>            <!–IE5以及IE5以下版本可识别–>

<!–[if lte IE 5.0]><![endif]–>           <!–IE5.0以及IE5.0以下版本可识别–>

<!–[if lte IE 5.5]><![endif]–>           <!–IE5.5以及IE5.5以下版本可识别–>

<!–[if lte IE 6]><![endif]–>             <!–IE6以及IE6以下版本可识别–>

<!–[if lte IE 7]><![endif]–>             <!–IE7以及IE7以下版本可识别–>

<!–[if lte IE 8]><![endif]–>             <!–IE8以及IE8以下版本可识别–>

<!–[if lte IE 9]><![endif]–>             <!–IE9以及IE9以下版本可识别–>

<!–[if gt IE 5]><![endif]–>             <!–IE5以上版本可识别–>

<!–[if gt IE 5.0]><![endif]–>            <!–IE5.0以上版本可识别–>

<!–[if gt IE 5.5]><![endif]–>             <!–IE5.5以上版本可识别–>

<!–[if gt IE 6]><![endif]–>              <!–IE6以上版本可识别–>

<!–[if gt IE 7]><![endif]–>                  <!–IE7以上版本可识别–>

<!–[if gt IE 8]><![endif]–>                <!–IE8以上版本可识别–>

<!–[if gt IE 9]><![endif]–>              <!–IE9以上版本可识别–>

<!–[if gte IE 5]><![endif]–>           <!–IE5以及IE5以上版本可识别–>

<!–[if gte IE 5.0]><![endif]–>            <!–IE5.0以及IE5.0以上版本可识别–>

<!–[if gte IE 5.5]><![endif]–>             <!–IE5.5以及IE5.5以上版本可识别–>

<!–[if gte IE 6]><![endif]–>             <!–IE6以及IE6以上版本可识别–>

<!–[if gte IE 7]><![endif]–>               <!–IE7以及IE7以上版本可识别–>

<!–[if gte IE 8]><![endif]–>               <!–IE8以及IE8以上版本可识别–>

<!–[if gte IE 9]><![endif]–>              <!–IE9以及IE9以上版本可识别–>