H5的新特新
1.语义化的标签:header、footer、section、nav、aside、article
标签 | 描述 |
header | 定义文档的头部区域 |
footer | 定义文档的尾部区域 |
nav | 定义文档的导航栏部分 |
section | 定义文档中的节(section、区段) |
article | 定义页面独立的内容区域 |
aside | 定义页面的侧边栏部分 |
details | 用于描述文档或者某个部分的细节 |
summary | 标签包含details元素的标题 |
dialog | 定义对话框,比如提示框 |
2.增强型表单:HTML5拥有多个新的表单Input输入类型,这些新的特性提供了更好的输入控制和验证
input的type | 描述 |
color | 主要用于选择颜色 |
data | 从一个日期选择器选择一个日期 |
datatime | 选择一个日期(UTC时间) |
包含e-mail地址的输入域 | |
month | 选择一个月份 |
number | 数值的输入域 |
range | 一定范围内数字值的输入域 |
search | 用于搜索域 |
tel | 定义输入电话号码的字段 |
time | 选择一个时间 |
url | URL地址的输入域 |
week | 选择周和年 |
3.新增表单元素:datalist、keygen、output
表单元素 | 描述 |
datalist | 元素规定输入域的选项列表,使用input元素的list属性与datalist元素的id绑定 |
keygen | 提供一种验证用户的可靠方法,标签规定用于表单的秘钥对生成器字段 |
output | 用于不同类型的输出,比如计算机的脚本输出 |
4.新增的表单属性:placeholder、require、min、max、.......
表单属性 | 描述 |
placeholder | 输入框的默认提示 |
required | 是一个boolean属性,要求填写的输入域不能为空值 |
pattern | 描述一个正则表达式,用于验证input元素的值 |
min/max | 设置元素的最大值和最小值 |
step | 为输入域规定合法的数字间隔 |
height/width | 用于image类型的input标签的图像高度和宽度 |
autofocus | 是一个boolean属性,规定在页面加载时,域自动的获取到焦点 |
multipe | 是一个boolean属性,规定input元素中可选择多个值 |
5.音频、视频:audio、video
6.canvas:在页面上放置一个canvas
元素,就相当于在页面上放置了一块画布,可以在其中进行图形的描绘。
要指定的是 id
、width
、height
三个属性
<canvas id="canvas" width="400" height="300" />
7.地理定位:getCurrentPosition()
返回用户位置的经度和纬度
8.拖拽:
9.本地存储:
localStorage:没有时间限制的数据存储
sessionStorage:针对一个session的数据存储,当用户关闭浏览器窗口后,数据会被删除
10.新的事件:onresize、ondrag、onscroll、onmousewheel、onerror、onplay、onpause
事件 | 描述 |
onresize | 调整窗口大小时触发的事件 |
ondrag | 当元素拖拽时触发的事件 |
onscroll | 当滚动元素的滚动条变化时触发事件 |
onmousewheel | 当转动鼠标滚轮时候触发的事件 |
onerror | 当错误发生时触发的事件 |
onplay | 当媒介数据将要开始播放时触发的事件 |
onpause | 当媒介数据暂停时触发的事件 |
11.WebSocket:单个TCP连接上进行全双工通讯的协议
12.块级元素和行内元素的总结
块级元素:div、p、h1~h5、ul、ol、li、dd、table、hr、blockquote(标记长的引用)、address( 元素位于
行内元素:span、img、a、label、input、abbr(缩写)、em(强调)、big(呈现大号字体效果)、cite(引用a标签包裹引用的标题)、i(斜体)、q(标记短的引用)、textarea、select、small( 标签呈现小号字体效果)、sub(下标)、sup(上标)、strong(加粗)、u(下划线)、button
带有两个菜单按钮 ("File" 和 "Edit") 的工具栏,每个按钮都包含带有一系列选项的下拉列表:
<menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="file_new()">New...button> <button type="button" onclick="file_open()">Open...button> <button type="button" onclick="file_save()">Savebutton> menu> li> <li> <menu label="Edit"> <button type="button" onclick="edit_cut()">Cutbutton> <button type="button" onclick="edit_copy()">Copybutton> <button type="button" onclick="edit_paste()">Pastebutton> menu> li> menu>
标签的作用:
此标签用于标记一个缩写,当鼠标停留到标记的缩写上面时会展示"title"属性的全部内容
<html> <head> <meta charset="utf-8"> <title>abbr标签title> head> <body> <abbr title="中国航天四老之一">任新民abbr>,航天技术与液体火箭发动机技术专家,中国导弹与航天技术的重要开拓者之一。 body> html>