语义化：根据内容的结构，选择合适的标签 <hr> ## **语义化方法** div元素本身不具有语义，但是可以结合class、title、lang属性来表示具有语义的一组内容 time元素用于表示时间、address元素用于表示地址 ``` （1）根据文档上下文结构合理的选用最适合表达当前语义的标签； （2）尽可少使用无语义的标签 <div> 和 <span>； （3）不要使用带有样式的标签，比如：<b> 、 <u> 、 <font> 等，使用 CSS 设置； （4）标题标签的使用应该根据重要性逐级递减，没有断层，并且一个页面只能有一个 <h1>； （5）提高关键词密度，如图像的替代文本 alt，提示文本 title； （6）正确使用内容容器，比如段落 <p>，列表 <ul>, <ol>, <li>, <dl>, <dt>, <dd>; （7）需要强调的文本，可以使用 <strong> 或 <em> 标签（浏览器默认样式，能用 CSS 设置就不用）， <strong> 默认样式是加粗（不用 <b>），<em> 是斜体（不用 <i>）； （8）表格注意使用，标题 <caption>，表头 <thead>，表格主体（正文）<tbody>， 表注（页脚）<tfoot>。<tr> 定义表格行，<th> 定义表头，<td> 定义表格单元。 （9）表单域使用 <fieldset>标签，并且<legend> 标签为 <fieldset> 定义标题； （10）每个 <input> 标签对应的说明文本都需要使用 <label> 标签， 通过为 <input> 设置 id 属性，并且在 <lable> 标签中设置 for=id 使说明文本和对应的 <input> 关联。 ``` <hr> ## **语义化的好处** #### 4.1 页面结构清晰 去掉或 CSS 样式丢失的时候,也能让页面呈现清晰的结构，增强页面的可读性。 #### 4.2 支持更多设备 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页。 #### 4.3 利于SEO优化 和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。 #### 4.4 便于团队开发和维护 在团队中大家都遵循W3C标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。 ## SEO 1. 合理的title、description、keywords： title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同； description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同； keywords列举出重要关键词即可 2. 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页 3. 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的 　搜索引擎对抓取长度有限制，保证重要内容一定会被抓取 4. 重要内容不要用js输出：爬虫不会执行js获取内容 5. 少用iframe：搜索引擎不会抓取iframe中的内容 6. 非装饰性图片必须加alt 7. 提高网站速度：网站速度是搜索引擎排序的一个重要指标 为搜索引擎提供的关键字列表 `<meta name="keywords" content="HTML,ASP,PHP,SQL"/>` Description用来告诉搜索引擎你的网站主要内容 `<meta name="description" content="简介内容" />`