H5

最新推荐文章于 2021-09-02 09:59:21 发布

月光派件中。

最新推荐文章于 2021-09-02 09:59:21 发布

阅读量147

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/weixin_46064684/article/details/108918217

版权

H5

html5是什么

HTML5 技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。与传统的技术相比，HTML5 的语法特征更加明显，并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容，而且 HTML5中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。
HTML5 在 2012 年已形成了稳定的版本。
一句话概括，html5是html语言的第五次修改，相当于html的第五个版本。

html5的内容

新增标签：语义化更好
多媒体功能：video\audio
表单功能增强
新的属性
本地存储
获取拖拽内容信息
地理位置信息
canvas画布

H5新增标签

新增结构标签：（我们以前布局页面经常用到的是div或者span等，但是这些没有语义化）

标签名	标签	案例
页面头部标签	header
页脚底部标签	footer
导航	nav	`<nav><a href=''>首页</a></nav>`
划分区域	section
主题内容块	article
侧边栏	aside

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				text-align: center;
				font-size: 30px;
				color: #fff;
			}
			.top{
				width: 100%;
				height: 50px;
				background: #ccc;
			}
			.search_wrap{
				width: 100%;
				height: 150px;
				background: pink;
			}
			.search{
				width: 100%;
				height: 100px;
				background: red;
			}
			.nav{
				width: 100%;
				height: 50px;
				background:blue ;
			}
			.trans_img{
				width: 100%;
				height: 500px;
				background: yellow;
			}
			.content{
				width: 100%;
				height: 500px;
				background: green;
			}
		</style>
	</head>
	<body>
		<div class="top">头部</div>
		<div class="search_wrap">
			<div class="search">搜索框</div>
			<div class="nav"></div>
		</div>
		<div class="trans_img">轮播图</div>
		<div class="content">主题内容</div>
		<div></div>
	</body>
</html>

功能标签：

标签名	标签	案例
标题组合	hgrounp	`<hgrounp><h1></h1><h2></h2></hgrounp>`
进度条	progress	`<progress min='0' max='100' value='30' progress>`
选项列表	datalist	`<input type="text" name="" list="k" /><datalist id="k"><option value="html">html</option><option value="css">css</option><option value="js">js</option></datalist>`
定义对话框或窗口	dialog	`<dialog open> <dt>1问题</dt><dd>1答案</dd><dt>2问题</dt><dd>2答案</dd></dialog>`
媒体标签	figure
媒体组合标签	figcaption	`<figure><figcaption>标题</figcaption><p>标题内容</p></figure>`
标记标签	mark

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<mark>哈哈哈</mark>
		<hgrounp>
			<h1>标题1</h1>
			<h2>标题2</h2>
		</hgrounp>
		<progress min='0' max='300' value="100"></progress>
		<form>
			<input type="text" name="" id="list" value="" list="val"/>
			<datalist id="val">
				<option value="html">html</option>
				<option value="css">css</option>
				<option value="js">js</option>
			</datalist>
			<input type="submit" value="点击"/>
		</form>
		<!---------------------------------------------------------->
		<dialog open="open">
			<dt>你好</dt>
			<dd>你好</dd>
			<dt>你是谁</dt>
			<dd>我是大哥</dd>
		</dialog>
		<figure>
			<figcaption>啦啦啦</figcaption>
			<p>哈哈哈哈哈哈或或 哈哈哈</p>
		</figure>
		
		
		
		
		
		
	</body>
</html>

兼容IE低版本浏览器的办法(IE低版本把h5新增标签解析成了行元素)

手动创建：在js中创建h5新增标签，css中给h5标签添加display：block属性
举例：

<script type="text/javascript">
	var e=("abbr,article,aside,audio,canvas,datalist,details,"+"figure,footer,header,hgroup,mark,menu,meter,nav,output,"+"progress,section,time,video").split(',');
	for(var i=0;i<e.length;i++) {
		document.createElement(e[i]);
	}
</script>

网址链接：<script src="https://cdn.bootcss.com/html5shiv/3.7/html5shiv-printshiv.js"></script>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
本地链接:<script src="js/html5shiv.js"></script>

月光派件中。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5

H5html5是什么HTML5 技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。与传统的技术相比，HTML5 的语法特征更加明显，并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容，而且 HTML5中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。一句话概括，html5是h
复制链接

扫一扫