HTML + CSS 连载 | 01 - HTML 结构及元素

一、HTML 文档结构

HTML 即(HyperText Markup Language)超文本标记语言。

HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记 标签
HTML 使用标记 标签 来描述网页

一个完整的 HTML 文档结构应该包含基本的 文档声明 以及 <html> 元素，而 <html> 中又分为 <head> 元素和 <body> 元素。

HTML 文档结构中的 <!DOCTYPE html> 称为文档声明，用于声明文档类型，文档声明必须放在 HTML 文档的最前面，且不能省略，否则会出现兼容性问题。

HTML 的文档声明除了可以声明文档类型，还可以声明 HTML 版本，在浏览器渲染该页面的时候告诉浏览器使用指定的文档规范来解析文档。

HTML 的文档声明相比于其他文档声明要简洁的多，比如 XML 的文档声明非常繁琐。

二、HTML 文档元素

<html> 元素是 HTML 文档的根元素，所有其他的元素都是此元素的后代，即嵌套在该元素中；一个元素由标签组成，有的元素是单标签，有的元素由开始标签和结束标签组成。

W3C 标准建议为 <html> 标签增加一个 lang 属性，该属性可以帮助语音合成工具确定要使用的发音，可以帮助翻译工具确定要使用的翻译规则。

html 复制代码

<html lang="zh-CN">
    <!--HTML 元素-->
</html>

其中 zh-CN 和 en 表示中文和英文。

head 元素及配置

<head> 元素中定义了文档相关的配置信息或者元数据，元数据就是描述数据的数据，这里可以理解为对这个页面的配置，这些配置信息包含文档的标题 title、引用的文档样式 meta 以及脚本 script 等。

body 元素及子元素

<body> 元素的子元素就是在浏览器中显示的东西，也就是网页具体的结构和内容，<body> 中包含非常多的元素，所有的元素都可以从具体的 HTML 文档中查询到，但是常用的元素有以下几个：

h 元素
p 元素
img 元素
a 元素
iframe 元素
div 元素
span 元素

h 元素

h 元素是页面的标题元素，h 是 heading 的缩写，通常用来表示页面中比较重要的内容，h 元素有六种不同的标题类型，分别是 h1~h6，其中 h1 级别最高，h6 级别最低。

p 元素

p 元素表示一个段落，p 是 paragraph 的缩写，多个 p 元素段落之间有一定的间距

我们通过 Chrome 的检查工具，可以看到段落之间是有一定间隙的，这是 p 元素本身自带的样式决定的。

img 元素

当我们需要在网页上显示一张图片的时候，需要使用到 img 元素来表示，img 元素可以将图片嵌入到 HTML 文档中，img 是 image 的缩写，img 是一个 可替换元素。

img 元素由两个属性，分别是 src 和 alt 属性：

html 复制代码

  <img src="" alt="">

src 属性是 source 单词的缩写，即图片来源，是必填的属性，包含了想要嵌入的图片的路径；alt 属性不是必填的，该属性由两个作用，当图片加载不成功时显示 alt 的属性值，即一段文本，第二个作用是屏幕阅读器会将这些藐视展示给需要使用阅读器的读者听，使他们能够明白图片的含义或者解释。

img 的 src 属性

img 的 src 属性表示图片的路径，该图片可以是一个本地的图片，本地图片需要和 HTML 一起部署到服务器中，本地图片又可以通过绝对路径和相对路径来表示

当然这个图片也可以是一个网络上的图片，直接给一个 URL 地址即可。

在使用相对路径时， . 表示当前文件夹，.. 表示上一级文件夹。

img 元素的 src 属性支持非常多的图片格式，包括后缀为 apng、.avif、bnp、.gif、.png、.svg 以及 .jpg .jpeg 等格式。