1、H5 的浏览器兼容
不同的浏览器显示的成果可能不一样。因为 HTML5 没有一个对立的规范,不同的浏览器解析时不一样的,当初还处于一个推广的阶段,然而大部分的时一样的
2、H5 新的文档申明
1)Html 4 的文档申明
2)Html 5 的文档申明
在 HTML 4.01 中,DOCTYPE 申明援用 文档类型定义 DTD(Document Type Definition),因为 HTML 4.01 基于 SGML(规范通用标记语言,是一种定义电子文档构造和形容其内容的国际标准语言;)。DTD 规定了标记语言的规定,这样浏览器能力正确地出现内容。
HTML5 不基于 SGML,所以不须要援用 DTD。
提醒:请始终向 HTML 文档增加 DOCTYPE 申明,这样浏览器能力获知文档类型。
扩大:CSS 盒子模型:CSS- 规范盒模型 & 怪异盒模型?
CSS 中 Box model 是分为两种:: W3C 规范 和 IE 规范盒子模型。
大多数浏览器采纳 W3C 规范模型,而 IE 中则采纳 Microsoft 本人的规范。
怪异模式是“局部浏览器在反对 W3C 规范的同时还保留了原来的解析模式”,怪异模式次要体现在 IE 内核的浏览器。
DOCTYPE 缺失则在 ie6,ie7,ie8 下将会触发怪异模式(quirks 模式)。
当不对 doctype 进行定义时,会触发怪异模式。
在规范模式下,一个块的总宽度 = width + margin(左右) + padding(左右) + border(左右)
在怪异模式下,一个块的总宽度 = width + margin(左右)(即 width 曾经蕴含了 padding 和 border 值)
3、H5 的特点
1)更简洁、然而在理论开发中要留神书写标准,利于前期保护
2)标签的语义化
扩大:语义化的重要性:
① 当页面加载失败的时候,还可能呈现出清晰的构造
② 有利于 SEO 优化,利于被搜索引擎收录(即使于网络爬虫的辨认)
③ 在我的项目开发及保护时,语义化的也很大水平上升高开发难度,节省成本
和新构造标签的区别和意义
3)语法更宽松
4)多设施跨平台
5)自适应网页设计
4、H5 新减少的语义化标签
header 头标签 header.html header_noLogin.html
nav
导航标签
article 文章标签
aside 侧边栏导航
footer 页脚 footer.html
section 章节、页眉、栏目
1)section
示意内容区块, 个别入章节、页眉、页脚或者页面中的其余局部。能够与 h1-h6 等元素联合起来应用,标示文档的构造
2)article
示意页面中的一块与上下文不相干的独立内容,譬如博客中的一篇文章或者报纸中的一篇文章
3)aside
Aside 示意 acticle 元素的内容之外的,与 article 元素的内容相干的辅助信息。
4)header
示意页面中一个内容区块或者整个页面的题目
5)footer
示意整个页面或者页面中的一个内容区块的脚注。一般来说,他会蕴含创作者的姓名、创作日期以及创作者分割信息。
6)nav
示意页面中导航链接的局部、① 传统的导航条 ② 腾讯新闻 ③侧边栏导航 ④内业导航:百度百科 ⑤翻页操作
7)figure
示意一段独立的流内容,个别示意文档主体流内容中的一个独立单元。规定独立的流内容(图像、图表、照片、代码等等)。应用 figcaption 元素为 figure 元素增加题目。
◆ figure 是一种元素的组合,带有可选 题目。用来示意网页上一块独立的内容。figure 元素的内容应该与主内容相干,但如果被删除,则不应答文档流产生影响。
◆ figcaption 示意 figure 的题目。从属于 figure,并且,figure 中只能搁置一个 figcaption
8)video
定义视频,比方电影片段或其余视频流
<video src=” 门路地址 ” controls> 您的浏览器不反对 video</video>
video 容许有多个 source 元素,source 元素能够连贯不同的视频文件,浏览器将应用第一个可辨认的格局进行播放
<source src=”video.ogg” type=”video/ogg”/><source src=”video.webm” type=”video/webm”/>
提醒:能够在开始标签和完结标签之间搁置文本内容,这样老的浏览器就能够显示出不反对该标签的信息。
param 元素容许您为插入 XHTML 文档的对象规定 run-time 设置,也就是说,此标签可为蕴含它的 <object> 标签提供参数。
<param name=”BorderStyle” value=”1″ /> name 定义参数的名称(用在脚本中)。
HTML5 里 video 标签反对哪些格局的视频文件?
Ogg: 带有 Threora 视频编码和 Vorbis 音频编码的 Ogg 文件;
MPEG4:带有 H.264 视频编码和 AAC 音频编码的 MPEG4 文件;
WebM:带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
9)embed
embed 标签用于定义嵌套的内容,包含各种媒体,格局能够是 midi、wav、AIFF、AU、MP3、Flash 等
10)audio
定义音频,比方音乐或其余音频流
<audio src=”someaudio.wav”> 您的浏览器不反对 audio 标签。</audio>
提醒:能够在开始标签和完结标签之间搁置文本内容,这样老的浏览器就能够显示出不反对该标签的信息。
11)mark
高亮显示文字,一个比拟典型的利用就是在搜寻后果中向用户高亮显示搜寻关键词。
12)canvas
示意图形,比方图标和其余图像。这个元素自身没有行为,仅提供一块画布,但它把一个绘图 API 展示给客户端 js,以使脚本可能把想绘制的货色绘制到这块画布上
<canvas id=“myCanvas”width=“200”height=“200”></canvas>
13)Datalist
datalist 提供一个当时定义好的列表,通过 id 与 input 关联,当在 input 内输出时就会有主动实现(autocomplete)的性能,用户将会看见一个下拉列表供其抉择。
14)output
示意不同类型的输入,比方脚本的输入
for:定义输入域相干的一个或多个元素。
form:定义输出字段所属的一个或多个表单。
name:定义对象的惟一名称。(表单提交时应用)
5、H5 新减少的表单元素
Search/tel/url/email/number/range/color/file/Datetime/date/month/week/time/datetime-local
1)email
专门用来输出 email 地址的文本框, 如果该文本框中内容不是 email 地址格局的,则不容许提交。但它不查看 email 地址是否存在。提交时能够为空,除非加上了 required 属性。具备 multiple 属性,它容许在该文本框中输出一串以逗号分隔的 email 地址。
2)url
url:专门用来输出 URL 地址的文本框。如果该文本框中内容不是 URL 地址格局的,则不容许提交。
3)number
Number:专门用来输出数字的文本框。在提交时会查看其中的内容是否为数字,具备 min、max、step 的属性。
<input name=“number1”type=“number”value=“25”min=“10”max=“100”step=“5”/>
4)range
是用来只允话输出一段范畴内数值的文本框,它具备 min 属性与 max 属性,及 step 属性,能够指定每次拖动的步幅。
<input name=“range1”type=“range”value=“25”min=“0”max=“100”step=“5”/>
min 最小值
max 最大值
step 数字距离
5)date pickers (date, month, week, time, datetime, datetime-local)
领有多个可供选取日期和工夫的新输出类型。date – 选取日、月、年 Internet Explorer 或 Firefox 不反对 “month” 元素。
month – 选取月、年 Internet Explorer 或 Firefox 不反对 “month” 元素。
week – 选取周和年 Internet Explorer 或 Firefox 不反对 “month” 元素。
time – 选取工夫(小时和分钟)Internet Explorer 或 Firefox 不反对 “month” 元素。
datetime – 选取工夫、日、月、年(UTC 工夫)Internet Explorer、Firefox 或者 Chrome 不反对 “datetime 元素,Safari 中局部反对。Opera 12 以及更早的版本中齐全反对。
datetime-local – 选取工夫、日、月、年(本地工夫)Internet Explorer 或 Firefox 不反对 “month” 元素。
留神,跟 input 标签设置款式一样,然而要设置标签中部分的款式不能实现。如扭转日历的背景色,色彩框的按钮成果等,这些都不能够实现。
6、H5 新减少的表单验证
1)placeholder
placeholder 属性:文本框处于未输出状态时文本框中显示的输出提醒。
2)autofocus
autofocus 属性:给文本框、抉择框、或者按钮控件加上该属性,当关上页面时,该控件主动取得国标焦点,一个页面只能有一个。
3)required
required 属性:验证输出不能为空
4)list
list 属性:联合 datalist 元素应用
5)autocomplete
autocomplete 属性:注:表单元素要必须有 name 属性。输出富足和所用的主动实现性能,是一个节俭输出工夫,同时也非常不便的性能。只有三种:on/off/””。on 可是显示指定候补输出的数据列表,应用 datalist 元素与 list 属性提供候补输出的数据列表,主动实现时,能够讲该 datalist 元素中的数据作为候补输出的数据在文本框中显示:
<input type=”text” name=”greeting” autoconplete=”on” list =”greeting”>
HTML5 减少了大量在提交时对表单及表单元素内容有效性验证的性能。
6)主动验证
min、max、step:为蕴含数字或日期的 input 类型规定限定(束缚)
max: 最大值
min: 最小值
step: 数字距离
7)勾销验证
novalidate 属性规定在提交表单时不应该验证 form 或 input 域。
注:novalidate 属性实用于 form 以及以下类型的 input 标签:text, search, url, telephone, email, password, date pickers, range 以及 color.