1 基本结构
- head
- title
- meta
- body
2 head标签
- meta
元标签，定义了html文档中的元数据（设置了网页的基本设置）;charset属性设置网页的文本编码方式。 - title
设置网页标题，不设置标题则默认显示ip - style
在html提供css代码对应的标签 - link
导入图标/css文件的标签
<!DOCTYPE html>
<html>
<head>
<!--charset设置网页的文本编码方式-->
<meta charset="UTF-8">
<!--设置网页标题-->
<title>head中的标签</title>
<!--
rel - 设置文件作用，stylessgeet：样式表，icon:图标
type - 设置文件类型，文件类型/文件后缀；text/css：文本文件/后缀是css,image/ico:图片/后缀ico
href - 设置文件路径；可以是绝对路径也可以是相对路径，与python用法相同
-->
<link rel="icon" type="image/ico" href="./img/jd_logo.ico" />
</head>
<body>
111
</body>
</html>
3 文本标签
如果需要在网页中显示文在，一般不直接将文字写在body中，而是根据文字的功能找到对应的标签。
- 标题标签
标题标签（h1-h6）,双标签，一个标签占一行 - 段落标签（p标签）
双标签，保证一个段落对应一个p标签，一个标签占一行 - font标签
双标签，一行可以显示多个 - 文字效果相关标签
在html中直接敲空格、缩进是无效的。
- 单标签，在网页中的内容强制换行，也可以让标签换行
  - 一个像素（一个 代表空一个像素）
&emsp - 一个空格
<b></b> - 加粗
<strong></strong> - 加粗,有强调意义
<i><i/> - 倾斜
<em></em> - 倾斜，有强调意义
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1、标题标签（h1-h6）,双标签，一个标签占一行
-->
<h1>我是标题1</h1>
<h2>我是标题1</h2>
<h3>我是标题1</h3>
<h4>我是标题1</h4>
<h5>我是标题1</h5>
<h6>我是标题1</h6>
<!--
2、段落标签（p标签）
双标签，保证一个段落对应一个p标签，一个标签占一行
-->
<p>hello</p>
<p>world</p>
<!--
3、font标签
双标签，一行可以显示多个
-->
<font>性别</font>
<font>男</font>
<font>女</font>
<!--
4、文字效果相关标签
在html中直接敲空格、缩进是无效的。
<br/> - 单标签，在网页中的内容强制换行，也可以让标签换行
  - 一个像素（一个 代表空一个像素）
&emsp - 一个空格
<b></b> - 加粗
<strong></strong> - 加粗,有强调意义
<i><i/> - 倾斜
<em></em> - 倾斜，有强调意义
-->
<p>
<i>床前</i>明月光，<br />
疑是地上霜；<br />
 <b>举头</b>望<strong>明月</strong>；
</p>
</body>
</html>
4 列表标签
- 无序列表
ul标签 - 代表列表容器，是一个整体
li标签 - 列表中的元素 - 有序列表
ol标签 - 代表列表容器，是一个整体
li标签 - 列表中的元素 - 自定义列表
dl标签 - 代表列表容器，是一个整体
dt标签 - 小分类标签（名词）
dd标签 - 小分类下面的元素（解释）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1、无序劣列表（ul）
ul标签 - 代表列表容器，是一个整体
li标签 - 列表中的元素
-->
<ul>
<li>python</li>
<li>h5</li>
<li>java</li>
<li>testing</li>
</ul>
<!--
2、有序列表（ol）
ol标签 - 代表列表容器，是一个整体
li标签 - 列表中的元素
-->
<ol>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ol>
<!--
3、自定义列表（dl）
dl标签 - 代表列表容器，是一个整体
dt标签 - 小分类标签（名词）
dd标签 - 小分类下面的元素（解释）
-->
<dl>
<dt>四川</dt>
<dd>成都</dd>
<dd>绵阳</dd>
<dd>南充</dd>
<dt>辽宁</dt>
<dd>沈阳</dd>
<dd>大连</dd>
<dd>盘锦</dd>
</dl>
</body>
</html>
5 图片和超链接
- 图片标签（img）
单标签，默认一行显示多张图片
a. src属性：设置图片地址/路径；可以是本地路径，也可以是网络地址
b. title属性：设置图片标题，鼠标停留在图片上才会显示出来
c. alt属性：图片加载失败时的提示信息 - 超链接（a）
双标签
a. href属性：跳转的目的地
网址 - 点击超链接直接加载网址对应的网页
本地html文件地址 - 点击超链接直接加载本地html文件对应的网页
# - 刷新
选择器 - 让当前页面滚动到指定的位置
b. target属性：设置跳转方式
_self - 在当前页面中加载新的内容
_blank - 在新的页面中加载新的网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片和超链接</title>
</head>
<body>
<!--
1、图片标签（img）
单标签，默认一行显示多张图片
a. src属性：设置图片地址/路径；可以是本地路径，也可以是网络地址
b. title属性：设置图片标题，鼠标停留在图片上才会显示出来
c. alt属性：图片加载失败时的提示信息
-->
<img src="img/luffy.jpg" title="路飞" alt="图片不存在"><br />
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" title="百度"><br />
<!--
2、超链接（a）
双标签
a. href属性：跳转的目的地
网址 - 点击超链接直接加载网址对应的网页
本地html文件地址 - 点击超链接直接加载本地html文件对应的网页
# - 刷新
选择器 - 让当前页面滚动到指定的位置
b. target属性：设置跳转方式
_self - 在当前页面中加载新的内容
_blank - 在新的页面中加载新的网页
-->
<!--加载网页-->
<a href="https://www.baidu.com" target="_self">百度一下，你就知道</a><br />
<a href="https://www.baidu.com" target="_blank"><img src="https://www.baidu.com/img/bd_logo1.png?where=super"/></a><br / >
<br />
<!--接在本地html文件-->
<a href="03-列表标签.html">列表</a>
<br />
<!--刷新当前网页-->
<a href="#">刷新</a>
<br / >
<!--页面内跳转：需要用到选择器-->
<a href="02-文本标签.html">文本标签</a>
<a href="https://www.taobao.com"><img src="img/aaa.ico" title="淘宝"/></a><br />
<br />
<img src="img/aaa.ico"/>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="https://about.jd.com/privacy/" target="_blank">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私
</body>
</html>
6 表格标签
表格
1. table标签 - 代表表格整体
2. tr - 代表表格中的一行
3. td - 代表表格中的一个单元格
属性：
cellsapacing - 设置表格中单元格与单元格及表格边框的间距
bgcolor - 设置整个表格、某一行或者某个单元格的背景颜色
border - 设置单元格边框的宽度
bordercolor - 设置边框的颜色
cellpadding - 设置单元格中的内容到单元格边框（上下左右）之间的距离
width - 设置整个表格或一列的宽度
height - 设置整个表格或一行的高度
align - center(居中)，left(左对齐)，right(右对齐)
让表格在整个浏览器中居中（左，右）
或让单元格在表格中居中（左，右）
补充：细线表格
1）设置整个的table的背景颜色是边框线的颜色
2）设置每个单元格的颜色和边框线的颜色不一样
3）设置单元格和单元格的间距（cellspacing为1）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
表格
1. table标签 - 代表表格整体
2. tr - 代表表格中的一行
3. td - 代表表格中的一个单元格
属性：
cellsapacing - 设置表格中单元格与单元格及表格边框的间距
bgcolor - 设置整个表格、某一行或者某个单元格的背景颜色
border - 设置单元格边框的宽度
bordercolor - 设置边框的颜色
cellpadding - 设置单元格中的内容到单元格边框（上下左右）之间的距离
width - 设置整个表格或一列的宽度
height - 设置整个表格或一行的高度
align - center(居中)，left(左对齐)，right(右对齐)
让表格在整个浏览器中居中（左，右）
或让单元格在表格中居中（左，右）
补充：细线表格
1）设置整个的table的背景颜色是边框线的颜色
2）设置每个单元格的颜色和边框线的颜色不一样
3）设置单元格和单元格的间距（cellspacing为1）
-->
<table cellspacing="1" cellpadding="10" bgcolor="red" align="center">
<!--第一行-->
<tr bgcolor="white" align="center" height="100">
<td align="left">姓名</td>
<td>成绩</td>
<td align="left">学员评价</td>
</tr>
<!--第二行-->
<tr bgcolor="chartreuse">
<td bgcolor="aqua">张三</td>
<td>60</td>
<td>不留级</td>
</tr>
<!--第三行-->
<tr bgcolor="white">
<td>李四</td>
<td>80</td>
<td>不留级</td>
</tr>
<!--第四行-->
<tr bgcolor="white">
<td>王麻子</td>
<td>55</td>
<td>留级</td>
</tr>
</table>
</body>
</html>
7 复杂表格
colspan属性：列合并
rowspan属性：行合并
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
colspan属性：列合并
rowspan属性：行合并
-->
<table border="1" bordercolor="black" cellspacing="0" width="1000" height="1000">
<!--第一行-->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<!--第二行-->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<!--第三行-->
<tr>
<td></td>
<td colspan="2"></td>
<td rowspan="3"></td>
<td rowspan="3" colspan="2"></td>
</tr>
<!--第四行-->
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<!--第五行-->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!--第六行-->
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!--第七行-->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br />
<br />
<!--练习-->
<table border="1" bordercolor="black" cellspacing="0" width="1200" height="1200">
<tr>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="2"></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2" rowspan="2"></td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
