如何通过网页基本元素来制作一个简单的网页呢？
首先，我们先来学习网页的一些基本元素。
1.1标题文字标签：<h# align="left/center/right">标题文字</h#>
"#"用来指定文字的大小，取1-6之间的整数值。#取1时文字最大，#取值越大文字逐渐变小。
属性align用来设置标题在页面的水平对齐方式，left(左对齐）center(居中）right（右对齐），如不填写align属性则默认为left。
此标签默认字体为宋体。
代码演示如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题文字标签</title>
</head>
<body>
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5 align="center">五级标签</h5>
<h6 align="right">六级标签</h6>
</body>
</html>效果显示：
1.2文本格式标签
在网页中有时字体需要一些特殊的效果，例如：设置粗体，斜体，下划线等效果时，就需要用到文本格式标签。
| 标签 | 显示效果 |
|---|---|
| <b></b>和<strong></strong> | 文字以粗体方式显示（b定义文本粗体，strong强调文本） |
| <i></i>和<em></em> | 文字以斜体方式显示（i定义斜体字，em强调文本） |
| <s></s>和<del></del> | 文字以加删除线方式显示（HTML5不赞成使用s) |
| <u></u>和<ins></ins> | 文字以加下划线方式显示（HTML5不赞成使用) |
使用文本格式标签设置文字样式，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本格式标签</title>
</head>
<body>
<h1><p align="center" ><b>HTML中编排文本的常用标签</b></p></h1><br>
<p align="center">我是默认文本</p><br>
<p align="center"><b>我是b标签加粗文本</b></p><br>
<p align="center"><strong>我是strong标签强调文本</strong></p><br>
<p align="center"><i>我是i标签的倾斜文本</i></p><br>
<p align="center"><em>我是em标签强调文本</em></p><br>
<p align="center"><del>我是del标签的带删除线文本</del></p><br>
<p align="center"><ins>我是ins标签的带下划线文本</ins></p><br>
</body>
</html>效果显示：
注：以上文本格式可用<span>标签配合CSS样式替代。
1.3水平线标签<hr/>
<hr/>为单标签，水平线标签格式为：
<hr/ align="left/center/right" size="粗细“ width="长度” color=“颜色" noshade="noshade"/ >
| 属性 | 描述 |
|---|---|
| align | 设置水平线的对齐方式，默认为居中 |
| size | 设置水平线的粗细，以像素为单位，默认2像素 |
| color | 设置水平线颜色，默认为100% |
| width | 设置水平线宽度 |
| noshade | 设置线段是否显示阴影 |
1.4图像标签
图像标签格式为：
<img src="图像文件名(URL路径）" alt="图像无法显示说明文字" title="鼠标悬停提示文字" width="图像宽度" height="图像高度" border="边框宽度" hspace="水平边距" vspace="垂直边距" align="环绕方式/对齐方式">
1.5超链接标签
超链接是指从一个网页（或其他文件）指向一个目标的连接关系，这个目标可以是另一个网页也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件，一个文件，甚至是一个应用程序。
（1）创建超链接
<a>标签的使用有以下两种方式：
- 通过href属性创建指向另一个文档的超链接。
- 通过name属性创建文档内的书签。
超链接标签格式·：<a href="URL" title="指向链接时显示的文字">超链接文本</a>。（herf属性定义了链接所指的目标地址，即路径。如果要创建一个不链接到其他位置的空链接则可用"#"代替URL）
<a href="uland.taobao.com">点开跳转淘宝</a>（2）在同一个网站的不同页面中使用超链接
- 链接到同一目录内的网页文件。格式为
<a href="目标文件名（链接所指向的文件）.html">链接文本</a>
- 链接到下一级目录中的网页文件。格式为
<a href="子目录名/目标文件名.html">链接文本</a>
- 链接到上一级目录中的网页文件。格式为
<a href="../目标文件名.html">链接文本</a>
“../”表示退回到上一级目录中。
- 链接到同级目录中的网页文件。格式为
<a href="../子目录名/目标文件名.html">链接文本</a>
表示先退回到上一级目录，然后再进入目标文件所在的目录
（3）书签链接
书签链接也就是锚点链接。
我们首先创建锚点，格式为：
<a name="锚点名称">文本</a>
其次 指向链接锚点
<a herf="锚点名称">文本</a> 即点击文本，就可跳转到锚点连接的网页元素
注：同一个页面可以有多个锚点，但名称不能相同
以下是锚点链接的代码演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=align, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 指向链接锚点 -->
<a href="#我是小王子">点击我可以看小王子哦！！</a><br>
<a href="#我是小猫咪">点击我可以看小猫咪哦！！</a><br>
<a href="#我是小花花">点击我可以看小花花哦！！</a><br>
<!-- 建立锚点 -->
<p><a name="我是小王子">我是小王子</a></p><br>
<img src="../CSS/小王子1.jpg" width="100" height="100">
<!-- 链接到上一级目录中的网页文件 -->
<p><a name="我是小猫咪">我是小猫咪</a></p><br>
<img src="../HTML-5/R-C (1).jpg" width="100" height="100">
<!-- 链接到同级目录中的网页文件 -->
<p><a name="我是小花花">我是小花花</a></p><br>
<img src="web/玫瑰花.jpg" width="100" height="100">
<!-- 链接到下一级目录中的网页文件 -->
</body>
</html>效果显示：
