新增常用元素

  1. <!DOCTYPE html>
  2. <!--    结构元素
  3.     section:    定义文档中的节.                                            基本布局:
  4.     article:    代表独立的,完整的内容块.                                    <header>
  5.     nav:        表示页面中导航链接部分.                                      <nav>
  6.     slide:      用来装载非正文的部分.                                 <article>  <aside>
  7.     hgroup:     对标题元素(h1~h6)进行组合.                            <section>  [     ]
  8.     footer:     定义文档的页脚.                                             <footer>
  9.     header:     定义文档的页眉.
  10.     figure:     用于对元素进行组合.
  11. -->
  12. <!--------------------------------------------------------------------------------------------->
  13. <!--    语义元素
  14.     mark:       定义带有记号的文本.
  15.     progress:   任务进度.
  16.     time:       时间日期值.
  17.     details:    定义选项列表.
  18.     rudy:       定义rudy注释.
  19.     menu:       表示菜单列表.
  20.     command:    定义用户可能调用的mingling
  21. -->
  22. <html>
  24. <head>
  26. </head>
  28. <body>
  29.     <header>
  30.         <div id="container">
  31.             <nav>
  32.                 <ul>
  33.                     <li><a href="">Home</a></li>
  34.                     <li><a href="">About</a></li>
  35.                     <li><a href="">Articles</a></li>
  36.                     <li><a href="">Contacts</a></li>
  37.                 </ul>
  38.             </nav>
  39.         </div>
  40.     </header>
  43.     <div id="content">
  44.         <aside>
  46.             <div class="inside">
  47.                 <h2>Latest News</h2>
  48.                 <ul>
  49.                     <li><a href="">2019.01.01</a></li>
  50.                     <li><a href="">2019.01.02</a></li>
  51.                     <li><a href="">2019.01.03</a></li>
  54.                 </ul>
  55.             </div>
  56.         </aside>
  58.         <!--------------------------------------------------------------------------------------------->
  59.         <section id="mycount">
  60.             <h2>About your site</h2>
  61.             <p>one</p>
  62.             <p>two</p>
  63.             <h2>About your team</h2>
  64.             <ul>
  65.                 <li><img src="">picture</li>
  66.                 <li><img src="">picture</li>
  67.             </ul>
  68.         </section>
  69.         <details open="open">
  70.             <summary>index</summary>
  71.             <p>one</p>
  72.             <p>two</p>
  73.         </details>
  75.         <input list="list">
  76.         <datalist id="list">
  77.             <option value="haha"></option>
  78.             <option value="hehe"></option>
  79.         </datalist>
  80.         <!--------------------------------------------------------------------------------------------->
  81.     </div>
  84.     <footer id="root">
  86.     </footer>
  88. </body>
  90. </html>

新增表单功能

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>新增表单功能</title>
  6. </head>
  7. <body>
  8.     <!--
  9.         新增input输入类型
  10.             email:              验证email地址
  11.             url:                输入URl的字段
  12.             number:             用于输入数字的字段
  13.             range:              用于精确值不高的输入数字的控件
  14.             Date pickers:
  15.                  date:              定义date组件
  16.                  month:             定义month和year控件
  17.                  week:              定义week和year控件
  18.                  time:              定义用于输入时间的控件
  19.                  datetime:          定义date和time控件
  20.                  datetime-local:    定义date和time控件
  21.             search:             定义用于输入搜索字符串的文本字段
  22.             tel:                定义用于输入电话号码的字段
  23.             color:              定义拾色器       
  24.     -->
  25.     <!-------------------------------------------------------------------------------------->
  27.     <form action="#" method="GET">
  28.         <input type="email" name="email"/><hr/>
  29.         <input type="url" name="url"/><hr/>
  30.         <input type="number" name="number" max="100" min="0" value="1"/><hr/>
  31.         <input type="date" name="date"/><hr/>
  32.         <input type="color" name="color"/><hr/>
  33.         <input type="submit" value="提交"/>
  34.     </form>
  36.     <!--
  37.         新增的input属性
  38.             autocomplete        是否启用自动完成功能
  39.             autofocus           自动获取焦点
  40.             form                规定<input>所属的表单
  41.             formnovalidate      覆盖表单的novalidate属性
  42.         --------------------------------------------------
  44.             对于type="submit"/"image"
  45.                 formation           表单提交时处理输入控件的文件的URL
  46.                 formenctype         表单数据提交时的编码
  47.                 formmethod          发送表单到URl的方法
  48.                 formnovalidate      覆盖表单的novalidate属性
  49.                 formtarget          规定表示提交表单后在哪里显示接收到响应的名称或关键字
  51.             对于type="image"
  52.                 新增height和width
  54.         --------------------------------------------------
  56.         list                
  57.         min/max/step        最小值/最大值/时间间隔
  58.         multiple            允许用户输入到<input>的多个值
  59.         pattern             验证<input>值得正则表达式
  60.         placeholder         简短提示信息
  61.         required            必须在提交表单之前填写输入字段
  62.     -->
  63.     <!--------------------------------------------------------------------------------------->
  64.     <br/><br/><hr/>
  66.     <!--
  67.         新增的form元素
  68.             datalist        为输入框提供选择列表
  69.             Keygen          密钥生成器
  70.             output          用于浏览显示的脚本或计算结果
  71.             novalidate      取消整个表单的有效性检查
  72.             autocomplete    自动完成功能
  74.     -->
  76.     </form>
  82. </body>
  83. </html>