HTML5简介与标签变化

最新推荐文章于 2024-04-20 09:58:02 发布

于珂琛。

最新推荐文章于 2024-04-20 09:58:02 发布

阅读量359

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/a815886696/article/details/107895452

版权

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>

效果：
在这里插入图片描述

于珂琛。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5简介与标签变化

HTML5在2014年就定稿了！！HTML5≈html+css+javascript+apiDOCTYPE声明定义和用法 – 1、必须在html文档的第一行2、html:5按下tab键/！+ctrl+e—>生成html5的标准形式3、不是html的标签HTML5标签变化DTD – 文档类型定义1、DTD：可定义合法的xml文档构建模块，它使用一系列的合法的元素定义文档的结构2、在html中：DTD规定了标记语言的规则，这样浏览器就能正确呈现器内容3、html5：不在给予sgml，
复制链接

扫一扫