H5和CSS3中新增元素

- h5新增的标签

1.   用于绘画 canvas 元素。

2.   用于媒介回放的 video 和 audio 元素。

3.   本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
  sessionStorage 的数据在浏览器关闭后自动删除。

4.   语意化更好的内容元素，比如 article、footer、header、nav、section

5.   表单控件，calendar、date、time、email、url、search。

表单控件

新的输入型控件

• email:   电子邮箱文本框，跟普通的没什么区别

– 当输入不是邮箱的时候，验证通不过

– 移动端的键盘会有变化

• tel    :    电话号码

• url    :    网页的 URL

• search:   搜索引擎

– chrome 下输入文字后，会多出一个关闭的 X

• range:   特定范围内的数值选择器

– min 、 max 、 step(  步数  )

– 例子  :   用 JS 来显示当前数值

新的输入型控件 _2

• number:   只能包含数字的输入框

• color:   颜色选择器

• datetime   :   显示完整日期

• datetime -local  :   显示完整日期，不含时区

• time:   显示时间，不含时区

• date:     显示日期

• week:   显示周

• month:   显示月

新的表单特性和函数

• placeholder  :   输入框提示信息

– 例子  :   微博的密码框提示

• autocomplete  :   是否保存用户输入值

– 默认为 on ，关闭提示选择 off

• autofocus:   指定表单获取输入焦点

• list 和 datalist   :   为输入框构造一个选择列表

– list 值为 datalist 标签的 id

• required:   此项必填，不能为空

• Pattern :  正则验证   pattern="\d{1,5}“

• Formaction 在 submit 里定义提交地址

上面的表单，想要自定义提示信息的话，需要借助一个对象。参考教程：
1.微设计创意工作坊
2.LOFTER乐乎
3.csdn

新的选择器

• querySelector

• querySelectorAll

• getElementsByClassName

获取 class 列表属性

• classList

– length :  class 的长度

– add()  :   添加 class 方法

– remove()  :   删除 class 方法

– toggle() :   切换 class 方法 

新增元素	说明
video	表示一段视频并提供播放的用户界面
audio	表示音频
canvas	表示位图区域
source	为video和audio提供数据源
track	为video和audio指定字母
svg	定义矢量图
code	代码段
figure	和文档有关的图例
figcaption	图例的说明
main
time	日期和时间值
mark	高亮的引用文字
datalist	提供给其他控件的预定义选项
keygen	秘钥对生成器控件
output	计算值
progress	进度条
menu	菜单
embed	嵌入的外部资源
menuitem	用户可点击的菜单项
menu	菜单
template
section
nav
aside
article
footer
header

- css3 
css3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面

• 选择器

• 框模型

• 背景和边框 
  border-radius、box-shadow、border-image、 
  background-size：规定背景图片的尺寸 
  background-origin：规定背景图片的定位区域 
  background-clip：规定背景的绘制区域
• 文本效果（常用） 
  text-shadow：设置文字阴影 
  word-wrap：强制换行 
  word-break 
  css3提出@font-face规则，规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range
• 2/3D转换 
  transform：向元素应用2/3D转换 
  transition：过渡
• 动画
• @keyframes规则： 
  animation、animation-name、animation-duration等
• 用户界面（常用） 
  box-sizing、resize 
  css3新增伪类 
  ：nth-child() 
  ：nth-last-child() 
  ：only-child 
  ：last-child 
  ：nth-of-type() 
  ：only-of-type() 
  ：empty 
  ：target 这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。 
  ：enabled 
  ：disabled 
  ：checked 
  ：not