《30分钟重学HTML》之HTML入门（一）

时间 2020-06-27

原文原文链接

什么是 HTML?

HTML (HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于开发者。它由一系列的元素（elements）组成，这些元素能够用来包围不一样部分的内容，使其以某种方式呈现或者工做。一对标签（ tags）能够为一段文字或者一张图片添加超连接，将文字设置为斜体，改变字号，等等。html

HTML 标签不区分大小写。也就是说，输入标签时既可使用大写字母也可使用小写字母。 例如，标签 <title> 写做 <title>、<TITLE>、<Title>、<TiTlE>，等等均可以正常工做。不过，从一致性、可读性等各方面来讲，最好仅使用小写字母。编程

HTML 文档

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>个人测试站点</title>
  </head>
  <body>
    <p>这是个人页面</p>
  </body>
</html>
复制代码

分析以下:浏览器

<!DOCTYPE html>: 声明文档类型. 好久之前，早期的 HTML(大约 1991 年 2 月)，文档类型声明相似于连接，规定了 HTML 页面必须听从的良好规则，能自动检测错误和其余有用的东西。使用以下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 然而这种写法已通过时了，这些内容已成为历史。 只须要知道 <!DOCTYPE html> 是最短有效的文档声明。bash
<html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素。编程语言
<head></head>: <head>元素. 这个元素是一个容器，它包含了全部你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS 样式，字符集声明等等。之后的章节能学到更多关于<head>元素的内容。 <meta charset="utf-8">: 这个元素设置文档使用 utf-8 字符集编码，utf-8 字符集包含了人类大部分的文字。基本上他能识别你放上去的全部文本内容。毫无疑问要使用它，而且它能在之后避免不少其余问题。ide
<title></title>: 设置页面标题，出如今浏览器标签上，当你标记/收藏页面时它可用来描述页面。学习
<body></body>: <body>元素。包含了你访问页面时全部显示在页面上的内容，文本，图片，音频，游戏等等。测试

HTML 元素

开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。表示元素从这里开始或者开始起做用 —— 在本例中即段落由此开始。ui
结束标签（Closing tag）：与开始标签类似，只是其在元素名以前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者经常会犯忘记包含结束标签的错误，这可能会产生一些奇怪的结果。编码
内容（Content）：元素的内容，本例中就是所输入的文本自己。
元素（Element）：开始标签、结束标签与内容相结合，即是一个完整的元素。

元素分类

注: 查看-全部 HTML 元素

块级元素和内联元素

注: HTML5 从新定义了元素的类别：见元素内容分类(译文)。尽管这些新的定义更精确，但却比上述的 “块级元素” 和 “内联元素” 更难理解，所以在以后的讨论中仍使用旧的定义。我的认为：HTML5 对元素的从新定义,主要是创建在元素使用规范上。规范了某个元素它能够包含哪一类内容。例如: 章节元素<article>, <aside>, <nav> and <section>

在 HTML 中有两种你须要知道的重要元素类别，块级元素和内联元素。

块级元素在页面中以块的形式展示 —— 相对于其前面的内容它会出如今新的一行，其后的内容也会被挤到下一行展示。块级元素一般用于展现页面上结构化的内容，例如段落、列表、导航菜单、页脚等等。一个以 block 形式展示的块级元素不会被嵌套进内联元素中，但能够嵌套在其它块级元素中。
内联元素一般出如今块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会致使文本换行：它一般出如今一堆文字之间例如超连接元素<a>或者强调元素<em>和 <strong>。

注: 在这篇文章中提到的“块”和“内联”，不该该与 the types of CSS boxes 中的同名术语相混淆. 尽管他们默认是相关的，但改变 CSS 显示类型并不会改变元素的分类，也不会影响它能够包含和被包含于哪些元素。防止这种混淆也是 HTML5 摒弃这些术语的缘由之一。

注: 你能够查阅包含了块级元素和内联元素列表的参考页面—see Block-level elements and Inline elements.

行内元素(内联元素)参考

块级元素参考

空元素

不是全部元素都拥有开始标签，内容，结束标签。一些元素只有一个标签，一般用来在此元素所在位置插入/嵌入一些东西。例如：元素是用来在元素所在位置插入一张指定的图片。例子以下：

<img src="https://user-gold-cdn.xitu.io/2020/6/21/172d767cf4c3faba?w=256&h=256&f=png&s=55480">

复制代码

显示以下：

元素属性

元素也能够拥有属性，以下：

一个属性必须包含以下内容：

一个空格，在属性和元素名称，或属性与属性之间。
属性名称。
属性值，由一对引号“ ”引发来(布尔属性可省略)。

布尔属性

有时你会看到没有值的属性，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名同样的属性值。例如 disabled 属性，他们能够标记表单输入使之变为不可用(变灰色)，此时用户不能向他们输入任何数据。

例如：

<input type="text" disabled="disabled">

简写为=>

<input type="text" disabled>
复制代码

属性值的引号

虽然属性值不强制要求加引号。可是不加引号，会致使属性值有空格时的解析问题。如：

// 正确
<a href=https://www.mozilla.org/>收藏页面</a>

// 出错,
// 它会把title属性理解为三个属性——title的属性值为"The"，
// 另外还有两个布尔属性“Mozilla”和“homepage”
<a href=https://www.mozilla.org/ title=The Mozilla homepage>收藏页面</a>
复制代码

属性值的引号使用单引号或者双引号

都能正确解析。通常使用双引号。

HTML 空格

下面的两个代码片断是等价的：

<p>狗 狗 很 呆 萌。</p>

<p>狗 狗        很
         呆 萌。</p>
复制代码

不管你在 HTML 元素的内容中使用多少空格(包括空白字符，包括换行)，当渲染这些代码的时候，HTML 解释器会将连续出现的空白字符减小为一个单独的空格符。

那么为何咱们会在 HTML 元素的嵌套中使用那么多的空白呢? 答案就是为了可读性 —— 若是你的代码被很好地进行格式化，那么就很容易理解你的代码是怎么回事，反之就只有聚作一团的混乱.。在咱们的 HTML 代码中，咱们让每个嵌套的元素以两个空格缩进。你使用什么风格来格式化你的代码取决于你 (好比所对于每层缩进使用多少个空格)，可是你应该坚持使用某种风格。

HTML 特殊字符

在 HTML 中，字符 <, >,",' 和 & 是特殊字符. 它们是 HTML 语法自身的一部分, 那么你如何将这些字符包含进你的文本中呢, 好比说若是你真的想要在文本中使用符号&或者小于号, 而不想让它们被浏览器视为代码并被解释?

咱们必须使用字符引用 —— 表示字符的特殊编码, 它们能够在那些状况下使用. 每一个字符引用以符号&开始, 以分号(;)结束.

原义字符	转义字符
<	`<`
>	`>`
"	`"`
'	`'`
&	`&`

示例：

<p>HTML 中用 <p> 来定义段落元素。</p>

<p>HTML 中用 &lt;p&gt; 来定义段落元素</p>
复制代码

在下面的实时输出中，你会看到第一段是错误的，由于浏览器会认为第二个

是开始一个新的段落！第二段是正确的，由于咱们用字符引用来代替了角括号（'<'和'>'符号)。

HTML 中用
来定义段落元素。

HTML 中用 <p> 来定义段落元素
复制代码

维基百科上有一个包含全部可用 HTML 字符实体引用的列表：XML 和 HTML 字符实体引用列表。

HTML 注释

为了将一段 HTML 中的内容置为注释，你须要将其用特殊的记号包括起来，好比：

<p>我没有被注释！</p>

<!-- <p>我被注释了！</p> -->
复制代码

总结

理解 HTML 的文档结构
理解 HTML 的元素结构
理解 HTML 的空格
理解 HTML 的特殊字符
理解 HTML 的注释

参考资料

HTML 介绍—开始学习 HTML, developer.mozilla.org/zh-CN/docs/…