HTML5在2014年就定稿了!!
HTML5≈html+css+javascript+api
DOCTYPE声明
定义和用法 –
1、必须在html文档的第一行
2、html:5按下tab键/!+ctrl+e—>生成html5的标准形式
3、不是html的标签
HTML5标签变化
DTD – 文档类型定义
1、DTD:可定义合法的xml文档构建模块,它使用一系列的合法的元素定义文档的结构
2、在html中:DTD规定了标记语言的规则,这样浏览器就能正确呈现器内容
3、html5:不在给予sgml,所以不需要再次引用dtd
(xml:扩充标记语言)
HTM DTD约束:
复制代码
1 //用于XHTML 4.0 的严格型
2 !DOCTYPE HTMLPUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”
3
4 //用于XHTML 4.0 的过渡型
5 !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”
6
7 //用于XHTML 1.0 的严格型
8 !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
9
10 //用于XHTML 1.0 的过渡型
11 !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”
新增的标签
1、结构标签
2、多媒体标签
3、web应用标签
4、其他标签
结构标签(块状元素) – 有意义的DIV
1、article – 标记定义一篇文章
2、header – 标记定义一个页面或者一个区域的头部
3、nav – 标记定义导航链接
4、section – 标记定义一个区域 – 用处比较大,因为网页中到处都是一个一个的区域
5、aside – 标记定义页面内容的侧边栏
6、hgroup – 标记定义一个文件中的一个区块的相关信息
7、figure – 标记定义一组媒体内容以及他们的标记 – 包裹的视频、音频表示一种语义
8、figcaption – 标记定义figure元素的标题
9、footer – 标记定义一个页面过着一个区域的底部
10、dialog – 标记定义一个对话框(会话框)类似于微信
结构标签补充
1、header/section/aside/article/footer这五个大标签不要嵌套在里面,他们作用大标签存在于外面
2、header/section/footer – 这三个级别最大> aside/article/figure/hgroup/nav相对于前面三个标签作为内层
3、以上前面三个和后面的五个不能互相嵌套
4、紧接着>div/figcaption这两个是一个级别的
多媒体标签
1、video – 标记定义一个视频
2、audio – 标记定义一个音频
3、source – 标记定义媒体资源
audio – 标记定义一个音频内容
1、音频属性:
autoplay(自动播放)
controls(控件播放)
loop(循环;值为-1时,无线循环)
src(资源路径)
controls(出现控制器)
2、音频格式:MP3、ogg、wav…
video – 标记定义一个视频
1、视频属性:
autoplay(自动播放)
controls(控件播放)
loop(循环;值为-1时,无线循环)
src(资源路径)
controls(出现控制器)
height(设置播放器的高度)
weight(设置播放器的宽度)
canvas标签 绘制图像 JavaScript – 标记定义图片使用
emed – 在html4中是存在的,但是备用标签,几乎不适用而且不被w3c认可,但是在html5中转正了
1、标签定义外部的可交互的内容或者插件,比如flash动画,定义一个容器,用来嵌入外部的应用
2、是html5中新标签(重新定义的)
3、可以插入flash动画也可以插入image图片
标签的意义
多媒体标签的出现意味着多媒体的发展以及支持,不使用插件的情况下即可随机操作多媒体,极大的提高了用户的体验。
状态标签 – web应用标签
meter – 状态标签(实时状态显示:气压、气温)
meter标签定义度量衡,仅用于已知最大和最小的度量
例如:磁盘使用情况、查询结果相关等
注意:meter不能作为一个进度条来使用!
是HTML5的新标签
meter属性
high(界定为高的范围)
low(界定为低的范围)
max(范围内最大值)
min(范围内最小值)
optimum(最优值)
value(实际值)
progress – 状态标签(任务状态过程:安装、加载)
定义运行中的进度(过程)
可以使用此标签显示
JavaScript(脚本语言)中耗费时间函数的进度
浏览器兼容性
1、meter – firefox、chrome、opera、以及safari6支持
2、progress – ie10+、firefox、opera、chrome、以及safari6支持
列表标签 – web应用标签
1、datalist – 为input标记定义一个下拉列表,配合option
兼容性:chrome、firefox、ie10以上及更高的版本;
2、details – 标记定义元素的详细内容,配合summary(内容的题目)
兼容性:chrome、firefox、safari6以上及更高的版本;
注释标签 – web应用标签
1、ruby – 标记定义注释或者音标
2、rt – 标记定义对ruby的注释内容文本
3、rp – 告诉那些不支持ruby元素的浏览器如何去显示
rp标签不可以放在rt标签内
其他标签
1、mark – 标记定义有标记文本(黄色选中状态)
兼容性:ie9+、firefox、chrome、opera、safari
2、output – 标记定义一些输出类型,计算表单配合oninput时间
HTML5删除标签 – 分为三类
1、纯表现的元素: basefont、big、center、font、s、strike、tt、u(用css表现)
2、对可用性产生负面影响的元素:frame、frameset、noframes框架元素 (iframe网页中的网页)
3、产生混淆的元素:acronym、applet、isindex、dir
重新定义的标签
显示不变,只是表达的含义上进行重新定义的标签
1、i/b(斜体/粗体;代表内联标签;失去表达重要的意思)
2、dd/dt(可以和details,figure,dialog一起使用,定义包含文本/汇总细节)
3、hr(不仅表示水平线,还可以表示主题结束)
4、menu(重新定义用户界面的菜单,配合conmand或者menuitem使用)
5、samll(表示小字体;用途例如:打印注释,法律条款)
6、strong(表示重要性胃不是强调符号)
文章中用到的部分标签属性的代码与注释(新人)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>111</title>
</head>
<body>
<div>
<label>完成任务80%:</label>
<progress max="100" value="80" />
<!-- 任务过程:安装加载 -->
</div>
<hr/>
<div>
<label>小明的成绩是否在60~80分之间:</label><br/>
<meter value="70" max="100" min="0" high="80" low="60" optimum="75"></meter>
<!-- 实时状态显示:气压,温度等 当前值;最大;最小;能到达的最好;能达到的最低;最优值。状态标签 -->
</div>
<hr/>
<div>
<label>小明的成绩打败了60%的学生:</label><br/>
<meter value="60" max="100" min="0%"></meter>
</div>
<hr/>
<div>
<input placeholder="请选择学习的语言" list="yy"/>
<!-- placeholder文本框提示信息,list引用数据列表与datalist id必须一样 -->
<datalist id="yy">
<!-- 下拉列表标签,出现文本域,可以填写没有的选项 -->
<option value="JAVA">JAVA</option>
<option value="C++">C++</option>
<option value="JavaScript">JavaScript</option>
<option value=".NET">.NET</option>
<option value="C#">C#</option>
</datalist>
</div>
<hr/>
<div>
<details open="open">
<summary>早发白帝城</summary>
<p>朝辞白帝彩云间,千里江陵一日还。</p>
<p>两岸猿声啼不住,轻舟已过万重山。</p>
<!-- 标记定义元素的详细内容,summary详细内容的名字 -->
</div>
<hr/>
<div>
<p>
<ruby>魑<rt>chi</rt></ruby>
<ruby>魅<rt>mei</rt></ruby>
<ruby>魍<rt>wang</rt></ruby>
<ruby>魉<rt>liang</rt></ruby>
<!-- ruby注释或音标,rt是对ruby的注释内容文本显示 -->
</p>
<p>
<ruby>魑<rp>(</rp><rt>chi</rt><rp>)</rp></ruby>
<ruby>魅<rp>(</rp><rt>mei</rt><rp>)</rp></ruby>
<ruby>魍<rp>(</rp><rt>wang</rt><rp>)</rp></ruby>
<ruby>魉<rp>(</rp><rt>liang</rt><rp>)</rp></ruby>
<!-- rp是告诉不兼容ruby的浏览器怎么显示,rp不可以放在rt里面。 -->
</p>
</div>
<hr/>
<div>
<P>你是<mark>猴子</mark>派来的救兵吗?</P>
<!-- make标记文本,被标记为黄色选中状态 -->
</div>
</body>
</html>
效果: