1.html标签
标签=标记 head标签和body标签
1.标签语法
双标签(常规标签)：开头<标签名 属性名1:属性值1 属性名2:属性值2....> 中间标签内容 结尾</标签名>
单标签:<标签名 属性名1:属性值1 属性名2:属性值2.../> 或者 标签名 属性名1:属性值1 属性名2:属性值2...
说明:
<>固定写法
标签名:标签名都是html中已有的标签，不能自己随便命名，注意:开始标签结束标签和尖括号之间不能有空格。
属性:属性名和对应的属性之间用冒号连接。属性之间没有先后顺序
内容:内容写在开始标签和结束标签之间，可以是任何东西，文本或者其他标签都可以。
head标签；
title、mate、base、link、style、scrip
title设置网页标题
meta设置网页源数据（单标签）
body中的标签有很多，主要用来在网页内容中添加信息
<!DOCTYPE html>
<html>
<head>
<!-- 设置网页标题 -->
<title>html标签</title>
<!-- 设置网页内容的编码方式 -->
<meta charset="utf-8" />
</head>
<body>
<h1 align="center">'Hello World'</h1>
</body>
</html>
2.文本标签
标题标签
h1---h6 标签来设置大小
<!--
1.标题标签
h1 - h6
设置字体大小
h1 -- 一级标题
h2 -- 副标题
h3-- 副标题下的副标题
-->
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>这个提示</h4>
<h5>夸张了啊</h5>
<h6>过分了</h6>
每个段落使用 p标签。每个段落的内容显示完成后会自动换行
<p>10月28日晚上17点45分，天津市大港中塘镇安达工业园内一处仓库发生火灾，消防人员赶赴现场，进行全力扑救</p>
<p>当晚，天津风力较大，给火灾扑救带来了困难。天津消防总队特勤支队支队长张大鹏说，“消防人员是28日18时03分抵达现场，导致长时间燃烧的原因主要是因为润滑油。我们共调动消防员300余名，调动包括重型泡沫车，远程供水车，火场指挥车，大功率泡沫车等共60余部消防车。”</p>
<p>救火</p>
3.特殊功能的标签和符号
在html文本中的换行、空格、tab等都是无效的(空白无效)如果要换行用<br
空格: 
<p>
<b> 举头望明月</b>，<br>
<hr >
<b><i>低头嘤嘤嘤。</i></b>
</p>
4.字体相关的bq
加粗:b标签/strong标签。
b标签只是单纯的加粗。strong有强调作用
倾斜:i标签和em标签
i标签只是单纯的文字倾斜效果。
颜色font
5.水平线:
<hr>
3.列表标签
列表标签分为有序标签、无序标签、自定义标签
有序列表:
ol代表整个列表
li代表列表中的元素
<ol>
<li>基础语法</li>
<li>web前段</li>
<li>web后端</li>
<li>数据和人工智能</li>
<li>项目</li>
</ol>
无序列表:
ul代表整个列表
li代表列表中的元素
<ul>
<li>python人工智能</li>
<li>HTML5</li>
<li>Java大数据</li>
<li>自动化测试</li>
<li>爬虫</li>
</ul>
自定义列表:
dl代表整个列表
dt代表分组
dd代表列表中的元素
<dl>
<dt>联盟:</dt>
<dd>兴欣</dd>
<dd>蓝雨</dd>
<dd>霸图</dd>
</dl>
4.图片和超链接
1.图片标签:img。可以显示本地图片和网络图片
单标签
src属性--图片地址(本地图片路径也可以是网络图片的url)
本地图片路径 地址可以是绝对路径也可是相对路径，一般将图片放在工程的img文件夹中，写相对路径
title -- 设置图片标题(鼠标停留在图片上，显示的内容)
alt --设置图片加载
2.超链接图片: a 标签
a. 内容 --文字/图片
href ----跳转的目标地址
(1)网页地址 ---跳转到指定的网页
(2)本地的html文件地址 跳转到本地的html对应的网页中
(3) 空 -刷新网页
(4)选择器 -- 在当前网页中跳转到指定的位置
<a href="https://www.baidu.com">图片</a>
<a href="02-文本标签.html">列表标签</a>
<a href="">刷新</a>
<a href="#top">回到顶部</a>
<a href="#2">回到第2张</a>
c.targrt --跳转方式
_self - 默认值 ，在当前页面加载新的网页 ，覆盖原网页
_black --在新的页面加载出页面，原网页还在
<a href="https://www.baidu.com" target="_blank">百度一下</a>
<a href="https://www.baidu.com">abc</a>
5.数据表格
1.表格标签
table标签 -- 整个表格
tr --行
td --单元格
2.表格边框相关的属性
border - 边框的宽度
bordercolor --边框的颜色(颜色值可以是英语单词也可是RGB对应的16进制值)
cellspacing ---单元格和单元格之间的间隙
cellpadding ---设置单元格中内容和单元格边框之间的间距
3.背景颜色
bgcolor --背景颜色
a.作为table的属性-设置整个表格的颜色
b.作为tr属性 -设置某一行的颜色
c.作为td属性，设置某一个单元格的背景颜色
<table border="1" bordercolor="black" cellspacing="0" cellpadding="20" bgcolor="darkgrey">
<!-- 第一行 -->
<tr bgcolor="azure">
<td>First Name</td>
<td bgcolor="chocolate">Laetname</td>
<td>Points</td>
</tr>
<!-- 第二行 -->
<tr bgcolor="beige">
<td bgcolor="aqua">jill</td>
<td>smith</td>
<td>50</td>
</tr>
<!-- 第三行 -->
<tr bgcolor="antiquewhite">
<td>eve</td>
<td>jack</td>
<td bgcolor="darkblue">95</td>
4.宽度和高度
width --设置整个表格的宽度(作用于table)
heigjt --设置高度
a.作用于table --设置整个表格的宽度和高度，按文字比例分配每一行每一列的宽度和高度
b. 分别设置每一行的高度和每一列的宽度.设置列的宽度只需要设置一行中列的宽度就可以了
c.作用于td 就是让指定的单元格中的内容居中 左对齐或者右对齐
应用:细线表格
第一步:设置整个表格的背景颜色(线的颜色)和每个单元格的背景颜色(表格的颜色)
第二步:设置cellspacing的值为边框的宽度
<table bgcolor="black" cellspacing="1" width="300" height="200" align="center">
<tr align='center' bgcolor="aliceblue">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr align='center' bgcolor="aliceblue">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr bgcolor="aliceblue">
<td align='center'>7</td>
<td width="100">8</td>
<td>9</td>
5.对齐方式
align --center居中、left左对齐、right右对齐
a.作用于table 让整个表格在body中居中 左对齐 右对齐
b.作用于tr，让整行中每个单元格的内容在单元格中对齐
6.复杂表格
1.制作复杂表格的方法:
a.确定表格的最大行数,在table中用tr表示出来
b.第二步确定每一行有多少个单元格
c. 确定每一个单元格是否有合并现象。如果是行合并就设置rowspan，如果是列合并就设置colspan
<table border="1" cellspacing="0" width="500" height="300">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br>
<table border="1" cellspacing="0" width="600" height="4">
<tr>
<td colspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td rowspan="3" colspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
</table>
网友评论