HTML

说在前面

又似李，说在前面！
HTML构成页面的元素（Element），DOM（Document Object Model）会将元素映射和解析，可以理解为，你写下的是元素，然后使用DOM操作他
如今各类框架（如Vue，React等）中的一些，支持使用JS生成所有DOM，我们基本就不搞那些骚操作了，但是，使用JS生成少量元素还是需要的
HTML中各种元素可以即时进行百度，记住一些常用标签即可
HTML的官方标准是W3C指定的，中文教程网页有W3School（http://www.w3school.com.cn/）和W3CSchool（https://www.w3cschool.cn/）等，至于为什么有两个，这之中历史有兴趣可以百度查看，习惯用哪个就用就行了

HTML概述

HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML是不是编程语言？

HTML 是不是编程语言这件事情比较有争议
W3C认为： HTML 不是一种编程语言，而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页

HTML 文档 = 网页

HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
即使使用PHP、JS等其他形式进行其他处理，最终展现出来的页面，都是由HTML组成的

HTML文档可以包含的内容

文本
- HTML对文本的支持是最丰富的，你可以设置不同级别的标题，分段和换行，可以指定文本的语义和外观，可以说明文本是引用自其它的地方，等等等等。
链接
- 链接用来指出内容与另一个页面或当前页面某个地方有关。
图片
- 图片用于使页面更加美观，或提供更多的信息。
列表
- 列表用于说明一系列条目是彼此相关的。
表格
- 表格是按行与列将数据组织在一起的形式。也有不少人使用表格进行页面布局。
表单
- 表单通常由文本输入框，按钮，多选框，单选框，下拉列表等组成，使HTML页面更有交互性。
框架
- 框架使页面里能包含其它的页面。

HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签包括单标签和双标签
- 大部分标签都是双标签
  - 双标签是 成对出现 的，比如 <b> 和</b>
  - 标签对中的第一个标签是开始标签，第二个标签是结束标签
  - 开始和结束标签也被称为开放标签和闭合标签
- 有一些标签是单标签
  - 单标签是单个出现的，在开始标签中结束，如<br />
  - 单标签以/>结尾，但是并非强制要求，可以省略，如<br>

使用小写HTML标签

如今的浏览器对HTML标签的大小写不敏感
但是我们仍然推荐使用小写HTML标签，可能今后的W3C规范会强制使用小写

双标签成对

双标签总是成对出现的，不能省略结尾标签
```
<p>This is a paragraph
<p>This is a paragraph
```
上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
今后可能禁止省略结束标签

本文内

在本文内的文本中，有以双标签开头标签指代其本身的情况，但是实际书写代码时必须以双标签为准

HTML 元素

概要

HTML 元素是浏览器解析书写的纯文本HTML标签的产物
HTML 元素和标签一般是可“通用”的，不加详细区分

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

HTML 元素的嵌套

大多数HTML元素可以进行嵌套，如

<html>
    <body>
        <p>This is my first paragraph.</p>
    </body>
</html>

嵌套需要进行层级对应
错误：嵌套需要符合标签配对（类似中括号，小括号配对）

<html>
    <body>
        <p>This is my first paragraph.
    </body>
        </p>
</html>

HTML 元素分类

块级元素（Block）

总是在新行上开始；
高度，行高以及外边距和内边距都可控制；
宽度缺省是它的容器的100%，除非设定一个宽度。
它可以容纳内联元素和其他块元素

内联元素（Inline）

又称“行内元素”
和其他元素都在一行上；
高，行高及外边距和内边距不可改变；
宽度就是它的文字或图片的宽度，不可改变
内联元素只能容纳文本或者其他内联元素

HTML标签的格式化

你可以注意到以上的标签进行了缩进处理，一般为了便于书写和观察，我们会按照HTML元素的嵌套层级进行缩进处理
在我们书写代码时将其进行缩进处理是个好习惯
通过格式化缩进，我们可以方便的观察出标签层级，避免缺少标签的出错情况
有时在发布时，为了缩减文件体积，我们会删除不需要的缩进和换行，相关程序可以百度查看

HTML元素的属性

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"或disabled。
属性总是在 HTML 元素的开始标签中规定，结束标签不得书写属性。
一些属性为通用属性，即：所有HTML标签都可使用，剩余属性可以通过查看文档得知

属性的书写

<a href="http://example.com" title="Link">This is a link</a>
<img alt="example" src="example.png" title="example" />

属性一般为小写，属性值推荐使用文本形式出现
两个属性中间以空格分隔
属性理论上不分先后，但是为了节约浏览器资源和加载时间（详见：渲染回流），我们制定了许多有利于渲染的规范（我们实际操作时，不一定要很严格遵守，平时不需要乱写就行了）

一些通用属性

全局属性

class

class 属性规定元素的类名（classname）。
class 属性大多数时候用于指向样式表中的类（class）。不过，也可以利用它通过 JavaScript 来改变带有指定 class 的 HTML 元素。
一个class可以赋给多个元素，一个元素可有多个class，以空格分隔
```
<element class="value">
```

值	描述
classname	规定元素的类的名称。如需为一个元素规定多个类，用空格分隔类名。

id

id 属性规定 HTML 元素的唯一的 id。
id 在 HTML 文档中必须是唯一的。
id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id 的元素改变或添加样式。
id必须是一对一的，即：一个id对应一个元素，一个元素最多只能有一个id
虽然不遵守该规范，浏览器也可解析，但是未知错误我们不推荐
```
<element id="value">
```

值	描述
id	规定元素的唯一 id。

style

style 属性规定元素的行内样式（inline style）
style 属性将覆盖任何全局的样式设定，例如在 <style> 标签或在外部样式表中规定的样式（优先级最高）。
其中内容书写同css，不需要加选择器及大括号{}
一般用于较少的css或特定元素（如该页面内只有一个元素使用该样式）
若样式很长，还是推荐使用css文件+class，原因：很长且单行可读性不佳，且一般编辑器中不会对引号内文本进行语法高亮处理，所以容易出错
```
<element style="value">
```

值	描述
style_definition	一个或多个由分号分隔的 CSS 属性和值。

常见的HTML标签

提示

由于HTML标签较多，请学会查文档，尽在此列出常用HTML标签及其功能
通常HTML页面不会用到很多类型的标签，较多的是结合css与js做出各类效果
以下内容从文档的上至下进行列举

html

此元素可告知浏览器其自身是一个 HTML 文档。
<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。正如您所了解的那样，文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。

head

<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定义文档的标题，它是 head 部分中唯一必需的元素。

title

<title> 元素可定义文档的标题。
浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。

link

<link> 标签定义文档与外部资源的关系。
<link> 标签最常见的用途是链接样式表。

script

<script> 标签用于定义客户端脚本，比如 JavaScript。
script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型，默认为JavaScript，即：如果书写js代码，不写type也可，但是还是推荐进行书写。
JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。

body

body 元素定义文档的主体。
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。），即：所有可视元素均应嵌套在body中

div

通用盒子

由于div除了display:block;之外一无所有，所以我们可以很方便的定义它的属性，在实际使用中是最常用的标签之一

<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

span

通用盒子

行内的div

<span> 标签被用来组合文档中的行内元素。

img

img 元素向网页中嵌入一幅图像。
以src属性连接网络上的图片资源

p

<p> 标签定义段落。
p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

br

<br> 可插入一个简单的换行符。
<br> 标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。请使用 <br />。
请注意，<br> 标签只是简单地开始新的一行，而当浏览器遇到 <p> 标签时，通常会在相邻的段落之间插入一些垂直的间距。

a

<a> 标签定义超链接，用于从一张页面链接到另一张页面。

iframe

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
用于在HTML页面中嵌入另一个HTML页面

h1-6

<h1> - <h6> 标签可定义标题。<h1> 定义最大的标题。<h6> 定义最小的标题。
由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。

table

<table> 标签定义 HTML 表格。
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

button

<button> 标签定义一个按钮。
在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
<button> 控件与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。
唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。
请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

form

<form> 标签用于为用户输入创建 HTML 表单。
表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。
表单用于向服务器传输数据。

code

<code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。
软件代码的编写者已经习惯了编写源代码时文本表示的特殊样式。<code> 标签就是为他们设计的。包含在该标签内的文本将用等宽、类似电传打字机样式的字体（Courier）显示出来，对于大多数程序员和 W3School 的用户来说，这应该是十分熟悉的。
只应该在表示计算机程序源代码或者其他机器可以阅读的文本内容上使用 <code> 标签。虽然 <code> 标签通常只是把文本变成等宽字体，但它暗示着这段文本是源程序代码。将来的浏览器有可能会加入其他显示效果。例如，程序员的浏览器可能会寻找 <code> 片段，并执行某些额外的文本格式化处理，如循环和条件判断语句的特殊缩进等。

aduio

<audio> 标签定义声音，比如音乐或其他音频流。
<audio> 标签是 HTML 5 的新标签。

video

<video> 标签定义视频，比如电影片段或其他视频流。
<video> 标签是 HTML 5 的新标签。

HTML

说在前面

HTML概述

HTML 文档 = 网页

HTML文档可以包含的内容

HTML 标签

HTML 元素

HTML 元素的嵌套

HTML 元素分类

块级元素（Block）

内联元素（Inline）

HTML标签的格式化

HTML元素的属性

属性的书写

一些通用属性

class

id

style

常见的HTML标签

html

head

title

meta

style

link

script

body

div

span

img

p

br

a

iframe

h1-6

table

button

form

code

aduio

video