html5 语义化
HTML5 语义化标签
一.什么是语义化
html的布局以前使用的是div,就是简单的盒子的意思，尽管可以人为的添加class="header",但不能简单详细的表达出当前的盒子的意思。
根据MDN的描述，div元素并不强制性地定义一个章节，而语义化标签解决了这个问题，可以更好的生成大纲。
生成大纲的作用是：
1.有利于利用大纲渲染内容的辅助技术
2.有利于机器识别，如搜索引擎优化（SEO），盲人设备的识别与浏 览器爬虫
3.使开发者更好的阅读和理解
二.语义化标签的使用
2.1先解决语义化标签的兼容问题
早期IE是不支持html5新标签，所以可以有两种方式
第一种：自定义header标签，但不止有一个
js document.createElement('header');
css header{display: block; }
第二种:使用html5shiv.js（一个封装好的框架）,cdn或者下载下来
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
<!--[if lt IE 9]>
<script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
注意：html5shiv.js 引用代码必须放在 <head> 元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。
2.2有哪些标签及作用(不止以下)
1.显式定义的大纲节段是通过<body>, <section>, <article>, <aside>和 <nav> 这些标记中的内容。
section:定义文档中的节（section、区段）。
article:定义页面独立的内容区域。论坛帖子、杂志或新闻文章
aside:侧边栏或者标注框
nav：提供导航链接
标记节段的页眉和页脚：header,footer
2.分节根是一个HTML元素，这个元素可以拥有自己的大纲，但是元素内部的节段和标题对其祖先的大纲没有贡献。
<blockquote>, <details>, <fieldset>, <figure> 和<td>。
<blockquote>添加引文
<details>描述细节，类似于选项卡
<fieldset>对表单中的相关元素进行分组
<figure>引用图片，插图，表格，代码段，与 <figcaption> (定义标题)使用
https://blog.csdn.net/weixin_30896825/article/details/99467214
https://blog.csdn.net/lixiuxiu2017/article/details/79587490
https://blog.csdn.net/jeft_hai/article/details/82317780
https://www.cnblogs.com/kaizi/p/7245517.html
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document(文档)
