##一.HTML元素 ###1.什么是HTML元素 HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件，并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说，HTML元素就是构成HTML文件的基本对象，HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。 <开始标签> 元素内容 <结束标签> 示例： ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389511/1523532641990.png-wm) ###2.HTML元素语法 HTML元素语法特点：（1）HTML 元素以开始标签起始（2）HTML 元素以结束标签终止（3）元素的内容是开始标签与结束标签之间的内容（4）某些 HTML 元素具有空内容（empty content）（5）空元素在开始标签中进行关闭（以开始标签的结束而结束）（6）大多数 HTML 元素可拥有属性(下面会讲) ###3.HTML元素嵌套示例前面的例子： ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389511/1523533003927.png-wm) 下面这个例子中有几个元素：答案是三个

###4.HTML空元素 HTML元素的内容是开始标签与结束标签之间的内容，而某些 HTML 元素具有空内容（empty content），这种元素被叫做空元素。比如说换行符
但
是不规范的写法，早先发布的html规范中
、

、等标记元素是无需“封闭自身”的，这就造成了html规范本身的不严谨，所以后来参考了更规范的XML语言的语法推出了xhtml。在xhtml中所有类似
这样的孤立标签都需要自行封闭，具体的做法就是在标签名字的后面跟个“/”，例如
。从逻辑上讲
=
...
，这样做的目的是为了尽量减少网页的代码量，同时保持逻辑严谨。前面我们从示例中看出，

标签结束以后也有一个换行的动作，那标签和 标签有什么异同呢？相同之处是
和

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

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

标签是大换行（分段，相当与两个回车）,各行作用。下面大家就一起看看两个标签的区别（1） 换行： ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389511/1523533617494.png-wm) ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389511/1523533625707.png-wm) （2） 换行： ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389511/1523533840230.png-wm) ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389511/1523533848350.png-wm) （3）要想两个表现出一样的效果： ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389511/1523534018121.png-wm) ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389511/1523534028136.png-wm) ##二. HTML属性某些标签要想按照作者的意愿来实现在网页上，就得需要一定信息的补充，这信息就叫属性，HTML标签可以加上属性的描述。属性提供了有关 HTML 元素的更多的信息。关于属性有以下语法规则：是在 HTML 元素的开始标签中定义。总是以名称和值对应的形式出现，比如：name="value"。属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。我们先举例： ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389511/1523535795865.png-wm) ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389511/1523535458068.png-wm) ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389511/1523535861419.png-wm) 再来换个属性，玩一个邮件编写，当你点击以后，你就可以登录你自己的邮箱，给指定的地址编写邮件来发送: ![实验楼](https://dn-simplecloud.shiyanlou.com/3895111523536520445-wm) ![实验楼](https://dn-simplecloud.shiyanlou.com/3895111523536498452-wm) 居中属性： ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389511/1523536819814.png-wm) ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389511/1523536861757.png-wm) 添加背景颜色属性： ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389511/1523537274174.png-wm) ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389511/1523537284555.png-wm) ##三. HTML文本格式化一般我们在网页中能看见有各种各样的字体、文本样式，这就是文本格式化标签的功劳。下面我们就来学习使用文本格式化标签（比较常用的）标签描述 （bold）粗体 < big> （big）大字体 （emphasized）强调字 （italic）斜体 （small）小字体 (strong)加重语气 HTML文件（作为默认的比较）： ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389511/1523537900696.png-wm) ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389511/1523537883008.png-wm) 预格式文本（所谓预格式文本就是指代码页和网页展示是一样的格式，不用额外添加换行符标签就能换行） < pre > .... < / pre >标签的使用： ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389511/1523538175633.png-wm) ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389511/1523538184148.png-wm) ##四. HTML样式 style 提供了一种改变所有 HTML 元素的样式的通用方法。这里可以将，背景颜色，字体样式，字体尺寸，字体颜色，对齐方式一并定义好。示例： ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389511/1523538732918.png-wm) ![图片描述](https://dn-simplecloud.shiyanlou.com/uid/389511/1523538741071.png-wm)

“HTML基础入门”实验报告