1. 布局标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>新增布局标签</title>
</head>
<body>
<!-- 头部 -->
<header>
<h1>xxx商城</h1>
</header>
<hr>
<!-- 主导航 -->
<nav>
<a href="#">首页</a>
<a href="#">订单</a>
<a href="#">购物车</a>
<a href="#">我的</a>
</nav>
<!-- 主要内容 -->
<div class="page-content">
<article>
<h2>感动中国人物</h2>
<section>
<h3>第一名：孙笑川</h3>
<p>男，籍贯四川，33岁</p>
</section>
<section>
<h3>第二名：药水哥</h3>
<p>真名刘波，男，籍贯湖北，30岁</p>
</section>
<section>
<h3>第三名：Giao哥</h3>
<p>男，籍贯河南，29岁</p>
</section>
</article>
<!-- 侧边栏导航 -->
<aside style="float: right;">
<nav>
<ul>
<li><a href="#">秒杀专区</a></li>
<li><a href="#">会员专区</a></li>
<li><a href="#">优惠券专区</a></li>
<li><a href="#">品牌专区</a></li>
</ul>
</nav>
</aside>
</div>
<hr>
<footer>
<nav>
<a href="#">友情链接1</a>
<a href="#">友情链接2</a>
<a href="#">友情链接3</a>
<a href="#">友情链接4</a>
</nav>
</footer>
</body>
</html>2. 状态标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>新增的状态标签</title>
</head>
<body>
<span>手机电量：</span>
<meter min="0" max="100" value="5" low="10" high="20" optimum="90"></meter>
<span>当前进度：</span>
<progress max="100" value="80"></progress>
</body>
</html>3. 列表标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>新增的列表标签</title>
</head>
<body>
<form action="#">
<input type="text" list="myData">
<button>搜索</button>
</form>
<datalist id="myData">
<option value="孙笑川">孙笑川</option>
<option value="药水哥">药水哥</option>
<option value="Giao哥">Giao哥</option>
</datalist>
<hr>
<details>
<summary>如何一夜暴富</summary>
<p>白日做梦</p>
</details>
</body>
</html>4. 文本标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>新增的文本标签</title>
</head>
<body>
<ruby>
<span>魑魅魍魉</span>
<rt>chī mèi wǎng liǎng</rt>
</ruby>
<hr>
<p>Lorem ipsum <mark>dolor</mark> sit amet consectetur adipisicing elit. Ipsa in quae molestias id nesciunt consequatur ex deserunt enim reiciendis obcaecati!</p>
</body>
</html>
评论 (0)