HTML学习笔记（一）

HTML 简介HTML 全称为Hypertext Markup Language的缩写，中文翻译为：超文本编辑语言。使用 HTML 编写的文档称为网页，目前最新的版本为 HTML5, 而使用最广泛的版本为 HTML4.1.
注意：HTML不是编程语言，而是标记语言。标记语言是一套标记标签，HTML使用标记标签来描述网页。
HTML 标记标签通常被称为 HTML标签( HTML tag).

HTML 标签是由尖括号包围的关键词。例如 .
HTML 标签通常是成对出现的。例如和 .
标签对中的第一个标签是开始标签，第二个是结束标签。
开始标签和结束标签分别又被称为开放标签和闭合标签。

HTML 文档 = 网页。HTML文档用来描述网页，它包含HTML标签和纯文本，因此HTML文档通常被称为网页。Web浏览器的作用就是读取HTML标签，并用网页的形式显示它们。浏览器不会显示HTML标签，而是使用标签来解释页面的内容。例如，下段代码为一份简单的HTML标签：

[/code][code]

复制代码

[/code][code]我的第一个标题

复制代码

[/code][code]我的第一个段落。

复制代码

[/code][code]

复制代码

[/code]我们可以使用自带的记事本应用，并将上述代码复制到记事本中，保存时文件扩展名为".html" 或 ".htm", 再用浏览器打开该文档，便可显示以下内容：[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-66eb546348973e549479725d97366262[/img]
我们来看上述代码：
[list][*] 与之间的文本描述网页。
[*] 与之间的文本是可见的网页内容。
[*] 与之间的文本被显示为标题。
[*] 与之间的文本被显示为段落。
[/list]实例HTML 标题(Heading)是通过 ~ 等标签定义的。例如：
[list][*][*][*][*][*][*][*][*][*][*][*][*][/list][code]

复制代码

[/code][code]

复制代码

这是一级标题

复制代码

这是二级标题

复制代码

这是三级标题

复制代码

这是四级标题

复制代码

这是五级标题

复制代码

这是六级标题

复制代码

[/code][code]

复制代码

[/code]用浏览器打开后，显示效果如下：[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-a6349b2fe109df584775a268a608ff2a[/img]
HTML段落通过标签进行定义：例如：
[list][*][*][*][*][*][*][*][*][*][*][/list][code]

复制代码

[/code][code]

复制代码

Test HTML document

复制代码

[/code][code]This is the first paragraph

复制代码

This is another paragraph

复制代码

[/code][code]

复制代码

[/code]用浏览器打开后，显示效果如下：[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-8e9d45437ec665849126a34d07c4c28e[/img]
HTML连接通过标签来定义：例如：
[list][*][*][*][*][*][*][*][*][*][*][*][/list][code]

复制代码

[/code][code]

复制代码

Test HTML document

复制代码

[/code][code]This is the first paragraph

复制代码

This is another paragraph

复制代码

[/code][code]This link is my blog

复制代码

[/code][code]

复制代码

用浏览器打开后，显示效果如下：
最下面一行可以打开，指向我的一篇博客，在上述代码中，herf 为属性，它可以用来指定链接的地址。
HTML图像通过标签定义。例如：

[/code][code]

复制代码

[/code][code]Test HTML document

复制代码

[/code][code]This is the first paragraph

复制代码

This is another paragraph

复制代码

[/code][code]This link is my blog

复制代码

[/code][code]这是我公众号

复制代码

[/code][code]

复制代码

[/code][code]

复制代码

用浏览器打开后，显示效果如下：
在该标签中，src 是属性，用来指向图片的地址。同时，可以添加属性 width 和 height, 用来改变图像的尺寸。另外，以上图像为我的公众号二维码
HTML 元素HTML 文档是由 HTML 元素定义的。HTML 元素：从开始标签到结束标签的所有代码。
HTML元素语法：

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

大多数HTML元素可以嵌套（即可以包含其他HTML元素）。HTML文档是由嵌套的HTML元素组成的。例如：

[/code][code]

复制代码

我的第一个标题

复制代码

[/code][code]

复制代码

上述代码中包含 3 个HTML元素。元素为：

我的第一个标题

复制代码

. 该元素定义了HTML文档的一个标题，该元素拥有一个开始标签和一个结束标签, 元素的内容是“我的第一个标题”。
元素为:

[/code][code]我的第一个标题

复制代码

[/code] 元素定义了HTML的主体，该元素拥有一个开始标签和一个结束标签，元素内容是另一个HTML元素(h1元素)。
元素为：
[list][*][*][*][*][*][/list][code]

复制代码

[/code][code]我的第一个标题

复制代码

[/code][code]

复制代码

元素定义了整个HTML文档，该元素拥有一个开始标签, 和一个结束标签, 元素内容是另一个HTML元素(body元素)。
在HTML中，即使忘记使用结束标签，大部分浏览器也会正确显示HTML, 例如：

[/code][code]

复制代码

第一段

复制代码

第二段

复制代码

[/code][code]

复制代码

在浏览器中，上述代码显示效果如下：但注意，我们并不建议使用如上代码的写法，原因如下：1. 可能存在浏览器不支持上述代码；2. 这是糟糕的习惯；3. 未来的 HTML 版本并不允许省略结束标签。
没有内容的HTML元素被称为空元素。空元素在开始标签中关闭。例如：就是没有关闭标签的空元素( 标签定义换行)
但是，在XHTML, XML以及未来版本的HTML中，所有元素必须关闭。为此，在开始标签中添加斜杠，例如：, 是关闭空元素的正确做法，XHTML, HTML, XML都接受这种方式。因此，即使浏览器接受形式，但为了长久考虑，应该使用的形式。
HTML对大小写并不敏感，例如等价于 , 在许多网站都是用大写的HTML标签。但是W3C（万维网联盟）在 HTML 4 中推荐使用小写，而在未来版本的 HTML 中强制使用小写。