html5新增标签和属性

来源：互联网发布：淘宝喵喵折怎么设置编辑：程序博客网时间：2024/06/05 17:19
<!DOCTYPE HTML><html> <head>  <title> New Document </title>  <meta charset='utf-8'> </head> <body>  <h2>新增标签</h2>  <section>定义文档中的节，章节，页眉</section>  <article>表示一个独立的，相关的内容块</article>  <nav>导航链接部分</nav>  <aside>用来装载非正文内容，可以被删除，而不会影响正文意思</aside>  <hgroup>对标题元素h1-h6进行整合</hgroup>  <footer>页脚</footer>  <header>页眉</header>  <figure>用于对元素进行组合，多用于图片与图片描述组合</figure>  <p>mark:定义带有标记的文本，突出显示  I <mark>Love</mark> You</p>  <p>progress:定义运行中的任务进程<progress value='45' max='100'></progress></p>  <p>time:定义时间日期  <time>11:23</time></p>  <p>details:定义用户可见的或隐藏的需求补充细节，现在只有chrome支持</p>  <details><summary>摘要</summary><p>摘要内容</p>  </details>  <p>datalist:定义选项列表，配合input一起使用，定义其可能的值</p>  <input List="list" />  <datalist id="list"><option value="1"><option value="2"><option value="3"><option value="4">  </datalist>  <p>ruby:定义ruby注释，和rt,rp标签一起使用</p>  <p>menu:定义菜单列表，但是浏览器不支持</p>  <p>command:定义用户可能调用的命令，比如单选按钮，复选框按钮，但是浏览器不支持</p>  <hr>  <hr>  <h2>新增表单功能</h2>  <h3>新增的输入类型</h3>  <p>email:定义email地址的字段</p>  <p>url：定义用于输入url的字段</p>  <p>number:定义输入数字的字段</p>  <p>range:用于定义精确值不重要的输入数字控件</p>  <p>Date Pickers:date定义date控件，month定义month和year控件，week定义week和year控件，time定义用于输入时间的控件，datetime定义date和time的控件基于UTC时间，datetime-local定义date和time控件不带时区</p>  <p>search：定义用于输入搜索字符串的文本字段</p>  <p>tel：定义用于输入电话号码的字段</p>  <p>color：定义拾色器</p>  <div><form action="#" method="get"><div>emial:<input type="email" name="email"/></div><div>url:<input type="url" name="url"/></div><div>number:<input type="number" name="number" value="1" max="100" min="1" step="2"/></div><div>range:<input type="range" name="range" value="1" max="100" min="1" step="1"/></div><div>data picker-date:<input type="date" name="date"/></div><div>data picker-month:<input type="month" name="month"/></div><div>data picker-week:<input type="week" name="week"/></div><div>data picker-time:<input type="time" name="time" value='23:24:30' min="01:00" max="10:23:39" step="1"/></div><div>data picker-datetime:<input type="datetime" name="datetime"/></div><div>data picker-datetime-local:<input type="datetime-local" name="datetime-local"/></div><div>search:<input type="search" name="search"/></div><div>tel:<input type="tel" name="tel"/></div><div>color:<input type="color" name="color"/></div><input type="submit" value="提交"></form>  </div>  <h3>新增的输入input属性</h3>  <p>autocomplete:规定input标签是否启动自动完成功能</p>  <p>autofocus:当页面加载时，input是否自动获取焦点</p>  <p>form:规定input标签所属的表单</p>  <p>新增的表单属性:<mark>formaction</mark>规定当表单提交时处理输入控件的文件的URL。<mark>formenctype</mark>确定表单提交到服务端上时如何编码  <mark>formmethod</mark>表单提交的http方法。<mark>formtarget</mark>规定表单提交成功后在哪里接受响应的名称或关键词<mark>formnovalidate</mark>覆盖form标签中的novalidate属性   <mark>除了formnovalidate，其他的属性都是针对input标签type=submit，和type=image类型</mark>  </p>  <p>height和width:用来规定input标签的长度宽度，但是只是针对type=image</p>  <p>list:属性引用datalist元素，其中包含了input元素的预定义选项</p>  <p>min,max,step:min规定输入框最小输入值，max规定最大值，step规定输入合法的数字间隔</p>  <p>multiple:属性规定输入到input的多个值，如上传文件可以传多个</p>  <p>pattern:规定用于验证输入的正则表达式</p>  <p>placeholder:输入input的简短提示</p>  <p>required:规定表单提交之前填写输入字段</p> </body></html>
0 0