• 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>
  • 相关阅读:
    系统架构技能之设计模式组合模式
    系统架构师基础到企业应用架构单机软件架构
    设计模式系列装饰模式
    设计模式系列命令模式
    设计模式系列外观模式
    设计模式系列原型模式
    设计模式系列代理模式
    设计模式系列桥接模式
    设计模式系列适配器模式
    设计模式系列享元模式
  • 原文地址:https://www.cnblogs.com/cupid10/p/15617843.html
Copyright © 2020-2023  润新知