跳到主要内容

一、 HTML 文档基本结构​

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta />
    <title>网页标题</title>
  </head>
  <body>
    <!-- 网页内容 -->
  </body>
</html>
信息

绝大数的 HTML 元素包含开始标签，随后是元素内容，最后是以结束标签结束。某些 HTML 元素还包含属性，用于储存元素的额外的设置或信息

元素结构示意


     属性名  |⇠ 属性值⇢|   |⇠⋯ 内容区 ⇢|
       |    |        |   |          |
       |    |        |   |          |
  <p class="p-primary"> 这是一个 P </p>
  |  |               ||            |
  |  |⇠⋯⋯⋯ 属性块 ⋯⋯⋯⇢||         结束标签
  |                   |
  |                   |
  |⇠⋯⋯⋯⋯ 开始标签 ⋯⋯⋯⋯⇢|

二、 <!DOCTYPE html> 的作用​

  • 告诉浏览器这是一个 HTML5 文档
  • 确保浏览器以标准模式渲染页面
  • HTML5 不需要 DTD（文档类型定义），区别于旧版 HTML

三、 <html> 根元素​

需要使用 lang 属性指定当前网页文档的语言，帮助搜索引擎和翻译工具识别。

四、<head> 元信息​

  • <meta charset="UTF-8">：指定字符编码，必须放在 <head> 的最前面，避免乱码
  • <meta name="viewport">：移动端适配核心，如 width=device-width, initial-scale=1.0
  • 其他 meta：description（页面描述，影响 SEO）、keywords（关键词）、robots（搜索引擎抓取规则）
  • <title>：页面标题，SEO 全中极高，需简洁准确，长度建议在 60 字符以内

1. 字符编码指定​

UTF-8 包含世界大多数书写语言的字符。它基本可以处理任何文本内容。

  • 嗯，需要放到 <head> 的最前面，避免乱码。必须是指定为 UTF-8，因为其为 HTML5 的唯一有效编码。
  • 声明字符编码的 <meta> 元素必须完全位于文档的前 1024 个字节内。

2. 页面标题​

页面的标题是网页的 SEO 的何姓，长度建议在 60 个以内。

3. 页面描述​

使用 <meta name="description" content="..."> 来描述页面，是搜索引擎摘要

4. 关键词​

使用 <meta name="keywords" content="..."> 来用关键词描述网页的重点，但现代搜索引擎已弱化了其作用

5. 视口配置​

  • 移动端必备：<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • width=device-width：宽度等于设备宽度。
  • initial-scale=1.0：初始缩放比例 1:1。
  • 其他常用参数：maximum-scale（最大缩放）、user-scalable=no（禁止用户缩放，不推荐）。

6. 指定网页的图标​

16 像素的方形图标是比较推荐的类型，但是一般（像素）都比较大。

<link rel="icon" href="favicon.ico" type="image/x-icon" />

7. 指定当前网站的安装​

使用 manifest 指示当前网站可本地

五、 <body> 元素​

该元素包含期望让用户访问页面时看到的全部内容，包含文本、图像、视频、游戏、可播放的音轨或其他的内容。

六、基本内容元素​

  • 标记元素：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
  • 段落元素：<p>、<span>
  • 图像元素：<img>
  • 列表元素：<ul>、<ol>、<li>
  • 链接元素：<a>

七、 HTML、XHTML、HTML5 的区别​

  • HTML：灵活、不严格
  • XHTML：更严格，基于 XML 的 HTML 版本
  • HTML5：全新的标记语言，有自己的解析规则，不需要 DTD