HTML5

HTML5即为html标准的第五次修订,主要添加了一部分具有语义化的标签,其目的在于更好地被机器阅读,很有意思.

与HTML4的区别:

  • 简化了文档声明
  • 添加了众多新元素,移除了部分元素
  • input添加了date,email,url等类型,减少了js的代码量
  • 添加了全域属性
  • 解析顺序修改
  • 表单新元素和属性

等等

文档声明
1
2
3
4
<!DOCTYPE HTML>

# meta元素也简化为
<meta charset="utf-8">
新元素
  • article: 文章
  • section: 文档中的节
  • aside: 边栏
  • header: 页眉,文档头部
  • footer: 文档底部内容
  • main: 内容主体
  • nav: 导航链接
  • figure或者figcaption: 标题
  • time: 时间

等等,不一一列举

input类型

详情见此

全域属性

全域属性是指所有元素都拥有的属性,最典型的是id和class

属性 说明
accesskey 键盘快捷键
dir 文字在容器的方向
tabindex 驻点索引
contenteditable 表示可以编辑
draggable/dropzone 支持拖拽
hidden 不可见
spellcheck 英文拼写检查
title 描述元素的提示信息
关于页面的解析顺序

涉及到性能优化,先跳过,以后专门记录

知乎解释

移除了一些标签

因为这些标签,已经被css取代

HTML DOM接口

详情

H5表单
1
2
3
4
5
6
Webpage: <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>

datalist有效的支持输入域的选项列表,通过指定input的list属性值为datalist的ID,option内部可以添加选项值
option元素必须设置value值

  • keygen(浏览器支持不高)
  • output: 用于不同类型的输出,少见.

关于新的表单属性

  • autocomplete: 表单由浏览器提示输入,保存可能上次输入的内容
  • autofocus: 页面加载自动获得焦点,适用于所有input标签
  • form: 在非form标签内部的input元素,可以通过设置此属性,值为某form的ID,则可以标识此input属于某个form
  • height和width: 只适用于image类型的input,未用到过.
  • min max step:很有趣的属性,可以构建一个可点击增加数和减少数的按钮,设置大小限制检查和间隔
  • multiple: 此属性的值同名,可以针对email和file类型的input,支持多输入,多文件同时提交
  • pattern: 对于input输入域的正则表达式检测,浏览器实现,另外建议同时添加title提示输入格式
  • placeholder: 常用的input默认值,获得焦点之后消失.
  • required: 常用,不能为空
视频和音频

首先,IE8不支持video元素,IE9仅仅支持MPEG4的video元素

video元素支持三种格式的视频:

  • ogg
  • mp4
  • webM

demo:

1
2
3
4
5
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

可以同时放多个视频源,浏览器选择可以使用的,controls属性提供控制框,其他属性:

属性 描述
autoplay 自动播放
loop 循环播放
preload 预加载
width和height 单位为px的宽高

类似哔哩哔哩,将默认控制样式隐藏,添加自定义的样式控制,video对象支持多个方法控制

音频:audio标签,类似于video,用到再查,不要死记硬背.

拖放

感觉页游用得很多吧

这个点另开一篇笔记

canvas

同上

SVG

同上

再列一些
  • 地理位置
  • web 存储在浏览器
  • web workers
  • 服务器发送事件