head标签
<!DOCTYPE html>
<html>
<!--
1.head的作用
head标签主要负责网页图标和标题的显示以及网页的基本设置
2.head标签中的标签
head可以写的标签有:meta、title、link、style、script、base
meta - 设置网页元数据(例如:网页编码方式、网页的搜索关键字、网页介绍等)
title - 这是网页标题
link - 导入文件(设置网页图标、导入外部样式表)
-->
<head>
<!--设置文本编码方式-->
<meta charset="UTF-8">
<!--设置网页标题-->
<title>head标签</title>
<!--设置网页图标
rel属性 - 设置被导入的文件的作用;
stylesheet - 样式表
icon - 网页图标
type属性 - 设置文件类型:文件类型/文件后缀
text/css - 导入的文件是:后缀是.css的文本文件
image/png - 导入的文件是图片，图片后缀是.png
href属性 - 被导入的文件路径
-->
<link rel='icon' type='image/ico' href='img/aaa.ico'/>
</head>
<body>
</body>
</html>
文本标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.标题标签:h1~h6
如果文件的意义是标题的时候才选择标题标签
-->
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
<!--2.段落标签:p
一个段落就是一个p标签(多个p标签的内容之间会自动换行)
-->
<p>
综合人目前已知消息，OPPO Reno3 Pro正面将采用双曲面的显示屏，
在机身内置了4025mAh（典型值）电池的同时，
还做到了7.7mm的机身厚度和17_克的机身重量。
这些信息也透露了该机并不会配备升降式的前置相机。
</p>
<p>
综合人目前已知消息，OPPO Reno3 Pro正面将采用双曲面的显示屏，
在机身内置了4025mAh（典型值）电池的同时，
还做到了7.7mm的机身厚度和17_克的机身重量。
这些信息也透露了该机并不会配备升降式的前置相机。
</p>
<!--3.普通文字标签:font
多个font标签的文字可以在一行显示
-->
<font>发布时间</font><br />
<font>文章作者</font>
<!--4.空格和换行
网页内容中手动输入的空格和换行都没有用
1)换行标签:br
在网页中任何位置需要换行的时候直接加<br>或者<br/>
2)空格:空格符号
- 一个空格(单位是像素)
  - 一个空格(单位是空格键)
-->
<p>
<hr/>
床前明月光，<br />
疑是地上霜。<br />
    举头望明月，<br />
低头思故乡。<br />
</p>
<!--5.文字效果:倾斜和加粗
1)加粗:<b></b>、<strong></strong> - strong有强调的意思
2)倾斜:<i></i>、<em></em> - em有强调的意思
-->
<p>关闭两个气缸虽然能够帮助发动机提升燃效，但是也可能会导致缸体热量分布不均。
所以，通用特意为这台发动机配备了<b><em>ATM</em></b>动态热管理系统，可以<i>精确控制</i>冷却水的流量和流向，
从而平衡发动机不同部件各自的最佳温度。
其实提到“可变”，除了通用的可变缸技术之外，日产的“可变压缩比”发动机也同样值得关注。
日产的<strong>2.0T VC-TURBO</strong>发动机就获得了<em>2019沃德十佳发动机</em>的奖项。
</p>
<!--6.水平线:
<hr/>
-->
</body>
</html>
列表标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>编程科目</title>
</head>
<body>
<!--1.无序列表:ul-li
ul标签 - 表示整个列表容器
li标签 - 元素
-->
<ul>
<li>Python</li>
<p>python天下第一！</p>
<li>Java</li>
<li>H5</li>
<li>测试</li>
<li>Go语言</li>
<li>物联网</li>
</ul>
<!--2.有序列表:ol-li
ol标签 - 表示整个列表容器
li标签 - 表示列表中的元素
-->
<ol>
<li>将肉洗干净，然后加水到8分熟</li>
<li>捞起来切片</li>
<li>油锅里放油，然后再放干海椒、花椒、生姜。炸香</li>
<li>再将肉放进去炸</li>
<li>起锅前放调料，出锅</li>
</ol>
<!--3.自定义列表:dl-dt-dd
dl - 整个列表容器
dt - 表示一个分组
dd - 每个分组中的内容
-->
<dl>
<dt>文科</dt>
<dd>历史</dd>
<dd>地理</dd>
<dd>政治</dd>
<dt>理科</dt>
<dd>物理</dd>
<dd>化学</dd>
<dd>生物</dd>
</dl>
</body>
</html>
图片和超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<!--1.图片标签:img
1)src属性:图片路劲
本地文件路径(绝对路径/相对路径)
网络图片路径
2)title属性:图片标题(鼠标悬停一会儿才会出现)
3）alt属性:图片加载失败的提示信息
-->
<img src='img/luffy.jpg' id='tianhua'/>
<img src='http://b-ssl.duitang.com/uploads/item/201704/21/20170421083329_3cxt8.png' />
<img src='img/luffy1.png' title='路飞' />
<img src='img/hat.png' title='路飞' alt='图片加载失败'/>
<!--2.超链接:a
<a href="跳转的目的地">可见可点击部分</a>
1)href属性 - 跳转目的地
a.网页地址 - 跳转到指定网页
b.本地html文件地址 - 在浏览器中直接打开指定html文件对应的网页
c.选择器 - 将当前页面滚动到选择器所在位置
2)target属性 - 页面打开方式
a._self - 默认值，在当前页面渲染新的页面
b._blank - 不动原页面，用新窗口显示新的页面
-->
<hr id='top'/>
<!--文字超链接-->
<a href="https://www.bilibili.com" target="_blank">百度</a>
<!--图片超链接-->
<a href="https://www.bilibili.com" target="_blank"><img src='img/aaa.ico' /></a>
<hr>
<a href='03-列表标签.html'>列表</a>
<a href="#page1">第一章</a>
<a href="#page2">第二章</a>
<a href="#page3">第三章</a>
<a href="#">重新加载</a>
<h1 id='page1'>第一章</h1>
<img src='img/chang01.jpg' />
<h1 id='page2'>第二章</h1>
<img src='img/chang02.jpg' />
<h1 id='page3'>第三章</h1>
<img src='img/chang03.jpg' />
<a href='#top'>回到顶部</a>
<a href='#tianhua'>回到天花板</a>
</body>
</html>
表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--1.表格标签:table-tr-td
1）table标签 - 代表整个表格
border属性 - 设置边框线的宽度
bordercolor属性 - 边框线的颜色;颜色单词或#16进制颜色值
cellspacing属性 - 设置单元格与单元格以及单元格和表格之间的间隙，默认1
bgcolor属性 - 设置整个表格的背景颜色
width属性 - 设置整个表格的宽度
height属性 - 设置整个表格的高度
align属性 - 设置整个表格在网页中的对齐方式:center,left,right
cellpadding属性 - 设置整个表格中所有单元格中的内容到边框的距离
2）tr标签 - 一个tr代表一行
bgcolor属性 - 设置一行的背景颜色
height - 设置指定行的高度
align属性 - 设置指定行中所有的单元格在单元格中的内容在单元格中的对齐方式
cellpadding属性 - 设置整行中的内容到边框的距离
3）td标签 - 一个td代表一个单元格
bgcolor属性 - 设置指定单元格的背景颜色
width属性 - 设置指定单元格所在的列的宽度
align属性 - 设置指定单元格中的内容在单元格中的对齐方式
cellpadding属性 - 设置指定单元格的内容到边框的距离
-->
<table cellpadding="20" align="center" width="600" height="400" border="1" cellspacing="0" bordercolor="red" bgcolor="aquamarine">
<tr bgcolor="gray" height="60" align="center">
<td width="100">一行一列</td>
<td>一行二列</td>
<td>一行三列</td>
</tr>
<tr>
<td>二行一列</td>
<td>二行二列</td>
<td>二行三列</td>
</tr>
<tr>
<td>三行一列</td>
<td>三行二列</td>
<td>三行三列</td>
</tr>
<tr>
<td>四行一列</td>
<td>四行二列</td>
<td align="center" bgcolor="coral">四行三列</td>
</tr>
</table>
<!--练习:写一个细线表格-->
<table bgcolor="black" width="400" height="400" cellspacing="1" align="center">
<tr bgcolor="white" align="center">
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr bgcolor="white" align="center">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr bgcolor="white" align="center">
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
</body>
</html>
复杂的表格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table bgcolor="black" width="400" height="400" cellspacing="1" align="center">
<tr bgcolor="white" align="center">
<td>1</td>
<td>2</td>
<td colspan="2">3</td>
<td>4</td>
</tr>
<tr bgcolor="white" align="center">
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr bgcolor="white" align="center">
<td colspan="2" rowspan="2">5</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr bgcolor="white" align="center">
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr bgcolor="white" align="center">
<td colspan="2">7</td>
<td colspan="2" rowspan="3">8</td>
<td rowspan="3">9</td>
</tr>
<tr bgcolor="white" align="center">
<td>1</td>
<td>2</td>
</tr>
<tr bgcolor="white" align="center">
<td>3</td>
<td>4</td>
</tr>
</table>
<table bgcolor="black" width="400" height="400" cellspacing="1" align="center">
<tr bgcolor="cornflowerblue" align="center" height="50">
<td></td>
<td colspan="2"></td>
<td colspan="2" rowspan="3"></td>
<td rowspan="2" width="100"></td>
</tr>
<tr bgcolor="cornflowerblue" align="center" height="30">
<td rowspan="2"></td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr bgcolor="cornflowerblue" align="center" height="30">
<td></td>
</tr>
<tr bgcolor="cornflowerblue" align="center">
<td rowspan="2"></td>
<td colspan="2"></td>
<td></td>
<td></td>
<td rowspan="2"></td>
</tr>
<tr bgcolor="cornflowerblue" align="center">
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="cornflowerblue" align="center" height="120">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
