html5新增语义化标签详解

CSS

		<style type="text/css">    
			*{    
				padding: 0;    
				margin: 0;    
			}    
			body{    
				padding-bottom:100px ;    
			}    
			header{    
				width: 980px;    
				height: 130px;    
				border: 2px solid dodgerblue;    
				margin: 0 auto;    
			}    
			nav{    
				width: 980px;    
				height: 40px;    
				border: 5px solid green;    
				margin: 0 auto;    
			}    
			nav a{    
				display: block;    
				float: left;    
				text-decoration: none;    
				font-size: 20px;    
				text-align: center;    
				line-height: 40px;    
				color: blue;    
				width: 100px;    
			}    
			/*大区域开始*/    
			#myur{    
				width: 980px;    
				height: 400px;    
				border: 3px solid blue;    
				margin: 0 auto;    
			}    
			#myur aside{    
				width: 220px;    
				height: 400px;    
				background: blueviolet;    
				float: left;    
			}    
			#myur article{    
				width: 750px;    
				height: 400px;    
				background: palegreen;    
				float: right;    
			}    
			footer{    
				width: 980px;    
				height: 100px;    
				border: 5px solid green;    
				margin: 0 auto;    
			}    
		</style>

HTML

<!--头部-->    
<header>    
头部用 header 标签    
</header>    
<!--头部结束-->    
<!--导航条-->    
<nav>    
<a href="">导航条</a>    
<a href="">导航条</a>    
<a href="">导航条</a>    
<a href="">导航条</a>    
<a href="">导航条</a>    
<a href="">导航条</a>			    
</nav>    
<!--导航条结束-->    
<!--大区域开始-->    
<div id="myur">    
<!--侧边栏开始-->    
<!--侧边栏用aside-->    
<aside>    
下拉列表:    
<br />    
<select>    
<!--用optgroup对下拉列表分组   label标签; 标记-->    
<optgroup label="云浮">    
<option>云城区</option>	    
<option>云安区</option>	    
<option>郁南县</option>	    
<option>新兴县</option>	    
<option>罗定市</option>	    
</optgroup>    
<optgroup label="肇庆市">    
<option>肇庆市</option>	    
<option>端州区</option>	    
<option>鼎湖区</option>	    
<option>广宁县</option>	    
<option>怀集县</option>	    
</optgroup>    
</select>    
<!--<progress> 标签标示任务的进度（进程）。 prograss 进步; 前进意思; -->    
<!--简单理解 prograss  进度条-->    
<!--max最大值100,value当前值33-->    
<progress max="100" value="33"></progress>    
<!--min最小0 max最大100   low小于多少的意思 成度轻的 high大于80     类列一般用来衡量密码强度的那种效果-->    
<!--value="55"取值是中度的：小于30是轻的，30到80是中的，大于80是大的-->    
<!--meter计量器; 计量仪  也是进度条，进度条一般用得很少-->    
<meter min="0" max="100" low="30" high="80" value="55"></meter>    
</aside>    
<!--侧边栏结束-->
<!--article 表示显示文章内容区域标签-->    
<article>    
<h1>丈夫在家打游戏不管任何事, 说是为了教好孩</h1>    
<!--time这个标签用来指定发表文章内容的日期-->    
<!--属性pubdate：指示<time>元素中的日期/时间是文档（或最近的前辈<article>元素）的发布日期-->    
发表时间:<time pubdate="2018.04.27">2018.04.27</time>    
<!--属性datetime: 规定日期、时间，否则，由元素的内容给定日期、时间。-->    
<!--非当前时间用datetime声明-->    
<!--<time datetime="2020.06.06">2020.06.06</time>    
2020年大家看奥运会呀 -->    
<!--section 字面上理解为“块” 、“部分”。在html5网页中表现的意思跟字面理解差不多，即部分、块、模块，主要作用为对页面的内容进行分块或者对文章的内容进行分段。-->		    
<section>    
<h2>在家打游戏</h2>    
<p>不能这样打游戏的......《永恒之塔》从一月末开始便逐步回升，通过春节版本、春季活动等不断推出的内容重获玩家好感。据悉，4月末该游戏将推出樱花庆典，这将让其市场占有率进一步上涨。</p>    
</section>    
<section>    
<h2>对于理解他们作为玩家乃至消费者的角色至关重要</h2>    
<!--mark 突出显示文本，标注一下  默认是加黄色，这个是可以改的-->    
<!--ins：用下划线定义已经被插入文档如的文本，简单理解用下划线去强调的-->    
<!--del 理解为加删除线标注-->    
<p>中国的核心PC玩家每周<mark>花42个小时玩游戏</mark>，大部分都<ins>喜欢在高端PC上玩</ins>竞技类的游戏；与此同时，<del>核心手游玩家</del>每周玩游戏时长平均为25个小时，他们钟爱的游戏类型则是智能手机上玩法更为复杂的手游作品。</p>    
</section>    
</article>    
</div>    
<!--大区域结束-->    
<!--底部开始-->    
<!--底部专门的标签footer-->    
<footer>    
底部专门的标签footer    
<!--address字面理解为“地址”，在html5中，它用于文档或者文章作者或拥有者的联系信息。注意，这里放的不是字面上理解的“地址”，而是指“联系信息”，可以包括文档创建者的名字、站点链接、电子邮箱、真实地址、电话号码等各类联系信息。-->    
<address>广东云浮市郁南县什么街门牌号56号</address>    
<!--code表示用于标识程序代码   原样展示出来的代码     页面中放一些代码用code-->    
<code>arler('你好');</code>    
</footer>    
<!--底部结束-->

代码效果图片：

原文链接：https://www.qiquanji.com/post/7726.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。