一. 列表
概念:支持有序、无序和定义列表。列表项内部可以使用段落、换行符、图片、链接以及其他列表等等
- 1.1 无序列表
无序列表是一个项目的列表，使用小黑圆圈进行标记。
无序列表始于<ul>标签。每个列表项始于<li>。 - 示例demo
<ul>
<li>我是第一</li>
<li>我是第二</li>
</ul>
浏览器显示为:
我是第一
我是第二
-
1.2.有序列表
- 有序列表也是一列项目，列表项目使用数字进行标记。
- 有序列表始于
<ol>标签。每个列表项始于<li>标签。也可在<ol>添加start属性,设置起始序列
1.3.定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以<dl>标签开始。每个自定义列表项以<dt> 开始。每个自定义列表项的定义以 <dd>开始。
- 1.4.列表标签表格
| 标签 | 描述 |
|---|---|
<ol> |
定义有序列表 |
<ul> |
定义无序列表。 |
<li> |
定义列表项。 |
<dl> |
定义定义列表。 |
<dt> |
定义定义项目。 |
<dd> |
定义定义的描述。 |
<dir> |
已废弃。使用 <ul> 代替它。 |
<menu> |
已废弃。使用 <ul> 代替它。 |
<ol>中属性:reversed--降序 start--起始值 type--1/A/a/I/i
- 1.5.demo
<body>
<!--列表-->
<ol reversed>
<li>傻瓜1</li>
<li>傻瓜2</li>
</ol><!--type:I(罗马字母) i(小写罗马字母) -->
<ol type="I">
<li>傻瓜1</li>
<li>傻瓜2</li>
</ol><!--实心圆角 嵌套使用-->
<h4>Disc</h4>
<ul type="disc">
<li>苹果</li>
<li>李子</li>
<ul>
<li>香蕉</li>
<li>牛奶</li>
<ul>
<li>香蕉</li>
<li>牛奶</li>
</ul>
</ul>
</ul>
<!--空心圆角-->
<h4>Circle</h4>
<ul type="circle">
<li>苹果</li>
<li>李子</li>
</ul>
<!--方块-->
<h4>Square</h4>
<ul type="square">
<li>苹果</li>
<li>李子</li>
</ul>
</body>
截图:
![]()
Snip20160831_62.png
Snip20160831_62.png
二. 块
概念:可以通过<div> 和 <span>将 HTML 元素组合起来。
2.1 <div> 元素
<div>元素是块级元素，意味着它的内容自动地开始一个新行。实际上，换行是<div>固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。可以将他看做是容器。
不必为每一个<div>都加上类或id，虽然这样做也有一定的好处。，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
-
<div>元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。 - 如果与 CSS 一同使用，
<div>元素可用于对大的内容块设置样式属性。 -
<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用<table>元素进行文档布局不是表格的正确用法。<table>元素的作用是显示表格化的数据。
2.2 <span 元素
<span>元素是内联元素，可用作文本的容器。
<span>元素也没有特定的含义。
当与 CSS 一同使用时，<span>元素可用于为部分文本设置样式属性。
内联元素
- 内联元素在显示时通常不会以新行开始。
例子：<b> <td> <a> <img>
- 分组标签
| 标签 | 描述 |
|---|---|
<div> |
定义文档中的分区或节（division/section）。 |
<span> |
定义 span，用来组合文档中的行内元素。 |
- demo
<body>
<div style="color:red ">
<h4>是不是傻</h4>
<p>我是个p</p>
</div>
<p class="hellowork">
<span>hellowork 世界</span>
</p>
</body>
截图:
Snip20160831_61.png
三. 类
对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。为相同的类设置相同的样式，或者为不同的类设置不同的样式。
分类块级元素
-
<div>元素是块级元素。它能够用作其他 HTML 元素的容器. - 设置
<div>元素的类，使我们能够为相同的<div>元素设置相同的类
分类行内元素
<span>元素是行内元素，能够用作文本的容器。设置
<span>元素的类，能够为相同的<span>元素设置相同的样式。demo:
1.在<head>设置类名和样式demo
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cities{
background-color: beige;
color: black;
margin: 10px;
padding: 15px;
}
span.red{
color: red;
}
</style>
</head>
2.在body中设置内容
<body>
<!--分类块级元素,设置 <div> 元素的类，使我们能够为相同的 <div> 元素设置相同的类：-->
<div class="cities">
<h3>中国</h3>
<p>中国是以华夏文明为源泉、中华文化为基础并以汉族为主体民族的多民族国家，通用汉语。中国人常以龙的传人、炎黄子..</p>
<h3>美国</h3>
<p>中国是以华夏文明为源泉、中华文化为基础并以汉族为主体民族的多民族国家，通用汉语。中国人常以龙的传人、炎黄子..</p>
<h3>韩国</h3>
<p>中国是以华夏文明为源泉、中华文化为基础并以汉族为主体民族的多民族国家，通用汉语。中国人常以龙的传人、炎黄子..</p>
</div>
<!--<span> 元素是行内元素，能够用作文本的容器,能够为相同的 <span> 元素设置相同的样式-->
<h2> 我就是我<span class="red">无可替代</span>不一样的我</h2>
</body>
- 3.截图:
Snip20160831_60.png
