目录
一、HTML简介
1.1什么是HTML?
HTML是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
- HTML 使用标记标签来描述网页
1.2HTML的作用
Web浏览器的作用是读取html文档，并以网页的形式显示它们。浏览器不会显示html标签，而是使用标签来解释页面上的内容，
简单说，html就是通过标签的形式将信息展示给用户的。
1.3HTML书写规范
1.3.1HTML标签
HTML标记标签通常被称为HTML标签（HTML tag），
- HTML 标签是由尖括号包围的关键词，比如<html>
- HTML 标签通常是成对出现的，比如<b>和</b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 绝大多数的标签都具有属性，建议属性值使用引号引起。例如：<body text=”red”>（多个属性之间用空格隔开）
- 大多数标签是可以嵌套的
1.3.2HTML创建
HTML文件可以直接使用文本编辑器来创建，保存时，后缀名为html或htm，
整个文件是在<html>与</html>标签之间，在<html>标签间有<head>与<body>子标签。
例如：
<html>
<head>
包括资讯信息：整个页面的属性、指导浏览器解析的标签、引入外部文件的标签
</head>
<body>
我们需要展示的信息
</body>
</html>
1.3.3空的HTML标签
没有内容的 HTML 元素被称为空元素，空元素是在开始标签中关闭的，
- <br> 就是没有关闭标签的空元素（<br> 标签定义换行）
- 在开始标签中添加斜杠，比如 <br/>，是关闭空元素的正确方法，HTML、XHTML 和 XML都接受这种方式
- 即使 <br> 在所有浏览器中都是有效的，但使用 <br/> 其实是更长远的保障
1.3.4HTML大小写不敏感
HTML 标签对大小写不敏感：<P> 等同于 <p>，许多网站都使用大写的 HTML 标签，
W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写
这里建议用小写。
二、html基本标签
html的基本标签主要包括：
- 文件标签
- 排版标签
- 块标签
- 文字标签
- 清单标签
- 图形标签
- 链接标签
- 表格标签
2.1文件标签
文件标签也叫结构标签，一般有以下几种，
<html><html>:根标签
<head>
<title>页面的标题</title>
</head>
<body>内容</body>
其中body主要有以下三个属性：
- text:文本的颜色
- bgcolor:背景色
- background:背景图片
颜色的三种表示方式：
- 单词：red green black
- rgb三原色：reg(0,0,0) 0-255
- 16进制：#000000 #ffffff #325687 #877405
我们实际编写一个网页测试一下效果，
<html>
<head>
<title>测试标题</title>
</head>
<body text="green" bgcolor="gray" background="image/1.png">
html<font color="red" size="20">测试</font>
</br>
换行测试
</body>
</html>背景图片1.png我们存放在demo.html同路径下的image文件夹中，
然后是网页效果：
2.2排版标签
- 注释标签：<!--注释-->
- 换行标签：<br/>
- 段落标签：<p>文本文字</p>
- 特点：段与段之间有空行
- 属性：align，对齐方式（有三个属性值：left center right）
- 水平线标签：<hr/>
- 属性：
- width:长度
- size:粗度
- color：颜色
- align:对齐方式
- 尺寸的写法：
- 像素：10px
- 百分比：占据副标签的百分比，会随着副标签的大小进行变化
- 属性：
我们用代码测试一下排版标签，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
注释标签
-->
<p>
第一段<br/>
第一行<br/>
第二行<br/>
</p>
<hr width="100" size="3" color="red" align="left"/>
<p>
第二段<br/>
第一行<br/>
第二行<br/>
</p>
</body>
</html>下面是网页效果：
2.3块标签
块标签主要有两种，
- <div></div>：行级块标签，一般结合css进行网页的布局
- <span></span>：行内块标签，一般用于友好提示（比如网站注册时提示用户名密码的要求提示）
下面我们通过代码演示一下两个的区别，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="background-color: red">div1</div>
<div style="background-color: orange">div1</div>
<span style="background-color: blue">span1</span>
<span style="background-color: green">span2</span>
</body>
</html>下面是网页效果：
2.4文字标签
- 基本文字标签：<font></font>
- 属性：
- color：颜色
- size：大小（最大值7，最小值1，默认为3）
- face：字体类型，即字体
- 属性：
- 标题标签：<h1></h1>至<h6></h6>，随着数字的增大标题逐渐变小
下面我们通过代码测试一下文字标签如何使用，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<font color="red" size="5" face="黑体">
基本文字标签
</font>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>网页显示如下：
2.5清单标签（列表标签）
清单标签又叫列表标签，其中又分为无序列表和有序列表，
- 无序列表：<ul></ul>
- 列表项：<li></li>
- 属性：
- type：有三个值，分别为disc、 square和circle，默认为disc小黑点
- 示例：<ul >
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
- 有序列表：<ol></ol>
- 列表项：<li></li>
- 属性：
- type：编号可取1、A、a、I、i（数字、字母、罗马数字），默认为数字
- start：数字，代表首项开始位置
- 示例：<ol>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ol>
列表标签一般用于实现菜单项，可以实现横向或者纵向菜单，
无序列表标签的小圆点在HTML中不能直接去掉，需要在CSS中给li标签添加样式list-style:none
下面我们用代码测试一下清单标签，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul type="circle">
<li>无序列表项1</li>
<li>无序列表项2</li>
<li>无序列表项3</li>
</ul>
<ol type="A" start="2">
<li>有序列表项1</li>
<li>有序列表项2</li>
<li>有序列表项3</li>
</ol>
</body>
</html>网页效果如下：
2.6图形标签
图形标签一般用<img />表示（自关闭标签，不用额外写</image>），
用于加载图片的标签，有以下几个主要属性：
- src：图形地址
- width：图片宽度
- height：图片高度
- border：边框
- align：对齐方式，代表图片与相邻的文本相对位置，可设置为top、middle、bottom
- alt：图片的文字说明（一般图片加载不出来时会显示这个提示说明）
我们用代码理解一下图形标签的使用，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="image/1.PNG" width="50%" height="70%" border="5" align="middle" alt="overwatch"/>
测试
</body>
</html>网页效果：
当图片加载不出来的时候，会显示图片的说明，
2.7链接标签
链接标签用<a></a>表示，有以下几个主要属性，
- href：跳转页面地址
- name：名称，锚点
- target：_self(自己) _blank(新页面，打开新页面后之前的页面还有)， 默认是_self，点击时会覆盖掉之前的网页内容
其作用有两点：
- 页面跳转，注意：要跳到外网必须要加协议http://等
- 访问锚点；回到锚点（顶部、底部、中间），在访问锚点时的书写格式：#name的值
下面我们用代码理解一下，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#bottom" name="top">到达底部</a><br/>
<a href="demo.html" target="_blank">demo</a><br/>
<a href="http://www.baidu.com" target="_blank">百度</a><br/>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>锚点跳转测试</br>
<a href="#top" name="bottom">返回顶部</a>
</body>
</html>网页效果：
点击到达底部：
点击跳转本地demo.html：
点击跳转百度：
2.8表格标签
表格标签即在网页中用于显示表格的标签，
- <table></table>：表格标签
- 属性：
- border：表格边框
- width：表格的宽度
- align：表格的对其方式
- bgcolor：背景颜色
- 属性：
- <tr></tr>：代表行，align="center"设置该行所有单元格里面的内容居中对齐
- <td></td>：代表单元格
- 属性：
- colspan：列合并
- rowspan：行合并
- 属性：
- <th></th>：相等于<td>, 只是内置样式加粗居中
- <caption></caption>：表格的标题，即表头
其作用有两点：
- 显示表格
- 进行布局
下面我们先看看如何代码显示一个表格，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" width="50%" align="center" bgcolor="red">
<caption>测试表格</caption>
<tr align="center">
<td colspan="2">1-1&1-2</td>
<!--<td>1-2</td>-->
<td>1-3</td>
</tr>
<tr>
<td rowspan="2">2-1<br>3-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
<tr>
<!--<td>3-1</td>-->
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>网页效果：
布局的话一般我们使用<thead></thead>、<tbody></tbody>、<tfoot></tfoot>将表格进行分块（现在使用不多），
其作用是分块加载，不用加载完所有表格才显示出来，用户体验比较好，
2.9基本标签练习——图书商城
我们现在通过所学知识写一个图书商城的html例子，
我们进行代码实现，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My BookStore</title>
</head>
<body>
<!--整个页面-->
<div id="page">
<!--top-->
<div id="top">
<table width="100%">
<tr>
<td align="left"><img alt="logo" src="images/logo.png"></td>
<td align="right">
<img alt="cart" src="images/cart.gif">
<a href="#">购物车</a>|<!--href="#"跳转到本页面-->
<a href="#">帮助中心</a>|
<a href="#">我的账户</a>|
<a href="#">新用户注册</a>
</td>
</tr>
</table>
</div>
<!--menu-->
<div id="menu">
<table bgcolor="#006400" width="100%">
<tr>
<td align="center">
<a href="#"><font color="white">文学</font></a> <!--" "为空格-->
<a href="#"><font color="white">生活</font></a>
<a href="#"><font color="white">计算机</font></a>
<a href="#"><font color="white">外语</font></a>
<a href="#"><font color="white">经管</font></a>
<a href="#"><font color="white">励志</font></a>
<a href="#"><font color="white">社科</font></a>
<a href="#"><font color="white">学术</font></a>
<a href="#"><font color="white">少儿</font></a>
<a href="#"><font color="white">艺术</font></a>
<a href="#"><font color="white">原版</font></a>
<a href="#"><font color="white">科技</font></a>
<a href="#"><font color="white">考试</font></a>
<a href="#"><font color="white">生活百科</font></a>
<a href="#"><font color="yellow">全部商品</font></a>
</td>
</tr>
</table>
</div>
<!--search-->
<div id="search" >
<table width="100%" bgcolor="#B6B684">
<tr align="right"><!--设置单元格居中-->
<td>
Search
<input type="text"/>
<input type="button" value="搜索">
</td>
</tr>
</table>
</div>
<!--content-->
<div id="content">
<div align="right"><!--">"为大于号">"-->
<a href="#">首页</a>>
<a href="#">旅游</a>>
<a href="#">图书列表</a>
</div>
<h1>商品目录</h1><hr/>
<h2>计算机类</h2>
<span>共xx种商品</span><hr/>
<div><img alt="productlist" width="100%" src="images/productlist.gif"></div>
<!--book-->
<div>
<table width="100%">
<tr align="center">
<td>
<div><img src="bookcover/101.jpg"></div>
<div>书名：时空穿行</br>售价：25元</div>
</td>
<td>
<div><img src="bookcover/102.jpg"></div>
<div>书名：感悟</br>售价：20元</div>
</td>
<td>
<div><img src="bookcover/103.jpg"></div>
<div>书名：赢在影响力</br>售价：25元</div>
</td>
<td>
<div><img src="bookcover/104.jpg"></div>
<div>书名：谁动了我的奶酪</br>售价：15元</div>
</td>
</tr>
<tr align="center">
<td>
<div><img src="bookcover/105.jpg"></div>
<div>书名：培育男孩</br>售价：35元</div>
</td>
<td>
<div><img src="bookcover/106.jpg"></div>
<div>书名：别做正常的傻瓜</br>售价：30元</div>
</td>
<td>
<div><img src="bookcover/107.jpg"></div>
<div>书名：学会宽容</br>售价：20元</div>
</td>
<td>
<div><img src="bookcover/euro.jpg" width="130"></div>
<div>书名：欧洲</br>售价：25元</div>
</td>
</tr>
</table>
</div>
</div>
<!--bottom-->
<div id="bottom">
<table width="100%" bgcolor="#EFEEDC">
<tr>
<td rowspan="2" width="50%">
<img src="images/logo.png"></td>
<td>CONTACT US</td>
</tr>
<tr>
<td>copyright 2021 © BookStore All Rights Reserved</td>
</tr>
</table>
</div>
</div>
</body>
</html>网页效果，
三、HTML表单标签
表单元素是允许用户在表单中输入内容，用form表示，
比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
3.1form标签
表单使用表单标签 <form> 来设置，
- 属性：
- name：表单名称
- action：提交的路径地址
- method：提交方式（get和post）
- 实例：<form>
<table>
<!--form里面嵌套table-->
</table>
</form>
其中提交方式有get和post两种（默认为get），get和post的区别为（重点）：
- 提交方式
- get提交将数据加在地址栏的后面，格式为：?username=value&password=value.....
- post提交将数据封装在请求体中：username=value&password=value#
- 安全性
- get提交相对不安全
- post提交相对安全
- 大小限制
- get提交有大小限制
- post不限制大小
3.2input标签
input标签一般用于需要用户输入数据，放在表单标签中，
input标签使用方式为<input type=""/>，根据type属性实现各种不同功能的表单项，
- text：普通的文本输入框
- name：设置文本输入框的名字
- value：设置文本输入框的默认值
- password：密码输入框，特点是显示的是掩码
- radio：单选按钮
- name：如果想让一组单选按钮互斥，就用指定name属性值相同，需要加value属性值
- checked：默认被选中
- checkbox：复选框
- name：组的概念，需要加value属性值
- checked：默认被选中
- file：上传文件的控件
- button：普通按钮，没有任何内置的功能
- submit：内置功能，点击会按照action地址提交
- reset：重置，点击会清空之前填写的内容
- image：图片按钮，功能类似与submit，点击图片时也会按照action地址提交
- src：加载图片的路径
- alt:图片的提示文字
- hidden:隐藏表单，作用是在提交数据的时候，服务器需要这个数据，但是不需要用户看到
注意：input标签name属性必须要写，否则后台无法通过name属性找到提交的数据
3.3select标签
select标签：下拉菜单，(<select></select>)，主要有两个属性，
- name：下拉菜单的名称
- option：可选项（下拉菜单之间的级联）
- value：选项的值
- selected：默认被选中
3.4textarea标签
文本域标签用于显示文字，
- cols：文本域列数
- rows：文本域行数
四、HTML框架标签及其他
4.1框架标签
框架将整个页面分为不同的部分，每个部分显示独立的html网页，一般我们通过frameset和frame属性进行设置，
- frameset属性：
- 划分格式为：rows="120,*"，意思为第一个框架按行划分120行，第二个框架为剩余行
- cols：按列划分
- rows：按行划分
- frame属性：
- name：名称，方便target根据name的值进行定位
- src：加载的页面地址
下面我们通过代码测试一下框架标签如何使用，
<!--FrameLabel.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<frameset rows="80,*">
<frame name="top" src="top.html">
<frameset cols="150,*">
<frame name="lowLeft" src="left.html">
<frame name="lowRight" src="right.html">
</frameset>
</frameset>
</html>
<!--top.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
top
</body>
</html>
<!--left.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="menu1.html" target="lowRight">menu1</a><br/>
<a href="menu2.html" target="lowRight">menu2</a><br/>
<a href="menu3.html" target="lowRight">menu3</a><br/>
</body>
</html>
<!--right.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
left
</body>
</html>
<!--menu1.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
menu1
</body>
</html>
<!--menu2.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
menu2
</body>
</html>
<!--menu3.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
menu3
</body>
</html>网页效果：
4.2其他标签
- <meta>指导浏览器解析的标签
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
- <meta http-equiv="description" content="this is my page">
- <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- <link>
- <link rel="stylesheet" type="text/css" href="./styles.css">
- rel：引入文件与原网页的关系
- type：文件的类型
- href：引入css文件的地址，css作用是修饰html
- <link rel="stylesheet" type="text/css" href="./styles.css">
- <script>
- <script type="text/javascript" src=""></script>
- type：文件的类型
- src：引入js的文件地址，js作用是动态修改html的代码
- <script type="text/javascript" src=""></script>
4.3特殊字符
- 为空格
- >为大于号
- <为小于号
- ©为版权符号
- ®为注册符号