H5新增

HTML5

快速html结构语法

1.生成多个相同标签 div*3 div{div内的内容} div[div的属性]

2.有父子关系 用> 如ul>li

3.有兄弟关系 用+ 如div+p

4.生成带有类名或id 直接写.demo或者#two

5.如果生成div类名有顺序,可以用自增$

6.如果想在生成的标签内部内容可以用{}表示

7.tab+shift 删除代码前空格

8.input:password 生成密码输入框

HTML5新语义标签

​ 主要针对搜索引擎 可以使用多次 （在ie9中要转换成块）移动端使用更多

header:头部标签

nav ：导航标签

main: 主要内容

article：内容标签

section：定义某个文档区域

aside：定义侧边栏标签

footer：尾部标签

figure元素 一段独立的流内容

    figcaption元素为其添加标题(第一个或最后一个子元素的位置)

hgroup: 标题组

Mark 高亮

canvas 画布

<dialog open></dialog>标签定义对话框或窗口 open显示

新增表单属性

在form内且有提交时按钮时有效

required=“required” 提示文本内容不能为空 必填

placeholder 提示文本

input::placeholder{color:pink;} 修改placeholder里面的字体颜色

autofocus=“autofocus” 自动聚焦属性

autocomplete=“on/off” 在字段输入时显示历史记录，默认on 关闭off
（需要放在表单内，同时加上name属性 同时成功提交）

novalidate取消验证 给form添加可以直接提交数据 优先级比required高

multiple=“multiple” 可以多选文件提交 （file中）

output 输出框

oninput 表单输出
eg：

 <form action="" oninput="c.value=parseInt(a.value)+parseInt(b.value)">
     <input type="text" id="a">+
     <input type="text" id="b">=
     <output name="c"></output>

datalist ：选项列表

eg:

 <input type="url" list="url_list" name="link" />
<datalist id="url_list">
  <option label="W3School" value="http://www.W3School.com.cn" />
  <option label="Google" value="http://www.google.com" />
  <option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
提示：option 元素永远都要设置 value 属性。
      list属性：结合datalist元素使用 

pattern 验证表单输入的内容 需输入正则表达式
eg：

<input type="number" pattern="\d"> 
   <input type="number" pattern="[0-9]*">  </input type="number" pattern="[0-9]*">
 </input type="number" pattern="\d">

正则表达式

信用卡  [0-9]{13,16}
银联卡  ^62[0-5]\d{13,16}$
Visa: ^4[0-9]{12}(?:[0-9]{3})?$
万事达：^5[1-5][0-9]{14}$
QQ号码： [1-9][0-9]{4,14}
手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
身份证：^([0-9]){7,18}(x|X)?$
密码：^[a-zA-Z]\w{5,17}$ 字母开头，长度在6~18之间，只能包含字母、数字和下划线
强密码：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ 包含大小写字母和数字的组合，
不能使用特殊字符，长度在8-10之间
7个汉字或14个字符：^[\u4e00-\u9fa5]{1,7}$|^[\dA-Za-z_]{1,14}$

新增表单input

type=“email” 限制用户输入邮箱

type=“url” 限制用户输入url

type=“range” 产生一个滑动条表单

type=“data” 限制用户输入日期

type=“time” 限制用户输入时间

type=“month” 限制用户输入月份

type=“week” 限制用户输入周

type=“number” 限制用户输入数字

type=“tel” 手机号码

type=“search” 搜索框

type=“color” 生成一个颜色选择表单

type=“datetime-local” 选取本地时间


注：
Number及range
属性：
  min 最小值
  max 最大值
  step 步幅 增加减少时为step的倍数

视频

<video src="文件地址" controls="controls">1</video>（不支持avi）

推荐写法（兼容性）：

<video controls="controls" width="300">
  <source src="move.ogg" type="video/ogg">
  <source src="move.mp4" type="video/mp4">
  
    您的浏览器暂不支持<video>标签播放视频
</video>

属性

autoplay：autoplay 视频就绪自动播放 （谷歌浏览器需要muted来解决）

controls：controls 向用户显示播放插件

width：pixels（像素） 设置播放器宽度

height：pixels（像素） 设置播放器高度

loop：loop 循环播放

preload： auto （预加载）（有autoplay不需要）

         none （不加载）

src：url（） 视频地址

poster：imgurl 加载等待的画面图片

muted：muted 静音播放

音频

  <audio src="文件地址" controls="controls"></audio>

推荐写法（兼容性）：

<audio controls="controls">
  <source src="happy.MP3" type="audio/mpeg">
  <source src="happy.ogg" type="audio/ogg">
    您的浏览器暂不支持<audio>标签播放视频
</audio>

属性

autoplay：autoplay 音频就绪自动播放 （谷歌浏览器不支持）

controls：controls 向用户显示播放插件

loop：loop 循环播放

src：url（） 音频地址