- 实验目的
1. 熟练掌握html格式
2. 熟练掌握常用标记的功能
3. 熟练掌握标记关键属性的使用
二. 实验内容
结合实例介绍html常用标记（包括关键属性）的功能及应用，归类块与内联标记
1、<!-- 与-->标记是注释标签，用于在源代码中插入注释。注释不会显示在浏览器中。可使用注释对代码进行解释，这样做有助于在以后的时间对代码的编辑。当编写了大量代码时尤其有用。
2、<html> 与 </html> 之间的文本描述网页。
3、<head> 标签用于定义文档的头部，它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。
4、<title> 元素可定义文档的标题，以下是代码及运行截图：
<title>网页标题啦</title>
5、<h1>~<h6>标记设置标题，具有将文字放大，笔画加粗的效果，align属性用于设置标题内容的水平对齐方式，以下是代码及运行截图：
<h1 align="left">一级标题</h1>
<h2 align="center">二级标题</h2>
<h3 align="right">三级标题</h3>
6、<hr>标记设置水平线，可以在视觉上将文档分隔成各个部分, align属性可用于设置水平对齐方式，width属性规定 hr 元素的宽度。以下是代码及运行截图：
<hr align="left" width="60%" />
<hr align="right" width="30%" />
<hr align="center" width="100%"/>
7、<p> 标签定义段落。其会自动在其前后创建一些空白。浏览器会自动添加这些空间，也可以在样式表中规定。以下是代码及运行截图：
<p>这是一个段落</p>
8、 表示半个空格，<blockquote>表示五个空格，以下是代码及运行截图：
<p>空格 俩种表达</p>
<p>空格<blockquote>俩种表达</blockquote></p>
9、<br>表示换行，用在需要换行的地方。以下是代码及运行截图：
<p>换行<br />换行</p>
10、图像标签（<img>）和源属性（Src）在 HTML 中，图像由 <img> 标签定义。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。width、height网页中添加图片以后，用于调整宽高尺寸，即使按照原始尺寸放置图片，也最好重新设置。Title用于设置图片的标题以及提示文本，alt为占位文本。以下是代码及运行截图：
<img src="img.jpg" width="80" height="50" title="图片" alt="img" />
11、列表的使用,有两种基本类型：
①有序列表，编号列表 <ol> </ol>
②无序列表，项目列表 <ul> </ul>
两种基本类型的列表，都要通过两层标记嵌套来完成，外层标记 ol ul ，内层标记都是 li
嵌套列表,type属性用于设置列表前的编号形式, 以下是代码及运行截图：
<ol type="a">
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
<li>第4项</li>
</ol>
<ul type="circle">
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
<li>第4项</li>
</ul>
12、<a>标记为超链接标记，<a>常用属性：
href：设置目标节点的位置
target：设置在什么地方打开目标节点 _self是默认值表示在当前窗口打开目标节点，_blank表示新开浏览器窗口打开目标节点
title：设置提示文本，类似于img标记的title属性
按照目标节点不同，分为常见三种类型：
①空链接：目标节点就是本网页自己
②内部链接：目标节点本网站内部的某个资源,href设置为相对路径的形式，类似于img标记的src属性
③外部链接：目标节点是其他网站中的某个资源,href设置为完整的url地址，以http://开头的地址
按照起始节点的不同，主要分为两类
1）文字链接
2）图片链接
<a href="#" target="_blank" title="提示文本">空链接测试 </a>
<a href="img.html" target="_blank" title="内部链接">内部链接测试</a>
<a href="http://www.baidu.com ">外部链接测试</a>
<a href="img.html" target="_blank"><img src="file:///C|/Users/18375/Documents/homework/img.jpg"width="100" height="70" /></a>
13、根据标记是否独占一行的特性，可将标记分为三类：
①块标记，会独占一行的标记：h1~h6 p ol ul li。
②内联标记，不会独占一行，且会和其他内联元素共处一行：a span
③特殊的标记：img
三. 实验心得
网页中的每一个小部分都是由一层层代码构建起来，其中的每一个标点符号都容不得一丝差错。在构建网页的途中，总是会遗忘代码样式，归根到底还是不够熟练，从简单的网页框架设计到现在渐渐美化它，在这途中我们会遇到更多的代码，希望自己能熟能生巧，能够在日复一日的练习中熟悉代码，构建出一个又一个美丽的网页。还有要记得：一定要先保存再编写代码，一定要设置好站点。
