快速上手
本章能让您快速了解 HTML 并学会编写它。
HTML 简介
HTML 指的是超文本标记语言: HyperText Markup Language。它是一种用来结构化 Web 网页及其内容的标记语言。
HTML 不是一门编程语言,而是一种用于定义内容结构的标记语言 (markup language)。HTML 由一系列的元素(elements)组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或者工作。标记标签 (markup tag) 是 HTML 的基本语法。一对标签 (tags) 可以为一段文字或者一张图片添加超链接,将文字设置为斜体,改变字号,等等。
特点
- HTML 使用标记标签来描述网页。
- HTML 文档包含了 HTML 标签及文本内容。
- HTML 文档也叫做 Web 页面。
例子
对于一段文字
Shimon Zhan is handsome.
HTML 可以将这行文字封装成一个段落(paragraph)元素来使其在单独一行呈现:
<p>Shimon Zhan is handsome.</p>
深入理解
HTML 中,除了语义,其他什么都没有。
HTML 是一个纯文本文件,用一些标签来描述文字的语义,这些标签在浏览器里面是看不到的,所以称为“超文本”,所以就是“超文本标记语言”了。
比如,面试的时候问您,h1
标签有什么作用?
给文本增加主标题的语义。✔️
给文字加粗、加黑、变大。❌
HTML 元素语法
一个元素是:
<标签名称 属性1="值1" 属性2="值2"...>内容</标签名称>
An element is:
<tagname attribution1="value1" attribution2="value2">content</tagname>
<p>Shimon Zhan is handsome.</p>
元素的主要部分有:
开始标签(Opening tag): 包含元素的名称(本例为 p),被
<
、>
所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。结束标签(Closing tag): 与开始标签相似,只是其在元素名之前包含了一个
/
。这表示着元素的结尾 —— 在本例中即段落在此结束。注意
忘记包含结束标签可能会产生一些奇怪的结果。
内容(Content): 元素的内容,本例中就是所输入的文本本身。
元素(Element): 开始标签、结束标签与内容相结合,便是一个完整的元素。
标签
<tagname ...>
是开始标签,</tagname>
是结束标签。
案例中起始标签为 <p>
内容为 Shimon Zhan is handsome.
闭合标签为 </p>
。
开始标签常被称为 起始标签(Opening tag),结束标签常称为 闭合标签(Closing tag)
自闭合标签
如果标签内部没有内容,可以直接使用一个特殊的写法完成自身的闭合,即为自闭合标签。
格式:
<tagname attribution1="value1" attribution2="value2" />
即:
<标签名称 属性1="值1" 属性2="值2"... />
例子:
<input type="text" />
<!-- 属性="值" -->
<div style="height:100px" />
<!--这里空的 div 用于占位置,“撑起”一块空间-->
空标签
由于历史原因,一些 HTML 标签在设计时就不包含内容(例如: 图片 <img>
,折行 <br>
,分割线 <hr>
,输入框 <input>
等),这些标签被称为空标签。
在空标签内部添加内容是没有任何作用的,同时,空标签在初始时没有结束标签,以自身结束。
常见的空标签有 br
、hr
、img
,不过还是建议写作 <br />
、<hr />
、<img />
。
标签的嵌套
除了并列放置标签以外,标签的内容也可以放置其他标签,这就构成了标签的嵌套。比如您想强调 Shimon Zhan 的帅:
<p>Shimon Zhan is <strong>very</strong> handsome.</p>
总结
- HTML 元素以 开始标签 起始
- HTML 元素以 结束标签 终止
- 元素的内容 是开始标签与结束标签之间的内容
- 某些 HTML 元素具有 空内容 (empty content)
- 空元素 在开始标签中进行关闭 (以开始标签的结束使用
/
而结束) - 大多数 HTML 元素可拥有属性
HTML 属性
属性包含元素的额外信息,这些信息不会出现在实际的内容中。
一个属性必须包含如下内容:
- 在属性与元素名称 (或上一个属性,如果有超过一个属性的话) 之间的空格符。
- 属性名称,后面跟着一个等于号。
- 一个属性值,由一对引号
" "
引起来。
比如 <img src="/logo.svg" />
,attribute
为 src
,value
是 /logo.svg
属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。
在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如: name='John "ShotGun" Nelson'
提示
尽管不包含 ASCII 空格(以及 "
'
`
=
<
>
)的简单属性值可以不使用引号,但是建议将所有属性值用双引号(除必须使用单引号的情况)括起来,这样的代码一致性更佳,更易于阅读。
适用于大多数 HTML 元素的属性
属性 | 描述 |
---|---|
class | 为 HTML 元素定义一个或多个类名 (classname) |
id | 定义元素的唯一 id |
style | 规定元素的行内样式 (inline style) |
title | 描述了元素的额外信息 |
布尔属性
有时您会看到没有值的属性,它是合法的。这些属性被称为布尔属性,他们只能有跟它的属性名一样的属性值。例如 disabled
属性,他们可以标记表单输入使之变为不可用(变灰色),此时用户不能向他们输入任何数据。
<input type="text" disabled="disabled" />
方便起见,我们完全可以将其写成以下形式:
<!-- 使用disabled属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled />
后缀名
HTML 文档的后缀名是 .html
。
HTML 结构
一个符合最新标准的 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></body>
</html>
其中:
<!DOCTYPE html>
是在 HTML5 标准下要求的,必须放在每个 HTML 文件的首行。对文档类型的声明。
DOCTYPE
可小写,此处无特殊要求。
每个网页应该在 HTML 里包含一个唯一的 <html>
标签。在 <html>
标签中,应该按照顺序包含 <head>
和 <body>
标签。
<head>
标签中,应该包含 <title>
标签注明文档的标题。
提示
<head>
元素是一个容器,它包含了所有您想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。这些内容包括您想在搜索结果中出现的关键字和页面描述,CSS 样式,字符集声明等等。
<meta charset="UTF-8" />
元素设置文档使用 utf-8 字符集编码。
UTF-8
utf-8 字符集包含了人类大部分的文字。基本上它能识别您输入的所有文本内容。使用它可以避免很多其他问题。
W3C 也将 UTF-8 标记为推荐的字符编码,所以建议在任何 HTML 文件中都添加此标签。
更多详情,请见 介绍 → head 标签。
:::
<body>
标签包含了您访问页面时所有显示在页面上的内容,文本,图片,音频,游戏等等。
HTML 空白
您可能已经注意到了在代码中包含了很多的空格——这是没有必要的。
<p>狗 狗
很 呆 萌。</p>
<p>狗 狗 很 呆 萌。</p>
无论您在 HTML 元素的内容中使用多少空格(包括空白字符,包括换行),当渲染这些代码的时候,HTML 解释器会将连续出现的空白字符减少为一个单独的空格符。
那么为什么我们会在 HTML 元素的嵌套中使用那么多的空白呢? 答案就是为了可读性 —— 如果您的代码被很好地进行格式化,那么就很容易理解您的代码是怎么回事,反之就只有聚做一团的混乱。在 HTML 代码中,通常让每一个嵌套的元素以两个空格缩进。
特殊字符
在 HTML 中,字符 <
, >
,"
,'
和 &
是特殊字符. 它们是 HTML 语法自身的一部分, 那么您如何将这些字符包含进您的文本中呢, 比如说如果您真的想要在文本中使用符号 &
或者 <
号, 而不想让它们被浏览器视为代码并被解释?
我们必须使用字符引用 —— 表示字符的特殊编码, 它们可以在那些情况下使用. 每个字符引用以符号 &
开始, 以分号 (;
) 结束。
原义字符 | 等价字符引用 |
---|---|
< | < |
> | > |
" | " |
' | ' |
& | & |