一、HTML5新特性
1、语义化标签 - 为页面提供更好的界面结构
header - 头部
footer - 尾部
nav - 导航
section - 段落
article - 独立内容
aside - 侧边栏
command - 命令按钮
details - 标题
dialog - 对话框
2、增强型表单
1、新的表单类型 type =
color - 颜色
date - 日期
datetime - 日期
datetime-local - 日期和时间
email - 邮箱
month - 月份
number - 数值
range - 数值范围
search - 搜索
tel - 电话
time - 时间
url - 链接
week - 周
2、新的表单属性
placehoder - string - 默认提示值
required - boolean - 输入值不能为空
pattern - 正则表达式 - 验证input的值
min和max - number - 设置元素最大值和最小值
step - number - 数值间隔
autofocus - boolean - 自动获取焦点
multiple - boolean - input可选择多个值
3、音频和视频
音频 audio
<audio controls>
<source src="xxx.ogg" type="audio/ogg">
<source src="xxx.mp3" type="audio/mpeg">
您的浏览器不支持audio元素
</audio>
视频 video
<video controls>
<source src="xxx.mp4" type="video/mp4">
<source src="xxx.ogg" type="video/ogg">
您的浏览器不支持video元素
</video>
4、canvas绘图
标签只是图形容器,绘图必须使用js。
5、SVG
基于XML描述的可伸缩的矢量图形
6、地理定位 Geolocation
7、拖放API
8、Web Storage
localStorage、sessionStorage
9、WebSocket
二、浏览器的标准模式和怪异模式 - 解析css
标准模式 - 浏览器按照W3C标准解析执行代码,拥有DOCTYPE声明
怪异模式 - 使用浏览器自身的方式解析代码,不太浏览器解析方式不一样
常见区别:
盒模型的处理差异:标准CSS盒模型的宽和高等于内容区的高度和宽度,不包含内边距和边框
行内元素的垂直对齐:标准模式下,图片是基线对齐的。而怪异模式对齐至盒子的下边框
三、xhtml、html、html5
html:超文本标记语言
xhtml:可拓展超文本标记语言,语法更加严格
html5:h5 ≈ html + css3 + js + API
四、meta
meta标签是HTML标记HEAD区的一个关键标签,提供文档字符集、使用语言、作者等基本信息,以及对关键词和网页等级的设定等,最大的作用是能够做搜索引擎优化(SEO)。
PS:便于搜索引擎机器人查找、分类,互联网应用应该要注意。