HTML5新增标签,表单及属性

(一)语义化标签

  • . section元素 表示页面中的一个区块
    . article元素 表示一块与上下文无关的独立的内容
    . aside元素 在article之外的,与article内容相关的辅助信息 
    . header元素 表示页面中一个内容区块或整个页面的标题
    . footer元素 表示页面中一个内容区块或整个页面的脚注
    . nav元素 表示页面中导航链接部分
    . figure元素 表示一段独立的内容,使用figcaption元素为其添加标题(第一个或最后一个子元素的位置)
    . main元素 表示页面中的主要的内容(ie不兼容)
    . hgroup标题的一个分组
    . mark定义高亮显示的文本(span)
    . time 时间
    . dialog标记定义一个对话框(会话框)类似微信 
    

(二)多媒体标签

    <video src=""></video> 
    <audio src=""></audio>
  • 属性

    . controls属性:如果出现该属性,则向用户显示控件,比如播放按钮。
    . autoplay属性:如果出现该属性,则视频在就绪后马上播放。
    . loop属性:重复播放属性。
    . muted属性:静音属性。
    . poster属性:规定视频正在下载时显示的图像,直到用户点击播放按钮。
    
  • source

    <source> 标签为媒介元素(比如 <video> 和 <audio>)定义媒介资源。
    <source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
      			Type属性值:
      				用于视频:video/ogg   video/mp4     video/webm
      				用于音频:audio/ogg   audio/mpeg
    

(三)HTML5新增表单

  • 新增type类型

     Type=“email”   限制用户必须输入email类型
       	Type=“url”        限制用户必须输入url类型
       	Type=“range”   产生一个滑动条表单
       	Type=“number”  显示用户必须输入数字
       	Type=“search”   产生一个搜索意义的表单
       	Type=“color”     生成一个颜色选择的表单
       	Type=“time”      限制用户必须输入时间类型
       	Type=“month”        限制用户必须输入月类型
       	Type=“week”        限制用户必须输入周类型
       	Type=“datetime-local”        选取本地时间
       	type=”date”
    
  • 新增表单属性

        required     监测是否为空。
      	min      最小
      	max      最大
      	step     步幅  确定一个法定值。 -3 0 3 6 9
      	list     必须结合datalist标签,绑定datalist  id名称。
      	autocomplete    是否自动提示信息    属性值   on    off,类似于历史记录
      	placeholder    文本框的提示信息
      	autofocus      自动聚焦。一个页面只能由一个。
      	pattern    后面的属性值是一个正则表达式。
      	novalidate     取消验证
      	 multiple     选择(上传)多个
    
  • 新增表单标签

    • outpu:结果输出显示
    <form action="" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    	<input id="a" type="range" min="0" max="100">100+
    	<input id="b" type="text" value="50">=
    	<output name="x" for="a b"></output>
    </form>
    
    • datalist 必须和list属性结合使用。做提示信息。
    <input type="url"     list="url_list"    name="link" />
    <datalist id="url_list"> 
        <option label="W3School" value="http://www.W3School.com.cn" /> 
        <option label="Google" value="http://www.google.com" /> 
        <option label="Microsoft" value="http://www.microsoft.com" /> 
    </datalist>
    

猜你喜欢

转载自www.cnblogs.com/cupid10/p/12690677.html