第01课 HTML 入门 · 学习讲义 2019

## 一、概述 HTML 是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。 HTML 的全名是`超文本标记语言`（HyperText Markup Language），上个世纪90年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明。它的最大特点就是支持超链接，可以跳转到其他网页，从而构成了整个互联网。1999年，HTML 4.01 版发布，成为广泛接受的 HTML 标准。2014年，HTML 5 发布，这是目前正在使用的版本。浏览器的网页开发，涉及三种技术：HTML、CSS 和 JavaScript。HTML 语言定义网页的结构和内容，CSS 样式表定义网页的样式，JavaScript 语言定义网页与用户的互动行为。 ## 二、网页的概念 ### 2.1 标签 HTML 代码由许许多多不同的标签（tag）构成。下面代码中，`<title>`和`</title>`就是一对标签。 ~~~html <title>网页标题</title> ~~~ 标签用来告诉浏览器，如何处理这段代码。标签的内容就是浏览器所要渲染的、展示在网页上的内容。标签放在一对尖括号里面（比如`<title>`），大多数标签都是成对出现的，分成开始标签和结束标签，结束标签在标签名之前加斜杠（比如`</title>`）。但是，也有一些标签不是成对使用，而是只有开始标签，没有结束标签。 ### 2.2 元素浏览器渲染网页的时候，会把 HTML 源码解析成一个标签树，每个标签都是一个节点`node`，称为网页元素`element`。嵌套的标签就构成了网页元素的层级关系。 “标签”和“元素”基本上是同义词，只是使用的场合不一样：标签是源码角度来看，元素是从编程角度来看，比如`<p>`标签对应网页的`p`元素。 ~~~html <div><p>hello world</p></div> ~~~ ### 2.3 属性属性`attribute`是标签的额外信息，使用空格与标签名和其他属性分隔。 ~~~html <img src="demo.jpg" width="500"> ~~~ 上面代码中，`<img>`标签有两个属性：`src`和`width`。 ### 2.4 注释 HTML 代码可以包含注释，浏览器会自动忽略注释。注释以``结尾。注释有助于理解代码的含义，复杂的代码块前面最好加上注释。 ```  ``` ## 三、网页的基本标签符合语法标准的网页，应该满足下面的基本结构。 ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> </body> </html> ~~~ * `<!doctype>`通常是网页的第一个标签，表示文档类型，告诉浏览器如何解析网页。 * `<html>`标签是网页的顶层容器，也称为根元素（root element），其他元素都是它的子元素。一个网页只能有一个`<html>`标签。 * `<head>`标签是一个容器标签，用于放置网页的元信息。它的内容不会出现在网页上，而是为网页渲染做准备。`<head>`是`<html>`的第一个子元素。如果网页不包含`<head>`，浏览器会自动创建一个。 * `<meta>`标签用于设置或说明网页的元数据，必须放在`<head>`里面。一个`<meta>`标签就是一项元数据，网页可以有多个`<meta>`。 * `<title>`标签用于指定网页的标题，会显示在浏览器窗口的标题栏。 * `<body>`标签是一个容器标签，用于放置网页的主体内容。浏览器显示的页面内容，都是放置在它的内部。它是`<html>`的第二个子元素，紧跟在`<head>`后面。 ## 四、文本标签历史上，网页的主要功能是文本展示。所以，HTML 提供了大量的文本处理标签。 * `<div>`是一个通用标签，表示一个区块（division）。它没有语义，如果网页需要一个块级元素容器，又没有其他合适的标签，就可以使用这个标签。 ~~~html <div class="article"> <div class="title"> <h1>文章标题</h1> </div> </div> ~~~ * `<span>`是一个通用目的的行内标签（即不会产生换行），不带有任何语义。 ~~~html <div>这是一句<span>重要</span>的句子。</div> ~~~ * HTML 提供了6个标签，用来表示文章的标题。按照标题的等级，一共分成六级。 ~~~html <body> <h1>JavaScript 语言介绍</h1> <h2>概述</h2> <h2>基本概念</h2> <h3>网页</h3> <h3>链接</h3> <h2>主要用法</h2> </body> ~~~ * `<p>`标签是一个块级元素，代表文章的一个段落（paragraph）。不仅是文本，任何想以段落显示的内容，比如图片和表单项，都可以放进`<p>`元素。 ~~~html <p>hello world</p> ~~~ * `<br>`让网页产生一个换行效果。该标签是单独使用的，没有闭合标签。 ~~~html hello<br>world ~~~ * `<hr>`用来在一篇文章中分隔两个不同的主题，浏览器会将其渲染为一根水平线。该标签是单独使用的，没有闭合标签。 ~~~html <p>第一个主题</p> <hr> <p>第二个主题</p> ~~~ * `<strong>`是一个行内元素，表示它包含的内容具有很强的重要性，需要引起注意。浏览器会以粗体显示内容。 ~~~html <p>开会时间是<strong>下午两点</strong>。</p> ~~~ * `<b>`与`<strong>`很相似，也表示它包含的内容需要引起注意，浏览器会加粗显示。它没有语义，是一个纯样式的标签，违反了语义与样式分离的原则，因此不建议使用。 ~~~html <p>开会时间是<b>下午两点</b>。</p> ~~~ * `<em>`是一个行内标签，表示强调（emphasize），浏览器会以斜体显示它包含的内容。 ~~~html <p>我们<em>已经</em>讨论过这件事情了。</p> ~~~ * `<i>`标签与`<em>`相似，也表示与其他地方有所区别，浏览器会以斜体显示。它是 Italic 的缩写。`<i>`标签的语义不强，更接近是一个纯样式的标签，不建议使用。 ~~~html <p>我心想，这件事是<i>真的</i>吗？</p> ~~~ * `<sub>`标签将内容变为下标，`<sup>`标签将内容变为上标。它们都是行内元素，主要用于数学公式、分子式等。 ~~~html <p>水分子是 H<sub>2</sub>O。</p> ~~~ ## 五、图片标签图片是互联网的重要组成部分，让网页变得丰富多彩。 `<img>`标签用于插入图片。它是单独使用的，没有闭合标签。`<img>`默认是一个行内元素，与前后的文字处在同一行。 ``` <img src="logo.png"> <img src="http://noi.dodoke.com/images/logo.png"> ``` `src`属性指定图片的网址，第一个是相对地址，表示图片与网页在同一个目录。 ## 六、链接标签链接（hyperlink）是互联网的核心。它允许用户在页面上，从一个网址跳转到另一个网址，从而把所有资源联系在一起。链接通过`<a>`标签表示，用户点击后，浏览器会跳转到指定的网址。链接不仅可以指向另一个网页，也可以指向文本、图像、文件等资源。可以这样说，所有互联网上的资源，都可以通过链接访问。 ``` <a href="https://www.dodoke.com/">渡课首页</a> ``` `<a>`标签内部不仅可以放置文字，也可以放置其他元素，比如段落、图像、多媒体等等。 ``` <a href="https://noi.dodoke.com/"> <img src="http://noi.dodoke.com/images/logo.png"> </a> ``` * href 属性：给出链接指向的网址。它的值应该是一个 URL 或者锚点。 ``` <a href="https://www.dodoke.com/">渡课首页</a> ``` * target 属性：指定如何展示打开的链接。`target`常用属性值为`_self`和`_blank`。 ``` <a href="http://www.dodoke.com" target="_blank">渡课首页</a> ``` ## 七、列表标签列表是一系列排列好的项目，主要分成两类：有序列表和无序列表。 * `<ol>`标签是一个有序列表容器（ordered list），会在内部的列表项前面产生数字编号。 ~~~html <ol> <li>列表项 A</li> <li>列表项 B</li> <li>列表项 C</li> </ol> ~~~ * `<ul>`标签是一个无序列表容器（unordered list），会在内部的列表项前面产生实心小圆点，作为列表符号。 ~~~ <ul> <li>列表项 A</li> <li>列表项 B</li> <li>列表项 C</li> </ul> ~~~ * `<dl>`标签是一个块级元素，表示一组术语的列表（description list）。术语名（description term）由`<dt>`标签定义，术语解释（description detail）由`<dd>`标签定义。`<dl>`常用来定义词汇表。 ~~~ <dl> <dt>CPU</dt> <dd>中央处理器</dd> <dt>Memory</dt> <dd>内存</dd> <dt>Hard Disk</dt> <dd>硬盘</dd> </dl> ~~~ ## 八、表单标签表单（form）是用户输入信息与网页互动的一种形式。表单由一种或多种的小部件组成，比如输入框、按钮、单选框或复选框。 ### 8.1 `<form>`简介 `<form>`标签用来定义一个表单，所有表单内容放到这个容器元素之中。 ~~~ <form>  </form> ~~~ ~~~ <form action="https://example.com/api" method="post"> <label for="username">用户名：</label> <input id="username" type="text" name="username"> <input type="submit" value="提交"> </form> ~~~ * `action`：服务器接收数据的 URL。 * `method`：提交数据的 HTTP 方法，可能的值有`post`（表单数据作为 HTTP 数据体发送），`get`（表单数据作为 URL 的查询字符串发送）。 ## 8.2 `<label>`标签 `<label>`标签是一个行内元素，提供控件的文字说明，帮助用户理解控件的目的。 ~~~ <label for="user">用户名：</label> <input type="text" name="user" id="user"> ~~~ ### 8.3 `<input>` 标签 `<input>`标签是一个行内元素，用来接收用户的输入。它是一个单独使用的标签，没有结束标志。它有多种类型，取决于`type`属性的值，默认值是`text`，表示一个输入框。 ~~~ <input>  <input type="text"> ~~~ * `type="text"`是普通的文本输入框，用来输入单行文本。 ~~~ <input type="text" id="name" name="name" required minlength="4" maxlength="8"> ~~~ * `type="button"`是没有默认行为的按钮，建议尽量不使用这个类型，而使用`<button>`标签代替。 ~~~ <input type="button" value="点击"> ~~~ * `type="submit"`是表单的提交按钮。用户点击这个按钮，就会把表单提交给服务器。 ~~~ <input type="submit" value="提交"> ~~~ * `type="reset"`是一个重置按钮，用户点击以后，所有表格控件重置为初始值。 ~~~ <input type="reset" value="重置"> ~~~ * `type="checkbox"`是复选框，允许选择或取消选择该选项。`checked`属性表示默认选中。 ~~~ <input type="checkbox" name="agreement" checked> <label for="agreement">是否同意</label> ~~~ * `type="radio"`是单选框，表示一组选择之中，只能选中一项。多个单选框的`name`属性的值，应该都是一致的。 ~~~ <fieldset> <legend>性别</legend> <div> <input type="radio" id="male" name="gender" value="male"> <label for="male">男</label> </div> <div> <input type="radio" id="female" name="gender" value="female"> <label for="female">女</label> </div> </fieldset> ~~~ * `type="password"`是一个密码输入框。用户的输入会被遮挡，字符通常显示星号（`*`）或点（`·`）。 ~~~ <input type="password" name="password" minlength="8" required> ~~~ * `type="file"`是一个文件选择框，允许用户选择一个或多个文件，常用于文件上传功能。 ~~~ <input type="file" name="avatar" accept="image/png, image/jpeg"> ~~~ ### 8.4 `<button>`标签 `<button>`标签会生成一个可以点击的按钮，没有默认行为，通常需要用`type`属性或脚本指定按钮的功能。 ~~~ <button>点击</button> ~~~ ### 8.5 `<select>`标签 `<select>`标签用于生成一个下拉菜单。`<option>`有一个布尔属性`selected`，一旦设置，就表示该项是默认选中的菜单项。 ~~~ <label for="pet-select">宠物：</label> <select id="pet-select" name="pet-select"> <option value="">--请选择一项--</option> <option value="dog">狗</option> <option value="cat">猫</option> <option value="others">其他</option> </select> ~~~ ### 8.6 `<textarea>`标签 `<textarea>`是一个块级元素，用来生成多行的文本框。 ~~~ <textarea rows="5" cols="33"> 这是一个很长的故事。 </textarea> ~~~