第一章 前置知识和基本标签
1.什么是HTML？
HTML并不是一门编程语言，而是一门描述性的标记语言（用标签来说话）。
语法：
<标签符>内容</标签符>
标签符一般都是成对出现的，包含一个“开始符号”和一个“结束符号”。结束符号只是在开始符号前面多加了一条斜杠“/”。
当浏览器收到HTML文本后，就会解析里面的标签符，然后把标签符对应的功能表达出来。
2.学习HTML干什么？
学习各种标签，来搭建网页的“骨架”。
3.需要知道的小知识：
想显示的东西种类不同，使用的标签也会不同。
很多时候，我们也把“标签”说成“元素”，如把“p标签”说成“p元素。
可读性和可维护性，是Web开发中极为重要的两个东西。
4.开发工具的选择：
推荐：HBuilder,上手最快！
前端开发工具有很多，如Sublime Text、Atom、HBuilder、Vscode等，但这个上手最快！
5.怎么在HBuilder中新建一个HTML页面？
（需要的私信或评论，看到后录制相关视频）
6.HTML基本结构：
文档声明：<!DOCTYPE html>。——表示这是一个HTML页面
html标签对：<html></html> ——告诉浏览器，这个页面是从<html>开始，到</html>结束
head标签对：<head></head>。 —— 网页的头部。
body标签对：<body></body>。 ——网页的身体。
如：
<!DOCTYPE html>
<html>
<head>
<title>这是网页的标题</title>
</head>
<body>
<p>这是网页的内容</p>
</body>
</html>显示内容：
7.head标签内部都有哪些子标签，他们都有啥用？
一般来说，只有6个标签能放到head标签内。
title：定义网页的标题
meta：定义页面特殊信息，如页面关键字、页面描述等。（告诉浏览器搜索引擎这个页面是干啥的）有两个重要的属性：name、http-equiv
name：示例代码如下
<!DOCTYPE html>
<html>
<head>
<!--网页关键字-->
<meta name="keywords" content="绿叶学习网,前端开发,后端开发"/>
<!--网页描述-->
<meta name="description" content="绿叶学习网是一个富有活力的Web技术学习网站"/>
<!--本页作者-->
<meta name="author" content="helicopter">
<!--版权声明-->
<meta name="copyright" content="本站所有教程均为原创，版权所有，禁止转载。否则必将追究法律责任。"/>
</head>
<body>
</body>
</html>
这四个取值时name属性的几个取值。记住keywords和description
http-equiv属性：只有两个作用
（1）定义网页所使用的编码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>这段代码告诉浏览器，该页面使用的编码是utf-8。不过在HTML5标准中，可以这样写：
<meta charset="utf-8"/>在实际开发中，为了保证不出现乱码，必须在每一个页面中加上这句代码。
（2）定义网页自动刷新跳转
<meta http-equiv="refresh" content="6;url=http://www.lvyestudy.com"/>这段代码表示当前页面在6秒后会自动跳转到http://www.lvyestudy.com这个页面。实际上，很多“小广告”网站就是用这种方式来实现页面定时跳转的 。
举例：
<!DOCTYPE html>
<html >
<head>
<meta http-equiv="refresh" content="6;url=http://www.lvyestudy.com"/>
</head>
<body>
<p>这个页面在6秒之后自动跳转到绿叶学习网首页</p>
</body>
</html>可以在HBuilder中输入这段代码，然后在浏览器中打开，6秒后，页面就会跳转到绿叶学习网首页。
link：引入外部样式文件（CSS文件）
语法：
<!DOCTYPE html>
<html >
<head>
<link type="text/css" rel="stylesheet" href="css/index.css">
</head>
<body>
</body>
</html>style：定义元素的CSS样式。
语法：
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
/*这里写CSS样式*/
</style>
</head>
<body>
</body>
</html>script：定义页面的JavaScript代码，也可以引入外部JavaScript文件。
语法：
<!DOCTYPE html>
<html >
<head>
<script>
/*这里写JavaScript代码*/
</script>
</head>
<body>
</body>
</html>base：无意义，忽略它，知道有它的存在就行了。
8.body标签
网页的“身体”
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>body标签</title>
</head>
<body>
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。</p>
<em>举头望明月，低头思故乡。</em>
</body>
</html> 
<meta charset="utf-8" />的作用是防止页面出现乱码，在每一个HTML页面中，我们都要加上这句代码。此外，<meta charset="utf-8" />这一句必须放在title标签以及其他meta标签前面，这一点大家要记住。
9.HTML注释
语法：
<!--注释的内容--><!---->又叫注释标签。
<!--表示注释的开始，-->表示注释的结束。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML注释</title>
</head>
<body>
<h3>静夜思</h3> <!--标题标签-->
<p>床前明月光，疑是地上霜。</p> <!--文本标签-->
<p>举头望明月，低头思故乡。</p> <!--文本标签-->
</body>
</html>本章练习
一、单选题
1．下面哪一个标签不能放在head标签内？（ ）
A．title标签B．style标签C．body标签D．script标签
2．如果网页中出现乱码，我们一般使用（ ）来解决。
A．<meta charset="utf-8"/>
B．<style type="text/css"></style>
C．<script></script>
D．<link type="text/css"rel="stylesheet"href="css/index.css">
3．下面选项中，属于HTML正确注释方式的是（ ）。
A．//注释内容
B．/*注释内容*/
C．<!--注释内容-->
D．//注释内容//
二、编程题不借助开发工具代码提示，默写HTML基本结构。
（做不出来的回看，重新学本章，学完再开下一章）
——应该不会有人做不出来。
第二章 文本
在HTML中，我们主要学习怎么来做一个静态页面。大多数静态页面都是由以下4种元素组成：文字、图片、超链接、音频和视频 。
注意：
区分一个概念，不是“会动”的页面就叫动态页面。静态页面和动态页面的区别在于是否与服务器进行数据交互。
---------------------------------------------------------------------------------------------------------------------------------接下来要学习以下标签：
标题标签、段落标签、换行标签、文本标签、水平线标签、特殊符号。
1.标题标签
在HTML中，共有6个级别的标题标签：h1、h2、h3、h4、h5、h6。
其中h是header的缩写。6个标题标签在页面中的重要性是有区别的，其中h1标签的重要性最高，h6标签的重要性最低。
注意：一个页面只能有一个h1标题，其他级别的没限制。（当然了，不是硬性规定，不过这就像写作文一样，你见过哪篇作文有两个大标题？但是小标题是可以有多个的。）
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>标题标签</title>
</head>
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
</html>
注意区分：
title标签和h1标签是不一样的。title标签用于显示地址栏的标题，而h1标签用于显示文章的标题。
2.段落标签<p></p>
语法：
<p>段落内容</p>举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>段落标签</title>
</head>
<body>
<h3>I LOVE YOU, girl</h3>
<p>阿悠，在运动会那天，当我们坐在一起呐喊时，我就知道，我可能爱上你了！</p>
<p>虽然我们交流的不多，但是，你的善良、温柔和顽强不息的生命力一直深深的吸引着我！</p>
<p>I LOVE YOU, girl!</p>
</body>
</html>
注：别急着想控制网页的外观，那属于CSS。HTML时用于控制网页结构的。
3.换行标签<br/>
段落标签是会自动换行的。那么，如果想随意地对文字进行换行处理，该怎么做呢？
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>换行标签</title>
</head>
<body>
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。举头望明月，低头思故乡。</p>
</body>
</html> 
如果想两句一换行，有两种方法：
方法一：使用两个p标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>换行标签</title>
</head>
<body>
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
</body>
</html>
方法二：使用br标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>换行标签</title>
</head>
<body>
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。<br/>举头望明月，低头思故乡。</p>
</body>
</html>
对比发现：使用p标签会导致段落与段落之间有一定的间隙，而使用br标签则不会。
4.文本标签
在HTML中，我们可以使用“文本标签”来对文字进行修饰，如粗体、斜体、上标、下标等。
常用的文本标签有以下8种。
粗体标签：strong、b。
斜体标签：i、em、cite。
上标标签：sup。
下标标签：sub。
中划线标签：s。
下划线标签：u。
大字号标签：big。
小字号标签：small。
（1）.粗体标签strong、b
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>粗体标签</title>
</head>
<body>
<p>这是普通文本</p>
<strong>这是粗体文本</strong><br/>
<b>这是粗体文本</b>
</body>
</html> 
strong和b加粗效果一样！建议使用strong。
（2）.斜体标签em、i、cite
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>斜体标签</title>
</head>
<body>
<i>斜体文本</i><br/>
<em>斜体文本</em><br/>
<cite>斜体文本</cite>
</body>
</html>
建议使用em
（3）.上标标签sup
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>上标标签</title>
</head>
<body>
<p>（a+b）<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab</p>
</body>
</html> 
（4） .下标标签sub
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下标标签</title>
</head>
<body>
<p>H<sub>2</sub>SO<sub>4</sub>指的是硫酸分子</p>
</body>
</html>
（5）.中划线标签s
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>删除线标签</title>
</head>
<body>
<p>新鲜的新西兰奇异果</p>
<p><s>原价:￥6.50/kg</s></p>
<p><strong>现在仅售：￥4.00/kg</strong></p>
</body>
</html>
注：学了CSS之后，对于删除线效果，一般会用CSS来实现，几乎不会用s标签来实现
（6）.下划线标签u
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下划线标签</title>
</head>
<body>
<p><u>绿叶学习网</u>是一个精品的技术分享网站。</p>
</body>
</html>
注：等学了CSS之后，对于下划线效果，一般会用CSS来实现，几乎不会用u标签来实现
（7）. 大字号标签big和小字号标签small
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>big标签和small标签</title>
</head>
<body>
<p>普通字体文本 </p>
<big>大字号文本</big><br/>
<small>小字号文本</small>
</body>
</html>
注：实际开发中大多还是由CSS实现，了解一下啊，了解一下。
下面这些必须记住：
5.水平线标签hr
语法：
<hr/>举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>水平线标签</title>
</head>
<body>
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
<hr/>
<h3>春晓</h3>
<p>春眠不觉晓，处处闻啼鸟。</p>
<p>夜来风雨声，花落知多少。</p>
</body>
</html>
6.div标签
div，用来划分一个区域。 在div标签内可以放入绝大多数其它标签。
在HTML中，我们可以使用“div标签”来划分HTML结构，从而配合CSS来整体控制某一块的样式。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>div标签</title>
</head>
<body>
<!--这是第一首诗-->
<div>
<h3>静夜思</h3>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
</div>
<hr/>
<!--这是第二首诗-->
<div>
<h3>春晓</h3>
<p>春眠不觉晓，处处闻啼鸟。</p>
<p>夜来风雨声，花落知多少。</p>
</div>
</body>
</html>
对比上一个举例：两个代码有区别，但是结果一样。
问：那div的作用是？
（1）.划分区域，使得代码更具有逻辑性。
（2）.划分区域，结合CSS针对该区域进行样式控制。（这是最重要的用途）
7.自闭合标签
在HTML中，标签分为两种：一般标签合自闭合标签。
它们有什么不同呢？
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自闭合标签</title>
</head>
<body>
<div>
<h3>绿叶学习网</h3>
<hr/>
<p>“绿叶，给你初恋般的感觉。”</p>
</div>
</body>
</html>
该例子中，meta和hr标签是自闭合标签，div，p是一般标签。
总结：
一般标签：有开始符号和结束符号。可以在内部插入其它标签或文字。
自闭合标签：只有开始符号，没有结束符号。不可以在内部插入标签或文字。（没有用配对的结束符来关闭，自己关闭了）
在HTML中，常见的自闭合标签如下：
8.块元素和行内元素
这里所说的元素就是标签。
注意：这一节内容很重要。在HTML和CSS中都很重要！必须掌握！
什么是块元素？
显示的时候独占一行的元素。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自闭合标签</title>
</head>
<body>
<div>
<h3>绿叶学习网</h3><hr/>
<p><strong>Let's go!</strong>“绿叶，给你初恋般的感觉。”<hr/></p>
<strong>I'm a stronger!</strong>
<em>no, you're a shit!</em>
</div>
</body>
</html>
hr、p属于块元素，分析举例知：
尽管h3和hr在代码中是同一行，但是显示的时候是两行。
尽管strong和em在代码中是两行，但是显示的时候是一行。
总结：
块元素指的是显示的时候独占一行的元素，与代码中是否在同一行没有关系。
什么是行内元素？
行内元素是可以与其他行内元素位于同一行的元素。
比如，上一个例子中的strong、em
注：本节知道块元素和行内元素的概念就OK了。
9.特殊符号
（1）.网页中的空格
在HTML中，想要显示空格，是要用代码实现的，手动的输入的空格无效。可以自己试试。
空格的代码是：
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> 网页中的“空格”</title>
</head>
<body>
<h3>爱莲说</h3>
<p> 水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
<p> 予谓菊，花之隐逸者也；牡丹，花之富贵者也；莲，花之君子者也。噫！菊之爱，陶后鲜有闻；莲之爱，同予者何人? 牡丹之爱，宜乎众矣。</p>
</body>
</html>
（2）.网页中的特殊符号
在HTML中，如果想要显示一个特殊符号，是需要通过代码来实现的。这些特殊符号对应的代码，都是以“&”开头，并且以“;”（英文分号）结尾的。
这些特殊符号，可以分为两类：
容易通过输入法输入的，不必使用代码实现。
难以通过输入法输入的，需要使用代码实现。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>特殊符号</title>
</head>
<body>
<p>欧元符号：€</p>
<p>英镑符号：£</p>
</body>
</html> 
当然了，使用下面的代码，实现的效果是一样的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>特殊符号</title>
</head>
<body>
<p>欧元符号：€</p>
<p>英镑符号：￡</p>
</body>
</html>注意：难输入不是说不能输入！
本章练习
一、单选题
1．选出你认为最合理的定义标题的方法（ ）。
A．<div>文章标题</div>
B．<p><b>文章标题</b></p>
C．<h1>文章标题</h1>
D．<strong>文章标题</strong>
2．如果想要得到粗体效果，我们可以使用（ ）标签来实现。
A．<strong></strong>
B．<em></em>
C．<sup></sup>
D．<sub></sub>
3．下面有关自闭合标签，说法不正确的是（ ）。
A．自闭合标签只有开始符号没有结束符号
B．自闭合标签可以在内部插入文本或图片
C．meta标签是自闭合标签
D．hr标签是自闭合标签
4．下面的标签中，哪一个不是块元素？（ ）
A．strong
B．p
C．div
D．hr
二、编程题使用这一章学到的各种文本标签，实现图所示的网页效果。
答案：
一、CABA
二、示例代码如下：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>各科小常识</h1>
<div>
<h3>语文</h3>
<p> 三国演义是中国四大古典名著之一，元末明初小说家罗贯中所著。<br />
是中国第一部章回体历史演义的小说，描写了从东汉末年到西晋初期近100年的历史风云。</p>
<hr />
</div>
<div>
<h3>数学</h3>
<p> 三角函数关系式sin<sup>2</sup>+cos<sup>2</sup>=1</p>
<hr />
</div>
<div>
<h3>英语</h3>
<p> No pain，No gain.</p>
<hr />
</div>
<div>
<h3>化学</h3>
<p> H<sub>2</sub>SO<sub>4</sub>是一种重要的工业原料，可用于只做肥料、洗涤剂等。</p>
<hr />
</div>
<div>
<h3>经济</h3>
<p> 版权符号：©</p>
<p> 注册商标：®</p>
</div>
</body>
</html>第三章 列表
在HTML中，列表共有三种：
有序、无序、定义列表。
有序列表：列表项之间有先后顺序之分。
无序列表：列表项之间没有先后顺序之分。
定义列表：一组带有特殊含义的列表，一个列表项中包含“条件”和“列表”两部分。
1.有序列表
从<ol>开始，到</ol>结束。
在有序列表中，一般采用数字或字母作为顺序，默认采用数字顺序。
语法：
<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>在该语法中，<ol>和</ol>标志着有序列表的开始和结束，而<li>和</li>标签表示这是一个列表项。一个有序列表可以包含多个列表项。
注意：ol标签和li标签需要配合一起使用，不可以单独使用，而且<ol>标签的子标签也只能是li标签，不能是其他标签。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>有序列表</title>
</head>
<body>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ol>
</body>
</html>
怎么用英文字母来表示顺序呢？
通过type属性
type属性：
在HTML中，我们可以使用type属性来改变列表项符号。
语法：
<ol type="属性值">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>在有序列表中，type属性取值如下：
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>type属性 </title>
</head>
<body>
<ol type="a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ol>
</body>
</html>
注：对于有序列表的列表项符号，等学了CSS之后，我们可以不再使用type属性，而应使用liststyle-type属性。
2.无序列表
默认情况下，无序列表的列表项符号是●，我们可以通过type属性来改变其样式。
语法：
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>一个无序列表可以包含多个列表项。
注意：ul标签和li标签也需要配合一起使用，不可以单独使用，而且ul标签的子标签也只能是li标签，不能是其他标签。这一点与有序列表是一样的。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无序列表</title>
</head>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
</body>
</html>
type属性：
语法：
<ul type="属性值">
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>在无序列表中，type属性取值如下：
注：对于无序列表的列表项符号，等学了CSS之后，我们可以不再使用type属性，而应使用list-style-type属性。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>type属性</title>
</head>
<body>
<ul type="circle">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>jQuery</li>
<li>Vue.js</li>
</ul>
</body>
</html>
注意：ul元素内部的文本，只能在li元素内部添加。
实际开发中，无序列表用的最多。
3.定义列表
在HTML中，定义列表由两部分组成：名词和描述。
语法：
<dl>
<dt>名词</dt>
<dd>描述</dd>
……
</dl><dl>标记和</dl>标记分别定义了定义列表的开始和结束，dt标签用于添加要解释的名词，而dd标签用于添加该名词的具体解释。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>定义列表</title>
</head>
<body>
<dl>
<dt>HTML</dt>
<dd>制作网页的标准语言，控制网页的结构</dd>
<dt>CSS</dt>
<dd>层叠样式表，控制网页的样式</dd>
<dt>JavaScript</dt>
<dd>脚本语言，控制网页的行为</dd>
</dl>
</body>
</html>
4.HTML语义化
对于大多数标签实现的效果，使用div和span这两个就可以做到，为什么还要费心费力去学习那么多标签？
如，前面有序列表举例使用div同样可以实现相同的效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>1.HTML</div>
<div>2.CSS</div>
<div>3.JavaScript</div>
<div>4.jQuery</div>
<div>5.Vue.js</div>
</body>
</html>
HTML的精髓就在于标签的语义。在HTML中，大部分标签都有它自身的语义。例如，p标签，表示的是paragraph，标记的是一个段落；h1标签，表示的是header1，标记的是一个最高级标题。但div和span是无语义的标签，我们应该优先使用其他有语义的标签。
语义化是非常重要的一个思想。在整站开发中，编写的代码往往成千上万行，你现在的几行代码无法与其相提并论。如果全部使用div和span来实现，你会看得头晕。
要是某一行代码出错了怎么办？你怎么快速地找到那一行代码呢？除了可读性，语义化对于搜索引擎优化来说，也是极其重要的。
HTML很简单，因此很多初学者往往会忽略学习它的目的和重要性。我们学习HTML的目的并不是记住所有的标签，而是在你需要的地方能使用正确的语义化标签。把标签用在对的地方，这才是学习HTML的目的所在。
本章练习
一、单选题
1．在下面几种列表形式中，哪一种在HTML5中已经被废弃了。（ ）
A．有序列表ol
B．无序列表ul
C．定义列表dl
D．目录列表dir
2．下面哪种列表是我们在实际开发中用得最多的？（ ）
A．有序列表ol
B．无序列表ul
C．定义列表dl
D．目录列表dir
3．下面有关ul元素（不考虑嵌套列表）的说法不正确的是（ ）。
A．ul元素的子元素只能是li，不能是其他元素
B．ul元素内部的文本，只能在li元素内部添加，不能在li元素外部添加
C．绝大多数列表都是使用ul元素来实现的，而不是ol元素
D．我们可以在ul元素中直接插入div元素
4．下面有关HTML语义化，不正确的是（ ）。
A．对于大多数标签实现的效果，我们完全可以使用div和span来代替实现
B．学习HTML的目的在于在需要的地方，能使用正确的标签
C．语义化对于搜索引擎优化来说是非常重要的
D．语义化的目的在于提高可读性和可维护性
二、编程题
下图是一个问卷调查网页，请制作出来。
要求：（1）大标题用h1标签；（2）小题目用h3标签；（3）前两个问题使用有序列表；（4）最后一个问题使用无序列表。
答案：
一、DBDA
二、示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
</head>
<body>
<h1>问卷调查</h1>
<div>
<h3>1、你是通过什么途径来到绿叶学习网的？</h3>
<ol type="A">
<li>百度搜索</li>
<li>谷歌搜索</li>
<li>其他途径</li>
</ol>
</div>
<div>
<h3>2、你觉得绿叶学习网页面设计怎么样？</h3>
<ol type="A">
<li>酷炫大方</li>
<li>比较普通</li>
<li>非常粗糙</li>
</ol>
</div>
<div>
<h3>3、你觉得这本书怎么样？（多选）</h3>
<ul>
<li>通俗易懂，轻松幽默</li>
<li>内容丰富，技巧贼多</li>
<li>三个字：好到爆！</li>
</ul>
</div>
</body>
</html>第四章 表格
1.基本结构
在HTML中，一个表格一般由3个部分组成：
表格：table标签。
行：tr标签。
单元格：td标签。
语法：
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table><table>和</table>表示整个表格的开始和结束，<tr>和</tr>表示行的开始和结束，而<td>和</td>表示单元格的开始和结束。
在表格中，有多少组“<tr></tr>”，就表示有多少行。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格基本结构</title>
<!--这里使用CSS为表格加上边框-->
<style type="text/css">
table,tr,td{border:1px solid silver;}
</style>
</head>
<body>
<table>
<tr>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<td>JavaScript</td>
<td>jQuery</td>
</tr>
</table>
</body>
</html>
默认情况下，表格是没有边框的。在这个例子中，我们使用CSS加入边框，是为了更清楚地看到一个表格结构。对于表格的边框、颜色、大小等的设置，在CSS中会学到，这里不需要理解那一句CSS代码。
注意：学习HTML时，只考虑结构就行了，学习CSS时，再考虑样式。
2.完整结构
上一节介绍了表格的“基本结构”，但是一个表格的“完整结构”不是只有table、tr、td，还包括caption、th等。
（1）.表格标题：caption
语法：
<table>
<caption>表格标题</caption>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
<tr>
<td>单元格3</td>
<td>单元格4</td>
</tr>
</table>
注：一个表格只能有一个标题，也就是只能有一个caption标签。在默认情况下，标题位于整个表格的第一行。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格标题</title>
<!--这里使用CSS为表格加上边框-->
<style type="text/css">
table,tr,td{border:1px solid silver;}
</style>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小红</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小杰</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>
</body>
</html>
（2）.表头单元格th
在HTML中，单元格有两种：
“表头单元格”，使用的是th标签；
“表行单元格”，使用的是td标签。
语法：
<table>
<caption>表格标题</caption>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
<tr>
<td>表行单元格1</td>
<td>表行单元格2</td>
</tr>
<tr>
<td>表行单元格3</td>
<td>表行单元格4</td>
</tr>
</table>举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表头单元格</title>
<!--这里使用CSS为表格加上边框-->
<style type="text/css">
table,tr,td,th{border:1px solid silver;}
</style>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<tr>
<th>姓名</th>
<th>语文</th>
<th>英语</th>
<th>数学</th>
</tr>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小红</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小杰</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>
</body>
</html>
3.语义化
一个完整的表格包含：table、caption、tr、th、td。为了更进一步地对表格进行语义化，HTML引入了thead、tbody和tfoot这3个标签。
thead、tbody和tfoot把表格划分为3部分：表头、表身、表脚。有了这些标签，表格语义更加良好，结构更加清晰，也更具有可读性和可维护性。
语法：
<table>
<caption>表格标题</caption>
<!--表头-->
<thead>
<tr>
<th>表头单元格1</th>
<th>表头单元格2</th>
</tr>
</thead>
<!--表身-->
<tbody>
<tr>
<td>表行单元格1</td>
<td>表行单元格2</td>
</tr>
<tr>
<td>表行单元格3</td>
<td>表行单元格4</td>
</tr>
</tbody>
<!--表脚-->
<tfoot>
<tr>
<td>标准单元格5</td>
<td>标准单元格6</td>
</tr>
</tfoot>
</table>举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表格语义化</title>
<!--这里使用CSS为表格加上边框-->
<style type="text/css">
table,tr,td,th{border:1px solid silver;}
</style>
</head>
<body>
<table>
<caption>考试成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>英语</th>
<th>数学</th>
<tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>80</td>
<td>80</td>
<td>80</td>
</tr>
<tr>
<td>小红</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>小杰</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均</td>
<td>90</td>
<td>90</td>
<td>90</td>
</tr>
</tfoot>
</table>
</body>
</html>
表脚（tfoot）往往用于统计数据。对于thead、tbody和tfoot标签，不一定需要全部都用上，如tfoot就很少用。一般情况下，我们根据实际需要来使用这些标签。
注意：thead、tbody和tfoot除了可以使代码更具有语义，还有另外一个重要作用：方便分块来控制表格的CSS样式。
4.合并行rowspan
所谓的合并行，指的是将纵向的N个单元格合并。
语法：
<td rowspan="跨域的行数"></td>举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>rowspan属性</title>
<style type="text/css">
table,tr,td{border:1px solid silver;}
</style>
</head>
<body>
<table>
<tr>
<td>姓名:</td>
<td>小明</td>
</tr>
<tr>
<td rowspan="2">喜欢水果:</td>
<td>苹果</td>
</tr>
<tr>
<td>香蕉</td>
</tr>
</table>
</body>
</html>
将rowspan=“2”删除，结果如下：
rowspan="2"实际上是让加上rowspan属性的td标签跨越两行。
5.合并列colspan
将横向的N个单元格合并。
语法：
<td colspan="跨域的列数"></td>举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>colspan属性</title>
<style type="text/css">
table,tr,td{border:1px solid silver;}
</style>
</head>
<body>
<table>
<tr>
<td colspan="2">前端开发技术</td>
</tr>
<tr>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<td>JavaScript</td>
<td>jQuery</td>
</tr>
</table>
</body>
</html>
本章练习
一、单选题下面有关表格的说法，正确的是（ ）。
A．表格已经被抛弃了，现在没必要学
B．我们可以使用表格来布局
C．表格一般用于展示数据
D．表格最基本的3个标签是tr、th、td
二、编程题利用这一章学到的知识，制作如图所示的表格效果，并且要求代码语义化。
答案：
一、C
二、代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
table,tr,td{border:1px solid silver;}
</style>
</head>
<body>
<table>
<caption>学生成绩表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>250</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>520</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>平均分</td>
<td colspan="2">385</td>
</tr>
</tfoot>
</table>
</body>
</html>第五章 图片
在HTML中，我们可以使用img标签来显示一张图片。对于img标签，我们需要掌握它的3个属性：src、alt和title。
1.图片标签
（1）.src属性
src用于指定这个图片所在的路径，这个路径可以是相对路径，也可以是绝对路径。（下节讲路径）
语法：
<img src="图片路径" />所谓的“图片路径”，指的就是“图片地址”。任何一张图片必须指定src属性才可以显示。src是img标签必不可少的属性。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<img src="https://img.shetu66.com/2023/04/25/1682391068745168.png">
</body>
</html>
（2）.alt属性和title属性
共同点：都是用于图片描述。
不同点：
alt描述文字是给搜索引擎看的，当图片无法显示时，页面会显示alt中的文字。
title描述文字是给用户看的，当鼠标指针移到图片上时，会显示title中的文字。
举例：alt属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<img src="" alt="海贼王之索隆" />
</body>
</html>
举例：title属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<img src="https://img.shetu66.com/2023/04/25/1682391068745168.png" title="可爱的小猫咪">
</body>
</html>
当将鼠标放到图片上时会显示title中的文字。
注意：在实际开发中，对于img标签，src和alt这两个是必选属性，一定要添加；而title是可选属性，可加可不加。
2.图片路径
首先先新建一个项目，目录结构如下：
(1).在page1.html中引用图片
什么是绝对路径？
图片在计算机中的完整路径。如：
<img src="D:/HTMLCSS/website/img/cat.png" />
什么是相对路径？
图片相对于当前页面的位置。如：
<img src="img/cat.png" />(2).page2.html引用图片
绝对路径同上。
相对路径：
<img src="../img/cat.png"/>..的意思是往回退一步。
注意：在实际开发中，不论是图片还是超链接，一般都使用相对路径，几乎不会使用绝对路径。
3.图片格式
在网页中，图片格式有两种：位图、矢量图。
（1）.位图
位图，又叫作“像素图”，它是由像素点组成的图片。对于位图来说，放大图片后，图片会失真；缩小图片后，图片同样也会失真。
在实际开发中，最常见的位图的图片格式有3种：jpg（或jpeg）、png、gif。深入理解3种图片适合在哪种情况下使用，在前端开发中是非常重要的。
jpg格式可以很好地处理大面积色调的图片，适合存储颜色丰富的复杂图片，如照片、高清图片等。jpg格式的图片体积较大，并且不支持保存透明背景。
png格式是一种无损格式，可以无损压缩以保证页面打开速度。png格式的图片体积较小，并且支持保存透明背景，不过不适合存储颜色丰富的图片。
gif格式的图片效果最差，不过它适合制作动画。实际上，小伙伴们经常在QQ或微信上发的动图都是gif格式的。
总结：
如果想要展示色彩丰富的高品质图片，可以使用jpg格式；
如果是一般图片，为了减少体积快速打开或者想要透明效果，可以使用png格式；
如果是动画图片，可以使用gif格式。
注：对于位图，我们可以使用Photoshop这个软件来处理
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jpg、png与gif</title>
<style type="text/css">
body{background-color:hotpink;}
</style>
</head>
<body>
<img src="img/cat1.jpg" alt=""/><br/>
<img src="img/cat.png" alt=""/><br/>
<img src="img/forest.gif" alt=""/>
</body>
</html>
总结：jpg图片不支持透明，png图片支持透明，而gif图片可以做动画。（我这图片其实都是png图片，只是改了个后缀。总之，相信总结吧！）
（2）.矢量图
矢量图，又叫作“向量图”，是以一种数学描述的方式来记录内容的图片格式。
矢量图最大的优点是图片无论放大、缩小或旋转等，都不会失真。最大的缺点是难以表现色彩丰富的图片。
矢量图的常见格式有“.ai”“.cdr”“.fh”“.swf”。其中“.swf”格式比较常见，它指的是Flash动画，其他几种格式的矢量图比较少见，可以忽略。对于矢量图，我们可以使用illustrator或者CorelDRAW这两款软件来处理。
在网页中，很少用到矢量图，除非是一些字体图标（iconfont）。
对于位图和矢量图的区别，总结以下4点：
位图适用于展示色彩丰富的图片，而矢量图不适用于展示色彩丰富的图片。
位图的组成单位是“像素”，而矢量图的组成单位是“数学向量”。
位图受分辨率影响，当图片放大时会失真；而矢量图不受分辨率影响。
网页中的图片绝大多数都是位图，而不是矢量图。
本章练习
一、单选题
1．在img标签中，（ ）属性的内容是提供给搜索引擎看的。
A．src B．alt C．title D．class
2．下面说法，正确的是（ ）。
A．当鼠标移到图片上时，就会显示img标签alt属性中的文字
B．src是img标签必不可少的属性，只有定义它之后图片才可以显示出来
C．在实际开发中，我们常用的是绝对路径，很少用到相对路径
D．如果想要显示一张动画图片，可以使用png格式来实现
3．在下图的目录结构中，blog与img这两个文件位于同一层级，如果我们要在page1.html中显示haizei.png这张图片，正确的路径写法是（ ）
A．<img src="../../img/haizei.png" alt=""/>
B．<img src="../img/haizei.png" alt=""/>
C．<img src="img/haizei.png" alt=""/>
D．<img src="../blog/img/haizei.png" alt=""/>
二、编程题尝试在一个页面显示3种格式（jpg、png、gif）的图片，并且注意路径的书写。
答案：
一、BBA
二、代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jpg、png与gif</title>
<style type="text/css">
body{background-color:hotpink;}
</style>
</head>
<body>
<img src="img/R-C.jpg" alt=""/><br/>
<img src="img/cat.png" alt=""/>
<img src="img/haizeiwang.gif" alt=""/>
</body>
</html>
第六章 超链接
每一个网站都由非常多的网页组成，而页面之间通常都是通过超链接来相互关联的。超链接能够让我们在各个独立的页面之间方便地跳转
1.a标签
在HTML中，我们可以使用a标签来实现超链接。
<a href="链接地址">文本或图片</a>href用来制定要跳转到的页面的地址，可以是相对路径，也可以是绝对路径。
我们可以将文本设置为超链接，这种叫作“文本超链接”。也可以将图片设置为超链接，这种叫作“图片超链接”。
举例：文本超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<a href="http://www.lvyestudy.com">绿叶学习网</a>
</body>
</html>
点击跳转。
举例：图片超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<a href="http://www.lvyestudy.com"><img src="img/R-C.jpg" alt="绿叶学习网"/></a>
</body>
</html>
点击图片跳转。
2.target属性
默认情况下，超链接都是在当前浏览器窗口打开新页面的。在HTML中，我们可以使用target属性来定义超链接打开窗口的方式。
语法：
<a href="链接地址" target="打开方式"></a>a标签的target属性有四种取值：
记住_blank就行了。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<a href="http://www.lvyestudy.com" target="_blank">绿叶学习网</a>
</body>
</html>3.内部链接
在HTML中，超链接有两种：一种是外部链接，另外一种是内部链接。外部链接指向的是“外部网站的页面”，而内部链接指向的是“自身网站的页面”。上一节我们接触的就是外部链接，这一节我们来学习一下内部链接。
修改website项目结构：
如果我们在page1.html单击超链接，跳转到page2.html或者page3.html，这种超链接就是内部链接。这是因为3个页面都是位于同一个网站根目录下的。
内部链接使用的都是相对路径，而不是绝对路径
4.锚点链接
有些页面内容比较多，导致页面过长，此时用户需要不停地拖动浏览器上的滚动条才可以看到下面的内容。为了方便用户操作，我们可以使用锚点链接来优化用户体验。
在HTML中，锚点链接其实是内部链接的一种，它的链接地址（也就是href）指向的是当前页面的某个部分。所谓锚点链接，简单地说，就是单击某一个超链接，它就会跳到当前页面的某一部分。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<a href="#article">推荐文章</a><br />
<a href="#music">推荐音乐</a><br />
<a href="#movie">推荐电影</a><br />
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="article">
<h3>推荐文章</h3>
<ul>
<li>朱自清-荷塘月色</li>
<li>余光中-乡愁</li>
<li>鲁迅-阿Q正传</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="music">
<h3>推荐音乐</h3>
<ul>
<li>林俊杰-被风吹过的夏天</li>
<li>曲婉婷-我的歌声里</li>
<li>许嵩-灰色头像</li>
</ul>
</div>
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
……<br />
<div id="movie">
<h3>推荐电影</h3>
<ul>
<li>蜘蛛侠系列</li>
<li>钢铁侠系列</li>
<li>复仇者联盟</li>
</ul>
</div>
</body>
</html>
想要实现锚点链接，需2个参数：
目标元素的id
a标签的href属性指向该id
注意：给a标签的href属性赋值时，需要在id前面加上“#”，用来表示这是一个锚点链接。
本章练习
一、单选题
1．想要使超链接以新窗口的方式打开网页，需要定义target属性值为（ ）。
A．_self B．_blank C．_parent D．_top
2．我们可以使用（ ）快速定位到当前页面的某一部分。
A．外部链接 B．锚点链接 C．特殊链接 D．target属性
3．下面有关超链接的说法，正确的是（ ）。
A．不仅文本可以设置超链接，图片也可以设置超链接
B．锚点链接属于外部链接的一种
C．可以使用src属性指定超链接的跳转地址
D．可以使用“target="-blank";”指定超链接在新窗口打开
二、编程题制作如图8-7所示的网页，要求单击图片或者文字时，都可以跳转到新的页面，并且设置以新窗口的方式打开。
答案：
一、BBA
二、示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
</head>
<body>
<a href="http://www.lvyestudy.com" target="_blank"><img src="img/1.png" alt="绿叶学习网"/></a><br />
<a href="http://www.lvyestudy.com" target="_blank"><h3>绿叶，给你初恋般的感觉</h3></a>
</body>
</html>
第七章 表单
什么是表单？
指的是文本框、按钮、单选框、复选框、下拉列表等的统称。
表单可以用来干什么？
可以用来做动态页面。
什么是静态页面？什么是动态页面？
如果一个页面仅仅供用户浏览，那就是静态页面。如果这个页面还能实现与服务器进行数据交互（像注册登录、话费充值、评论交流），那就是动态页面。
表单是我们接触动态页面的第一步。其中表单最重要的作用就是在浏览器端收集用户的信息，然后将数据提交给服务器来处理。
1.表单标签
在HTML中，表单标签有5种：form、input、textarea、select和option
根据外观进行划分，表单可以分为8种：单行文本框、密码文本框、单选框、复选框、按钮、文件上传、多行文本框、下拉列表。
2.form标签
创建一个表单，必须要把所有表单标签放在form标签内部。
语法：
<form>
各种表单标签
</form>举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<form>
<input type="text" value="这是一个单行文本框"/><br/>
<textarea>这是一个多行文本框</textarea><br/>
<select>
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</select>
</form>
</body>
</html>
3.form标签的属性：
（1）.name属性：
在一个页面中，表单可能不止一个，每一个form标签就是一个表单。为了区分这些表单，我们可以使用name属性来给表单命名。
举例：
<form name="myForm"></form>（2）.method属性：
在form标签中，method属性用于指定表单数据使用哪一种http提交方法。method属性取值有两个：一个是“get”，另外一个是“post”。get的安全性较差，而post的安全性较好。所以在实际开发中，大多数情况下我们都是使用post。
举例：
<form method="post"></form>（3）.action属性：
指定表单数据提交到哪一个地址进行处理。
举例：
<form action="index.php"></form>（4）.target属性：
指定窗口的打开方式，一般情况下，只会用到“_blank”这个属性值.
举例：
<form target="_blank"></form>（5）.enctype属性：
在form标签中，enctype属性用于指定表单数据提交的编码方式。一般情况下，我们不需要设置，除非你用到上传文件功能。
4.input标签
语法：
<input type="表单类型" />input是自闭合标签，它是没有结束符号的。其中type属性取值如表所示：
5.单行文本框：
在HTML中，单行文本框是使用input标签来实现的，其中type属性取值为“text”。单行文本框常见于网站的注册登录功能中。
语法：
<input type="text" />举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
姓名：<input type="text" />
</form>
</body>
</html>
单行文本框的属性：
注意：对于元素属性的定义，是没有先后顺序的
举例：value属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
姓名：<input type="text" /><br />
姓名：<input type="text" value="helicopter"/>
</form>
</body>
</html>
value属性用于设置单行文本框中默认的文本，如果没有设置，文本框就是空白的。
举例：size属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
姓名：<input type="text" size="20"/><br />
姓名：<input type="text" size="10"/>
</form>
</body>
</html>
size属性可以用来设置单行文本框的长度，不过在实际开发中，我们一般不会用到这个属性，而是使用CSS来控制。
举例：maxlength属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post"><form method="post">
姓名：<input type="text" />
姓名：<input type="text" maxlength="5"/>
</form>
</body>
</html>
maxlength决定了最多能输入几个字符。
6.密码文本框
密码文本框在外观上与单行文本框相似，两者拥有相同的属性。不过在单行文本框中输入的字符是可见的，而在密码文本框中输入的字符不可见。
语法：
<input type="password" />举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
账号：<input type="text" /><br />
密码：<input type="password" />
</form>
</body>
</html>
密码文本框属性：
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
账号：<input type="text" size="15" maxlength="10" value="1234554321000" /><br />
密码：<input type="password" size="15" maxlength="10" />
</form>
</body>
</html>
value为默认显示文本，文本长度可以比maxlength长，但是手动输入时不行。
7.单选框
在HTML中，单选框也是使用input标签来实现的，其中type属性取值为“radio“
语法：
<input type="radio" name="组名" value="取值" />name属性表示单选按钮所在的组名，而value表示单选按钮的取值，这两个属性必须要设置。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
性别:
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女
</form>
</body>
</html>
checked属性可以实现让第一个单选框默认情况下被选中。
举例：checked属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
性别:
<input type="radio" name="gender" value="男" checked />男
<input type="radio" name="gender" value="女" />女
</form>
</body>
</html>
对于同一组的单选框，必须要设置一个相同的name，这样才会把这些选项归为同一个组。
注意：为了更好地语义化，表单元素与后面的文本一般都需要借助label标签关联起来
比如：
<label><input type="radio" name="gender" value="男" />男</label>
<label><input type="radio" name="gender" value="女" />女</label>8.复选框
在HTML中，复选框也是使用input标签来实现的，其中type属性取值为“checkbox”。单选框只能选择一项，而复选框可以选择多项。
语法：
<input type="checkbox" name="组名" value="取值" />举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
你喜欢的水果：<br/>
<input type="checkbox" name="fruit" value="苹果"/>苹果
<input type="checkbox" name="fruit" value="香蕉"/>香蕉
<input type="checkbox" name="fruit" value="西瓜"/>西瓜
<input type="checkbox" name="fruit" value="李子"/>李子
</form>
</body>
</html>
checked也可以实现默认情况下复选框被选中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
你喜欢的水果：<br/>
<input type="checkbox" name="fruit" value="苹果" checked/>苹果
<input type="checkbox" name="fruit" value="香蕉"/>香蕉
<input type="checkbox" name="fruit" value="西瓜" checked/>西瓜
<input type="checkbox" name="fruit" value="李子"/>李子
</form>
</body>
</html>
9.按钮
在HTML中，常见的按钮有3种：普通按钮（button），提交按钮（submit），重置按钮（reset）
（1）.普通按钮button
语法：
<input type="button" value="取值" />value的取值就是按钮上的文字。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
<input type="button" value="表白"/>
</form>
</body>
</html>
（2）.提交按钮submit
在HTML中，提交按钮一般都是用来给服务器提交数据的。我们可以把提交按钮看成是一种特殊功能的普通按钮。
语法：
<input type="submit" value="取值" />举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
<input type="button" value="普通按钮"/>
<input type="submit" value="提交按钮"/>
</form>
</body>
</html>
（3）.重置按钮reset
在HTML中，重置按钮一般用来清除用户在表单中输入的内容。重置按钮也可以看成是具有特殊功能的普通按钮。
语法：
<input type="reset" value="取值" />举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
账号：<input type="text" /><br />
密码：<input type="password" /><br />
<input type="reset" value="重置" />
</form>
</body>
</html>
注意：重置按钮只能清空它“所在form标签”内表单中的内容，对于当前所在form标签之外的表单清除是无效的。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
账号：<input type="text" /><br />
密码：<input type="password" /><br />
<input type="reset" value="重置" /><br />
</form>
昵称：<input type="text" />
</body>
</html>
注意：提交按钮也是针对当前所在form标签而言的。
总结：
普通按钮一般情况下都是配合JavaScript来进行各种操作的。
提交按钮一般都是用来给服务器提交数据的。
重置按钮一般用来清除用户在表单中输入的内容。
10.文件上传
文件上传功能的实现需要用到后端技术，不过在学习HTML时，我们只需要关心怎么做出页面效果就行了
在HTML中，文件上传也是使用input标签来实现的，其中type属性取值为“file”
语法：
<input type="file" />举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
<input type="file"/>
</form>
</body>
</html>
11.多行文本框
多行文本框可以输入多行文本。在HTML中，多行文本框使用的是textarea标签，而不是input标签。
语法：
<textarea rows="行数" cols="列数" value="取值">默认内容</textarea>多行文本框的默认显示文本是在标签对的内部设置，而不是在value属性中设置的。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
个人简介：<br/>
<textarea rows="5" cols="20">请介绍一下你自己</textarea>
</form>
</body>
</html>
总结：HTML有3种文本框：单行文本框、密码文本框、多行文本框。
12.下拉列表
在HTML中，下拉列表是由select和option这两个标签配合使用来表示的。这一点与无序列表很像，无序列表是由ul和li这两个标签配合使用来表示。为了便于理解，我们可以把下拉列表看成是一种“特殊的无序列表”。
语法：
<select>
<option>选项内容</option>
……
<option>选项内容</option>
</select>举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
<select>
<option>HTML</option>
<option>CSS</option>
<option>jQuery</option>
<option>JavaScript</option>
<option>Vue.js</option>
</select>
</form>
</body>
</html>
注：下拉列表时最节省页面空间的一种方式。
select标签属性：
举例：
默认情况下，下拉列表只能选择一项。如果想要同时选取多项，首先要设置multiple属性，然后使用“Ctrl+鼠标左键”来选取。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
<select multiple>
<option>HTML</option>
<option>CSS</option>
<option>jQuery</option>
<option>JavaScript</option>
<option>Vue.js</option>
<option>HTML5</option>
<option>CSS3</option>
</select>
</form>
</body>
</html>
Chrome浏览器要求最低是4个选项，因此我们只能设置4及以上的数字。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
<select size="5">
<option>HTML</option>
<option>CSS</option>
<option>jQuery</option>
<option>JavaScript</option>
<option>Vue.js</option>
<option>HTML5</option>
<option>CSS3</option>
</select>
</form>
</body>
</html>
option标签属性：
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
<select size="5">
<option>HTML</option>
<option>CSS</option>
<option selected>jQuery</option>
<option value="JavaScript">JavaScript</option>
<option>Vue.js</option>
<option>HTML5</option>
<option>CSS3</option>
</select>
</form>
</body>
</html>
注意：表单元素不一定都要放在form标签内。对于要与服务器进行交互的表单元素，必须放在form标签内才有效。如果表单元素不需要与服务器进行交互，那就没必要放在form标签内。
本章练习
一、单选题
1．大多数表单元素都是使用（ ）标签，然后通过type属性指定表单类型。
A．input B．textarea C．select D．option
2．下面的表单元素中，有value属性的是（ ）。
A．单选框 B．复选框 C．下拉列表 D．以上都是
3．单行文本框使用（ ）实现，密码文本框使用（ ）实现，多行文本框使用（ ）实现。
A．<textarea></textarea>
B．<input type="textarea" />
C．<input type="text" />
D．<input type="password" />
4．如果想要定义单选框默认选中效果，可以使用（ ）属性来实现。
A．checked B．selected C．type D．以上都不是
5．在表单中，input元素的type属性取值为（ ）时，用于创建重置按钮。
A．reset B．set C．button D．submit
6．下面有关表单的说法，正确的是（ ）。
A．表单其实就是表格，两者是一样的
B．下拉列表不属于表单，而属于列表的一种
C．在表单中，group属性一般用于单选框和复选框分组
D．在表单中，value属性一般是为了方便JavaScript或服务器操作数据用的
7．下面对于按钮的说法，不正确的是（ ）。
A．普通按钮一般情况下都是配合JavaScript来进行各种操作的
B．提交按钮一般都是用来给服务器提交数据的
C．重置按钮一般用来清除用户在表单中输入的内容
D．表单中的按钮更多的是使用button标签来实现
二、编程题使用这一章学到的表单标签，制作如下图所示的表单页面。
答案：
一、AD(CDA)AADD
二、示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
</head>
<body>
<form action="post">
昵称：<input type="text" /><br />
密码：<input type="password" /><br />
邮箱：<input type="text" />
<select>
<option>qq.com</option>
<option>136.com</option>
<option>111.com</option>
</select><br />
性别：
<input type="radio" name="gender" value="男"/>男
<input type="radio" name="gender" value="女"/>女<br />
爱好：
<input type="checkbox" name="hobby" value="旅游"/>旅游
<input type="checkbox" name="hobby" value="摄影"/>摄影
<input type="checkbox" name="hobby" value="运动"/>运动<br />
个人简介：<br />
<textarea cols="30" rows="10"></textarea><br />
上传个人照片：<br />
<input type="file" value="选择文件"/>
<hr />
<input type="submit" value="立即注册"/>
</form>
</body>
</html>
第八章 框架
iframe标签
在HTML中，我们可以使用iframe标签来实现一个内嵌框架。内嵌框架，是指在当前页面再嵌入另外一个网页。
语法：
<iframe src="链接地址" width="数值" depth="数值"></iframe>src是必选的，用于定义链接页面的地址。width和height这两个属性是可选的，分别用于定义框架的宽度和高度。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<iframe src="http://www.lvyestudy.com" width="200" depth="150"></iframe>
</body>
</html>
iframe实际就是在当前页面嵌入另一个页面，我们也可以同时嵌入多个页面。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<iframe src="http://www.lvyestudy.com" width="200" depth="150"></iframe>
<iframe src="http://www.ptpress.com.cn" width="200" depth="150"></iframe>
</body>
</html>
本章练习
下面有关框架的说法中，正确的是（ C）。
A．我们一般使用frameset标签来实现在一个页面中嵌入另外一个页面
B．一般使用href属性来定义iframe的链接地址
C．可以使用width和height来分别定义iframe的宽度和高度
D．iframe标签在HTML5标准中已经被废弃了，现在使用的都是frame标签
好的，恭喜你学完了HTML所有的入门课程！
如果想接着学习CSS入门课程，可以继续跟着我来学。
咱么CSS课程见。