html5新增语义化标签详解
时间：7年前 阅读：4550
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<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>
</head>
<body>
<!--头部-->
<header>
头部用 header 标签
</header>
<!--头部结束-->
<!--导航条-->
<nav>
<a href="">首页</a>
<a href="">Html/Css</a>
<a href="">JavaScript</a>
<a href="">jQuery</a>
<a href="">PHP</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>
<!--底部结束-->
</body>
</html>
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知
网友评论