什么是HTML?

# HTML

## 什么是HTML?

HTML 是用来描述网页的一种语言。

- HTML 指的是超文本标记语言: `HyperText Markup Language`

- HTML 不是一种编程语言，而是一种<font color='orange'>标记</font>语言

- 标记语言是一套<font color='orange'>标记标签</font> (markup tag)

- HTML 使用标记标签来<font color='orange'>描述</font>网页

- HTML 文档包含了<font color='orange'>HTML 标签</font>及<font color='orange'>文本内容</font>

- HTML文档也叫做<font color='orange'> web 页面</font>

## HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

- HTML 标签是由*尖括号*包围的关键词，比如 <font color='red'><html></font>

- HTML 标签通常是*成对出现*的，比如 `<b>` 和 `</b>`

- 标签对中的第一个标签是*开始标签*，第二个标签是*结束标签*

- 开始和结束标签也被称为*开放标签*和*闭合标签*

```html

<标签>内容</标签>

```

## HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

```html

<p>这是一个段落</p>

```

### HTML 标题

HTML 标题（Heading）是通过<font color='red'> <h1> - <h6></font>等标签进行定义的。

```html

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

```

### HTML 段落

HTML 段落是通过<font color='red'> <p></font> 标签进行定义的。

```html

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

```

### HTML 链接

HTML 链接是通过 <font color='red'><a></font> 标签进行定义的。

```html

```

在 <font color='red'>href </font>属性中指定链接的地址

### HTML 图像

HTML 图像是通过 <font color='red'><img> </font>标签进行定义的。

```html

```

### HTML其他基本标签

```HTML

<strong>标签表示重要文本</strong>

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

<blockquote>标签表示块引用</blockquote>

<s>标签删除线</s>

<u>标签下划线</u>

<br> （换行）

<hr> （水平线）

```

![image-20201222162647182](HTML.assets/image-20201222162647182.png)

## HTML基本文档

```HTML

<!DOCTYPE html>

<html>

<head>

</head>

<body>

可见文本。。。

</body>

</html>

```

## HTML 头部元素

`<head>` 元素是所有头部元素的容器。`<head> `内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。

以下标签都可以添加到 head 部分：`<title>、<base>、<link>、<meta>、<script> 以及 <style>`。

### HTML`<title>`元素

- 定义浏览器工具栏中的标题

- 提供页面被添加到收藏夹时显示的标题

- 显示在搜索引擎结果中的页面标题

### HTML `<base>` 元素

`<base>` 标签为页面上的所有链接规定默认地址或默认目标（target）：

```html

<head>

</head>

```

### HTML `<link>`元素

`<link>` 标签定义文档与外部资源之间的关系。

`<link>` 标签最常用于连接样式表：

```html

<head>

</head>

```

### HTML `<style>` 元素

`<style>` 标签用于为 `HTML` 文档定义样式信息。

您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：

```

<head>

body {background-color:yellow}

p {color:blue}

</style>

</head>

```

### HTML `<meta>` 元素

元数据（metadata）是关于数据的信息。

`<meta>` 标签提供关于` `HTML` `文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。

典型的情况是，`meta` 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

`<meta>` 标签始终位于` head `元素中。

元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

#### 针对搜索引擎的关键词

一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。

下面的 meta 元素定义页面的描述：

```html

```

下面的 meta 元素定义页面的关键词：

```html

```

name 和 content 属性的作用是描述页面的内容。

### HTML `<script>` 元素

`<script>` 标签用于定义客户端脚本

### HTML 头部元素

| 标签 | 描述 |

| :--------: | :--------------------------------------: |

| `<head>` | 定义关于文档的信息。 |

| `<title>` | 定义文档标题。 |

| `<base>` | 定义页面上所有链接的默认地址或默认目标。 |

| `<link>` | 定义文档与外部资源之间的关系。 |

| `<meta>` | 定义关于 HTML 文档的元数据。 |

| `<script>` | 定义客户端脚本。 |

| `<style>` | 定义文档的样式信息。 |

## HTML 字符实体

### HTML 实体

在 HTML 中，某些字符是预留的。

在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

字符实体类似这样：

```html

&entity_name;

或者

&#entity_number;

```

如需显示小于号，我们必须这样写：\< 或 \<

使用实体名而不是数字的好处是<font color='red'>易于记忆</font>。不过坏处是，<font color='red'>浏览器也许并不支持所有实体名称（对实体数字的支持却很好）</font>。

### HTML 中有用的字符实体

<font color='red'>实体名称对大小写敏感</font>

| :------: | :---------------: | :----------------: | :------: |

| | 空格 | \  | \  |

| < | 小于号 | \< | \< |

| > | 大于号 | \> | \> |

| & | 和号 | \& | \& |

| " | 引号 | \" | \" |

| ' | 撇号 | \' (IE不支持) | \' |

| ￠ | 分（cent） | \¢ | \¢ |

| £ | 镑（pound） | \£ | \£ |

| ¥ | 元（yen） | \¥ | \¥ |

| € | 欧元（euro） | \€ | \€ |

| § | 小节 | \§ | \§ |

| © | 版权（copyright） | \© | \© |

| ® | 注册商标 | \® | \® |

| ™ | 商标 | \™ | \™ |

| × | 乘号 | \× | \× |

| ÷ | 除号 | \÷ | \÷ |

## 序列化标签

### 无序列表

```HTML

<ul>

</ul>

```

![image-20201222163035708](HTML.assets/image-20201222163035708.png)

### 有序列表

```HTML

<ol>

</ol>

```

![image-20201222163120276](HTML.assets/image-20201222163120276.png)

### 自定义列表

```HTML

<dl>

</dl>

```

![image-20201222163212069](HTML.assets/image-20201222163212069.png)

## 表格

表格由 `<table> `标签来定义。每个表格均有若干行（由 `<tr> 标签定义），每行被分割为若干单元格（由 `<td> `标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

```html

<tr>

</tr>

<tr>

</tr>

</table>

```

![image-20201222171504362](HTML.assets/image-20201222171504362.png)

### 表格和边框属性

如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

使用边框属性来显示一个带有边框的表格：

```html

<tr>

</tr>

</table>

```

### 表格的表头

表格的表头使用 `<th>` 标签进行定义。

大多数浏览器会把表头显示为粗体居中的文本：

```html

<tr>

<th>Heading</th>

<th>Another Heading</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

```

![image-20201222172135586](HTML.assets/image-20201222172135586.png)

### 表格中的空单元格

在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。

```html

<tr>

</tr>

<tr>

</tr>

</table>

```

![image-20201222172223137](HTML.assets/image-20201222172223137.png)

**注意：**这个空的单元格的边框没有被显示出来。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。

```html

<tr>

</tr>

<tr>

</tr>

</table>

```

![image-20201222172304186](HTML.assets/image-20201222172304186.png)

## 框架

```HTML

```

## 表单

### `<form> `元素

HTML 表单用于收集用户输入。

`<form>` 元素定义 HTML 表单：

```html

<form>

form elements

</form>

```

### HTML 表单包含表单元素

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

#### `<input>` 元素

`<input>` 元素是最重要的*表单元素*。

`<input>` 元素有很多形态，根据不同的 *type* 属性。

这是本章中使用的类型：

| 类型 | 描述 |

| :----: | :----------------------------------: |

| text | 定义常规文本输入。 |

| radio | 定义单选按钮输入（选择多个选择之一） |

| submit | 定义提交按钮（提交表单） |

### <font color='red'>文本输入</font>

`<input type="text">` 定义用于*文本输入*的单行输入字段：

```html

<form>

First name:<br>

<br>

Last name:<br>

</form>

```

![image-20201222173829422](HTML.assets/image-20201222173829422.png)

### <font color='red'>单选按钮输入</font>

`<input type="radio">`定义*单选按钮*。

单选按钮允许用户在有限数量的选项中选择其中之一：

```html

<form>

<input type="radio" name="sex" value="male" checked>Male

<br>

<input type="radio" name="sex" value="female">Female

</form>

```

![image-20201222174014622](HTML.assets/image-20201222174014622.png)

### 提交按钮

`<input type="submit">` 定义用于向*表单处理程序*（form-handler）*提交*表单的按钮。

表单处理程序通常是包含用来处理输入数据的脚本的服务器页面。

表单处理程序在表单的` `action` `属性中指定：

```html

</form>

```

![image-20201222174220725](HTML.assets/image-20201222174220725.png)

### HTML Form 属性

HTML <form> 元素，已设置所有可能的属性，是这样的：

```html

<form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8"

ectype="application/x-www-form-urlencoded" autocomplete="off" novalidate>

form elements

</form>

```

下面是 `<form> `属性的列表：

| 属性 | 描述 |

| :------------: | :--------------------------------------------------------: |

| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |

| action | 规定向何处提交表单的地址（URL）（提交页面）。 |

| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |

| enctype | 规定被提交数据的编码（默认：url-encoded）。 |

| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |

| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |

| novalidate | 规定浏览器不验证表单。 |

| target | 规定 action 属性中地址的目标（默认：_self）。 |

## HTML5视频

### Web 上的视频

直到现在，仍然不存在一项旨在网页上显示视频的标准。

今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

HTML5 规定了一种通过 video 元素来包含视频的标准方法。

### 视频格式

当前，video 元素支持三种视频格式：

| :----- | :--- | :------ | :---- | :----- | :----- |

| Ogg | No | 3.5+ | 10.5+ | 5.0+ | No |

| MPEG 4 | 9.0+ | No | No | 5.0+ | 3.0+ |

| WebM | No | 4.0+ | 10.6+ | 6.0+ | No |

- Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

- MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

- WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

### 代码

如需在 HTML5 中显示视频，您所有需要的是：

```html

<source src="movie.mp4" type="video/mp4"> 您的浏览器不支持Video标签。

</video>

<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第

一个可识别的格式：

```

### `<video>` 标签的属性

| 属性 | 值 | 描述 |

| :------- | :------- | :----------------------------------------------------------- |

| autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。 |

| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。 |

| height | *pixels* | 设置视频播放器的高度。 |

| loop | loop | 如果出现该属性，则当媒介文件完成播放后再次开始播放。 |

| preload | preload | 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 |

| src | *url* | 要播放的视频的 URL。 |

| width | *pixels* | 设置视频播放器的宽度。 |

## HTML5音频

### 使用插件

浏览器插件是一种扩展浏览器标准功能的小型计算机程序。

插件有很多用途：播放音乐、显示地图、验证银行账号，控制输入等等。

可使用 `<object> `或 `<embed>` 标签来将插件添加到 HTML 页面。

这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。

### 使用`<embed> `元素

`<embed>` 标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。

下面的代码片段能够显示嵌入网页中的 MP3 文件：

```HTML

```

#### 问题：

- `<embed>` 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。

- 不同的浏览器对音频格式的支持也不同。

- 如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。

- 如果用户的计算机未安装插件，无法播放音频。

- 如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

使用 `<!DOCTYPE html>` (HTML5) 解决验证问题。

### 使用` <object> `元素

`<object tag> `标签也可以定义外部（非 HTML）内容的容器。

下面的代码片段能够显示嵌入网页中的 MP3 文件：

```问题：

```

#### 问题：

- 不同的浏览器对音频格式的支持也不同。

- 如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。

- 如果用户的计算机未安装插件，无法播放音频。

- 如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。

## HTML 5 多媒体标签

| 标签 | 描述 |

| :-------: | :----------------------------------: |

| `<audio>` | 标签定义声音，比如音乐或其他音频流。 |

| `<embed>` | 标签定义嵌入的内容，比如插件。 |

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 219,490评论 6赞 508
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 93,581评论 3赞 395
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 165,830评论 0赞 356
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,957评论 1赞 295
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,974评论 6赞 393
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,754评论 1赞 307
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,464评论 3赞 420
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,357评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,847评论 1赞 317
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,995评论 3赞 338
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 40,137评论 1赞 351
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,819评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,482评论 3赞 331
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 32,023评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,149评论 1赞 272
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,409评论 3赞 373
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 45,086评论 2赞 355

什么是HTML?

推荐阅读更多精彩内容