html5新增元素

最新推荐文章于 2021-02-03 18:54:56 发布

ITDragon龙

最新推荐文章于 2021-02-03 18:54:56 发布

阅读量4.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html5 前端技术文章标签： html5 新特性

本文链接：https://blog.youkuaiyun.com/qq_19558705/article/details/50488418

前端技术同时被 2 个专栏收录

20 篇文章

订阅专栏

html5

13 篇文章

订阅专栏

学习中做的笔记。

一张图告诉你有那些知识

代码：说明在注释中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>html5新标签</title>
		<style type="text/css">
			* {margin: 0;padding: 0;}
			a{text-decoration: none;display: inline-block;}
			header {width: 100%;height: 54px;color: #fff;background: linear-gradient(180deg, rgba(45, 45, 45, 1) 0, rgba(22, 22, 22, 1) 50%, rgba(45, 45, 45, 1) 100%);}
			header h2{text-align: center;line-height: 54px;}
			header nav{float:right;margin-top: -23px;}
			header nav a{color:#fff;padding:0 6px;}
			#no1,#no2{width:100%;background: #eee;padding: 10px 0;}
			aside{width: 35%;height: 360px;background: #333;position: absolute;right: 0;top: 35%;color:#EAE8E8;}
			aside progress{background: rgba(0,0,0,0.2);/*不知道为什么添加了progress后背景是白色 添加去色*/}
			footer{width:100%;height:30px;color:#fff;text-align: center;margin-bottom:0;background: #C5C2C2;}
		</style>
	</head>
	<body>
		<!--头部标签，有利于搜索引擎的搜索-->
		<header>
			<h2>html5新标签头部标签</h2>
			<!--专用于菜单导航-->
			<nav>
				<a href="#no1">nav</a>
				<a href="#no2">菜单</a>
				<a href="#no3">导航</a>
			</nav>
		</header><!--header end-->
		
		<!--区域-->
		<section id="no1">
			<!--告诉搜索引擎这是一个标题-->
			<hgroup>
				<h1>html5教程</h1>
				<h2>新增元素</h2>
			</hgroup>
			<!--文章-->
			<article>
				以下新增元素都是在为了方便搜索引擎的捕获信息；
			    结构性标签（construct tag）主要负责Web的上下文结构的定义，确保  HTML文档的完整性，这类标签包括以下几个。
				<p>①section：用于表达书的一部分或一章，或者一章内的一节。在Web页面应用中，该标签也可以用于区域的章节表述。</p>
				<p>②hgroup：对网页或区段（section）的标题进行组合。</p>
				<p>③header：页面主体上的头部，注意区别于head标签。这里可以给初学者提供一个判断的小技巧：head标签中的内容往往是不可见的，而header标签往往在一对body标签之中。</p>
				<p>④footer：页面的底部（页脚）。通常，人们会在这里标出网站的一些相关信息，例如关于我们、法律申明、邮件信息、管理入口等。</p>
				<p>⑤nav：是专门用于菜单导航、链接导航的标签，是navigator的缩写。</p>
				<p>⑥article：用于表示一篇文章的主体内容，一般为文字集中显示的区域。</p>
			</article>
		</section><!--no1 end-->
		<!--区域-->
		<section id="no2">
			<!--指定内容为流内容一般与figcaption连用-->
			<figure>
				<figcaption>这是一张图片</figcaption>
				<img src="img/404.jpg" width="580" height="425"/>
			</figure>
		</section><!--no2 end-->
		<!--侧栏内容用于补充主体内容-->
		<aside>
			<article>
				行内语义性标签（in-line tag ）主要完成Web页面具体内容的引用和表述，是丰富内容展示的基础，这类标签包括以下几个。
				<p>①meter：表示特定范围内的数值，可用于工资、数量、百分比等 max表示最大值，min表示最小值，value代表当前值。</p>
				<!--范围取值-->
				<meter max=10 min=0 value=4 id="meter_test"></meter>
				<p>②time：表示时间值，属性datetime强调时间</p>
				<p>③progress：用来表示进度条</p>
				<!--进度条-->
				<progress max=10 min=0 value=1 id="progress_test"></progress>
			</article>
			<article>
				<p>①datalist标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。</p>
				<input type="text" list="datalist_test" placeholder="请输入内容"/>
				<datalist id="datalist_test">
					<option>内容一</option>
					<option>内容二</option>
					<option>内容三</option>
					<option>内容四</option>
				</datalist>
			</article>
			<article>
				<p contenteditable="true">我是可编辑内容</p>
			</article>
		</aside>
		<!--页脚，一般显示页面相关信息，如关于我们，邮件，法律责任等-->
		<footer>
			&copy;ITDragon博客
		</footer>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" ></script>
	<script>
		$(function(){
			$("#meter_test").click(function(){
				var _value = $(this).val();
				if (_value == 10) {_value = 0;}
				$(this).val(_value + 1);
			});
			var progress_time = setInterval(function(){
				var _value = $("#progress_test").val();
				if (_value == 10) {_value = 0;}
				$("#progress_test").val(_value + 1);
			},800);
		});
	</script>
	</body>
</html>

做的笔记，方便记忆和查询。

个人主页：http://www.itit123.cn/ 更多干货等你来拿