html文档结构
<!-- 定义文件格式，浏览器会将此文件自动识别为html文件 --><!DOCTYPE html><!-- 语言标识 --><html lang="en"> <!-- 头元素，浏览器使用的，一切特定信息 --> <head> <!-- 字符集 --> <meta charset="UTF-8" /> <!-- viewport:视口，width=device-width：设备宽度，initial-scale：缩放 --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- 网页名称 --> <title>html文档结构</title> </head> <!-- 主体元素，用户可以看到的页面布局位置 --> <body> <div> <span> <p>文档基本结构</p> </span> </div> </body></html>
- 如代码所示，html文档整体包裹在html标签内，head标签内部是给浏览器使用的一些元素，body内部是给用户展示的内容。
内容结构
- 如图所以，这个html网页所包含主要分为三部分，页眉、页脚、主体内容。
- header标签，页眉标识，一般和nav导航标签使用
- main标签，主体标识，一般和article、aside、section一起使用
- footer标签，页脚标识，一般和address、div一起使用
- article标签，内容主体部分
- aside标签，侧边栏使用
- section标签，广告位等重复性较多时使用
- 借鉴文章地址：https://segmentfault.com/a/1190000002695791
- 示例代码
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>内容结构</title> </head> <body> <!-- 页眉-导航 --> <!-- html5写法 --> <header> <nav> <a href="">首页</a> <a href="">分类</a> <a href="">购物车</a> <a href="">个人中心</a> </nav> </header> <!-- html4写法 对比之后发现，版本更新之后更加简洁，而且语义化更强--> <!-- <div id="header"> <ul style="list-style: none;"> <li style="float: left;">首页</li> <li style="float: left;">分类</li> <li style="float: left;">购物车</li> <li style="float: left;">个人中心</li> </ul> </div> --> <!-- 主体 --> <main> <article> <header> <h1>html学习的第一天</h1> <p> 今天学习了很多html5的知识，也了解了很多html的特性以及语义化的含义 </p> <aside> <ul> <li>名次1</li> <li>名次2</li> </ul> </aside> <p> 今天学习了很多html5的知识，也了解了很多html的特性以及语义化的含义 </p> </header> <section> <h2>广告位1</h2> <h2>广告位2</h2> <h2>广告位3</h2> </section> <section> <h2>广告位4</h2> <h2>广告位5</h2> <h2>广告位6</h2> </section> <aside> <h2>侧边栏</h2> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </aside> </article> </main> <!-- 页脚 --> <footer> <address>北京市海淀区中关村葫芦岛市</address> <a href="baidu">网站地址</a> <a href="tc">作者</a> <a href="tel:1877877655">电话</a> <a href="mailto:19898799@163.com">邮箱</a> </footer> </body></html>
