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

一、前言

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

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

二、什么是HTML？

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

三、HTML标签

跳转至百度首页

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

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

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

四、属性

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

点击前往

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

五、元素

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

元素

六、元素分类 *

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

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

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

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

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

检查元素类型

七、标签嵌套

所谓标签的嵌套，是指一个标签对以内包含另外一个标签，如：标签内包含和两个标签对，而标签内又可以包含和

语法解读：

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