HTML5新标签
html标签的语义化
- 语义化标签更具有可读性，便于团队的开发和维护
- 没有css的情况下，网页也能很好的呈现出内容结构和代码结构
- 关于SEO，搜索引擎更能理解到网页中各部分之间的关系，更准确更快速搜索信息
header标签
- 用来定义文档（网页或者是某一个段落）的页眉（头部）
- 可能包含一些标题元素，也可能包含其他元素，比如logo、搜索框、作者信息等等
<header>元素不是分段内容，而是属于独立分块的头部.因此不会往 大纲 中引入新的段落。也就是说，<header>元素通常用于包含周围部分的标题（h1 至 h6 元素），但这不是必需的。- 完成的网页或者是完整的块（网页的一个独立区域）是头部、内容、 尾部组成的（并不是强制）
- 整个页面没有header限制个数，可以使用多个
<header>元素不能作为<address>、<footer>或另一个<header>元素的子元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>header标签</title>
</head>
<body>
<div>
<!--头部区域-->
<header>
<h1>你看我像不像logo</h1>
<nav>
<a href="###">news</a>
<a href="###">my</a>
<a href="###">tiyu</a>
</nav>
</header>
<!--内容区域-->
</div>
</body>
</html>footer标签
- footer标签代表一个网页或者章节内容的底部区域（页脚）
- footer通常包含章节的作者，版权数据和文章的其他链接
- 其他和header同理，比如不是独立的区域，应该是隶属于一个章节或者是网页
<footer>元素不能作为<address>、<header>或另一个<footer>元素的子元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>footer</title>
</head>
<body>
<div>
<!--头部区域-->
<header>
<h1>你看我像不像logo</h1>
<nav>
<a href="###">news</a>
<a href="###">my</a>
<a href="###">tiyu</a>
</nav>
</header>
<!--内容区域-->
<!--底部区域-->
<footer>
<div>
<h3>友情链接</h3>
<a href="###">百度</a>
<a href="###">阿里巴巴</a>
<a href="###">阿里妈妈</a>
</div>
</footer>
</div>
</body>
</html>nav标签
<nav>元素表示页面的一部分，其目的是在当前文档或其他文档中提供导航链接。- 导航部分的常见示例是菜单，目录和索引
- 并不是所有的导航都需要用nav标签，只是当前页面中比较重要的热门的可以使用nav，比如在底部导航，就没有必要加入链接
- 一个网页可能会有多个导航，比如整个网页的导航，也可以是某一块区域的导航
注意 nav使用有两种方法：
-
当nav中的导航列表是静态的：nav中直接嵌套a标签使用即可
-
当nav中的导航是动态的（需要滑动查看更多，主要出现在移动端）：nav中最好嵌套ul>li>a标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nav标签</title>
</head>
<body>
<div>
<!--头部区域-->
<header>
<h1>你看我像不像logo</h1>
<nav>
<a href="###">news</a>
<a href="###">my</a>
<a href="###">tiyu</a>
<a href="###">tiyu</a>
<a href="###">tiyu</a>
<a href="###">tiyu</a>
</nav>
<!--
<nav>
<ul>
<li><a href="###">news</a></li>
<li><a href="###">news</a></li>
<li><a href="###">news</a></li>
<li><a href="###">news</a></li>
<li><a href="###">news</a></li>
<li><a href="###">news</a></li>
<li><a href="###">news</a></li>
<li><a href="###">news</a></li>
<li><a href="###">news</a></li>
</ul>
</nav>-->
</header>
<!--内容区域-->
<!--底部区域-->
<footer>
<div>
<h3>友情链接</h3>
<a href="###">百度</a>
<a href="###">阿里巴巴</a>
<a href="###">阿里妈妈</a>
</div>
</footer>
</div>
</body>
</html>section标签
- section是html中一个独立的区域（主要针对网页分块），没有其他语义，一般会包含一个独立的标题
- 假设有一个效果，上边是nav导航栏，导航栏一般对对应一个区域，用来显示这个导航到的内容，这个区域我们就可以使用section
- section主要是对网页进行分块，也可以对网页中的某块内容进行分块
- 通常一个完整的section是有标题和内容组成的，不推荐给没有标题的区域设置section
- 如果想要给一个内容设置有个容器用来书写样式，那么还是推荐使用div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>section标签</title>
</head>
<body>
<div>
<!--头部区域-->
<header>
<h1>你看我像不像logo</h1>
<nav>
<a href="###">news</a>
<a href="###">my</a>
<a href="###">tiyu</a>
<a href="###">tiyu</a>
<a href="###">tiyu</a>
<a href="###">tiyu</a>
</nav>
</header>
<!--内容区域-->
<section>
<h2>我是section元素的头部啊啊啊啊啊</h2>
</section>
<!--底部区域-->
<footer>
<div>
<h3>友情链接</h3>
<a href="###">百度</a>
<a href="###">阿里巴巴</a>
<a href="###">阿里妈妈</a>
</div>
</footer>
</div>
</body>
</html>article标签
- 代表文档、页面、或程序中，可以独立的完整的被外部引用的内容
- 比如一篇博客、一篇文章、一段用户的评论、一个日历插件，或者是其他独立内容
- 一般来说 一个article也有自己的头部header，或者是footer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>article</title>
</head>
<body>
<div>
<!--头部区域-->
<header>
<h1>你看我像不像logo</h1>
<nav>
<a href="###">news</a>
<a href="###">my</a>
<a href="###">tiyu</a>
<a href="###">tiyu</a>
<a href="###">tiyu</a>
<a href="###">tiyu</a>
</nav>
</header>
<!--内容区域-->
<section>
<h2>这里是评论区域</h2>
<article>
<h3>评论人：张三</h3>
<p>今天天气真好</p>
</article>
<article>
<h3>评论人：李四</h3>
<p>今天天气真好</p>
</article>
<article>
<h3>评论人：王五</h3>
<p>今天天气真好</p>
</article>
</section>
<!--底部区域-->
<footer>