1、概念
一门使用标记或标签来描述网页，展示信息给用户得语言
2、超文本标记语言(Hyper Text Mark Language):
超文本：页面内可以包含图片、链接、音乐、程序等非文字元素
标记：即标签，不同的标签实现不同的功能。
语言：人与计算机得交互工具
3、HTML书写规范
HTML标签是以尖括号包围的关键字
HTML标签通常是成对出现的，又开始就有结束
HTML通常都有属性。
格式：属性 = "属性值"
多个属性之间空格隔开
HTML标签不区分大小写，建议全小写
4、结构标签
<html></html> 根标签
<head></head> 头文件
<title></title> 标题标签
<body></body> 正文
5、排版标签
用于实现简单的页面布局
<hr style="width: 200px;" size="20px" color="black" align="left">
6、标题标签
随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行
7、块标签
使用DIV+CSS是现下流行的一种布局方式。
8、文字标签
font标签处理网页中文字的显示方式
9、文本格式化标签
格式化标签实现内容的简单样式处理
10、综合
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<font size="6"><strong>望庐山瀑布</strong></font><br />
<br />
<font size="4"><strong>作者：李白</strong></font>
<hr />
<p>日照香炉生紫烟</p>
<font>遥看瀑布挂前川</font><br />
<br />
<font>飞流直下三千尺</font><br />
<br />
<font>疑是银河落九天</font>
<hr />
<p><font><strong>作者简介：</strong></font></p>
<p><span style="color: blue; font-size: 25px;" >李白</span>(701-762)，字太白，号<strong>青莲居士</strong>，是屈原之后最具个性特色，最伟大的<span style="color: yellow;">浪漫主义诗人</span>，有"<span>诗仙</span>"之美誉，与杜甫并称"李杜"。其诗以抒情为主，表现出藐视权贵的傲岸精神，对人民疾苦表示同情，又善于描绘自然景色，表达堆祖国山河的热爱</p>
<br />
<p><font><strong>创作背景：</strong></font></p>
<br />
<div>这首诗，紧扣题目中的"<b>望</b>"字，以庐山的香炉峰入笔描写庐山瀑布之景，用"<font size="6">挂</font>"字突出瀑布如珠帘垂空,<br />
以高度夸张的艺术手法，把瀑布画得传神入化，然后细致地描写瀑布的具体形象，<br />
将飞流直泻得瀑布描写得<font color="green"><b>雄伟奇丽，气象万千，宛如一幅生动的山水画。</b></font></div>
</body>
</html>
11、无序列表
无序列表：使用一组无序的符号定义，标签为<ul></ul>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul type="square">
<li>华为</li>
<li>苹果</li>
<li>小米</li>
<li>vivo</li>
<li>oppo</li>
</ul>
</body>
</html>
12、有序列表
有序列表：使用一组有序的符号意义，标签为<ol></ol>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ol type="A">
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>馒头</li>
</ol>
</body>
</html>
13、列表嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul type = circle">
<li>
以下不是水果的选项()
<ol type="A">
<li>橘子</li>
<li>香蕉</li>
<li>苹果</li>
<li>米饭</li>
</ol>
</li>
<br />
<li>
以下是动物的选项()
<ol type ="A">
<li>蓝色</li>
<li>白色</li>
<li>黄色</li>
<li>老虎</li>
</ol>
</li>
<br />
<li>
以下不是JAVA关键字的是()
<ol type="A">
<li>this</li>
<li>super</li>
<li>abstract</li>
<li>that</li>
</ol>
</li>
<br />
<li>
以下不是JAVA三大特性的是()
<ol type="A">
<li>封装</li>
<li>继承</li>
<li>多态</li>
<li>最终</li>
</ol>
</li>
</ul>
</body>
</html>
14、图片标签
在页面指定位置处中引入一幅图片，标签为<img />
15、综合
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<font size="6"><strong>望庐山瀑布</strong></font><br />
<br />
<font size="4"><strong>作者：李白</strong></font>
<hr />
<p>日照香炉生紫烟</p>
<font>遥看瀑布挂前川</font><br />
<br />
<font>飞流直下三千尺</font><br />
<br />
<font>疑是银河落九天</font>
<hr />
<p><font><strong>作者简介：</strong></font></p>
<p><span style="color: blue; font-size: 25px;" ><img src="../img/1644838256(1).jpg" style="width: 200px; height: 300px;" />李白</span>(701-762)，字太白，号<strong>青莲居士</strong>，是屈原之后最具个性特色，最伟大的<span style="color: yellow;">浪漫主义诗人</span>，有"<span>诗仙</span>"之美誉，与杜甫并称"李杜"。其诗以抒情为主，表现出藐视权贵的傲岸精神，对人民疾苦表示同情，又善于描绘自然景色，表达堆祖国山河的热爱</p>
<br />
<p><font><strong>创作背景：</strong></font></p>
<br />
<div><img src="../img/1644838537(1).jpg"style="width: 200px; height: 300px; "/>这首诗，紧扣题目中的"<b>望</b>"字，以庐山的香炉峰入笔描写庐山瀑布之景，用"<font size="6">挂</font>"字突出瀑布如珠帘垂空,<br />
以高度夸张的艺术手法，把瀑布画得传神入化，然后细致地描写瀑布的具体形象，<br />
将飞流直泻得瀑布描写得<font color="green"><b>雄伟奇丽，气象万千，宛如一幅生动的山水画。</b></font></div>
</body>
</html>
16、链接标签
链接标签为<a>文本或图片</a>。
在页面中使用链接标签跳转到另一页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
你好世界
<a href="http://www.baidu.com"><font size="5">百度</font></a>
<a href="http://www.baidu.com" target="_blank"><font size="6">百度1</font></a>
</body>
</html>
回到指定位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
你好世界
<a id="123" href="http://www.baidu.com"><font size="5">百度</font></a><br />
<a href="http://www.baidu.com" target="_blank"><font size="6">百度1</font></a>
<a href="#456">回到中间</a>
<a href="#123">回到顶部</a>
</body>
</html>
17、表格标签
表格标签用来在页面中规则整齐显示数据
标签：
table 定义一个表格
tr 定义行
td 定义列
th 定义列标题加粗显示
18、表格常用属性
19、列合并 行合并
列合并 cols
行合并 rows
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>作息时间表</title>
<style>
td{
text-align: center;
}
</style>
</head>
<body>
<h1>---教育课程-学院-作息时间表---</h1>
<table width="500px" border="1px" style="border-collapse: collapse;">
<tr>
<!--列-->
<td>时间</td>
<td>节次</td>
<td>时长</td>
<td>时间</td>
</tr>
<tr>
<!--rowspan是代表融合的行数-->
<td rowspan="4">上午</td>
<td>早读(三阶段)</td>
<td>30分钟</td>
<td>7：50-8：20</td>
</tr>
<tr>
<!--列-->
<td>第一节</td>
<td>90分钟</td>
<td>8：20-9：50</td>
</tr>
<tr>
<!--列-->
<td>间休</td>
<td>20分钟</td>
<td>9：50-10：10</td>
</tr>
<tr>
<!--列-->
<td>第二节</td>
<td>90分钟</td>
<td>10：10-11：40</td>
</tr>
<tr>
<!--列-->
<td>午休</td>
<td colspan="3">11：40-13：10</td>
</tr>
<tr>
<!--列-->
<td rowspan="3">下午</td>
<td>第三节</td>
<td>120分钟</td>
<td>13:50-15:30</td>
</tr>
<tr>
<!--列-->
<td>间休</td>
<td>20分钟</td>
<td>15：10-15：30</td>
</tr>
<tr>
<!--列-->
<td>第四节</td>
<td>120分钟</td>
<td>15：30-17：30</td>
</tr>
<tr>
<!--列-->
<td>晚休</td>
<td colspan="3">17：30-18：20</td>
</tr>
<tr>
<!--列-->
<td>晚自习</td>
<td colspan="3"><p>18：20=20：30</p>
<p>晚读(三阶段)20：30-21：00</p></td>
</tr>
</table>
</body>
</html>
