HTML 基础 | zKing的学习乐园

# 关于 HTML 的版本

现在（除了上古版本）的浏览器都是使用 HTML5 为标准的 HTML 版本，关于 HTML5 之前的 HTML4 以及 XHTML 版本这里不会提及，详细内容可以直接上网查询。

# 怎样才算是一个 HTML 文件

首先，需要把文件后缀改成.html
然后，需要进行文档声明 <!DOCTYPE>
最后，使用简单的 HTML 标签，就可以写出一份 HTML 文件

<!DOCTYPE>声明叫做文件类型定义（DTD）
声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。
<!DOCTYPE>声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。DOCTYPE不存在或格式不正确会导致文档以怪异模式呈现。

# 常见元素和理解

HTML 文件到底是什么样的？可以看下一个标准的模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

根据这个模板，可以进行以下的分析和扩展

# html 区的元素

html
- 本身有一个 lang 属性来规定元素内容的语言。如果是中文的话，应该是 lang="zh-CN",当然也可以不写，浏览器会自动识别。
head
- 用于定义文档的头部， <head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
body
- 用来定义文档的主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）
- **注意：**现在为了性能优化，将 引用脚本<script> 放在 <body> 中

# head 区的元素

meta
- 可提供有关页面的元信息,针对搜索引擎和浏览器使用
title
- html 中的标题，显示在标签页中
style
- 直接在 html 中写 css
link
- 引入外部的 css 文件
script
- 可以直接在 html 中写 js，也可以引入外部的 js 文件
base
- 用于指定基础路径，很少使用

关于 meta 我另外进行了整理，请点击这里

# body 区的元素

div/section/article/aside/header/footer
- 这些元素一般用来进行页面布局的
h1-h5/p
- 展示标题和段落
span/em/strong
- 用于组合行内元素
table/thead/tbody/tr/td
- 用于表格布局
ul/ol/li
- 用于列表显示
a
- 超链接
img
- 插入图片
form/label/input/select/textarea/button
- 用于表单的使用
- 值得注意的是 form 有个 enctype 的属性，用于文件上传时使用

# 元素分类

按默认样式分类

（block）块级元素
- div、ul、li、dl、dt、dd、p、h1-h6、blockquote
（inline）行内元素
- a、b、span、strong、label、em
（inline-block）行内区块元素，对内inline，对外block
- img、input、select、button、textarea

另外，在这里提及一下空元素，即没有内容的 HTML 元素，例如 br、meta、hr、link、input、img等

# 元素嵌套关系

块级元素可以包含行内元素
块级元素不一定能包含块级元素
行内元素一般不能包含块级元素

为什么说是一般？

提问：为什么 a > div 是合法的
解答：不一定是合法的，a 标签在嵌套中可以算是透明的，所以取决于包含 a 标签的元素

# 元素默认样式和定制化

浏览器本身带有的默认样式，但这些样式已经不再满足人们的需求，所以需要自己定制
以前是使用 CSS reset 来重制默认样式，但是现在可以使用更好的方式—— Normalize.css