HTML

• SEO（搜索引擎优化）
• 标签
  • img
  • video
    • 视频首屏最先加载方法
    • 引用视频播放失败
  • pre, code
• 属性
  • href
• 已知问题

---

SEO（搜索引擎优化）

搜索引擎优化（SEO）是一种通过优化网站来提高网站在搜索引擎中的自然排名的技术。以下内容将帮助开发者和内容创作者理解并实现有效的SEO策略。

标题和描述

• Title 标签： 每个页面都应有一个独特且描述性强的标题。这是搜索引擎结果中最先显示的部分。
• Meta Description： 提供一个页面内容的简洁概述。虽然它不直接影响排名，但好的描述可以提高点击率。

语义化标签

使用HTML5中的语义化标签（如<header>, <footer>, <article>, <section>等）不仅帮助搜索引擎理解页面结构，还有助于屏幕阅读器等辅助技术，提升网站的无障碍性。比方说：

1. h1 ~ h6 表示标题. 不准滥用h1标签
2. ul 标签多用于无序列表
3. ol 标签用于有序列表
4. dl 标签用于定义数据列表
5. em、strong 表示强调等

在表示列表时即便 ul 和 ol 自带的样式不是我们期望的，也可以通过重置样式来调整到我们想要的模样。

图片优化

• Alt 文本： 为所有图片提供描述性的 alt 文本，有助于搜索引擎理解图片内容，并在图片无法加载时提供文本替代。
• 文件大小： 优化图片以减少加载时间，使用适当的文件格式和压缩技术。

URL 结构

使用清晰和逻辑性强的URL结构，确保URL包含关键词，同时易于用户和搜索引擎理解。

移动优化

确保网站对移动设备友好，包括响应式设计或专门的移动版本。搜索引擎越来越重视移动优化作为排名的一个因素。

使用结构化数据

• Schema 标记： 通过使用Schema.org的标记，帮助搜索引擎理解页面内容的具体含义，这可以增强搜索结果的富媒体元素（如星级评分、价格范围等）。

内容质量

创建高质量、独特且相关的内容，定期更新内容，这对提高搜索引擎排名至关重要。

链接建设

• 内部链接： 合理安排网站内部链接，帮助搜索引擎更好地索引网站，同时提高用户体验。
• 外部链接： 来自其他可信网站的高质量外链可以显著提升网站的信誉及排名。

标签

img

<img /> 自适应 div 大小

img {
  max-width: 100%;
  max-height: 100%;
}

max-width:100% 和 width:100% 的区别在于:

max-width 是相对于 img 自身的尺寸而言的，意思是图片最大宽度为自身尺寸的宽，在这里就是 100px。而 width 的 100% 我们上面已经说过了是相对于父级宽度的，所以为了不让图片被放大后失真我们可以设置 img 的最大宽度为自身尺寸大小，更通俗的讲就是只允许缩小不允许放大 img。

HTML5 图片自适应:

<!--
* html 设置了 font-size: 62.5%;
* em 是相对 html 的 .50em 即 800px;
* picture 标签的兼容性是IE10 +
-->
<div class="item">
  <picture>
    <source srcset="img/xxx01-l.png" midia="(min-width: 50em)" />
    <source srcset="img/xxx01-l.png" hmidia="(min-width: 50em)" />
    <img srcset="img/xxx01.png" alt="something" />
  </picture>
</div>

video

视频首屏最先加载方法

如爱奇艺、优酷等以视频为核心的网站, 用户点击进来无非就像看视频. 在进行性能优化的时候, 理所当然的先让用户看到想要看到的东西(视频). 因此我们需要把视频和相关依赖文件等最先加载.

但是浏览器会默认的将多媒体资源放在最后面加载, 无论你的标签在文档中放的多靠前. 这时的解决方案就是将<script>(初始化视频的js文件)改用为<link>标签引用.

引用视频播放失败

在一些业务中，会使用到第三方的视频链接。然后该链接的提供者或许会根据referrer来判断来源，进而拒绝请求，视频将无法播放。因此可以在页面首部加上<meta name="referrer" content="no-referrer">.

但引用该头部后可能会影响其他依赖referrer的功能。比如百度统计会追踪referrer，设置no-referrer后将无法再进行统计。

遇到 403, 通常是防盗链在作用。

pre, code

Pre 和 Code 标签之间的区别

属性

href

href 属性常被 a 标签用于跳转。有时只是想通过 a 标签来模拟 UI，并不想跳转的话可以使用以下方式:

// 阻止浏览器的默认行为，表示交给 JavaScript 控制。不填会直接跳到页面顶部。
<a href="javascript:;">link</a>

// 使用锚点标签，### 创建一个不会出现在任何地方的 link
// 若只写一个 # 的话，还是会跳回页面顶部
<a href="###">link</a>

已知问题

• 在模块化工程中，<script> 标签加上了 type="ecmascript-6" 后, eslint 部分规则会失效。