经过一学期的课程学习，从对HTML有了初步认识，到现在的掌握，我对此是无比激动的，在学习新语言的过程中虽然痛苦但是却痛并快乐着。下面我将对HTML的课程进行总结，并且分享一些学习心得。
1.初识HTML
1.1准备工作
HTML作为web开发的基石，一直以简单著称，所以开发HTML只需要简单的记事本工具即可，如：
EditPlus、sublime、VSCode等等，当然主流的编程IDE绝大多数都是支持HTML的开发的，如：
eclipse、IntelliJ IDEA、pycharm等，当然也有专门前端开发的IDE--WebStorm、Hbuilder等，在开发
的前期建议使用记事本工具，以便于练习代码的手感，等基础功打好之后，就可以使用这些IDE开发，提高开发的效率了。
1.2运行环境
HTML是web页面的基石，所以运行环境就是主流的浏览器。建议使用Google公司的Chrome浏览
器。率了。
1.3语法结构
语法结构：HTML 标签。
<标签 属性="值">内容</标签>
语法格式：HTML 标签，如图2-1所示
语法解析：
标签通常是成对出现的，分为开始标签（p）和结束标签(/p)，结束标签只是在开始标签前加一个斜
杠“/”。标签可以有属性（align），属性必须有值(center )。 开始标签与结束标签中包含的内容称之为区
域。标签不区分大小写，p和P是相同的。
1.3网页分类
HTML 使用标签编写网页，网页基本上可以分为 2 类。
静态网页 HTML
静态网页是指在不修改网页源文件的情况下，网页无论在何时何地被浏览，都将显示相同的内
容，网页的内容不会发生变化。静态网页文件的扩展名包括 html,htm 等。
动态交互式网页
交互式网页是指用户可以提供给网站信息，网站根据用户提交的信息响应用户的要求。如网上
注册、论坛、调查等等。在这门课的最后部分我们会体验交互式网页，在第二学期将深入学
习。交互式网页文件的扩展名包括 aspx，jsp，php，asp 等。
第三章 HTML常用标签
<p> 是 HTML 中的段落标签，下面以 <p> 为例来详细解释标签。
2.HTML标签
2.1常用标签
2.1.1strong、b标签及部分字体特殊标签
strong、b两标签都用于加粗字体；i、em则是将文字变为斜体；u则是在字体下加上下划线；del则是在文字中出现一条横线。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一个网页</title>
</head>
<body>
<!--此为注释-->
<strong>这是粗体</strong>
<b>也是粗体</b>
<em>这是斜体</em>
<i>也是斜体</i>
<u>下划线</u>
<del>删除线</del>
</body>
</html>
2.1.2br和hr标签
br标签是用来换行------- 单标签
hr ------- 水平分割线 ，单标签，可以设置width属性表示的水平分割线的长度，size属性设置的粗细
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用标签</title>
</head>
<body>
假唱风波后，北京时间12月8日凌晨3点，xxx巴黎演唱会准时开唱。这场演唱会，xxx是否真唱依
旧是焦点。<br>
假唱风波后，北京时间12月8日凌晨3点，xxx巴黎演唱会准时开唱。这场演唱会，xxx是否真唱依
旧是焦点。
假唱风波后，
北京时间12月8日凌晨3点，xxx巴黎演唱会准时开唱。这场演唱会，xxx是否真唱依旧是焦点。
<hr width="800px" size="10">
</body>
</html>
运行截图如下
2.1.3p标签
段落标签
两个相邻的p标签中间会空一行
align属性 ------ 位置 left center right,默认值是left
font标签 ------ 这是字体
color属性：颜色
颜色的表示法：英文单词 red black pink
#rrggbb 三原色 red green blue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>常用标签</title>
</head>
<body>
<p align = "left">
这是一个段落
</p>
<p align = "center">
这是一个段落
</p>
<p align = "right">
这是一个段落
</p>
<p >
这是一个段落
</p>
<p>
<font color ="#006600">这是字体标签</font>
</p>
</body>
</html>运行如下
2.1.3sub、sup、pre、span标签
sub ----- 下标标签
sup ---- 上标标签
pre ------ 用来原样输出内容
span ---- 修饰文本的标签 ----- 标准的行内标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
二的三次方:2<sup>3</sup><br>
数组a下标是2:a<sub>1</sub>+a<sub>2</sub>+.......+a<sub>n</sub><br>
<p>
鹅鹅鹅
[骆冰王]
鹅鹅鹅，
曲项向天歌。
白毛浮绿水，
红掌拨清波。
</p>
<pre>
鹅鹅鹅
[骆冰王]
鹅鹅鹅，
曲项向天歌。
白毛浮绿水，
红掌拨清波。
</pre>
<span style="color: blueviolet; font-size: 32px;">
这是一个标准的行内标签！！！！！
</span>
</body>
</html>
运行结果
2.1.4 hn和div标签
hn指的是h1,h2,h3,h4,h5,h6 ----- 标题标签 n取值只能是1-6 字体越来越小 有加粗的效果
div标签 ---- 标准的块级标签 ------ 盒子布局
块级标签：独占一行，自动换行 div hn p hr
行内标签：不能自动换行，除非这一行的文本内容铺满了整个页面才会换行 span
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>这是标题</h1>
<h2>这是标题</h2>
<h3>这是标题</h3>
<h4>这是标题</h4>
<h5>这是标题</h5>
<h6>这是标题</h6>
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
<span>这是一个span标签</span>
<span>这是一个span标签</span>
<span>这是一个span标签</span>
<span>这是一个span标签</span>
<span>这是一个span标签</span>
<span>这是一个span标签</span>
</body>
</html>
运行如下
2.1.5特殊字符
2.2表单标签
form 标签 一般会和input标签连用
action: 跳转的路径
·绝对路径：从盘符开始到文件名称的全部路径，
·相对路径：当前源文件和目标文件的相对路径，
method: 表单提交的方式 get post 默认是get
name : 表单的名称
get:会把用户请求的内容暴露在地址栏上
post: 相较于get会安全一点
2.2.1表单元素
表单元素（文本框、密码框、下拉列表、单选、多选）
一般由input、textarea、select标签构成，需要放到form里面
2.2.1.1input标签
语法格式
<input type="元素的类型" name="元素的名称" value="元素的值">
type的取值：
text ------ 文本框
password ---- 密码框
radio ---- 单选按钮
checkbox ----- 多选按钮
submit ---- 提交按钮
reset ----- 重置按钮
button ----- 普通的按钮
image ---- 图像按钮
file ---- 文件域
hidden ----- 隐藏域
email ------ 邮箱
color ----- 颜色域
date ----- 日期
time ------ 时间
datetime-local ------ 日期+时间
range ---- 进度条
input标签常用的属性：
checked ---- 默认选择
readonly ------ 只读 字段只可以读不能修改
disabled ----- 禁用 不可以点击
autofocus ------ 默认光标的位置
required---- 不能为空白提交
2.2.1.2select标签
下拉列表框 ------ 一般和option标签进行连用
selected属性 ---- 默认被选中的选项
multiple属性 ------- 以列表的形式显示
2.2.1.3textarea标签
用来实现文本域
cols ------- 多少列，用于显示文本的宽度
rows ------- 多少行，用来显示文本的高度
2.3常见的属性
a标签 ----- 超链接、超文本链接标签 ----- 用来进行页面跳转 herf = "url" 跳转页面的路径
vlink ----- 访问过超链接文本的颜色
Alink ------ 激活超链接文本的颜色
link ------ 超链接文本的颜色
text ---- 文本的颜色
bgcolor ----- 背景颜色
background ------ 背景图片
颜色表示法：
1、英文单词
2、#rrggbb
3、rgba() a表示透明度
一些有趣的标签
字体跑马灯（弹幕）
direction------表示滚动的方向，值可以是left，right，up，down，默认为left
behavior------表示滚动的方式，值可以是scroll（连续滚动）slide（滑动一次）alternate（往返滚
动）
loop-----表示循环的次数，值是正整数，默认为无限循环
scrollamount-----表示运动速度，值是正整数，默认为6
scrolldelay----表示停顿时间，值是正整数，默认为0，单位似乎是毫秒
align-----表示元素的垂直对齐方式，值可以是top，middle，bottom，默认为middle
bgcolor------表示运动区域的背景色，值是16进制的RGB颜色，默认为白色
height、width------表示运动区域的高度和宽度，值是正整数（单位是像素）或百分数，默认
width=100% height为标签内元素的高度
hspace、vspace------表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素。
οnmοuseοver=this.stop() οnmοuseοut=this.start()------表示当鼠标移上区域的时候滚动停止，当
鼠标移开的时候又继续滚动。
2.4.img标签
目前常见的图片的格式：GIF JPG PNG BMP等
2.4.1 常见的属性
src 属性 ---- 指的是图片的路径（绝对路径和相对路径）
alt属性 ------ 代替图片的文本内容（因为路径的问他或者因为浏览器的问题显示不出来这个张图片的
时候，alt属性值就是去描述这张图片的一个内容）
width ------ 宽度
height ---- 高度
border ------ 边框，默认值0
align ----- 位置 （图片和文字的位置）
top (上对齐) middle(居中对齐) bottom(下对齐 默认值) left(左对齐) right(右对齐)
title ------ 图片的标题 ，用来显示描述图片的文字
2.4.2位图
usemap属性
map标签的name属性，一般会和area标签进行连用
属性：shape ------- 鼠标点击的形状
coords ----- 鼠标点击形状的大小
href ------ 表示跳转的路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>位图</title>
</head>
<body>
<img src="猫咪.jpg" alt="猫咪" usemap="#cat">
<map name="cat">
<area shape="circle" coords="150,125,30" href="demo01.html">
</map>
</body>
</html>
2.5多媒体标签
audio 标签 ---- 音频
video 标签 ---- 视频
controls属性 ---- 表示播放器的组件
autoplay属性 ----- 自动播放（浏览器不支持这个属性值）
loop 属性 ---- 循环播放
<audio src="bgm.mp3" controls autoplay loop></audio>
<video src="花园宝宝1.mp4" controls ></video>2.6表格布局
table标签
包含thead tbodt tr td tfood
<table>
<thead>表头</thead>
<tbody> ----- 表格的主干
<tr> ----- 行
<td>第一行第一列</td> ---- 列
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</tbody>
<tfoot>表尾</tfoot>
</table>
<table>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
</tr>
</table>
<table>
<tr>
<td>序号</td>
<td>姓名</td>
<td>学院</td>
<td>专业</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>人工</td>
<td>软件工程</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>人工</td>
<td>物联网</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>电气</td>
<td>智能电网</td>
</tr>
</table>2.6.1表格的边框
border ----- 表格的边框
<table border="1">
<tr>
<td>序号</td>
<td>姓名</td>
<td>学院</td>
<td>专业</td>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>人工</td>
<td>软件工程</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>人工</td>
<td>物联网</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>电气</td>
<td>智能电网</td>
</tr>
</table2.6.2表格的宽度和高度
width ----- 宽度
height ---- 高度
2.6.3表格的对齐方式
align ----- 对齐方式 left right center
2.6.4表格的背景
bgcolor ----- 背景颜色
background ---- 背景图片
2.6.5表格的间距和边距
cellpadding ------ 表格边距（表示的是单元格内元素距离单元格边缘的距离）
cellspacing----- 表格的间距（单元格和单元格之间的距离）
默认的边距和间距的取值2px
2.6.6 表格的嵌套
表格里面可以嵌套表格
<table border="1" width="300px" height="100px" bgcolor="pink">
<tr>
<td> </td>
<td>
<table border="1" width="100px" height="100px" bgcolor="red">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>2.6.7表格的合并
rowspan ------- 表示在单元格上垂直方向上去跨行（合并行）
colspan ------ 表示单元格上水平方向跨列（合并列）
2.7列表标签
主要有三种：有序列表、无序列表、数据列表
2.7.1有序列表 ---- ol
type属性 ---- 设置序号的种类，默认的是数字
start属性 ----- 控制序号开始的位置
reversed属性 ----- 降序（反序）
<ol type="1" start="7" reversed>
<li>前端</li>
<li>前端</li>
<li>前端</li>
<li>前端</li>
<li>前端</li>
</ol>
<ol type="A" start="C">
<li>python</li>
<li>python</li>
<li>python</li>
<li>python</li>
</ol>2.7.2无序列表---- ul
type属性 ------ 无序列表的样式 disc(默认取值 实心圆) circle(空心圆) square（实心方框）
2.7.3数据列表 ----- dl
<dl>
<dt>这是标题</dt>
<dd>这是内容1</dd>
<dd>这是内容2</dd>
<dd>这是内容3</dd>
<dd>这是内容4</dd>
<dd>这是内容5</dd>
</dl>
<dl>
<dt>地方新闻</dt>
<dd>这是内容1</dd>
<dd>这是内容2</dd>
<dd>这是内容3</dd>
<dd>这是内容4</dd>
<dd>这是内容5</dd>
<dt>国际新闻</dt>
<dd>这是内容1</dd>
<dd>这是内容2</dd>
<dd>这是内容3</dd>
<dd>这是内容4</dd>
<dd>这是内容5</dd>
<dt>国内新闻</dt>
<dd>这是内容1</dd>
<dd>这是内容2</dd>
<dd>这是内容3</dd>
<dd>这是内容4</dd>
<dd>这是内容5</dd>
</dl>2.8多窗口框架
一个页面可以显示多个窗口 ----- frameset （不能和body标签连用）
cols ------ 定义页面列方向的尺寸或则数目
rows ---- 行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<frameset cols="25%,40%,*">
<frame src="D:\xxx\xxx\xx\xx\xxx.html"></frame>
<frame src="D:\xxx\xxx\xx\xx\xxx.html"></frame>
<frame src="D:\xxx\xxx\xx\xx\xxx.html"></frame>
</frameset>
</html>
写在文末
对于HTML的总结分享就到此了，出于个人学习不精可能会有很多的不足，欢迎各位大佬们指正！
在学习上，我认为勤加练习会是学习一门新语言的重要步骤，如果不勤加练习，就像学习英语时不说一样会导致记忆不深刻无法自由运用，可能还会导致记忆混乱而对一些语法的使用错误而导致程序无法运行、以奇怪的方式运行起来。言语此，愿与各位共进步！
