语义化

什么是语义化

• 每一个 HTML 元素都有具体的含义

  例子

元素	含义
a	超链接
p	段落
h1	一级标题
div	无语义
span	行级无语义
nav	导航
body	网页主体
footer	网页页脚

• 所有元素与展示效果无关

元素展示到页面中的效果，应该由 CSS 决定.

因为浏览器带有默认的 CSS 样式，所以每个元素有一些默认样式.

重要: 选择什么元素，取决于内容的含义，而不是显示出的效果

为什么需要语义化？

• 为了搜索引擎优化（SEO）

搜索引擎: 百度、搜搜、Bing、Google

每隔一段时间，搜索引擎会从整个互联网中，抓取页面源代码

• 为了让浏览器理解网页

阅读模式、语音模式

SEO 优化

• 响应式设计: 确保网站可以自适应不同设备的屏幕尺寸，提高移动设备用户体验.

• 图片优化: 通过压缩图片大小、添加 ALT 标签和描述等方式，让搜索引擎更好地理解图片内容.

• 网站速度优化: 通过压缩文件大小、使用 CDN、减少 HTTP 请求等方式，提高网站加载速度.

• URL 规范化: 确保 URL 结构简单明了，易于被搜索引擎索引，并且避免重复内容.

• HTML 标签优化: 正确使用标题标签（H1、H2 等）、段落标签、列表标签等 HTML 标签，使搜索引擎更好地理解页面结构.

• 内容分页: 对于较长的文章或列表页面，合理分页使得页面加载更快并提高用户体验.

• 超链接内部锚点: 在页面中使用锚点链接，让用户更方便地找到所需内容，同时也有助于搜索引擎理解页面内容结构.

• JavaScript 渲染优化: 对于使用 JavaScript 渲染的页面，确保页面内容被搜索引擎正常抓取，避免因为 JavaScript 渲染导致内容无法被搜索引擎索引.

• AMP 优化: 使用 Google 提供的 AMP 技术，优化移动端网页加载速度和用户体验.

• CDN 加速优化: 通过使用 CDN（内容分发网络）将网站资源分发到全球不同节点上，提高访问速度和稳定性.