Web前端开发技术

Appearance

HTML文档 ​

元信息 ​

  • 目标：掌握 HTML 文档的必备骨架——html 顶层元素包住唯一的 head 与 body，并建立"不同读者读不同部分"的视角（人读 body、浏览器读 head、爬虫读元标记）
  • 关键概念：HTML文档、html元素、head、body、元标记（meta）、字符编码、SEO
  • 关联阶段：cp1
  • 常见误区：以为 <head> 里的是"网页顶部"（它不渲染，存的是给浏览器读的处理指引）；以为 meta/字符编码可有可无（错配即中文乱码）；以为标题只给人看（title 与元标记正是爬虫判断页面的依据）

文档 ​

由HTML各标记进行描述的页面，也称之HTML 文档 document。

HTML文档必须由如下部分组成：

<html> 标记 ​

<html> ... </html> 是一个html文档必备的元素，且必须位于最外层或最顶层，且必须是唯一的

<html> 元素必须包含一个且唯一<head> 元素和一个且唯一<body>元素

<head> 标记 ​

<head> ... </head> 是一个必备的标记元素，它包含的信息用于描述当前文档应当如何被显示或渲染，以方便浏览器正确处理后面的文档正文，而其自身是不会被浏览器直接显示或渲染的。譬如：

  • <title>我的简历</title> ,'我的简历'出会现在浏览器窗口的顶端状态条中

<body> 标记 ​

  • <body> ... </body> 是一个必备的标记元素，它包含着文档的正文部分，将被浏览器渲染后输出给终端用户
  • <h1> <p> <a> 等等语义标记，必须出现在<body>区域，用于刻画内容的语义

元标记 ​

在<head>标记，还包含一类特殊的标记，称之元标记，是关于如何处理html文档的特殊标记，它的读者是浏览器，其目的是方便浏览器正确的解析、处理和渲染html文档的内容

  • <meta charset="utf-8">, 表示当前页面内容所使用的字符编码，如果你的页面中包含中文字符，而此处定义为<meta charset="iso-8859-1"> 或者未定义，则浏览时则可能会出现乱码

不同的读者 ​

  • 人类用户：关注的是<body>中的内容
  • 浏览器
    • 关注的是<head>的内容，从而正确渲染(显示或语音朗读）当前的文档内容
  • 爬虫（百度、google等）
    • 特别关注的元标记等内容，获得相关指引，正确读取和理解当前的文档内容，并进行分析、索引和归档
    • 衍生出来的产业：搜索引擎优化 SEO

扩展阅读 ​