HTML5 增加的元素与属性

  1. HTML5初识
  • HTML5是继htnl\html4.01后下一代,设计目的是为了在移动设备上支持多媒体,简单易学。
  • 优点
  1. 提高可用性和改进用户的友好体验。
  2. 有几个新的标签,这将有助于开发人员定义重要的内容。
  3. 可以给站点带来更多的多媒体元素(视频和音频)。
  4. 可以很好的替代FLASH和Silverlight。
  5. 将被大量应用于移动应用程序和游戏。
  6. 可移植性好。
  • HTML5中移出的标签
    • <acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<strike>、<tt>
  • HTML中的语义标签
    • <header>  定义了文档的头部区域
    • <nav>  定义导航链接的部分
    • <article> 定义页面独立的内容区域
    • <aside> 定义页面的侧边栏内容
    • <footer> 定义 section 或 document 的页脚
    • <progress>定义任何类型的任务的进度
    • <section>定义文档中的节(section、区段)
    • <command>定义命令按钮,比如单选按钮、复选框或按钮
    • <details>用于描述文档或文档某个部分的细节
    • <dialog>定义对话框,比如提示框
    • <summary>标签包含 details 元素的标题
  • HTML5 新的表单元素
    • <datalist> 元素规定输入域的选项列表,<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:使用 <input> 元素的列表属性与 <datalist> 元素绑定。
    1 <!-- html5中的下拉菜单 -->
    2     <input type="text" list="datalist1">
    3     <datalist id="datalist1">
    4         <option value="01">我会飞</option>
    5         <option value="01">我会跑</option>
    6         <option value="01">我会跳</option>
    7     </datalist>
     
      •   <output> 定义不同类型的输出,比如脚本的输出
     
    1 <!--oninput 用户输入内容时触发,可用于移动端输入字数统计 -->
    2     <!-- output  输出  name:你要操作的表单元素的变量   for:定义一个或者多个元素的输出域的元素 多个用空格隔开-->
    3     <form oninput="x.value = parseInt(inp1.value) + parseInt(inp2.value)">
    4         <input type="number" id="inp1" value="1"> +
    5         <input type="nUmber" id="inp2" value="1"> =
    6         <output name="x" for="inp1 inp2">2</output>
    7     </form>
     
    1. HTML5 新的表单属性
     1 <form action="">
     2         <!-- search  搜索框-->
     3         search Google:<input type="search" name="googlesearch">
     4  
     5         <input type="submit">
     6  
     7         <!-- 获取焦点  autofocus -->
     8         <input type="text" autofocus placeholder="在这里">autofocus
     9  
    10         <!-- autocomplete 自动完成表单的验证,记录上次的结果 -->
    11         <input type="text" placeholder="autocomplete">
    12  
    13         <!-- required 属性为必填项 novalidate给表单from添加后,表单验证失效-->
    14         <!-- email  输入email格式 匹配@邮箱,只匹配@ -->
    15         <input type="email" required placeholder="请输入邮箱">
    16  
    17         <!-- color 拾色器,通过value进行取值-->
    18         <input type="color" value="red">color
    19  
    20         <!-- number  只能输入数字-->
    21         <input type="number" placeholder="只能输入数字">
    22  
    23         <!--  date 日期 不是绝对的 允许你从一个日期选择器选择一个日期-->
    24         <input type="date">date
    25  
    26         <!-- time 允许你选择一个时间 -->
    27         <input type="time">time
    28  
    29         <!-- month 允许你选择一个月份 -->
    30         <input type="month">month
    31  
    32         <!-- week 允许你选择周和年-->
    33         <input type="week">week
    34  
    35         <!-- url 只能输入网址  https://www.baidu.com -->
    36         <input type="url" name="" id="">url
    37  
    38         <!-- maxlength 最大长度 minlength 最小长度 -->
    39         <input type="text" maxlength="7" minlength="3">maxlength minlength
    40  
    41         <!-- 匹配正则 pattern -->
    42         <input type="text" pattern="^[0-9]{9}$">pattern
    43  
    44         <!-- range: 范围,可以进行拖动,通过value进行取值 -->
    45         <input type="range" value="1" min="1" max="20" step="1" id="inp1">
    46     </form>
    1. HTML5表单新增的事件
    • oninput 用户输入内容时触发,可用于移动端输入字数统计
    • document.getElementById("name").oninput=function(){console.log(this.value);}
  • HTML5多媒体
    •  Audio(音频)
      • controls 如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)
      • loop  如果出现该属性,则当媒介文件完成播放后再次开始播放
      • muted  如果出现该属性,则音频输出为静音
     1 <body>
     2     <!-- 支持 mp3、amr、ogg、wav、wma -->
     3     <audio loop controls id="audio1">
     4         <source src="audio/llh.amr">
     5         <source src="audio/llh.ogg">
     6         <source src="audio/llh.wav">
     7         <source src="audio/llh.wma">
     8         <source src="audio/llh.mp3">
     9     </audio>
    10     <button id="btn1">make play</button>
    11 </body>
    12 <script>
    13     var v = document.getElementById(‘audio1‘);
    14     var btn1 = document.getElementById(‘btn1‘);
    15     btn1.onclick = function () {
    16         if (v.paused) {
    17             v.play()
    18         } else {
    19             v.pause()
    20         }
    21     }
      • Video(视频)
        • controls 如果出现该属性,则向用户显示控件,比如播放按钮
        • loop 如果出现该属性,则当媒介文件完成播放后再次开始播放
        • muted  如果出现该属性,视频的音频输出为静音
        • height  设置视频播放器的高度
        • width 设置视频播放器的宽度
        • paused  属性,暂停(音视同用)
        • play()  开始播放方法(音视同用)
        • pause()  暂停播放方法(音视同用)
     1 <body>
     2     <!-- controls 视频控制按钮 -->
     3     <!-- HTML5 视频支持mp4、Ogg、webm -->
     4     <video src="video/captian .mp4" id="video1" controls>
     5         <!-- source 添加更多
     6         <source src=‘./video/captian.mp4‘>
     7         <source>-->
     8     </video>
     9     <button id="btn1">make bigger</button>
    10     <button id="btn2">make smaller</button>
    11     <button id="btn3">make normal</button>
    12     <button id="btn4">make play</button>
    13 </body>
    14 <script>
    15     var v = document.getElementById(‘video1‘);
    16     var btn1 = document.getElementById(‘btn1‘);
    17     var btn2 = document.getElementById(‘btn2‘);
    18     var btn3 = document.getElementById(‘btn3‘);
    19     var plbtn4ay = document.getElementById(‘btn4‘);
    20     btn1.onclick = function () {
    21         v.width = ‘1000‘
    22     }
    23  
    24  
    25     btn2.onclick = function () {
    26         v.width = ‘100‘
    27     }
    28  
    29  
    30     btn3.onclick = function () {
    31         v.width = ‘350‘
    32     }
    33     // paused  属性,暂停
    34     //play()  开始播放方法
    35     //pause()  暂停播放方法
    36     btn4.onclick = function () {
    37         if (v.paused) {
    38             v.play()
    39         } else {
    40             v.pause()
    41         }
    42     }
    43 </script>
     
    1. 处理兼容性问题  主要是ie9以下不兼容
    1 <!--[if lt IE 9]>
    2   <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
    3   <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    4 <![endif]-->
     

    HTML5 增加的元素与属性

    上一篇:Kubernetes架构各组件介绍


    下一篇:Kubernetes 的层级命名空间介绍