H5C3-1h5c3新标签&表单&选择器

1.HTML5新标签

结构性标签:
<artical> <aside> <footer> <header> <nav> <section>
非结构性标签：
<audio> <video> <canvas> <command> <datalist> <details> <figure>
<mark> <progress> <source> <time>

下拉式选项
代码：

<input type="text" list="data"/>
<datalist id="data">
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
</datalist>

效果：

进度条
代码：

<progress id="pro" max="100" value="0"></progress>
<script type="text/javascript">
    var num=0
    setInterval(function(){
        $("#pro").val(num+" ")
        num++
    },100)                 //隔0.1秒进度条的数值增加1
</script>

2.HTML5新增表单类型

type=number
type=range
type="date"以及其他时间控件
type="color"
type=search
type=email 用于包含e-mail地址的输入域，提交表单时，会自动验证email域的值
type=tel    输入的内容为电话号码类型
type=url    用于包含url地址的输入域，提交表单时，会自动验证url域的值

3.表单新特性

//输入框自动补全内容，必须设置name
autocomplete=on
//自动获取焦点
autofocus="autofocus"
//required属性表示必须输入后才能提交
required = "required"
//pattern给输入框指定正则表达式
pattern ="/d+"
//disabled表示输入框被禁用
disabled="disabled"
//readonly表示这是一个只读输入框
readonly="readonly"

4.CSS选择器

属性选择器
[attr*=val]  如果用attr表示的属性的属性值中用val指定的字符，则选择该元素
[attr^=val]  如果用attr表示的属性的属性值中用val开头，则选择该元素
[attr$=val]  如果用attr表示的属性的属性值中用val结尾，则选择该元素

结构性伪类选择器
first-line  选中某元素第一行文字
first-letter   选中某元素第一个字母或者字
before  元素之前插入内容
after   元素之后插入内容