解决的问题：
Web浏览器间的兼容性很低
文档结构不够明确
Web应用程序功能受到限制
语法的改变
内容类型：扩展名依然为html htm
DOCTYPE声明：<!DOCTYPE html>
指定字符编码：<meta charset="UTF-8">
可以省略标记的元素
具有布尔值的属性 <input type="checkbox" checked>
省略引号：属性值可以省略引号
新增元素
section 内容块 章节、页眉、页脚
article 一篇文章
aside 辅助信息
header 顶部标题块
hgroup
footer 底部
nav 导航
figure 独立单元
video 视频
audio 音频
canvas 画布
废除元素
1.能用CSS替代的元素
2.不支持frame框架
3.只有部分浏览器支持的元素
新增属性
表单相关的属性
链接相关的属性
废除属性
全局属性
contentEditable属性 允许用户编辑元素中的内容
designMode属性 （on / off）整个页面是否可编辑，只能用JS修改编辑
hidden属性 布尔值 true 不可见 false 可见
spellcheck属性 对用户输入的文本内容进行拼写检查
tabindex属性 Tab键第几个访问到
article元素
文档、页面或应用程序中独立的内容
可以嵌套
可以用来表示插件
section元素
对网站或应用程序页面上的内容进行分块
注意：
1 通常不推荐没有标题内容使用section元素
2 不要与article混淆
3 不要将section作为设置样式的容器
section和article元素的区别
article可以被视为特殊的section，强调独立性
nav元素
传统导航条
侧边栏导航
页内导航
翻页操作
aside元素
当前页面或文章的附属信息
1 包含在article元素，用于解释article
2 全局的aside 侧边栏、弹出广告单元等
time元素和pubdate属性
header元素
放置整个页面或页面内的一个内容区块的标题
可以出现多次
footer元素
脚注信息，显示底部的作者、版权信息等
hgroup元素
分组元素，对标题进行分组
多重子标题时使用
<hgroup>
<h1>这是主标题</h1>
<h2>这是子标题</h2>
</hgroup>
address元素
呈现联系信息，邮箱、地址等
HTML5表单新增元素与属性
form属性
H4里面，表单元素必须写在表单内部
H5中，可以把表单元素写在任何位置，加一个from属性，属性值为form的id
formaction属性
H4 一个表单内的所有元素，必须通过表单的action属性，提交到同一个页面***.php
H5 可以通过设置formaciton属性，将表单内的元素，分别提交到不同的页面
formmethod属性
H4 一个表单中只能有一个提交方法 get / post
H5 对每一个表单元素，指定不同的提交方法
formenctype属性（**********）
H4 一个表单只能有一个enctype属性，设置表单数据的编码方式
H5 分别设置
formtarget属性
H4 一个表单只能有一个target属性， 表单提交后的页面打开方式
H5 每个表单元素分别的打开方式
_blank 新页面
_self 当前页面
_parent 父框架
autofocus 属性
设置控件自动获得光标焦点
required 属性（属性值为boolean类型）
输入元素，如果内容为空，则不允许提交，并显示提示文字。
labels属性
相当于一个控件所属的label数组，操作JS时用的
control属性
在标签内放置一个表单元素，通过该标签的control属性，可以访问该元素
placeholder属性 类似于 Android的hint属性 模糊提示
list属性
1. 创建表单元素，设置 list = "***";
2. datalist元素，id = “list属性值” style="display:none"
<option value="">值</option>
autocomplete 自动补全 （属性值 on off）
和list配套使用
pattern属性 设定正则表达式
selectionDirection属性 Chrome不支持
indeferminate属性 复选框
indeterminate 尚未明确是否选取的状态
image类型的提交按钮可以设置width height
改良的input元素
url类型 （相当于自带了一个正则表达式，验证输入内容为网址）
email类型（相当于自带了一个正则表达式，验证输入内容为邮箱）
date类型 自带一个控件，设置日期
time类型 自带一个控件，设置时间
datetime类型 、datetimelocal类型
month类型、week类型
number类型（如果不是数字，返回空字符串）
range类型 拖动条 step 每次拖动的值
search 类型
color类型 用于选择颜色选择器 onchange
output元素追加
表单验证 novalidate (规定提交表单不进行验证)
增强的页面元素
figure元素 （图片 统计图 代码示例等）
网页上独立的内容
figcaption figure标题 ，只能存在于figure中,只能放置一个
details元素和summary元素
<details id="details" onclick="">
<summary>速7</summary>
<p id="content" style="visibility:hidden">内容</p>
</details>
通过detail.open来操作
mark元素 起到高亮效果
progress元素 min max value属性
meter元素
ol元素
start属性：从哪个数字开始
reversed 倒序
dl元素
<dt></dt>
<dd></dd>
cite元素 包装文本，关于标题的引用，变成斜体
small元素 标示小字印刷体
HTML5 音视频
音频播放
<audio> src control属性
视频播放
<video> control width height src
chrome safari 支持mp4
ff 支持 ogg
<video controls="controls">
<source src="*.mp4">
<source src="*.ogg">
</video>
H5 拖放
拖动开始 ondragstart调用了一个函数 drag(event) 它规定了被拖动的数据
设置拖动数据 setData() 设置被拖数据的数据类型和值
放入位置 ondragover 事件规定在何处放置被拖动的数据
放置 ondrop 当放置被拖数据时，发生drop事件
Canvas \ 文件存储（看完JS再回头学）
响应式布局
优点： 面对分辨率设备灵活性强
缺点：效率低、代码累赘
CSS3中的 media query
设备宽高 device-width device-height
渲染宽高 width height
手持方向 orientation
分辨率 resolution
media="only screen and (max-width:800px)"
@media screen and (min-width:640px)
Bootstrap
下载： getbootstrap.com
bootstrap.min.css
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
