文章目录
- 1、标题标签
- 2、段落标签
- 3、换行标签和空格标签
- 4、html字符实体
- 4、水平分割线
- 5、粗体和斜体标签
- 6、列表
- 无序列表
- 有序列表
- 自定义列表
- 7、HTML样式
- 8、挑战
- 9、实践
本节主要介绍 HTML 常用标签之标题标签、段落标签、换行标签、空格标签、水平分割线和HTML 列表。
1、标题标签
标题标签heading tag有六种h1，h2，h3，h4，h5，h6，代表着不同大小的标题。可以使用标题标签组织网页结构，<h1>到<h6>显示出来的文字大小依次从大到小。
示例一如下：
效果如下：
示例二：
6种级别的标题表示文档的6级目录层级关系，比如说： <h1>用作主标题（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。
2、段落标签
段落标签paragrach tag：<p> 使用段落标签展示描述性内容。
示例一：
效果如下：
示例二：
效果如下：
从上述能看出，<p>标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开。
3、换行标签和空格标签
代码中成段的文字，直接在代码中回车换行，在渲染成网页时候不认这种换行，如果真想换行，可以在代码的段落中插入<br />来强制换行，代码如下：
<p>
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
</p>效果如下：
4、html字符实体
代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，浏览器会移除源代码中多余的空格和空行，所有连续的空格或空行都会被认为是一个空格。
如果想显示多个空格，可以使用空格的字符实体 ,代码如下：
<!-- 在段落前想缩进两个文字的空格，使用空格的字符实体： -->
<p>
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p>
另一个示例：
效果如下：
在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体<和>，比如：
<!-- “<” 和 “>” 的字符实体为 < 和 > -->
<p>
3 < 5 <br>
10 > 5
</p>
4、水平分割线
<hr/> 标签用于在 HTML 页面中创建一条水平线。
效果如下：
5、粗体和斜体标签
strong标签<strong></strong>显示为粗体
em标签<em></em>显示为斜体，strong标签和em标签都是表示强调。
效果如下：
6、列表
列表作为网页设计的重要内容之一，能够用来制作导航栏和新闻列表等。HTML 列表分为：有序列表（ol），无序列表（ul）以及自定义列表（dl）。
无序列表
无序列表是一个项目的列表，此列表项目可以使用实心圆、空心圆、方块进行标记，默认使用实心圆标记，无序列表使用 <ul> 标签。每个列表项始于 <li> 标签。
效果如下：
可以看到有多少个列表项就有多少个 <li> 标签。
type属性定义了列表项前项目符号的类型。
<ul> 标签的 type 属性：
值 | 备注 |
disc（默认） | 实心圆 |
circle | 空心圆 |
square | 小方块 |
示例及效果如下：
效果如下：
对于无序列表，一般会使用样式去掉默认的小图标，实际开发中一般用这种列表。
有序列表
有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
效果如下：
<ol> 标签的 type 属性：
值 | 备注 |
1（默认） | 数字表示（1，2，3…) |
A | 大写字母表示（A,B,C…) |
a | 小写字母表示（a,b,c…) |
I | 大写罗马数字表示(I,II,III…) |
i | 小写罗马数字表示(i,ii,iii…) |
示例及效果如下：
效果如下：
有序列表在实际开发中较少使用。
自定义列表
自定义列表不是一列项目，而是项目及其注释的组合，通常用于术语的定义。
自定义列表以 <dl> 标签开始，<dl>标签表示列表的整体。
每个自定义列表项以 <dt> 开始，<dt>标签定义术语的题目。
每个自定义列表项的定义注释以 <dd> 开始，<dd>标签是术语的解释。。
自定义列表的列表项前没有任何项目符号。
语法格式：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
...
<dt>名词2</dt>
<dd>名词2解释1</dd>
...
</dl>示例如下：
效果如下：
另一个示例：
<h3>前端三大块</h3>
<dl>
<dt>html</dt>
<dd>负责页面的结构</dd>
<dt>css</dt>
<dd>负责页面的表现</dd>
<dt>javascript</dt>
<dd>负责页面的行为</dd>
</dl>
7、HTML样式
学习了上面所介绍的标签以后，我们将学习为所有的 HTML 标签定义 style 属性，通过 style 属性来改变 HTML 元素的样式。
- 通过
"background-color"属性值的设置来给背景设置颜色。 - 通过对
font-family属性值的设置来设置字体 - 通过对
color属性值的设置来设置颜色 - 通过对
font-size属性值的设计来设计字体大小。 - 通过
"text-align: center"设置内容相对页面居中对齐。 - 通过
border:1px solid green;设置边框的宽度、样式、颜色。
<body>
<p style="background-color: red;text-align: center;border:1px solid blue;">LZY</p>
<p style="font-family: Arial;color:green;font-size: 50px;border:1px solid green;">泸职院</p>
<h1 style="text-align: center;border:1px solid red;">123</h1>
</body>
8、挑战
9、实践
新建一张egg.html页面，效果如下：
注意：
不要让你的HTML难以阅读，下面是正确的HTML代码，但是很难阅读。
