1 大纲
通过使用新的结构元素，HTML的文档结构比大量使用div元素的HTML44的文档结构清晰、明确了很多
所谓大纲，简单来说就是文档中各内容区块的结构编排，其中编排分为“显示”与“隐式”两种。
显示编排内容区块
示例：
<body>
<h1>网页级内容区块标题</h1>
<p>正文</p>
<section>
<h1> </h1>
<p> </p>
</section>
</body>
隐式编排内容区块
示例：
<body>
<h1>网页级内容区块标题</h1>
<p>正文</p>
<!--分析器根据h2等元素判断生成内容区块>
<h2> </h2>
<p> </p>
</body>
2 应用：
小米官网的制作
初步代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*通配符 选择网页当中的所有标签 */
*{
margin:0;
padding:0;
}
/*去除所有的ul和li的默认样式*/
ul,li{
/*去除列表的小原点*/
list-style: none;
}
/*去除网页当中所有a标签的下划线*/
a{
text-decoration:none;
}
/*将标签横过来*/
.list{
float:left;
100%;
height:40px;
background-color:white;
/*文字居中*/
text-align: center;
}
.list li{
float:left;
text-align: center;
100px;
height: 100%;
background-color: white;
/*文字居中*/
line-height: 40px;
margin-left: 20px;
}
.list li a{
color:#222;
float:left;
100%;
height: 100%;
}
.list li a:hover{
font-weight:bold;
color:red;
}
</style>
</head>
<body>
<div></div>
<div></div>
<img src=" ">
<div></div>
<ul class="list">
<li><img src="C:DocumentsDesktop杭州实习作业picture20190627130328.png"></li>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;">小米手机</a></li>
<li><a href="javascript:;">Redmi红米</a></li>
<li><a href="javascript:;">电视</a></li>
<li><a href="javascript:;">笔记本</a></li>
<li><a href="javascript:;">家电</a></li>
<li><a href="javascript:;">路由器</a></li>
<li><a href="javascript:;">智能硬件</a></li>
<li><a href="javascript:;">服务</a></li>
<li><a href="javascript:;">社区</a></li>
<li>
<form action="http://www.baidu.com/s",method="post">
<input type="text" name="wd" placeholder="小米9 小米9se">
<input type="submit" value="search">
</form>
</li>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
<li><a href="javascript:;"></a></li>
</ul>
<div class="shop-goods"></div>
<div> </div>
<div></div>
</body>
</html>
效果：
后续会争取把整个页面搞定！