1.第一个网页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个网页</title>
</head>
<body>hellow world
</body>
</html>
2.标题标签
<!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>
大湖名城,创新高地
</body>
</html>
3.换行标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>换行标签</title>
</head>
<body>
床前明月光,<br />
疑似地上霜。<br />
举头望明月,<br />
低头思故乡。<br />
</body>
</html>
4.段落标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>段落标签</title>
</head>
<body>
<p>鹅鹅鹅,</p>
<p>曲项向天歌。</p>
<p>白毛浮绿水,</p>
<p>红掌拨清波。</p>
</body>
</html>
5.水平标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>水平标签</title>
</head>
<body>
<h2>水平线标签的使用</h2>
<hr color="red" width="30%" size="20px" align="right" />
</body>
</html>
6.其他常用标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>其他常用标签 </title>
</head>
<body>
<!-- 字体加粗标签 -->
<strong>我是strong标签</strong>
<b>我是b标签</b>
<!-- 斜体标签 -->
<em>我是em标签</em>
<i>我是i标签</i>
<!-- 上标标签 -->
x<sup>2</sup>+y<sup>3</sup> = 1
<!-- 下标标签 -->
H<sub>2</sub>O<sub>2</sub>
</body>
</html>
7.图像标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
src:设置图像的位置
width:设置图像的宽度
height:设置图像的高度
alt:设置图像的替换文字,当图像不能正常显示的时候,显示alt的属性值
title:设置鼠标悬停在图像上时显示的内容
-->
<img src="img/car.jpg" width="300px" alt="这是一辆红色的跑车" title="好漂亮的跑车" />
</body>
</html>
8.超链接标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
href:设置超链接跳转的位置
target:设置网页打开位置
_self:在当前窗口中打开网页
_blank:在新建窗口中打开网页
-->
<a href="http://www.baidu.com" target="_blank">百度</a>
</body>
</html>
9.锚链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="#down">快速到达底部</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#">111111111111111111111111111111</a><br />
<a href="#" id="down">底部</a><br />
</body>
</html>
10.功能性标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 这是功能性连接,会打开电脑上处理邮件的客户端-->
<a href="mailto:1319866945@qq.com">邮箱联系我们</a>
</body>
</html>
11.特殊符号
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
大湖名城 创新高低
3<b>2<br />
"美丽的谎言"<br />
©版权所有,翻版必究
</body>
</html>
12.无需列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li>第1项</li>
<li>第1项</li>
<li>第1项</li>
<li>第1项</li>
</ul>>
<hr/>
<ul type="circle">
<li>第1项</li>
<li>第1项</li>
<li>第1项</li>
<li>第1项</li>
</ul>
<hr/>
<ul type="disc">
<li>第1项</li>
<li>第1项</li>
<li>第1项</li>
<li>第1项</li>
</ul>
<hr/>
<ul type="square">
<li>第1项</li>
<li>第1项</li>
<li>第1项</li>
<li>第1项</li>
</ul>
<hr/>
</body>
</html>
13.有序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ol>
<li>第一项</li>
<li>第一项</li>
<li>第一项</li>
<li>第一项</li>
</ol>
<hr/>
<ol type="1" start="5">
<li>第一项</li>
<li>第一项</li>
<li>第一项</li>
<li>第一项</li>
</ol>
<hr/>
<ol type="A">
<li>第一项</li>
<li>第一项</li>
<li>第一项</li>
<li>第一项</li>
</ol>
<hr/>
<ol type="a" start="4">
<li>第一项</li>
<li>第一项</li>
<li>第一项</li>
<li>第一项</li>
</ol>
<hr/>
<ol type="I">
<li>第一项</li>
<li>第一项</li>
<li>第一项</li>
<li>第一项</li>
</ol>
<hr/>
<ol type="i">
<li>第一项</li>
<li>第一项</li>
<li>第一项</li>
<li>第一项</li>
</ol>
<hr/>
</body>
</html>
14.定义列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<dl>
<dt>关于华为云</dt>
<dd>了解华为云</dd>
<dd>华为云APP</dd>
<dd>客户案例</dd>
<dt>水果</dt>
<dd>苹果</dd>
<dd>葡萄</dd>
<dt>蔬菜</dt>
<dd>青菜</dd>
<dd>菠菜</dd>
</dl>
</body>
</html>
15.表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1px" cellspacing="0" width="300px" height="200px" cdllpading="10px" align="center">
<tr align="right">
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td align="right">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
</tr>
</table>
</body>
</html>
16.表格行合并和列合并
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1px" cellspacing="0" width="300px" height="200px" >
<tr>
<td rowspan="2">1-1</td>
<td>1-2</td>
<td colspan="2">1-3</td>
<!-- <td>1-4</td> -->
</tr>
<tr>
<!-- <td>2-1</td> -->
<td>2-2</td>
<td rowspan="3">2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<!-- <td>3-3</td> -->
<td>3-4</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<!-- <td>4-3</td> -->
<td>4-4</td>
</tr>
</table>
</body>
</html>