快速上手

Mr.Hope ... 2019-09-01 HTML
  • 快速上手
大约 8 分钟

本章能让您快速了解 HTML 并学会编写它。

# HTML 简介

HTML 指的是超文本标记语言: HyperText Markup Language。它是一种用来结构化 Web 网页及其内容的标记语言。

HTML 不是一门编程语言,而是一种用于定义内容结构的标记语言 (markup language)。HTML 由一系列的元素(elements)组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或者工作。标记标签 (markup tag) 是 HTML 的基本语法。一对标签( tags)可以为一段文字或者一张图片添加超链接,将文字设置为斜体,改变字号,等等。

特点

  • HTML 使用标记标签来描述网页。
  • HTML 文档包含了 HTML 标签文本内容。
  • HTML 文档也叫做 Web 页面

# 例子

对于一段文字

Mr.Hope is handsome.
1

HTML 可以将这行文字封装成一个段落(paragraph)元素来使其在单独一行呈现:

深入理解

HTML 中,除了语义,其他什么都没有。

HTML 是一个纯本文文件,用一些标签来描述文字的语义,这些标签在浏览器里面是看不到的,所以称为“超文本”,所以就是“超文本标记语言”了。

比如,面试的时候问您,h1 标签有什么作用?

  • 给文本增加主标题的语义。✔️

  • 给文字加粗、加黑、变大。❌

# HTML 元素语法

一个元素是:

<标签名称 属性1="值1" 属性2="值2"...>内容</标签名称>
1

An element is:

<tagname attribution1="value1" attribution2="value2">content</tagname>
1

元素的主要部分有:

  • 开始标签(Opening tag): 包含元素的名称(本例为 p),被 <> 所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。

  • 结束标签(Closing tag): 与开始标签相似,只是其在元素名之前包含了一个 /。这表示着元素的结尾 —— 在本例中即段落在此结束。

    注意

    忘记包含结束标签可能会产生一些奇怪的结果。

  • 内容(Content): 元素的内容,本例中就是所输入的文本本身。

  • 元素(Element): 开始标签、结束标签与内容相结合,便是一个完整的元素。

# 标签

<tagname ...> 是开始标签,</tagname> 是结束标签。

案例中起始标签为 <p> 内容为 Mr.Hope is handsome. 闭合标签为 </p>

开始标签常被称为 起始标签(Opening tag),结束标签常称为 闭合标签(Closing tag)

# 自闭合标签

如果标签内部没有内容,可以直接使用一个特殊的写法完成自身的闭合,即为自闭合标签。

格式:

<tagname attribution1="value1" attribution2="value2" />
1

即:

<标签名称 属性1="值1" 属性2="值2"... />
1

例子:

<input type="text" />
<!--  属性="值"  -->

<div style="height:100px" />
<!--这里空的 div 用于占位置,“撑起”一块空间-->
1
2
3
4
5

空标签

由于历史原因,一些 HTML 标签在设计时就不包含内容(例如: 图片 <img>,折行 <br>,分割线 <hr>,输入框 <input> 等),这些标签被称为空标签。

在空标签内部添加内容是没有任何作用的,同时,空标签在初始时没有结束标签,以自身结束。

常见的空标签有 brhrimg,不过还是建议写作 <br /><hr /><img />

# 标签的嵌套

除了并列放置标签以外,标签的内容也可以放置其他标签,这就构成了标签的嵌套。比如您想强调 Mr.Hope 的帅:

总结

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

# HTML 属性

属性包含元素的额外信息,这些信息不会出现在实际的内容中。

一个属性必须包含如下内容:

  1. 在属性与元素名称(或上一个属性,如果有超过一个属性的话)之间的空格符
  2. 属性名称,后面跟着一个等于号。
  3. 一个属性值,由一对引号 " " 引起来。

比如 <img src="/logo.png" />attributesrcvalue/logo.png

属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。

在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如: name='John "ShotGun" Nelson'

提示

尽管不包含 ASCII 空格(以及 " ' ` = < > )的简单属性值可以不使用引号,但是建议将所有属性值用双引号(除必须使用单引号的情况)括起来,这样的代码一致性更佳,更易于阅读。

# 适用于大多数 HTML 元素的属性

属性 描述
class 为 HTML 元素定义一个或多个类名 (classname)
id 定义元素的唯一 id
style 规定元素的行内样式 (inline style)
title 描述了元素的额外信息

# 布尔属性

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

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

方便起见,我们完全可以将其写成以下形式:

<!-- 使用disabled属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled />
1
2

# 后缀名

HTML 文档的后缀名是 .html

新手误区

文件名应该为 xx.html,不应该是 html

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>
1
2
3
4
5
6
7
8
9
10

其中:

<!DOCTYPE html> 是在 HTML5 标准下要求的,必须放在每个 HTML 文件的首行。对文档类型的声明。

DOCTYPE 可小写,此处无特殊要求。

每个网页应该在 HTML 里包含一个唯一的 <html> 标签。在 <html> 标签中,应该按照顺序包含 <head><body> 标签。

<head> 标签中,应该包含 <title> 标签注明文档的标题。

提示

<head> 元素是一个容器,它包含了所有您想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。这些内容包括您想在搜索结果中出现的关键字和页面描述,CSS 样式,字符集声明等等。

<meta charset="UTF-8" /> 元素设置文档使用 utf-8 字符集编码,utf-8 字符集包含了人类大部分的文字。基本上他能识别您放上去的所有文本内容。毫无疑问要使用它,并且它能在以后避免很多其他问题。所以建议任何 HTML 文件都包含此标签。

更多详情,请见 介绍 → head 标签

<body> 标签包含了您访问页面时所有显示在页面上的内容,文本,图片,音频,游戏等等。

# HTML 空白

您可能已经注意到了在代码中包含了很多的空格——这是没有必要的。

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

那么为什么我们会在 HTML 元素的嵌套中使用那么多的空白呢? 答案就是为了可读性 —— 如果您的代码被很好地进行格式化,那么就很容易理解您的代码是怎么回事,反之就只有聚做一团的混乱。在 HTML 代码中,通常让每一个嵌套的元素以两个空格缩进。

# 特殊字符

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

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

原义字符 等价字符引用
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;