一、前言

一个基本的网站包含很多个网页，一个网页由HTML, CSS 和 JavaScript 组成。

HTML：结构层，决定网页的结构和内容（ “是什么”）
CSS：渲染层，设定网页的表现样式（ “长啥样”）
Javascript：行为层，控制网页的行为（ “做什么”）

二、什么是HTML？

HTML（Hyper Text Markup Language），即超文本标记语言。HTML 不是一种编程语言，而是一种标记语言 (markup language)，标记语言由一系列标签组成，通过标记标签来描述网页。

三、HTML标签

<a href="https://www.baidu.com">跳转至百度首页</a>

HTML 标记通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，如：<a>。
HTML 标签通常是成对出现的，如：<a> </a>。
标签对中的第一个标签（<a>）被称为开始标签，第二个标签（</a>）被称为结束标签。
开始和结束标签也被称为开放标签和闭合标签。

提示：在HTML中标签名是不区分大小写的，也就是说一个标签既可以全部写成大写的英文字母，也可以全部写成小写的英文字母（主流的写法），如：“<head>”写成“<HEAD>”，“<body>”写成“<BODY>”都不会影响页面的正常运行。甚至还可以将一个标签元素的英文字母大小混写都是不影响页面正常运行的，但这种做法会影响代码的可读性，并不推荐。

四、属性

HTML 标签可以拥有属性，属性提供了有关HTML标签的更多信息，属性总是以 属性名=属性值 的形式出现，属性一般定义在开始标签中。

<a href="https://github.com/LiHongyao" target="_blank">点击前往</a>

上述代码定义了一个 a 标签（超链接），该标签拥有 href 及 target 属性，提供了链接地址以及在什么窗口下打开新的页面，标签中的文本为呈现在页面上的内容。

五、元素

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码，即元素由开始标签、结束标签、属性以及显示内容组成。

元素

六、元素分类 *

HTML 元素分为块级元素（block）、行内元素（inline）以及行内块元素（inline-block），三种元素类型的特性如下：

块级元素：单独占一行，具备盒子模型，即可设置宽度和高度；
行内元素：不独占一行，不具备盒子模型，即不可设置宽度和高度，大小由内容决定；
行内块元素：不独占一行，不具备盒子模型，即不可设置宽度和高度；

提示：对于块级元素而言，即使你设置了宽高，其也会独占一行。

如何判断一个元素的类型？

在谷歌浏览器中鼠标右键检查元素，然后通过元素选取器选取要查看元素类型的元素，最后在computed中搜索display属性观察其值即可。如下所示：

检查元素类型

七、标签嵌套

所谓标签的嵌套，是指一个标签对以内包含另外一个标签，如：<html>标签内包含<head>和<body>两个标签对，而<head>标签内又可以包含<meta>和<title>等标签。也就是说标签不仅可以单独存在，又可以包含其它一个或多个标签，而且标签的嵌套可以是多层的，并且嵌套层数是没有限制的。

标签的嵌套根据代码规范性、性能和SEO（搜索引擎优化）等方面考虑，应当遵循以下规则：

HTML页面中所有需要显示在浏览器窗口内的内容均需要放置在<body>标签对以内。
在不影响页面显示、CSS样式设置和DOM操作的前提下，标签的嵌套层数是越少越好。
标签嵌套的基本顺序应该是：“块级标签>行内块标签>行内标签”。
同一个显示类型的标签可以进行嵌套，如：“块级标签>块级标签”、“行内块标签>行内块标签”和“行内标签>行内标签”。
避免使用“行内标签”去嵌套“行内块标签”和“块级标签”、“行内块标签”去嵌套“块级标签”，虽然有的时候在显示上并不会出现问题，但“行内标签”大部分是不具备布局属性的，需要进行显示类型转换（display）才能够进行CSS的布局设置，既麻烦，又不规范。

八、HTML 基本文档结构

HTML基本文档结构是指组成一个基本的HTML页面所必须的元素标签。具体编写格式如下：

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body></body>
</html>

语法解读：

< !DOCTYPE html>：指定文档类型
< html>：根标签。
< head>：网页头部，配置网页基本信息，如标题、编码格式、JS文件引入及层叠样式表引用等。
< meta>：设置编码格式，避免出现乱码。
<title>：设置网页标题。
<body>：网页内容。

WEB前端系列教程之HTML-C01：HTML概述