# 一、实验介绍 **1.1 实验内容 ** 一个网站通过HTML（当然也包括css、js）向用户显示网页内容，本次实验就来学习html如何表示这些内容。 **1.2 实验知识点** HTML元素 HTML属性 HTML文本格式化 HTML样式 ##二、实验步骤 **2.1 HTML元素** 1.什么是HTML元素在第一章中在介绍标签的时候为了避免概念的混乱，我们简单介绍了下HTML元素，这里我们就详细开始介绍HTML元素。 HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件，并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说，HTML元素就是构成HTML文件的基本对象，HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。 <开始标签> 元素内容 <结束标签> 这就是一个元素：

shiyanlou

2.HTML元素语法 HTML元素语法特点： HTML 元素以开始标签起始 HTML 元素以结束标签终止元素的内容是开始标签与结束标签之间的内容某些 HTML 元素具有空内容（empty content）空元素在开始标签中进行关闭（以开始标签的结束而结束）大多数 HTML 元素可拥有属性 3.HTML元素嵌套示例 ```

let's go to shiyanlou>

``` 4.HTML空元素 HTML元素的内容是开始标签与结束标签之间的内容，而某些 HTML 元素具有空内容（empty content），这种元素被叫做空元素。比如说换行符
。但
是不规范的写法，在xhtml中所有类似
这样的孤立标签都需要自行封闭，具体的做法就是在标签名字的后面跟个“/”，例如
。从逻辑上讲
=
...
，这样做的目的是为了尽量减少网页的代码量，同时保持逻辑严谨。相同之处是
和

都是有换行的属性及作用区别
是只需一个单独使用，而

和 < /p> 是一对使用
标签是小换行提行（相当于我们平时文本中输入一个回车），

标签是大换行（分段，相当与两个回车）,各行作用。 1. ```
换行 ``` ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389530/1525943705539.png-wm) 2. ```

换行 ``` ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389530/1525945705818.png-wm) 3. 表现一样的效果 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389530/1525945921998.png-wm) **2.2 HTML属性** 某些标签要想按照作者的意愿来实现在网页上，就得需要一定信息的补充，这信息就叫属性，HTML标签可以加上属性的描述。属性提供了有关 HTML 元素的更多的信息。关于属性有以下语法规则：是在 HTML 元素的开始标签中定义。总是以名称和值对应的形式出现，比如：name="value"。属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。 1. ``` 举例：shiyanlou 叫做< a>标签的属性，是对< a>标签的补充说明，既指向的网页。 ``` ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389530/1525946579418.png-wm) 2.输入邮件 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389530/1525946982393.png-wm) 3.

标签使用 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389530/1525947384358.png-wm) 4.居中 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389530/1525947622359.png-wm) 5.设置背景颜色 ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389530/1525951940085.png-wm) 6. ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389530/1525952651456.png-wm)

“HTML基础入门”实验报告