总而言之,这就是一篇用来记录我学习前端历程的日志,希望不要断更。
朝着优秀的前端工程师努力吧!
HTML标签-一些标签
什么废话,但是真的不好分类quq
列表标签
列表标签分为三种
1、无序列表<ul>
,无序列表中的每一项是<li>
- ul: unordered list,“无序列表”的意思。
- li: list item,“列表项”的意思。
代码示例如下:
1 | <ul> |
注意:
- li不能单独存在,必须包裹在ul里面;反过来说,ul的“儿子”不能是别的东西,只能有li。
- 我们这里再次强调,ul的作用,并不是给文字增加小圆点的,而是增加无序列表的“语义”的。
属性:
type="属性值"
。属性值可以选:disc
(实心原点,默认),square
(实心方点),circle
(空心圆)。并且,不只<ul>
标签有<type>
属性,<ul>
标签中的<li>
标签也有<type>
属性,效果就是对列表中的每一个元素单独设置标记样式(虽然这种写法比较罕见就是了)
项目符号可以是图片,需要通过CSS设置
<li>
标记的背景图片来实现
标签间可以是嵌套的,For example:
1 | <ul> |
效果:
1 | list-style-position: inside /* 给 ul 设置这个属性后,将小圆点包含在 li 元素的内部 */ |
实际应用场景:导航条
电商平台的商品介绍(li里面可放置的内容很多)
声明:ul的儿子,只能是li。但是li是一个容器级标签,li里面什么都能放,甚至可以放一个ul
什么儿子生了爹
2、有序标签<ol>
,里面的每一项是<li>
代码举例:
1 | <ol > |
效果:
属性:
type="属性值"
。属性值可以是:1(阿拉伯数字,默认)、a、A、i、I。结合start
属性表示从几开始
。
<ol>
和<ul>
只是语义不同,用法相同
ol用的不多,如果想表达顺序,大家一般也用ul
3、定义列表<dl>
定义列表的作用非常大
<dl>
英文单词:definition list, 没有属性。dl的子元素只能是dt和dd。
<dt>
:definition title 列表的标题,这个标签是必须的<dd>
:definition description 列表的列表项,如果不需要它,可以不加,一个标题可以配很多个dd
DD屁用没有说成立(什么
dt, dd只能在dl里面;dl里面只能有dt, dd(这下双向奔赴了
定义列表表达的语义有两层:
- 是一个列表,列出了几个dd项目
- 每一个词都有自己的描述项,即dd描述dt
dt, dd都是容器级标签,想放什么都可以
属于是dd们的海纳百川了
表格标签
表格标签用<table>
表示。 一个表格<table>
是由每行<tr>
组成的,每行是由每个单元格<td>
组成的。 所以我们要记住,一个表格是由行组成的(行是由列组成的),而不是由行和列组成的。 在以前,要想固定标签的位置,唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候,表格作用还是有一些的。
1 | <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/..."
:背景图片。 背景图片的优先级大于背景颜色bordercolorlight
:表格的上、左边框,以及单元格的右、下边框的颜色bordercolordark
:表格的右、下边框,以及单元格的上、左的边框的颜色 这两个属性的目的是为了设置3D的效果。dir
:公有属性,单元格内容的排列方式(direction)。 可以 取值:ltr
:从左到右(left to right,默认),rtl
:从右到左(right to left)
既然说
dir
是共有属性,如果把这个属性放在任意标签中,那表明这个标签的位置可能会从右开始排列。
<tr>
的属性:
<dir>
:公有属性,设置这一行单元格内容的排列方式。可以取值:ltr
:从左到右(left to right,默认)rtl
:从右到左(right to left)
bgcolor
:设置这一行的单元格的背景色。 注:没有background属性,即:无法设置这一行的背景图片,如果非要设置,可以用css实现。height
:一行的高度align="center"
:一行的内容水平居中显示,取值:left、center、rightvalign="center"
:一行的内容垂直居中,取值:top、middle、bottom
<td>
的属性:
align
:内容的横向对齐方式。属性值可以填:left right center。如果想让每个单元格的内容都居中,这个属性太麻烦了,以后用css来解决。valign
:内容的纵向对齐方式。属性值可以填:top middle bottomwidth
:绝对值或者相对值(%)height
:单元格的高度bgcolor
:设置这个单元格的背景色。background
:设置这个单元格的背景图片。
单元格合并的实现,利用如下属性:
colspan
:横向合并。例如colspan="2"
表示当前单元格在水平方向上要占据两个单元格的位置。rowspan
:纵向合并。例如rowspan="2"
表示当前单元格在垂直方向上要占据两个单元格的位置。
效果be like:
就直接从教程上扒了,虽然许嵩早已经不是29岁(乐
此外还有一个自带加粗属性的单元格标签**<th>
**,属性同<td>
,效果等于<td>
+<b>
<caption>
标签:表格标题,使用时和<tr>
并列
- 属性:
align
,表示标题相对于表格的位置。属性取值可以是:left、center、right、top、bottom
表格的<thread>
标签、<tbody>
标签以及<tfoot>
标签
这三个标签有与没有的区别:
- 1、如果写了,那么这三个部分的代码顺序可以任意,浏览器显示的时候还是按照**
<thead>
、<tbody>
、<tfoot>
**的顺序依次来显示内容。如果不写,那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。 - 2、当表格非常大内容非常多的时候,如果用这三个标签的话,那么数据可以边获取边显示。如果不写,则必须等表格的内容全部从服务器获取完成才能显示出来。