文章目录
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 属性：
示例及效果如下：
效果如下：
对于无序列表，一般会使用样式去掉默认的小图标，实际开发中一般用这种列表。
有序列表
有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。
效果如下：
<ol>标签的 type 属性：
示例及效果如下：
效果如下：
有序列表在实际开发中较少使用。
自定义列表
自定义列表不是一列项目，而是项目及其注释的组合，通常用于术语的定义。
自定义列表以<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代码，但是很难阅读。
