主要内容:
-
列表标签 <ul>、<ol>、<dl>
-
表格标签 <table>
-
表单标签 <fom>
- CSS引入方式与基本选择器
一、列表标签
列表标签分为三种:有序列表、无序列表、定义列表
1、无序列表<ul>
,无序列表中的每一项是<li>
英文单词解释如下:
- ul:unordered list,“无序列表”的意思。
- li:list item,“列表项”的意思。
实例:
<ul> <li>王浩程1</li> <li>王浩程2</li> <li>王浩程3</li> </ul>
输出格式如下:
注意:
- li不能单独存在,必须包裹在ul里面;反过来说,ul的“儿子”不能是别的东西,只能有li。
- 我们这里再次强调,ul的作用,并不是给文字增加小圆点的,而是增加无序列表的“语义”的。
属性:
- type="属性值"。属性值可以选:disc(实心圆,默认),square(实心放点),
circle
(空心圆)。
<ul> <li>张三,默认</li> <li>李四,默认</li> <li>王武</li> </ul> <ul type="square"> <li>张三,实心方点</li> <li>李四,实心方点</li> <li>王武,实心方点</li> </ul> <ul type="circle"> <li>张三,空心圆</li> <li>李四,空心圆</li> <li>王武,空心圆</li> </ul>
效果如下:
列表之间是可以嵌套的,我们来举个例子:
代码:
<ul> <li><b>北京</b> <ul> <li>朝阳区</li> <li>海淀区</li> <li>东城区</li> </ul> </li> <li><b>上海</b> <ul> <li>浦东新区</li> <li>徐汇区</li> <li>杨浦区</li> </ul> </li> </ul>
2、有序列表<OL>
,里面的每一项是<li>
英文单词:Ordered List。
实例:
<ol> <li>嘿哈</li> <li>哼哈</li> <li>呵呵</li> </ol>
属性:
type="属性值"
。属性值可以是:1(阿拉伯数字,默认)、a、A、i、I。结合start
属性表示从几开始
。
和无序列表一样,有序列表也是可以嵌套的
ol和ul就是语义不一样,怎么使用都是一样的。
ol里面只能有li,li必须被ol包裹。li是容器级。
ol这个东西用的不多,如果想表达顺序,大家一般也用ul。举例如下:
<ul> <li>1. 嘿哈</li> <li>2. 哼哈</li> <li>3. 呵呵</li> </ul>
3、定义列表<dl>
定义列表的作用非常大。
<dl>:英文单词:definition title 列表的标题,这个标签是必须的
- <dt>:definition title 列表的标题,这个标签是必须的
- <dd>:definition description 列表的列表项,如果不需要它,可以不加
备注:dt,dd只能在dl里面;dl里面只有dt,dd.
代码:
<dl> <dt>第一条规则</dt> <dd>不准睡觉</dd> <dd>不准看剧</dd> <dd>不准听音乐</dd> <dt>第二条规则</dt> <dd>睡觉不准打呼噜</dd> <dd>睡觉不准磨牙</dd> </dl>
上图可以看出,定义列表表达的语义是两层:
- (1)是一个列表,列出了几个dd项目
- (2)每一个词都有自己的描述项。
备注:dd是描述dt的。
定义列表用法非常灵活,可以一个dt配很dd:
<dl> <dt>北京</dt> <dd>国家首都,政治、文化中心</dd> <dd>空气不是很好,PM2.5阈值较高</dd> </dl> <dl> <dt>上海</dt> <dd>魔都,有外滩、东方明珠塔、黄浦江</dd> </dl> <dl> <dt>广州</dt> <dd>中国南大门,有珠江、小蛮腰</dd> </dl>
京东案例(京东首页最下方)
dt、dd都是容器级标签,想放什么都可以。所以,现在就应该更加清晰的知道:用什么标签,不是根据样子来决定,而是语义(语义本质上是结构)。
二、表格标签
表格标签用<table>
表示。
一个表格<table>
是由每行<tr>
组成的,每行是由<td>
组成的。
所以我们要记住,一个表格是由行组成的(行是由列组成的),而不是由行和列组成的。
在以前,要想固定标签的位置,唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候,表格作用还是有一些的。
例如,一行的单元格:
<table> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </table>
上面的表格中没有加文字,所以在生成的网页中什么都看不到。
例如,3行4列的单元格:
<table> <tr> <td>小马哥</td> <td>18</td> <td>男</td> <td>山东</td> </tr> <tr> <td>小岳岳</td> <td>45</td> <td>男</td> <td>河南</td> </tr> <tr> <td>邓紫棋</td> <td>23</td> <td>女</td> <td>香港</td> </tr> </table>
效果:
上图中的表格好像没看到边框呀,不急,接下来看看<table>
标签的属性。
<table>
的属性:
border
:边框。像素为单位。style="border-collapse:collapse;"
:单元格的线和表格的边框线合并width
:宽度。像素为单位。height
:高度。像素为单位。bordercolor
:表格的边框颜色。align
:表格的水平对齐方式。属性值可以填:left right center。
注意:这里不是设置表格里内容的对齐方式,如果想设置内容的对齐方式,要对单元格标签<td>
进行设置)cellpadding
:单元格内容到边的距离,像素为单位。默认情况下,文字是紧挨着左边那条线的,即默认情况下的值为0。
注意不是单元格内容到四条边的距离哈,而是到一条边的距离,默认是与左边那条线的距离。如果设置属性dir="rtl"
,那就指的是内容到右边那条线的距离。cellspacing
:单元格和单元格之间的距离(外边距),像素为单位。默认情况下的值为0bgcolor="#99cc66"
:表格的背景颜色。background="路径src/..."
:背景图片。
背景图片的优先级大于背景颜色。
单元格带边框的效果: