认识HTML
HTML元素的结构
HTML 的语言形式为标签（如<p>）包围的 HTML 元素，如：
HTML 标签
就是一个典型的 HTML 标签。 HTML 标签有以下特点：
- 由尖括号包围关键词组成，比如：
<p>、<h1>、<div>、<span>等； - 通常成对出现，比如
<div>和</div>，第一个就是开始标签，第二个就是结束标签，要注意开始标签和结束标签的区别在于，结束标签比开始标签多一个“/”； - 虽然标签通常是成对出现的，但并不是所有标签都有对应的结束标签，比如
<input>、<img>等，它们往往是单独呈现的；
注意： 在 HTML 中标签名是大小写不敏感，
<p>和<P>是一样的，但是现在一般要求标签统一小写。
剖析一个 HTML 元素
从下面这张图中我们可以看到，一个典型的 HTML 元素 通常是由 开始标签 、 结束标签 和 内容 构成的。
如果是单独呈现的标签，一个标签就表示一个元素。
HTML中的嵌套
在 HTML 中，元素可以发生 嵌套。请看上面这段 HTML 代码，上面的代码中有两个元素
第一个元素：
<p>HTML是一门伟大的语言！</p>
开始标签：<p> 结束标签：</p> 内容：“HTML 是一门伟大的语言！”
第二个元素：
<div><p>HTML是一门伟大的语言！</p></div>
开始标签：<div> 结束标签：</div> 内容：“<p>HTML是一门伟大的语言！</p>”
第一个元素整体作为<div></div>的内容，嵌套在了<div></div>内部，从结构上发生了嵌套关系。
div元素是p元素的 父元素 ，而p元素是div元素的 子元素。
完整的html文档结构
下面是一个简单、完整的 html 文档，我们一点点来看：
1. <!DOCTYPE html>
(1). 作用：告知浏览器该页面文件的文档类型，指示 web 浏览器使用哪个 HTML 版本编写页面。 (2). 位置：<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。 (3). <!DOCTYPE> 声明对大小写不敏感。 (4). <!DOCTYPE> 声明没有结束标签。
2. <html lang="en">...</html>
(1). 此元素可告知浏览器其自身是一个 HTML 文档。 (2). <html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。 (3). lang 属性（语言属性）：当搜索引擎或者浏览器拿到语言属性后，有可能做一些针对指定语言的辅助操作，‘en’表示英文。
3. 标签属性
(1). 标签可以拥有零个或多个标签属性，注意：标签属性与标签名称、标签属性与标签属性之间需用一个空格隔开。 (2). 标签属性可以赋予标签更多的信息，标签属性通常是以 key=“value” 即 名称=“值” 的形式出现。 (3). 常见的标签属性有：class、id、style、lang、src 等。
4. 文档的头部<head>...</head>
(1). head 元素定义文档的头部，我们通常在这里引用样式表、提供元信息等。 (2). 文档的头部中的<title>...</title>定义文档的标题，在网页上体现为网页标签的标题。 (3). 一个 <head> 元素必须包含且只能包含一个 <title> 元素。
元信息：又叫元数据，就是描述数据的数据。这里主要指文档的概要信息。
5. 文档的主体<body>...</body>
(1). body 元素定义文档的主体，包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。
HTML中的注释
每一个编程语言都有注释，html也不例外，在HTML中我们用<!-- -->标签来表示注释：
网页中显示的内容如下：
注释标签用于在源代码中插入注释。**注释不会显示在浏览器网页中的。
认识MDN
什么是 MDN
Mozilla 开发者网络（Mozilla Developer Network，MDN）是由 Mozilla、Microsoft、Google、Samsung 和 W3C 联合打造成的最好的 Web 文档，是学习 Web 开发的一个权威、全面、高质量的网站，文档丰富，资料全面，非常适合大家学习使用，请把它当成你 Web 开发学习时的百科全书。
通常，在一个标签的文档中会有：标签使用示例多个，标签属性讲解，标签在各浏览器中的兼容性统计，以及相关标签链接等内容，帮助大家更好的理解标签的相关知识。
快，现在就去看看：MDN-标题标签文档
MDN 的使用
现在我们以 <img> 为例，来演示如何使用 MDN 文档。
- 搜索
打开上面的链接，我们会看到这样的一个页面：
（1）在标注 1 的地方，我们可以切换网页显示的语言。 （2）在标注 2 的地方，我们输入 img 进行搜索。
因为我们要搜索的是 img 标签（html tag），所以点击第二条纪录：
- 阅读文档
打开后看到如下界面，通常一个 HTML 标签（html tag）的文档都会包含该标签的概述、标签属性的介绍、应用的例子和浏览器兼容性等内容。
翻到介绍标签属性的位置，可以看到文档中介绍了img 标签的各个标签属性的作用，下图中被框出来的 title 、 align 、 alt等都是 img 标签的属性。
在页面最开始的地方，可以看到使用的示例，到这里大家应该对如何使用img标签有了一定的了解：
HTML-文本标签
块状和内联标签
上节课我们学习了 HTML 的基本结构，下面我们来写一个简单的段落
<p>
Unrivalled luxury, stunning white-sand beaches and an amazing underwater world
make Maldives an obvious choice for a true holiday of a lifetime.
<img
src="https://xxx.jpg"
alt=""
/>
</p>
显示效果：
可以看到段落中有文字，有图片，内容丰富。但这样文字和图片显示在同一行，显得有些不美观。如果可以像下图这样，图片和文字分行显示就好了。有没有办法把图片和文字分行呢？
很简单，我们可以这么做，把图片单独用段落标签包起来，点击播放：
<p>
Unrivalled luxury, stunning white-sand beaches and an amazing underwater world
make Maldives an obvious choice for a true holiday of a lifetime.
</p>
<p>
<img
src="https://xxx.jpg"
alt=""
/>
</p>
现在网页内容的结构是这样的，有两个段落，第一个是文字，第二个是图片：
为什么这么做就可以让文字和图片分行显示呢？
这是因为<img>标签是内联标签，而<p>标签是块状标签。
修改前： 内联标签<img>标签不会为自己的内容（图片）占据新的一行，所以图片和文字显示在同一行。
修改后： 我们把图片用段落标签<p>单独包起来之后，由于段落标签<p>是块状标签，会为自己的内容（图片）占据新的一行，所以文字段落和图片段落就显示在两行里了。
块状标签和内联标签是 HTML 中两种主要的标签类型，它们 最大的区别 就是：块状标签会为自己的内容占据新的一行，而内联标签则不会。
常见的块状标签有段落<p>、标题<h1>、<div>等，常见的内联标签有<span>、图片<img>、<strong>等，在 HTML 中有很多标签，大家不用在一开始的时候就试图记住所有的标签，在之后的学习和重复中，我们自然会慢慢记住常用的一些标签。
文章中有标题，段落，图片。 其中标题标签<h1>和段落标签<p>是独占一行的，它们属于块状标签。而<span>、<img>、<strong>标签，它们只占一行中的一部分，它们属于内联标签。我们可以看到，内联标签常常被嵌套在块状标签中。
标题标签
我们将用刚才这篇文章来学习常见的文本标签，当这节课结束的时候，我们将初步完成一个展示这篇文章的网页。
标题标签 <h1> ～ <h6>
第一步，我们要完成文章的标题。
HTML 中提供了 6 个标签，用来表示文章的标题。按照标题的等级，一共分成六级。
<h1> 到 <h6>分别对应一级标签到六级标签，数字越大，级别越低，对应的标题看起来就越小。点击播放：
代码演示
了解了标题标签之后，我们来写文章的标题
<!-- h1-h6是块状标签 -->
<h1>Beautiful World</h1>
<!-- h2是h1的子标题 -->
<h2>Islands</h2>
<!-- h3是h2的子标题 -->
<h3>Maldives</h3>
<h3>Crete Island</h3>
<h2>Mountains</h2>
<h3>Matterhorn, Swiss-Italian Border</h3>
<h3>Kirkjufell</h3>
从上面这里例子中我们可以看到，下一级标题是上一级标题的子标题，一级标题后可以有多个二级标题。
要注意：标题之间不可越级，比如一级标题<h1>下直接写三级标题<h3>，因为这样会导致文章失去清晰的文章结构。
常用文本标签
段落标签<p>
接下来我们来写文章中的段落。
这里要用到<p>标签，这是最常用的 HTML 标签，是一个块状标签，代表文章的一个段落（paragraph）。在 HTML 中，很多标签都可以嵌套其他标签，段落标签<p>也不例外，任何想以段落显示的内容，比如文本、图片和表单项，都可以放进<p>标签。
上面就是一个简单的段落。 让我们把文章中的段落加上
内联标签<strong>
下面我们要给文章中重点标注的词句加粗。
这里我们会用到<strong>标签。<strong>是一个行内标签，表示它包含的内容具有很强的 重要性 ，需要引起注意。浏览器会以粗体显示内容。
<p>一句话中的<strong>重点内容</strong></p>
一句话中的重点内容
小知识：
<b>标签也能让内容变粗体，但它和<strong>不同，它没有语义，只是单纯表示样式加粗。
内联标签<span>
下面的段落中，我们将岛名“Maldives”用<span>包裹起来。 <span>这是一个内联标签（即不会产生换行），通常表示一个行内短语，使用<span>可以使网页更有条理。 <strong>标签可以使文本变粗体，<span>则不是这样的，如果没有加样式文件，<span>在样式上与普通文本不会有区别。
显示效果：
图片标签
现在我们要给文章插入一些图片，让它看起来更丰满有趣。
插入图片我们要用到<img>标签，我们已经见过它很多次了，它的使用方法如下：
显示效果：
在标签属性
src中写入图片的 相对路径 或 绝对路径 就可以啦。
图片标签还有个 alt 属性，这个属性定义了描述图像的替换文本。如果图像的 URL 是错误的，该图像不在 支持的格式 列表中，或者如果图像还没有被下载，用户将看到这里的替换文本。
小知识
除了静态的 jpg、jpeg、png 之类的图片，我们还可以用 img 标签向网页中插入 gif 动图哦：
网页显示效果：
链接标签
最后，我们要给文章加上原文链接。
HTML 给我们提供了链接标签a，给文章添加链接。
标签是内联标签，用户点击后，浏览器会跳转到指定的网址。下面就是一个典型的链接。
文字下面默认会有下划线，表示这是一个链接。用户点击后，浏览器跳转到 href 属性指定的网址。
标签内部不仅可以放置文字，也可以放置其他元素，比如段落、图像、多媒体等等。
下面我们来了解一下链接标签中比较重要的属性：
链接标签的属性
href
href 属性给出链接指向的网址。它的值应该是一个 URL 或者锚点。
URL：统一资源定位符（英语：Uniform Resource Locator，缩写：URL；或称统一资源定位器、定位地址、URL 地址，俗称网页地址或简称网址）是因特网上标准的资源的地址（Address）。
title
title 属性给出链接的说明信息。鼠标悬停在链接上方时，浏览器会将这个属性的值，以提示块的形式显示出来。
target
target 属性指定如何展示打开的链接。
target 属性的值也可以是“_self”、“_blank”、“_parent”、“_top”四个关键字之一。
当它为_self 时表示在当前页面打开，target 默认为“_self”。
列表
除了我们之前在文章中用到的 标题标签<h1>~<h6> 、 段落标签<p> 、 内联标签<span> <strong> 、 图片标签<img>(也是内联标签)、 链接标签<a>(也是内联标签)外，列表标签也是很常用的文本标签。
HTML提供了无序列表标签<ul>和有序列表标签<ol>供我们选择，这里我们选择无序列表标签<ul>，列表的每一项都用标签<li>表示
显示效果：
- 列出今天要做的事情
- 每天结束填写回顾和反思
- 计划第二天的内容
我们可以看到，每个列表项<li>前面有个实心小圆点，这是无序列表的符号，当不需要考虑列表项的顺序时，我们常常采用无序列表标签<ul>。
如果想要显示有排序的列表项，我们会用<ol>标签，它的列表符号会是数字或者字母等
显示效果：
- 列出今天要做的事情
- 每天结束填写回顾和反思
- 计划第二天的内容
HTML-表单标签
form标签
在浏览 Web 时，用户的交互主要是通过点击 链接 来浏览网页。 但有时我们也需要用户通过 输入 来提供一些信息。比如：
- 注册并登录网站
- 输入个人信息（姓名，地址，信用卡详细信息……）
- 过滤内容（使用下拉菜单，复选框……）
- 进行搜索
- 上传文件
- …
为了满足这些需求，HTML 提供了交互式 表单控件 ：
- 文本输入（一行或多行）
- 单选按钮
- 复选框
- 下拉菜单
- 上传小部件
- 提交按钮
- …
form 标签
现在让我们来完成下面这个表单的开发
可以看到，在这个注册表单里都是输入框、按钮等表单元素，对于这些表单控件，我们需要用一个块状元素
<form>把它们包起来，属于同一个表单的表单控件要包含在同一个块状元素<form>里。
这个标签有两个属性需要我们了解，action和method：
action：一个处理此表单信息的程序所在的 URL，所述表格信息将在表单提交时被发送到定义的地址；method：它的值可以是 GET 或 POST，用来规定 如何 发送表单信息；
通常，表单信息被发送到 服务器 。如何处理这些数据不是我们本次课的内容，我们以后会再讲到。
现在让我们先写下一个<form>标签，在网页上定义一个表单区域：
<!-- <form>是块状标签，要注意：<form>标签不能嵌套<form>标签 -->
<form action="">
<!-- 这里会有一些表单控件 -->
</form>
单行文本输入框
首先我们来写 昵称输入框。
单行文本输入框：
<!-- action=""则表单信息将提交到当前页面 -->
<form action="">
<input type="text" />
</form>
特别注意：需要我们特别关注的是，
input不但是一个内联元素，还是一个只有开始标签，没有结束标签的内联元素，我们可以认为它是一个“自闭”元素。你还记得别的自闭元素吗？
1. 占位文本 “placeholder”
我们可以看到，注册表单（上图）中的昵称输入框里有“昵称”两个字，而我们的单行文本输入框中并没有任何文字，这个文字在点击输入框并输入内容后会消失，这是 占位文本，通常用来 提示 用户需要输入什么。可以通过标签属性 “placeholder” 来实现的。
<input type="text" placeholder="昵称" />
2. 输入框名字 “name”
为了区别于其他的<input>，我们需要给昵称输入框加上标签属性name，作为<input>的名字，在提交表单数据时就不会和其他<input>搞混了：
<input type="text" placeholder="昵称" name="nick" />
3. 输入框的值 “value”
如果希望在输入框中预填写用户的昵称，可以用标签属性value：
<input type="text" placeholder="昵称" name="nick" value="小明" />
4. 不可修改的输入框 “readonly”和“disabled”
在一些特殊情况中，我们会给用户分配昵称，这个时候并不希望用户可以自行修改，我们可以这么做：
<input type="text" placeholder="昵称" name="nick" value="小明" readonly />
把输入框变成 只读 输入框！这样用户就不能自己修改预填写的内容啦。
除了用”readonly”这个属性，我们还可以用”disabled”，这个属性也能使用户无法更改输入框中的内容。
<input type="text" placeholder="昵称" name="nick" value="小明" disabled />
但是这两个是有一定区别的：
| 属性 | disabled | readonly |
|---|---|---|
| 对象 | 所有表单元素 | input 和 textarea |
| 作用 | 使文本框不能输入，当表单以 POST 或 GET 的方式提交时，使用了 disabled 的元素的值不会被传递出去 | 仅使文本框不能输入 |
| 外观 * | 使文本框变灰 | 外观没有变化 |
外观 * ：在不同浏览器中输入框的外观可能会有区别，因此“readonly”和“disabled” 这两种输入框在外观上的差别可能与上表所述有所不同。
多行文本输入框和密码输入框
接下来我们写个性签名和密码输入框。
多行输入框
个性签名是个多行输入框。 当多行文本输入框中输入的内容超过一行的长度时，它会自动换行，而单行文本输入框则不会换行。
这里我们会用到textarea标签来写多行输入框。
<!-- name属性表示表单元素的名称，placeholder属性表示表单元素的占位文本 -->
<textarea
name="sign"
rows="5"
cols="30"
placeholder="请输入个性签名"
></textarea>
其中rows和cols分别表示行数（高度）和文本域的可视宽度： rows：行数（高度）； cols：文本域的可视宽度；
这两个属性可写可不写，<textarea></textarea>就能表示一个多行输入框，显示效果：
在多行文本框右下角我们可以看到一排斜线：
在斜线处按住鼠标左键拖动，可以改变输入框的大小。
密码输入框
密码输入框和昵称输入框有点区别，用户输入的内容将会以 黑圆点 的形式显示。
如何做到输入内容不直接显示呢？ 非常简单，我们只需要把表单标签<input>中的标签属性type="text"改成type="password"就可以啦：
<!-- type属性表示表单元素的类型，name属性表示表单元素的名称，placeholder属性表示表单元素的占位文本 -->
<input type="password" name="password" placeholder="密码" />
单选框和复选框
性别单选题（单选框）
在这里我们只考虑了男女两种性别，并默认用户只有一种性别。 就像做单选题一样，用户只能选择男性或者女性。
这里我们得使用 单选框：
<!-- type属性表示表单元素的类型，name属性表示表单元素的名称，value属性表示表单元素的值 -->
<input type="radio" name="gender" value="male" />
<input type="radio" name="gender" value="female" />
所谓单选框，其实只是把控件类型type="text"改成了type="radio"。 大部分 表单元素都是通过改变标签属性type的值来实现的。
* 属于同一道“单选题”的每个单选按钮，应该拥有 相同 的name属性值。
我们用 value=“male” 表示男性，用 value=“female” 表示女性，但是大家会发现，在上面的网页显示效果中并没有这两个单词出现，其实，这两个单词是表单数据提交时提交的内容。
那么我们如何把选项的内容写到网页上呢？很简单，直接在input标签后加内容就可以啦：
<input type="radio" name="gender" value="male" />男
<input type="radio" name="gender" value="female" />女
现在，当用户点击文字前面的小圆点时，就会选中对应的性别
但是，这样点击的范围有点小，如果点击文字也能选中对应的性别就更好了。 为了达到这个目的，我们常常会把单选框和标签<label>配合使用：
<label> <input type="radio" name="gender" value="male" />男 </label>
<label> <input type="radio" name="gender" value="female" />女 </label>
现在点击文字也能选中对应的性别！试试看吧！
另一种写法：
<input id="male" type="radio" name="gender" value="male" /> <label for="male">男</label> <input id="female" type="radio" name="gender" value="female" /> <label for="female">女</label>我们给单选框
<input>加了一个属性id="male"，给<label>标签也加了一个属性for="male"。这样，两者之间就产生了一一对应的关系。
兴趣多选题（复选框）
用户可能对很多领域感兴趣，所以在兴趣的选择上我们要用复选框。
复选框的使用就像一道多选题，用户可以选择多个选项。除此之外，复选框和单选框很像，它的类型是checkbox：
<input type="checkbox" />
你会在页面上看到一个小方框，点击它，可以看到它被选中了，再次点击，选中会被取消。
为了写好我们的兴趣复选框，我们需要在上面这个简单的复选框的基础上，给它们加上文字（配合<label>标签）、name 属性和 value 值：
<label> <input type="checkbox" name="interest" value="coding" />编程 </label>
<label> <input type="checkbox" name="interest" value="other" />其他 </label>
* 属于同一道“多选题”的每个复选框元素，应该拥有 相同 的name属性值。
需要注意的是：复选框是只有 2 种状态的表单控件：已选中或未选中。在只有一个复选框的情况下，它允许用户对某事说“是”或“否”，比如同意或不同意某个条款。而只有一个单选框的情况下，用户一旦选择了这个单选框，就不能再取消选择了，除非他刷新了网页～
现在我们把下图这个表单中的性别输入框和兴趣多选框加上（样式可能和下面这个表单有些不同，大家先不用纠结这一点，样式的问题等我们学习样式之后再讨论）
选项菜单
对于职业的选择，我们给用户提供了几个固定的选项：“公司职员”、“自由职业者”、“学生”、“其他”，当然，实际情况可能会产生更多的选项。因为选项有点多，所以我们不采用单选框，而是用到新的标签<select>和<option>，选项菜单。
每个选项用<option>标签表示，一组选项用<select>包裹：
<select name="career">
<option value="default">请选择职业</option>
<option value="staff">公司职员</option>
<option value="freelancer">自由职业者</option>
<option value="student">学生</option>
<option value="other">其他</option>
</select>
需要注意的是，这是一个单选菜单，如果用户选择了“学生”，那么提交的数据将会是：career:"student"
发现了吗？提交的内容并不是“学生”，而是<option>标签的标签属性value的值。所以每个 option 的 value 值要互不相同。
如果我们想要的是一个多选菜单，该怎么办呢？
很简单，给<select>标签添加 multiple 属性，就可以通过按住 Ctrl（或 ⌘）并单击选项来选中多个选项啦：
<select name="career" multiple>
<option value="default">请选择职业</option>
<option value="staff">公司职员</option>
<option value="freelancer">自由职业者</option>
<option value="student">学生</option>
<option value="other">其他</option>
</select>
按钮
最后，让我们来完成这个表单的注册按钮。
我们将使用 html 提供的<button>标签：
<button>注册</button>
因为<button>标签有闭合标签，在开始标签和结束标签之间，我们可以放上文字、图片、图标等等。
这个按钮放在 form 中会在点击的时候自动提交表单数据，但是在 button 提交表单数据这一点上是有浏览器兼容性问题的，一般还是需要加上 type=“submit”来确保数据的提交：
<button type="submit">注册</button>
到这里，我们就完成了一个简单的注册表单。
完整的注册表单：
<form action="">
<input type="text" name="name" placeholder="请输入昵称" />
<textarea
name="sign"
rows="5"
cols="30"
placeholder="请输入个性签名"
></textarea>
<input name="password" type="password" placeholder="请输入密码" />
<label> <input type="radio" name="gender" value="male" />男 </label>
<label> <input type="radio" name="gender" value="female" />女 </label>
<label> <input type="checkbox" name="interest" value="coding" />编程 </label>
<label> <input type="checkbox" name="interest" value="other" />其他 </label>
<select name="career">
<option value="default">请选择职业</option>
<option value="staff">公司职员</option>
<option value="freelancer">自由职业者</option>
<option value="student">学生</option>
<option value="other">其他</option>
</select>
<button type="submit">注册</button>
</form>
input标签小结
下面的表格对input标签各类型分别对应的表单控件进行了简单的小结：
