html5新增标签和属性

末蓝、 2022-07-20 15:11 363阅读 0赞 
  1. <!DOCTYPE HTML>
  2. <html>
  3.  <head>
  4.   <title> New Document </title>
  5.   <meta charset='utf-8'>
  6.  </head>
  8.  <body>
  9.   <h2>新增标签</h2>
  10.   <section>定义文档中的节，章节，页眉</section>
  11.   <article>表示一个独立的，相关的内容块</article>
  12.   <nav>导航链接部分</nav>
  13.   <aside>用来装载非正文内容，可以被删除，而不会影响正文意思</aside>
  14.   <hgroup>对标题元素h1-h6进行整合</hgroup>
  15.   <footer>页脚</footer>
  16.   <header>页眉</header>
  17.   <figure>用于对元素进行组合，多用于图片与图片描述组合</figure>
  18.   <p>mark:定义带有标记的文本，突出显示  I <mark>Love</mark> You</p>
  19.   <p>progress:定义运行中的任务进程<progress value='45' max='100'></progress></p>
  20.   <p>time:定义时间日期  <time>11:23</time></p>
  21.   <p>details:定义用户可见的或隐藏的需求补充细节，现在只有chrome支持</p>
  22.   <details>
  23.     <summary>摘要</summary>
  24.     <p>摘要内容</p>
  25.   </details>
  26.   <p>datalist:定义选项列表，配合input一起使用，定义其可能的值</p>
  27.   <input List="list" />
  28.   <datalist id="list">
  29.     <option value="1">
  30.     <option value="2">
  31.     <option value="3">
  32.     <option value="4">
  33.   </datalist>
  34.   <p>ruby:定义ruby注释，和rt,rp标签一起使用</p>
  35.   <p>menu:定义菜单列表，但是浏览器不支持</p>
  36.   <p>command:定义用户可能调用的命令，比如单选按钮，复选框按钮，但是浏览器不支持</p>
  37.   <hr>
  38.   <hr>
  39.   <h2>新增表单功能</h2>
  40.   <h3>新增的输入类型</h3>
  41.   <p>email:定义email地址的字段</p>
  42.   <p>url：定义用于输入url的字段</p>
  43.   <p>number:定义输入数字的字段</p>
  44.   <p>range:用于定义精确值不重要的输入数字控件</p>
  45.   <p>Date Pickers:date定义date控件，month定义month和year控件，week定义week和year控件，time定义用于输入时间的控件，datetime定义date和time的控件基于UTC时间，datetime-local定义date和time控件不带时区</p>
  46.   <p>search：定义用于输入搜索字符串的文本字段</p>
  47.   <p>tel：定义用于输入电话号码的字段</p>
  48.   <p>color：定义拾色器</p>
  49.   <div>
  50.     <form action="#" method="get">
  51.         <div>emial:<input type="email" name="email"/></div>
  52.         <div>url:<input type="url" name="url"/></div>
  53.         <div>number:<input type="number" name="number" value="1" max="100" min="1" step="2"/></div>
  54.         <div>range:<input type="range" name="range" value="1" max="100" min="1" step="1"/></div>
  55.         <div>data picker-date:<input type="date" name="date"/></div>
  56.         <div>data picker-month:<input type="month" name="month"/></div>
  57.         <div>data picker-week:<input type="week" name="week"/></div>
  58.         <div>data picker-time:<input type="time" name="time" value='23:24:30' min="01:00" max="10:23:39" step="1"/></div>
  59.         <div>data picker-datetime:<input type="datetime" name="datetime"/></div>
  60.         <div>data picker-datetime-local:<input type="datetime-local" name="datetime-local"/></div>
  61.         <div>search:<input type="search" name="search"/></div>
  62.         <div>tel:<input type="tel" name="tel"/></div>
  63.         <div>color:<input type="color" name="color"/></div>
  64.         <input type="submit" value="提交">
  65.     </form>
  66.   </div>
  67.   <h3>新增的输入input属性</h3>
  68.   <p>autocomplete:规定input标签是否启动自动完成功能</p>
  69.   <p>autofocus:当页面加载时，input是否自动获取焦点</p>
  70.   <p>form:规定input标签所属的表单</p>
  71.   <p>新增的表单属性:<mark>formaction</mark>规定当表单提交时处理输入控件的文件的URL。<mark>formenctype</mark>确定表单提交到服务端上时如何编码
  72.   <mark>formmethod</mark>表单提交的http方法。<mark>formtarget</mark>规定表单提交成功后在哪里接受响应的名称或关键词<mark>formnovalidate</mark>覆盖form标签中的novalidate属性
  73.    <mark>除了formnovalidate，其他的属性都是针对input标签type=submit，和type=image类型</mark>
  74.   </p>
  75.   <p>height和width:用来规定input标签的长度宽度，但是只是针对type=image</p>
  76.   <p>list:属性引用datalist元素，其中包含了input元素的预定义选项</p>
  77.   <p>min,max,step:min规定输入框最小输入值，max规定最大值，step规定输入合法的数字间隔</p>
  78.   <p>multiple:属性规定输入到input的多个值，如上传文件可以传多个</p>
  79.   <p>pattern:规定用于验证输入的正则表达式</p>
  80.   <p>placeholder:输入input的简短提示</p>
  81.   <p>required:规定表单提交之前填写输入字段</p>
  82.  </body>
  83. </html>

发表评论

表情：
评论列表 （有 0 条评论，363人围观）

还没有评论，来说两句吧...

相关阅读

    相关 HTML5新增标签属性

    关于h5 兜兜转转终于学完CSS开始接h5了！其实h5没有大家想的那么复杂！我们之前学的pc端就是以h5的标准来的 只是那些标签是 html4.01之前就有的！我们后

    傷城~傷城~/ 0 赞/ 496 阅读