实验2、HTML常用标签（更新完毕）一、简介内容：HTML 标签、元素、常见标签、列表、样式，容器标签。二、知识点 1、HTML标签：是HTML最基本的单位，是HTML最重要的组成部分。标签大小写不影响效果，建议小写。（1）双标签

（2）单标签

（3）标签关系 -嵌套关系 -并列关系 2、HTML元素：开始标签到结束标签的所有代码。例：

I love You

3、HTML常见标签 1）h系类标签：h1，h2，h3，h4，h5，h6 HTML 简介

我是一级标题

我是二级标题

我是三级标题

我是四级标题

我是五级标题

我是六级标题

2）p标签：文本标签。删掉上段代码标签里内容 3）图片标签：语法：

实验楼图片：

4）a标签：超链接标签，点击可以调整到一个网页。实验楼 5）div标签：块级元素，占据父元素（容器）整个空间。可想成盒子。

块级元素

6）换行标签和空格字符：浏览器显示页面会移除源代码中多余空格和空行，所有连续空格或空行会被认为是一个空格。不产生段落情况下换行可用
，如果使用空格的话可用字符。

这是一段文字前面有很多空格但是只显示一个

这是一段文字用了空格字符

上面是换行符

7）水平分割线：

用于HTML页面创建一条水平线。

4、容器标签（div和span） div标签：div可将页面分割成不同独立部分，通常用于定义文档中区域或节。该标签是一个块级元素。浏览器会自动在

所标记区域前后自动放置一个换行符。 span标签：通常作为文本容器，没特定含义和样式，只有与CSS同时使用才可以为指定文本设置样式属性。该标签是一个内联元素，与块级元素相反，内联元素不会自动在前后自动放置换行符，因此内联元素会默认显示在同一行。例子：

这是div标签，自动换行

这是span标签，不自动换行结果： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200419-1587265280927) 5、HTML列表：分为有序列表（ol）、无序列表（ul）及自定义列表（dl）。 1）无序列表使用实心圆、空心圆、方块进行标记，使用

标签。
无序列表
- 列表项1
- 列表项2
有序列表
1. 列表项1
2. 列表项2
![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200419-1587265868011) 2）type属性 ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200419-1587265970895)
无序列表
- 空心圆列表项1
- 空心圆列表项2
有序列表
1. 列表项1
2. 列表项2
结果： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200419-1587266010863) 3）自定义列表语法：

名词1

名词1解释1
...
名词2

名词2解释1
...
例子：
一个自定义列表：

春天

是万物复苏，百花争艳的季节

夏天

是夏日绵绵，烈日炎炎的季节

结果： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200419-1587266165947) 6、HTML样式可设置Style属性来更改HTML样式。（1）背景颜色
实验楼
![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200419-1587266341430) （2）字体、颜色、尺寸
实验楼
![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200419-1587266346785) （3）文本对齐，例为居中对齐
实验楼
![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200419-1587266354657) 7、HTML排错编码时经常遇到bug，如何排错？方案1：使用Dreamweaver，在“站点”菜单中找到“检查站点范围的链接”，点击“检查站点范围的链接后”，软件下方会出现链接检查窗口，可以快速帮你检查有问题的链接。方案2：理清楚自己的逻辑，根据错误原因去推测哪几行html代码有问题，另外可以通过注释把正确无关项注释掉，从而减少代码量，有益于找到错误。方案3：网上找错插件，可自行搜索使用。三、小结本节主要学习了HTML标签、列表、样式、排错。重点是标签的记忆理解，然后是排错的练习使用。四、挑战目标： ![图片描述](https://dn-simplecloud.shiyanlou.com/courses/uid239255-20200419-1587266603754) 代码（参考了答案）：挑战1
实验楼学习教程

学习就上实验楼

无序列表
- HTML5 基础教程
- CSS基础教程
- Linux基础教程
- …

“HTML5 基础教程”实验报告