HTML5学习随手记

html5

1999 年发布HTML4.01
2008年发布HTML5 2014年HTML5定稿

一、标签变化

doctype标签

作用：用来告诉浏览器关于页面使用哪个HTML版本进行编写。

常用DOCTYPE声明：
HTML 4.01 strict // 严格模式
HTML 4.01 Transitional // 过度模式，向下兼容
HTML 4.01 Frameset // 框架结构
HTML 5:

DTD文档类型定义
HTML的DTD中，使用xml定义HTML标签规范，比如a标签是什么意思什么作用，都在DTD中解释好了
HTML5中不基于SGML，所以不用DTD

h5新增的标签

1、结构标签（块状元素）–一个有意义的div
article
header
nav
section
aside
hgroup
figure
figcaption
footer
dialog

header/section/aside/article/footer 这些标签不要嵌套在里面
级别：header/section/footer > aside/article/figure/hgroup/nav > div/figcaption
用的时候，要按照级别来嵌套

2、多媒体标签
audio 音频文件属性标签：

<audio src="../xxx.mp3" autoplay="autoplay" loop="-1" controls="controls">
// autoplay 自定播放
// loop 循环次数 -1无限循环
// controls 显示控制台

// 另一种写法：
<audio autoplay="autoplay">
	<source src="xxx.mp3" type="audio/mpeg">
</audio>

video标签 和audio差不多

source标签

embed标签 标记定义外部的可交互的内容或插件 比如flash

<embed src="../../xxx.swf" width="1024" height="679"/>

H5中删除了的标签

• 纯表现的标签：Basefont big center font s strike tt u
• 对可用性产生负面影响的元素 ： frame frameset noframes（用iframe代替了），可以向下兼容，即使用到了frame标签等，也可以继续使用
• 产生混淆的元素：acronum applet isindex dir

H5属性变化

1、Input
type =“email”： 在form表单中提交时候，会验证输入的是否为EMAIL类型
type = “url”： 在手机端，会校验输入网址的格式，第三方输入法会联想.cn .com之类的在小键盘上边
type=“tel”： 手机端会自动加上-、86之类的帮助
type=“number”：手机端会调用数字小键盘，pc端可以限制数字格式和运算符号
type=“date”：手机端会调用年月日选择键盘
type=“month”：手机端会掉哦用年月选择键盘，ios年在左边，android年在右边
type=“week”：ios不支持了，安卓会让选择第几周
type=“time”：ios12小时的，安卓哦是24小时的
type=“datetime”：ios10之后不再兼容
type=“datetime-local”：时间选择框
type=“range”：范围选择
type=“search”：和input没有太大区别
type=“color”：颜色选择器
type=“tel”：

2、autocomplete属性，刷新之后历史数据可以以下拉框方式记忆

	// 这里是全局设置记忆
	<form action="xx" autocomplete="on"> 
    	<input type="text" name="text">
        // 这里是单个设置不记忆
        <input type="text" name="text" autocomplete="off">
    </form>

3、autofocus属性。自动获取聚焦
autofocus=“autofocus”
适用于所有input标签

4、multiple属性、规定输入域中可以选择多个值

• 选择文件时候，可以使用mutltiple属性
• type=“email"时候，用英文逗号”,"隔开，传给后端时候，是一个数组

5、链接属性
6、script属性
defer属性：规定当页面已经完成加载后，才会执行脚本
async：规定一旦脚本可用，则会异步执行，就是读到这个文件时候就执行