HTML5标签及表单

语义化标签

• section

  • w3c规范规定section是用来划分网页的,表示页面中的一个内容区块,比如章节,页眉,页脚或页面的其他部分.可以和h1,h2…等其他标签结合起来一起使用,表示文档结构

• article
  • 定义可以独立于内容其余部分的完整独立内容块,article元素就是专门为摘要设计的,比如一篇文章
• aside
  • 表示article标签内容之外的,与article标签内容相关的辅助信 息,aside元素应该被用于无关内容。
  • 如果你有你认为应该与主内容分开的内容，那么aside元素是你应该正 确考虑使用的元素。
  • 询问你自己aside元素中的内容是否可以被独立开来而不会影响文档或 者section中主内容的含义。
  • 可以用在主要内容相关的引用,侧边栏,广告,nav元素组等
  • 简单来说 :aside的内容如果被删除，剩下的内容仍然很合理

• hgroup

  • 对整个页面/页面中的一个内容区块的标题进行组合

• header

  • 　　一个内容区块或整个页面的头部部分

• footer

  • 整个页面或页面区块的尾部

• nav

  • 页面中导航链接的部分

• main
  • 页面核心部分

• figure

  • 　　表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元

  • 　　figure元素经常用于图片

• 　　figcaption

  • 　　代表一个图例的说明 代表了figure元素的一个标题或者说是其相关解释. 在使用figcaption时，它最好是figure块的第一个或者最后一个元素

• mark

  • 　　高亮显示

• 　　 progress

  • 　　进度条

• 　　time

  • 　　<time></time>用来表现时间或日期 <p> 我们在每天早上 <time>9:00</time> 开始营业。 </p>参数 <p> 我在 <time datetime=“2016-02-14T20:00Z” pudate>这一天</time> 发布了一篇文章。 </p>

• wbr

  • <p>一行放不下则在这换行<wbr/>能放下则一行显示</p>

• datalist

  • 选项列表与 input 元素配合使用，可以设置提示信息 <input type="text" id="" list="shopCars"/> <datalist id="shopCars"> <!--为表单设置可选值--> <option value="aa"></option> <option value="ab"></option> <option value="c"></option> </datalist>

• 　　datalist

  • 选项列表与 input 元素配合使用，可以设置提示信息 <input type="text" id="" list="shopCars"/> <datalist id="shopCars"> <!--为表单设置可选值--> <option value="aa"></option> <option value="ab"></option> <option value="c"></option> </datalist>

• details

  • 用于描述文档或文档某个部分的细节 summary标签和details一起使用,表示标题,用户点击标题时会得到细节信息 <details> <summary>111</summary> <ul> <li>111</li><li>222</li><li>333</li> </ul> </details>

• 　　

  output 不同类型的输出,比如脚本的输出 <form oninput="x.value= parseInt(a.value)+parseInt(b.value)"> <input type="range" id="a" max="100" min="0" value="50"/>+ <input type="number" id="b" value="50"/> <output name="x" for="a b">150</output> </form>

表单

新增input元素的种类

search : 搜索输入框

tel : 电话号码输入框

url : 输入url地址

email : 邮件输入框

number : 数字输入框

range :特定范围内的数值选择器(通过拖动滚动条改变一定范围内的数字)

新增input元素的种类

color : 颜色选取器 只在 Opera 和 Blackberry 浏览器

datetime : 显示完整日期和时间 UTC标准时间

datetime-local : 显示完整日期和时间

time : 显示时间

month : 显示月

week : 显示周

表单新特性 placeholder 输入框占位符，常用作输入提示，在光标聚焦时，占位符自动消失

autocomplete : 是否保存用户输入值 默认为on,关闭提示选择off

autofocus : 自动聚焦

required : 此项必填，不能为空 Pattern : 正则验证 pattern="\d{1,5}“ form 属性：表单元素只要加上 form 属性，表单元素可以放到页面的任意位置。

formnovalidate 和 novalidate 它俩都表示不需要验证表单,直接提交, : novalidate 用于 form 标签；

formnovalidate 用于 submit类型的提交按钮。

表单验证 validity对象，通过下面的valid可以查看验证是否通过 oText.addEventListener("invalid",fn1,false);

valid : 验证不通过时返回false

valueMissing : 输入值为空时

typeMismatch : 控件值与预期类型不匹配

patternMismatch : 输入值不满足pattern正则

customError 不符合自定义验证

setCustomValidity(); 自定义验证

data-yourvalue 自定义属性

data-name : dataset.name

data-name-first : dataset.nameFirst

Hidden 加上这个属性,元素则是不可见状态

spellcheck 对你输入的内容纠错

tabindex 按下tab键可以根据设置的顺序进行跳转

contenteditable <p contenteditable="true">请您留言</p> 表示这块内容是可以编辑的 去掉则不可以修改

desginMode <script> window.document.designMode = “on“ </script>