HTML5之列表的使用

喽大家好，我是作者“未来”，本期分享的内容是Web前端系列课程，本系列总共29个阶段，坚持学习3个月蜕变为Web前端高手哦！

志同道合的小伙伴跟我一起学习交流哦！

第一阶段 01 HTML5

06列表

把制成表以表显示容器里面装载着文字或图表的一种形式，叫列表。

列表最大的特点就是整齐、整洁、有序

1 无序列表ul（重点）

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

显示效果：

· 列表项1

· 列表项2

· 列表项3

2 无序列表注意事项

1.<和l<><>

3.无序列表会带有自己样式属性，放下那个样式，一会让CSS来！

3 有序列表ol（了解）

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

显示效果：

1. 中国

2. 美国

5 自定义列表（理解）

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

显示效果：

四大名著

水浒传

西游记

三国演义

红楼梦

浏览器

谷歌

火狐

6 课程总结

看不懂的小伙伴不要气馁，后续的分享中将持续解释，只要你跟着我分享的课程从头到尾去学习，每篇文章看三遍，一个月后，回过头来看之前的文章就会感觉简单极了。

本章已结束，下篇文章将分享《06列表》小伙伴们不要错过哟！

.列表标签 ul，ol, dl(掌握)

1.1ul无序列表标签

基本结构:

<ul>

</ul>

注意：

1.ul标签和li标签是组合使用。

2.li标签里面可以添加任何内容，或者嵌套标签也可以

3.无序列表会自动生成一个小圆点，一般在实际应用中会去掉。

1.2有序列表ol

语法：定义子项顺序的。一般有编号（数字或字母或希腊字母）

<ol>

</ol>

注意：

有序列表type属性的几个值：

A表示显示的编号是大写字母

a表示编号是小写字母

I表示编号是罗马数字

i表示编号是小写罗马数字

默认情况下显示的是数字

实例：

</ol>

</ol>

</ol>

</ol>

</ol>

2.3定义列表dl

什么是定义列表

dl标签定义了定义列表，通常用于名称的解释或者概念的定义。每个子项分为2个部分，一部分负责定义，另一部分负责解释

<dl>

<dt>计算机资料</dt>

<dd>JavaScript</dd>

<dd>NodeJS入门到精通</dd>

<dd>PhP语法入门到精通</dd>

</dl>

<!--

dl:定义了一个定义列表

dt:术语部分

dd:对术语或项目进行解释的部分

-->

2. 表格table

2.1表格的使用

（1）table标签

（2）表格行、列的合并

<table>：定义表格

<tr>:定义表格的行

<td>：定义表格的列

<th> ：定义表格表头单元格

<thead>:定义表格中表头的内容

<tbody>:定义表格中的主体内容

<tfoot>:定义表格中的脚注

<caption>:定义表格标题

<!--

cellspacing:单元格与单元格之间的距离

cellpadding：内容与单元格之间的距离

border：单元格边框宽度

bgcolor:设置背景色

-->

</table>

家好，我是新媒之声广告工作室的大白，今天给大家带来的是HTML5简单教学第一章（第二节）。

今天给大家带来的东西比较多；

br 换行标签实属单标签，br换行标签就如同我们编辑文本是点击的回车键，让它换到下一行。

HTML5 标签用来对文档中的文本进行换行的处理，请参考下面的这个例子：

以下代码标记一个换行：

使用 br 元素 在文本中 换行。

所有主流浏览器都支持 标签。

标签定义及使用说明

标签插入一个简单的换行符。

标签是一个空标签，意味着它没有结束标签。

提示：由于 标签是空标签，因此，不允许有“ ...”这样的写法！

提示和注释

提示：在写地址信息或者写诗词时 标签非常有用。

注释： 请使用 标签来输入空行，而不是分割段落。

HTML 4.01 与 HTML5之间的差异无。

HTML 与 XHTML 之间的差异

在 HTML 中， 标签没有结束标签。

在 XHTML 中， 标签必须被正确地关闭，比如这样： 。

nobr 不换行是属于双标签，nobr就是强制不换到下一行，在做编辑时文字或是块遇到浏览器的边会自动换到下一行使用不换行标签就强制它不让换行，这是浏览器底部就会出现航向滚动条。

p 段落标签也是属于双标签，p标签是文字标签，故名思议就是用于写文字段落的标签，p标签是属于块标签，就是独自占据一行，在下节课会介绍到块标签与行标签。

HTML5 标签用于定义一个段落。

目前大多数浏览器支持 标签。

标签定义及使用说明

标签定义段落。

元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

提示：在本站的HTML5编程实战中，你可以练习使用标签！

在HTML 4.01 与 HTML5中的差异

HTML 4.01中标签的 align 属性已经废弃，HTML5不支持该属性。

p 段落,align属性:left|center|right，是标签属性，属性有事css样式，css样式又可以通俗的理解为房子的装修，html通俗可以理解为房子的框架，div又可以通俗的理解为房子的填充砖块之类的。

所有主流浏览器都支持 align 属性。

定义和用法

HTML5 不支持 align 属性。请使用 CSS 代替。

在 HTML 4.01 中， 的 align 属性已废弃。

align 属性规定段落中文本的对齐方式。

兼容性注释

在 HTML 4.01 中， 的 align 属性已废弃，请使用 CSS 代替。

CSS 语法：

CSS 实例：在段落中右对齐文本

在我们的 CSS 教程中，您可以找到更多有关 text-align 属性的细节。

语法

属性值

值	描述
left	左对齐文本。
right	右对齐文本。
center	居中对齐文本。
justify	对行进行伸展，这样每行都可以有相等的宽度（就像在报纸和杂志中）。

center 居中是属于双标签，双标签就是成对出现的标签，center居中标签的意思就是让它位于浏览器的中心位置，就好比是wps的文字居中一个道理，不过居中标签是可以让它体内所有的标签都可以居中。

HTML <center> 标签 - HTML 5 不支持

<center> 标签控制文本的居中显示，不能在 HTML5 中使用。

所有主流浏览器都支持 <center> 标签。

标签定义及使用说明

HTML5 不支持 <center> 标签。请用 CSS 代替。

在 HTML 4.01 中，<center> 元素已废弃。

<center> 对其所包括的文本进行水平居中。

提示和注释

提示：请使用 CSS 样式来居中文本！在 CSS 教程中您能了解到更多关于居中文本的细节。

HTML 4.01 与 HTML5之间的差异

HTML5 不支持 <center> 标签。请用 CSS 代替。

pre 按源代码显示是属于双标签不是很常用的标签，它的意思就是让标签直接不解析让浏览器表现出来，一般用于展示源代码。

HTML <pre> 标签

<pre> 标签可以保留您需要的文本格式，比如不会取消换行和空格，并且所示文本是等宽的。

目前大多数浏览器支持 <pre> 标签。

标签定义及使用说明

<pre> 标签可定义预格式化的文本。

被包围在 <pre> 标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

注意：<pre> 元素是块级元素，但是只能包含文本或行内元素，任何块级元素（常见为可以导致段落断开的标签：例如<title>、 和<address> 标签）都不能位于 <pre> 元素中。

提示和注释

提示: <pre> 标签的一个常见应用就是用来表示计算机的源代码。

提示：<pre> 标签与 <code> 标签结合起来使用，可以获得更加精确的语义。

在HTML 4.01 与 HTML5中的差异

在 HTML 4.01 中，"width" 属性已废弃，不可使用。 HTML5 不支持"width"属性。

属性

属性	值	描述
width	number	HTML5 不支持该属性。HTML 4.01 已废弃该属性。定义每行的最大字符数（通常是 40、80 或 132）。

全局属性

<pre> 标签支持全局属性，查看完整属性表 HTML全局属性。

ul 无序列表属于双标签，一般配合li标签使用，无序列表属和wps中表现是一样的不过无序列表中不只可以写文字和数字也可以写div之类的标签有的网页导航就是用ul无序列表标签写出来的。

HTML <ul> 标签

<ul> 标签表示HTML页面中项目的无序列表，一般会以项目符号列表呈现

所有主流浏览器都支持 <ul> 标签。

标签定义及使用说明

<ul> 标签定义无序列表。

将 <ul> 标签与 <li> 标签一起使用，创建无序列表。

提示和注释

提示：使用 CSS 为列表定义样式。

提示：使用 <ol> 标签创建有序列表。

HTML 4.01 与 HTML5之间的差异

在 HTML 4.01 中，"compact" 和 "type" 属性已废弃。HTML5 则不支持着两个属性。

属性

属性	值	描述
compact	compact	HTML5 不支持。HTML 4.01 已废弃。规定列表呈现的效果比正常情况更小巧。
type	disc square circle	HTML5 不支持。HTML 4.01 已废弃。规定列表的项目符号的类型。

值

描述

compact

HTML5 不支持。HTML 4.01 已废弃。规定列表呈现的效果比正常情况更小巧。

type

disc

square

circle

HTML5 不支持。HTML 4.01 已废弃。规定列表的项目符号的类型。

ol 有序列表标签和ul无序列表标签是一个道理，也是配合li标签使用唯一区别就是一个前面带点一个前面带阿拉伯数字。

HTML <ol> 标签

<ol> 标签在 HTML 中表示有序列表，是 ordered lists 的缩写。您可以自定义有序列表的初始序号

目前大多数浏览器支持 <ol> 标签。

标签定义及使用说明

<ol> 标签定义了一个有序列表. 列表排序以数字来显示。

使用<li> 标签来定义列表选项。

提示和注释

提示： 如果需要无序列表，请使用 <ul> 标签。

提示：使用 CSS 来定义列表样式。

HTML 4.01 与 HTML5中的差异

在 HTML 4.01 中"start" 和 "type" 属性已经废弃，HTML5不支持该属性。

"reversed" 属性是 HTML5 中的新属性。

在HTML 4.01中"compact" 属性已经废弃,在 HTML5中不支持该属性。

属性

New：HTML5 新属性。

属性	值	描述
compact	compact	HTML5中不支持，不赞成使用。请使用样式取代它。规定列表呈现的效果比正常情况更小巧。
reversedNew	reversed	指定列表倒序(9,8,7...)
start	number	HTML5不支持，不赞成使用。请使用样式取代它。规定列表中的起始点。
type	1 A a I i	规定列表的类型。不赞成使用。请使用样式代替。

dl 自定义列表 dt 自定义标题 dd 自定义列表内容这三个标签我放在一起讲因为这三个标签是配合在一起的用法和ul标签ol标签差不多，就不再过多的叙述了，一般用到的不是很多。

所有主流浏览器都支持 <dl> 标签。

标签定义及使用说明

<dl> 标签定义一个描述列表。

<dl> 标签与 <dt> （定义项目/名字）和 <dd> （描述每一个项目/名字）一起使用。

HTML 4.01 与 HTML5之间的差异

在 HTML 4.01 中，<dl> 标签定义一个定义列表。

在 HTML5 中，<dl> 标签定义一个描述列表。

HTML <dt> 标签

<dt> 标签只能够作为 <dl> 标签的一个子元素出现，常常后跟一个 <dd> 标签。

所有主流浏览器都支持 <dt> 标签。

标签定义及使用说明

<dt> 标签定义一个描述列表的项目/名字。
<dt> 标签与 <dl> （定义一个描述列表）和 <dd> （描述每一个项目/名字）一起使用。
一行中的多个 <dt> 标签表示由紧邻的下一个 <dd> 元素定义的多个术语。

HTML 4.01 与 HTML5之间的差异

在 HTML 4.01 中，<dt> 标签定义一个定义列表的条目。

在 HTML5 中，<dt> 标签定义一个描述列表的项目/名字。

hr 导航线这节课最后一个标签是单标签，所谓的导航线不过就是一条横线用来分割。

HTML <hr> 标签

<hr> 标签表示段落级元素之间的主题划分。

所有主流浏览器都支持<hr> 标签。

标签定义及使用说明

<hr>标签定义HTML页面中的主题变化（比如话题的转移），并显示为一条水平线。元素被用来分隔HTML页面中的内容（或者定义一个变化）。

HTML 4.01与HTML5之间的差异

在HTML5中，<hr> 定义内容中的主题变化，并显示为一条水平线。

在HTML 4.01中，<hr> 标签仅仅显示为一条水平线。

在HTML 4.01中，的所有布局属性都已废弃。在HTML5中不再支持这些属性。请使用CSS来为<HR> 元素定义样式。

HTML与XHTML之间的差异

在HTML中，<hr> 标签没有结束标签。

在XHTML中，<hr> 标签必须被正确地关闭，比如<hr /> 。

属性

属性	值	描述
align	left center right	HTML5 不支持。HTML 4.01 已废弃。规定 <hr> 元素的对齐方式
noshade	noshade	HTML5 不支持。HTML 4.01 已废弃。规定 <hr> 元素的颜色呈现为纯色。
size	pixels	HTML5 不支持。HTML 4.01 已废弃。规定 <hr> 元素的高度。
width	pixels %	HTML5 不支持。HTML 4.01 已废弃。规定 <hr> 元素的宽度。

谢谢大家的观看，如果需要今天课程的源代码和ppt可以私信给我，我会免费发给你，最好使能够关注小编一下。

在线咨询

上一篇：html头部的标签有哪些？
下一篇：使用 MDwiki 将 Markdown 发布成 HTML

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML5之列表的使用

​第一阶段 01 HTML5

06列表

.列表标签 ul，ol, dl(掌握)

2. 表格table

您的项目需求

第一阶段 01 HTML5