<!DOCTYPE html>
<html>
<head>
meta charset="UTF-8">
<title>文本标签</title>
</head>
<body>
<h1>我是标题1</h1>
<h2>我是标题2</h2>
<h3>我是标题3</h3>
<h4>我是标题4</h4>
<h5>我是标题5</h5>
<h6>我是标题6</h6>
<!--2.段落标签(p标签)
双标签，保证一个段落对应一个p标签
一个标签占一行
-->
<p>
“文明因交流而多彩，文明因互鉴而丰富”，2014年3月27日，习近平主席在联合国教科文组织总部发表重要演讲时如是说。在同一场演讲中，习主席还指出：历史和现实都表明，傲慢和偏见是文明交流互鉴的最大障碍。
</p>
<p>
2016年1月21日，习近平主席在阿拉伯国家联盟总部发表演讲时则提出：文明具有多样性，就如同自然界物种的多样性一样，一同构成我们这个星球的生命本源。
</p>
<p>
“一花独放不是春，百花齐放春满园”，今年5月15日亚洲文明对话大会将在北京开幕，值此盛会开幕之际，我们通过一个微视频，重温习主席关于文明交流互鉴的一组金句。
</p>
<p>hello</p>
<p>world</p>
<!--3. font标签
双标签
一行可以有多个
-->
<font>性别</font>
<font>男</font>
<font>女</font>
<!--4.文字效果相关标签
在HTML中直接敲或者空格、缩进是无效的。
<br/> - 单标签，往网页中的内容强制换行
- 一个像素(一个" "代表空一个像素)
  - 一个空格
<b></b> - 加粗
<strong></strong> - 加粗(有强调的意义)
<i></i> - 倾斜
<em></em> - 倾斜(有强调的意义)
-->
<p>
床前<b>明月</b>光,<br />
疑是地上<strong>霜</strong>;<br />
举头望明月,<br />
低头思故乡.<br />
  <i>床前</i>明月光,<br />
  疑是<em>地上</em>霜;<br />
  举头望明月,<br />
  低头思<strong><em>故乡</em></strong>.
</p>
<font>性别</font> <br /><br />
<font>男</font>
<font>女</font>
</body>
</html>
<ul>
<li>Python</li>
<li>H5</li>
<li>Java</li>
<li>Testing</li>
</ul>
<!--2.有序列表(ol)
ol标签 - 代表列表容器，是一个整体
li标签 - 列表中的元素
-->
<ol>
<li><a href="">挑选小龙虾</a></li>
<li>清理小龙虾</li>
<li>煮小龙虾</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>
<a href="#p1" id="top">第1组</a><br />
<a href="#p2">第2组</a><br />
<a href="#p3">第3组</a><br />
<a href="#p4">第4组</a><br />
a.src属性：设置图片地址/路径; 可以是本地路径也可以是网络地址
b.title属性：设置图片标题（当鼠标停留在图片上才会显示出来）
c.alt属性：图片加载失败的时候的提示信息
-->
<p id="p1">第一组图片</p>
<img src="img/luffy.jpg" title="路飞" alt="图片不存在！"/>
<img title="百度" src="https://www.baidu.com/img/bd_logo1.png"/>
<br />
<p id="p2">第二组图片</p>
<img src="img/luffy1.png" title="路飞" alt="图片不存在！"/>
<img title="百度" src="https://www.baidu.com/img/bd_logo1.png"/>
<br />
<p id="p3">第3组图片</p>
<img src="img/luffy2.png" title="路飞" alt="图片不存在！"/>
<img title="百度" src="https://www.baidu.com/img/bd_logo1.png"/>
<br />
<p id="p4">第4组图片</p>
<img src="img/jd_logo.ico" title="路飞" alt="图片不存在！"/>
<img title="百度" src="https://www.baidu.com/img/bd_logo1.png"/>
<br />
<!--2.超链接(a)
双标签
1). href属性：跳转的目的地
a.网址 - 点击超链接直接加载网址对应的网页
b.本地html文件地址 - 点击超链接直接加载本地html文件对应的网页
c.# - 刷新
d.选择器 - 让当前页面滚动到指定的位置
2)target属性: 跳转方式
_self - 在当前页面中加载新的网页(默认值)
_blank - 在新的页面中加载新的网页
-->
<!--加载网页-->
<a href="https://www.baidu.com" target="_blank">百度一下</a>
<a href="https://www.baidu.com"><img src="https://www.baidu.com/img/bd_logo1.png"/></a>
<br />
<!--加载本地html文件-->
<a href="03-列表标签.html">列表</a>
<!--刷新当前网页-->
<a href="#">刷新</a>
<!--页面内跳转-->
<a href="#top">回到顶部</a><br />
<img src="img/aaa.ico"/>
<font>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版<a href="https://about.jd.com/privacy/" target="_blank">《京东隐私政策》</a>已上线，将更有利于保护您的个人隐私。</font>
<table cellspacing="1" bgcolor="red" cellpadding="20" width="1000" height="500">
<!--第一行-->
<tr bgcolor="white">
<td>第1行第1列</td>
<td bgcolor="purple">第1行第2列</td>
<td>第1行第3列</td>
</tr>
<!--第二行-->
<tr bgcolor="greenyellow">
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
<!--第三行-->
<tr bgcolor="pink">
<td>第3行第1列</td>
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
<!--第四行-->
<tr bgcolor="orange">
<td>第4行第1列</td>
<td>第4行第2列</td>
<td>第4行第3列</td>
</tr>
</table>
<br />
<table border="2" bordercolor="red" cellspacing="0" align="center">
<!--第一行-->
<tr bgcolor="white" height="40" align="center">
<td width="120">第1行第1列</td>
<td width="150" bgcolor="purple">第1行第2列</td>
<td width="200">第1行第3列</td>
</tr>
<!--第二行-->
<tr bgcolor="greenyellow" height="80">
<td>第2行第1列</td>
<td align="right">第2行第2列</td>
<td>第2行第3列</td>
</tr>
<!--第三行-->
<tr bgcolor="pink" height="80">
<td>第3行第1列</td>
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
<!--第四行-->
<tr bgcolor="orange" height="80">
<td>第4行第1列</td>
<td>第4行第2列</td>
<td>第4行第3列</td>
</tr>
</table>
<!--
colspan属性：列合并
rowspan属性：行合并
-->
<table cellspacing="0" border="1" bordercolor="black" width="1000" height="500">
<!--第1行-->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<!--第2行-->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
</tr>
<!--第3行-->
<tr>
<td></td>
<td colspan="2"></td>
<td rowspan="3"></td>
<td colspan="2" rowspan="3"></td>
</tr>
<!--第4行-->
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<!--第5行-->
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<!--第6行-->
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!--第7行-->
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<br />
<table border="1" cellspacing="0" width="1000" height="500">
<tr>
<td></td>
<td></td>
<td></td>
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td rowspan="2" colspan="2"></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td colspan="2"></td>
<td></td>
</tr>
</table>