1.HTML
1.1 什么是HTML
HTML全称
Hyper Text Markup Language
超文本标记语言
包含内容
1. 超文件: 可以包含图片，视频。音频，连接....
2. 标记: 采用标签方式编程，并且有固定的规范
3. HTML5 是HTML语言一个标准，W3C组织制定的
HTML可以用于数据展示，常见的网站都是采用HTML来编程的。
1.2最基本的HTML结构
<!DOCTYPE html>
<html><head><!-- 当前页面编码集 --><meta charset="utf-8" /><!-- 设置当前页面的标题 --><title>标题</title></head><body><!-- 页面展示内容 --></body>
</html>
HTML标签要求
1. W3C规定，不可以自定义，每一个标签都自己的特定含义
2. 标签区别为双边标签和单边标签
<head></head> <meta charset="utf-8" />
3. 标签中可以使用属性
charset="utf-8"
charset属性名 utf-8属性值
属性名="属性值"
4. HTML标签不区分大小写，这里建议全小写
2 HTML基本标签
2.1 结构标签
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>01-结构标签</title>
</head>
<body text="red" bgcolor="black" background="img/QQ图片20200326112539.png">你好HTML
</body>
</html>
属性：
text: 文本颜色
bgcolor: 背景颜色
background: 背景图
颜色的表示方式:
对应颜色的英文: red black yellowgreen greenyellow
还有就是RBG模式 #F26522 #334455
2.2 排版标签
a. 注释标签
<!-- 注释内容 -->
b. 换行标签
<br />
c. 段落标签
<p></p>
特征: 段落之间有留白
屬性:
align 对齐方式，有center right left
d. 水平分割线
<hr />
属性:
width: 水平分割线长度，单位px像素
size: 水平分割线粗细，单位px像素
color: 水平分割线的颜色
align: 对齐方式
2.3 块标签
<div></div>行级块标签，单独成行，每一个块标签占一行
<span></span>行内块标签，所有内容都在一行，多个span标签在一行展示作用：div 和CSS连用，用于页面布局操作span 用于信息提示
3 文本标签
3.1 基本文本标签
<font></font>
属性：
size: 字体大小
color: 字体颜色
face: 字体样式
3.2 标题标签
<h1></h1> ~ <h6></h6>
数字越大文字越小。字体默认加粗，单独成行h1标签一般在一个HTML页面中有且只有一个
4 列表标签
4.1 无序列表 ul
无序列表<ul></ul>属性:type : circle 空心圆 square 方块 disc 实心圆(缺省) none 没有标记
元素内容:<li></li>案例<ul type="none"><li>修道院啤酒</li><li>百威啤酒</li><li>青岛啤酒</li><li>精酿啤酒</li><li>福佳白</li></ul>
4.2 有序列表 ol
有序列表：<ol></ol>属性：type: 1 A a I i (数字，英文字母大小写，罗马数字大小写)start: 有序从几开始
案例<ol type="一" start="3"><li>茅台</li><li>五粮液</li><li>习酒</li><li>舍得</li><li>彩陶坊</li></ol>
4.3 列表嵌套
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<ul type="none"><li>茶<ul type="none"><li>绿茶</li><li>红茶</li><li>白茶</li><li>普洱</li><li>花茶</li></ul></li><li>咖啡<ul type="none"><li>埃塞尔比亚</li><li>印度尼西亚黄金曼特宁</li><li>夏瑰</li><li>蓝山</li></ul></li>
</ul>
</body>
</html>
5 图形标签
<img /> 单边标签
属性：
src: 图片路径，可以是本地路径也可以是网络路径
width: 图片宽度[不太合适]
height: 图片高度[不太合适]
border: 图像边框
align: 和相邻文本布局有关
alt: 图片文本说明，当图片裂开无法显示，展示文本
6 链接标签
<a></a>
属性：
href: 指定跳转哪一个页面
target: _self 当前页面加载新连接 _blank 新页面加载连接
name: 可以用于锚点使用
6.1 锚点
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>10-链接标签锚点使用</title>
</head>
<body>
<a href="#middle">去中间</a><br>
<a name="top"></a><br>
<h1>顶部</h1><br>
.........................<a name="middle"></a><br>
<h1>中间</h1><br>
<a href="#top">回顶部</a><br>
<a href="#bottom">去底部</a><br>
.........................<a name="bottom"></a> <br>
<h1>底部</h1> <br>
<a href="#top">回顶部</a> <br>
<a href="#middle">去中间</a><br>
</body>
</html>
7 表格标签
7.1 基本表格样式
<table></table>表格主标签
<tr></tr>表格一行
<td></td>表格一列
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>11-基本表格</title>
</head>
<body>
<table border="1" bordercolor="yellowgreen" cellspacing="5" align="center"><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr>
</table>
</body>
7.2 表头使用
<th></th>
表头。默认字体加粗，并且居中效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>12-表格表头</title>
</head>
<body>
<table border="1" width="600px" align="center"><tr><th>ID</th><th>Name</th><th>Age</th><th>Gender</th><th>Score</th></tr><tr align="center"><td>1</td><td>骚磊</td><td>16</td><td>男</td><td>100</td></tr><tr align="center"><td>2</td><td>老黑</td><td>66</td><td>男</td><td>5</td></tr>
</table>
</body>
</html>
7.3 表格的列合并
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>13-表格的列合并</title>
</head>
<body>
<table border="1" align="center" width="600"><tr><th colspan="5">学生表</th></tr><tr align="center"><td>ID</td><td>姓名</td><td colspan="3">各科成绩</td></tr><tr align="center"><td>1</td><td>骚磊</td><td>100</td><td>95</td><td>98</td></tr><tr align="center"><td>2</td><td>老黑</td><td>10</td><td>5</td><td>3</td></tr>
</table>
</body>
</html>
7.4 表格的行合并
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格归总</title>
</head>
<body><table border="1" width="600px" cellspacing="5" align="center"><tr align="center"><th colspan="5">学生信息</th></tr><tr align="center"><td rowspan="4" >1</td><td>2</td><td>3</td><td>4</td><td>4</td></tr><tr align="center" ><td>2</td><td colspan="3">3</td></tr><tr align="center"><td>2</td><td>3</td><td>4</td><td>4</td></tr><tr align="center"><td>2</td><td>3</td><td>4</td><td>4</td></tr></table>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>14-表格的行合并</title>
</head>
<body>
<table border="1" width="800" align="center"><tr><th></th><th>周一</th><th>周二</th><th>周三</th><th>周四</th><th>周五</th></tr><tr><td rowspan="3">上午</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td><td>语文</td></tr><tr><td>数学</td><td>数学</td><td>数学</td><td>数学</td><td>数学</td></tr><tr><td>英语</td><td>英语</td><td>英语</td><td>英语</td><td>英语</td></tr><tr align="center"><td colspan="6">午休</td></tr><tr><td rowspan="3">下午</td><td>音乐</td><td>音乐</td><td>音乐</td><td>音乐</td><td>音乐</td></tr><tr><td>体育</td><td>体育</td><td>体育</td><td>体育</td><td>体育</td></tr><tr><td>自习</td><td>自习</td><td>自习</td><td>自习</td><td>自习</td></tr>
</table>
</body>
</html>
8 文本格式化标签
<b> 文本加粗
<strong> 文本加粗
<em> 文本斜体
<i> 文本斜体
<small> 小号字体
<sup> 上标
<sub> 脚标
<del> 删除线
<ins> 下划线