前端开发(二):HTML的书写模板、了解HTML文档

前端开发(二):HTML的书写模板、了解HTML文档

 

模板可分解为 3 个部分:

  1. DOCTYPE:描述 HTML 的类型。尽管技术上存在不同的类型,但对于你将要编写的 99.999% 的 HTML 来说,<!DOCTYPE html> 是不错的选择。
  2. <head>:描述有关站点的元信息(例如标题),并提供网页正确渲染和交互,所需的脚本和样式表链接。
  3. <body>:描述用户将看到的网页上的实际内容。

 

当前的标准 HTML 规范被称为 HTML5;一旦声明了文档类型,HTML文档的下一部分就是<html>标签,告知浏览器应该将括在

<html> ...</html> 内的所有内容解析为 HTML。然后是 HTML 文档的两个主要部分:<head> 和 <body>

 

                                      前端开发(二):HTML的书写模板、了解HTML文档   

<head> 和 <body>

<head> 将包含有关页面的常规信息和元数据,而 <body> 将包含显示在该页面上的内容。

以下是整个 HTML 文档树结构的示例:

 

前端开发(二):HTML的书写模板、了解HTML文档

 

创建页面的内容,该内容始终包含在 <body> 标签内部。<body> 始终可见。

另一方面,<head> 是始终不可见的,但是其中描述页面的信息和指向其它文件的链接都是浏览器正确渲染网站所需要的。例如,<head> 负责:

  • 文档的标题(浏览器标签中显示的文本): <title>About Me</title>
  • 相关的 CSS 文件(针对样式):<link rel="stylesheet" type="text/css" href="style.css">
  • 相关的 JavaScript 文件(更改渲染和行为的多用途脚本):<script src="animations.js"></script>
  • 网页使用的字符集(文本的编码):<meta charset="utf-8">
  • 关键字、作者和描述(通常对搜索引擎优化(SEO) 起作用): <meta name="description" content="This is what my website is all about!">
  • … 等!

现在,我们只关注这两个标签:

  • <title>About Me</title>
  • <meta charset="utf-8">

<meta charset="utf-8"> 是十分标准的格式,它将允许你的网站显示任何 Unicode 字符。(单击此处了解更多有关 UTF-8 的信息。)<title> 将定义文档的标题,并在用户访问页面时显示在浏览器的标签中。

前端开发(二):HTML的书写模板、了解HTML文档

                                                                  完整的 HTML 模板

HTML 验证程序

似乎要记忆的内容很多,但庆幸的是, 有工具可以为你提供帮助。如同“优达学城前端反馈扩展”在你已满足特定项目的所有要求时通知你一样, HTML 验证程序 (https://validator.w3.org/) 会分析你的网站并验证你是否在编写有效的 HTML。例如,你把上面那一段模板代码输入进去,会收到一个 warning,因为 W3C 推荐给每一个 HTML 都加上默认语言。