第六节:连接、列表、表格样式
1、连接
使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。在标签 中使用了href属性来描述链接的地址。默认情况下,链接将以以下形式出现在浏览器中:一个未访问过的链接显示为蓝色字体并带有下划线。访问过的链接显示为紫色并带有下划线。点击链接时,链接显示为红色并带有下划线。注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定而显示。
1.1、连接标签
a
标签 是html连接标签(超链接)a
标签跳转有两种 一种是页面跳转,一种是指定位置跳转。
页面跳转
<a href="url">链接文本</a> // href 属性描述了链接的目标。 <a href="https://www.baidu.com/" target="_top">访问百度</a> href:设置要跳转的连接地址或者跳转目标 target:设置连接的文档在何处打开 _blank:新窗口 _self:当前窗口打开 parent:在父框架集中打开被链接文档 _top:在整个窗口中打开被链接文档 framename:在指定的框架中打开被链接文档
指定目标跳转
<a href="#title1">第一节</a> // 指定跳转目标 进行跳转 好比word中的大纲 <h1 id="title1"></h1>
案例:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="xiaoge-education">
<meta name="Description" content="this is a chapter of xiaoge-education page">
<title>xiaoge-education</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100vw;
height: 100vh;
}
a {
line-height: 30px;
display: block;
text-align: center;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">访问百度</a>
<!--
a 标签属性:
href:设置要跳转的连接地址或者跳转目标
target:设置连接的文档在何处打开
_blank:新窗口
_self:当前窗口打开
parent:在父框架集中打开被链接文档
_top:在整个窗口中打开被链接文档
framename:在指定的框架中打开被链接文档
-->
<a href="#title1">第一节</a>
<a href="#title2">第二节</a>
<a href="#title3">第三节</a>
<div>
<h1 id="title1">第一节</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
</div>
<div>
<h1 id="title2">第二节</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
</div>
<div>
<h1 id="title3">第三节</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
</div>
</body>
</html>
1.2、连接样式
链接的样式,可以用任何CSS属性(如颜色,字体,背景等)。特别的链接,可以有不同的样式,这取决于他们是什么状态。这四个链接状态是:
a:link - 正常,未访问过的链接
a:visited - 用户已访问过的链接
a:hover - 当用户鼠标放在链接上时
a:active - 链接被点击的那一刻
a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */
当设置为若干链路状态的样式,也有一些顺序规则:
- a:hover 必须跟在 a:link 和 a:visited后面
- a:active 必须跟在 a:hover后面
2、列表
列表分为三类,一种是有序列表,一种是无序列表,一种是自定义列表。无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记;有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于
- 标签。每个列表项始于
- 标签;自定义列表以
-
标签开始。每个自定义列表项以
开始。每个自定义列表项的定义以
- 开始。
2.1、列表标签
2.1.1、无序列表
无序列表使用
- 标签
<ul> <li>无序列表第一项</li> <li>无序列表第二项</li> <li>无序列表第三项</li> </ul>
- 无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
2.1.2、有序列表
有序列表使用
- 标签
<ol> <li>有序列表第一项</li> <li>有序列表第二项</li> <li>有序列表第三项</li> </ol>
- 有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于
- 标签。每个列表项始于
- 标签。
2.1.3、自定义列表
自定义列表
标签
dt
/dd
<dl> <dt>水果</dt> <dd>水果介绍</dd> <dt>家电</dt> <dd>家电介绍</dd> </dl>
- 自定义列表以
标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以
- 开始。
案例:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="xiaoge-education">
<meta name="Description" content="this is a chapter of xiaoge-education page">
<title>xiaoge-education</title>
</head>
<body>
<ul>
<li>无序列表第一项</li>
<li>无序列表第二项</li>
<li>无序列表第三项</li>
</ul>
<hr>
<ol>
<li>有序列表第一项</li>
<li>有序列表第二项</li>
<li>有序列表第三项</li>
</ol>
<hr>
<dl>
<dt>水果</dt>
<dd>水果介绍</dd>
<dt>家电</dt>
<dd>家电介绍</dd>
</dl>
<dl>
<dt>水果</dt>
<dd>香蕉</dd>
<dd>苹果</dd>
<dt>家电</dt>
<dd>电饭锅</dd>
<dd>电磁炉</dd>
</dl>
</body>
</html>
2.2、列表样式
CSS 列表属性有三种,设置不同的列表项标记为有序列表;设置不同的列表项标记为无序列表;设置列表标记为图像。在HTML 中有两类列表一种无序列表ul
列表项标记为特殊图形比如原点、方块等,有序列表ol
列表项标记为数字或字母,使用CSS可以进一步的样式,并可以使用图像标记项。列表样式主要有一下几种属性:
属性 | 属性描述 |
---|---|
list-style | 简写属性,用于把所有描述列表属性设置为一个声明中 |
list-style-image | 将图片设置为列表项标志 |
list-style-position | 设置列表中列表项标志的位置 |
list-style-type | 设置列表项标志类型 |
2.2.1、设置列表项标记图像
list-style-image
属性使用图像来替换列表项的标记。/* 设置列表项标记图像 */ ul { /* 设置的图像大小推荐为 :10px 10px */ list-style-image: url('./img/16.jpg'); } /* list-style-image 属性值 URL 图像的路径。 none 默认。无图形被显示。 inherit 规定应该从父元素继承 list-style-image 属性的值。 */
设置列表项标记图标还可以通过背景图片的方式来来实现。
/* 设置列表项标记图像 */ ul { list-style-type: none; padding: 0px; margin: 0px; } ul>li { background-image: url('./img/16.jpg'); background-size: 10px 10px; background-repeat: no-repeat; background-position: 0px 5px; padding-left: 15px; } /* 背景图实现方法: ul: 设置列表类型为没有列表项标记 设置填充和边距 0px(浏览器兼容性) ul 中所有 li: 设置图像的 URL,并设置它只显示一次(无重复) 您需要的定位图像位置(左 0px 和上下 5px) 用 padding-left 属性把文本置于列表中 */
2.2.2、设置列表项标志位置
list-style-position
属性指示如何相对于对象的内容绘制列表项标记。/* 设置列表项图标位置 */ ul { list-style-position: inside; } /* list-style-position 属性值 inside 列表项目标记放置在文本以内,且环绕文本根据标记对齐。 outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。 inherit 规定应该从父元素继承 list-style-position 属性的值。 */
2.2.3、设置列表项标记类型
list-style-type
属性设置列表项标记的类型。/* list-style-type 属性设置列表项标记的类型。 */ ul { list-style-type: decimal-leading-zero; } /* list-style-type 属性值 none 无标记。 disc 默认。标记是实心圆。 circle 标记是空心圆。 square 标记是实心方块。 decimal 标记是数字。 decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。) lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。) upper-roman 大写罗马数字(I, II, III, IV, V, 等。) lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) lower-greek 小写希腊字母(alpha, beta, gamma, 等。) lower-latin 小写拉丁字母(a, b, c, d, e, 等。) upper-latin 大写拉丁字母(A, B, C, D, E, 等。) hebrew 传统的希伯来编号方式 armenian 传统的亚美尼亚编号方式 georgian 传统的乔治亚编号方式(an, ban, gan, 等。) cjk-ideographic 简单的表意数字 hiragana 标记是:a, i, u, e, o, ka, ki, 等。(日文平假名字符) katakana 标记是:A, I, U, E, O, KA, KI, 等。(日文片假名字符) hiragana-iroha 标记是:i, ro, ha, ni, ho, he, to, 等。(日文平假名序号) katakana-iroha 标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名序号) */
2.2.4、设置列表项样式简写
list-style
简写属性在一个声明中设置所有的列表属性。
- 可以设置的属性(按顺序): list-style-type, list-style-position, list-style-image.
/* list-style-type 属性设置列表项标记的类型。 */ ul { list-style: square inside; } li { border: 1px solid red; } /* list-style 属性值 list-style-type 设置列表项标记的类型。 list-style-position 设置在何处放置列表项标记。 list-style-image 使用图像来替换列表项的标记。 initial 将这个属性设置为默认值。 inherit 规定应该从父元素继承 list-style 属性的值。 */
案例:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="xiaoge-education">
<meta name="Description" content="this is a chapter of xiaoge-education page">
<title>xiaoge-education</title>
<style>
html,
body {
width: 100vw;
height: 100vh;
}
/* 设置列表项标记图像 */
/* 设置的图像大小推荐为 :10px 10px */
/* ul {
list-style-image: url('./img/16.jpg');
} */
/* 设置列表项标记图像 */
/* ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
ul>li {
background-image: url('./img/16.jpg');
background-size: 10px 10px;
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 15px;
} */
/* 设置列表项图标位置 */
/* ul {
list-style-position: inside;
} */
/* list-style-type 属性设置列表项标记的类型。 */
/* ul {
list-style-type: decimal-leading-zero;
} */
/* list-style-type 属性设置列表项标记的类型。 */
ul {
list-style: square inside;
}
li {
border: 1px solid red;
}
/*
list-style 属性值
list-style-type 设置列表项标记的类型。
list-style-position 设置在何处放置列表项标记。
list-style-image 使用图像来替换列表项的标记。
initial 将这个属性设置为默认值。
inherit 规定应该从父元素继承 list-style 属性的值。
*/
</style>
</head>
<body>
<ul>
<li>无需列表样式1</li>
<li>无需列表样式2</li>
<li>无需列表样式3</li>
</ul>
</body>
</html>
3、表格
表格由
标签来定义。每个表格均有若干行(由 标签定义),每行被分割为若干单元格(由标签定义)。字母 td 指表格数据(table data),即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 |
3.1、表格标签
表格标签主要又一下标签组成:
标签 | 标签描述 | |
---|---|---|
| 定义表格 | |
定义表格的表头 | ||
定义表格元素 | ||
定义表格标题 | ||
定义表格列的组 | ||
定义表格列的数据 | ||
定义表格页眉 | ||
定义表格主体 | ||
定义表格页脚 |
- 标签定义 HTML 表格,个 HTML 表格包括
元素,一个或多个 元素定义表格行,、、、 以及 元素。
标签属性:
元素。 元素定义表头, 元素定义表格单元。更复杂的 HTML 表格也可能包括 、
属性 值 描述 a l i g n \color{#f00}{align} align left、center、right HTML5 不支持。HTML 4.01 已废弃。 规定表格相对周围元素的对齐方式。 b g c o l o r \color{#f00}{bgcolor} bgcolor rgb(x,x,x)、#xxxxxx、colorname HTML5 不支持。HTML 4.01 已废弃。 规定表格的背景颜色。 b o r d e r \color{#f00}{border} border 1、“” HTML5 不支持。规定表格单元是否拥有边框。 c e l l p a d d i n g \color{#f00}{cellpadding} cellpadding pixels HTML5 不支持。规定单元边沿与其内容之间的空白。 c e l l s p a c i n g \color{#f00}{cellspacing} cellspacing pixels HTML5 不支持。规定单元格之间的空白。 f r a m e \color{#f00}{frame} frame void、above、below、hsides、lhs、rhs、vsides、box、border HTML5 不支持。规定外侧边框的哪个部分是可见的。 r u l e s \color{#f00}{rules} rules none、groups、rows、cols、all HTML5 不支持。规定内侧边框的哪个部分是可见的。 s u m m a r y \color{#f00}{summary} summary text HTML5 不支持。规定表格的摘要。 w i d t h \color{#f00}{width} width pixels、% HTML5 不支持。规定表格的宽度。
- 标签定义 HTML 表格中的行。一个 元素包含一个或多个 或元素。
- tr 标签属性
属性 值 描述 a l i g n \color{#f00}{align} align right、left、center、justify、char HTML5 不支持。定义表格行的内容对齐方式。 b g c o l o r \color{#f00}{bgcolor} bgcolor rgb(x,x,x)、#xxxxxx、colorname HTML5 不支持。HTML 4.01 已废弃。 规定表格行的背景颜色。 c h a r \color{#f00}{char} char character HTML5 不支持。规定根据哪个字符来进行文本对齐。 c h a r o f f \color{#f00}{charoff} charoff number HTML5 不支持。规定第一个对齐字符的偏移量。 v a l i g n \color{#f00}{valign} valign top、middle、bottom、baseline HTML5 不支持。规定表格行中内容的垂直对齐方式。 - 标签定义 HTML 表格中的表头单元格。 元素中的文本通常呈现为粗体并且居中。 元素中的文本通常是普通的左对齐文本。
- th 标签属性、td 标签属性
属性 值 描述 a b b r \color{red}{abbr} abbr text HTML5 不支持。 规定表头单元格中内容的缩写版本。 a l i g n \color{#f00}{align} align left、right、center、justify、char HTML5 不支持。 规定表头单元格内容的水平对齐方式。 a x i s \color{#f00}{axis} axis category_name HTML5 不支持。 对表头单元格进行分类。 b g c o l o r \color{#f00}{bgcolor} bgcolor rgb(x,x,x)、#xxxxxx、colorname HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的背景颜色。 c h a r \color{#f00}{char} char character HTML5 不支持。 规定根据哪个字符来进行内容的对齐。 c h a r o f f \color{#f00}{charoff} charoff number HTML5 不支持。 规定对齐字符的偏移量。 colspan number 规定表头单元格可横跨的列数。 headers header_id 规定与表头单元格相关联的一个或多个表头单元格。 h e i g h t \color{#f00}{height} height pixels、% HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的高度。 n o w r a p \color{#f00}{nowrap} nowrap nowrap HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格中的内容是否折行。 rowspan number 规定表头单元格可横跨的行数。 scope col、colgroup、row、rowgroup 规定表头单元格是否是行、列、行组或列组的头部。 v a l i g n \color{#f00}{valign} valign top、middle、bottom、baseline HTML5 不支持。 规定表头单元格内容的垂直排列方式。 w i d t h \color{#f00}{width} width pixels、% HTML5 不支持。HTML 4.01 已废弃。 规定表头单元格的宽度。 - 标签定义表格的标题。 标签必须直接放置到 标签之后。您只能对每个表格定义一个标题。
- caption 标签属性
属性 值 描述 a l i g n \color{#f00}{align} align left、right、top、bottom HTML5 不支持。HTML 4.01 已废弃。 定义标题的对齐方式。 - 标签用于对表格中的列进行组合,以便对其进行格式化。通过使用 标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式。**注释:**只能在 元素之内,在任何一个 、、、 元素之前使用 标签。
标签规定了 元素内部的每一列的列属性。通过使用 标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式。
- 标签属性
元素相关的内容的水平对齐方式。元素相关的内容。元素应该横跨的列数。元素相关的内容的垂直对齐方式。element
元素之后,在任何一个
属性 值 描述 a l i g n \color{#f00}{align} align left、right、center、justify、char HTML5 不支持。规定与 c h a r \color{#f00}{char} char character HTML5 不支持。规定根据哪个字符来对齐与 c h a r o f f \color{#f00}{charoff} charoff number HTML5 不支持。规定第一个对齐字符的偏移量。 span number 规定 v a l i g n \color{#f00}{valign} valign top、middle、bottom、baseline HTML5 不支持。规定与 w i d t h \color{#f00}{width} width %、pixels、relative_length HTML5 不支持。Specifies the width of a - 标签用于组合 HTML 表格的表头内容。 元素应该与 和 元素结合起来使用,用来规定表格的各个部分(表头、主体、页脚)。通过使用这些元素,使浏览器有能力支持独立于表格表头和表格页脚的表格主体滚动。当包含多个页面的长的表格被打印时,表格的表头和页脚可被打印在包含表格数据的每张页面上。 标签必须被用在以下情境中:作为 元素的子元素,出现在 元素之后,、 和 元素之前。
、 和 元素默认不会影响表格的布局。不过,您可以使用 CSS 来为这些元素定义样式,从而改变表格的外观。
- 属性
元素中内容的对齐方式。 元素中内容根据哪个字符来对进行文本对齐。 元素中内容的第一个对齐字符的偏移量。 元素中内容的垂直对齐方式。
、
属性 值 描述 a l i g n \color{#f00}{align} align left、right、center、justify、char HTML5 不支持。定义 c h a r \color{#f00}{char} char character HTML5 不支持。规定 c h a r o f f \color{#f00}{charoff} charoff number HTML5 不支持。规定 v a l i g n \color{#f00}{valign} valign top、middle、bottom、baseline HTML5 不支持。规定
案例
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="xiaoge-education">
<meta name="Description" content="this is a chapter of xiaoge-education page">
<title>xiaoge-education</title>
<style>
html,
body {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<table border="1">
<caption>报价单</caption>
<colgroup>
<col style="background-color: yellow;">
<col style="background-color: green;">
<col style="background-color: red;">
</colgroup>
<thead>
<tr>
<th>商品</th>
<th>单价</th>
<th>库存</th>
</tr>
</thead>
<tbody>
<tr>
<td>xxx</td>
<td>$100</td>
<td>100</td>
</tr>
<tr>
<td>yyy</td>
<td>$150</td>
<td>80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总价</td>
<td>$22000</td>
<td>180</td>
</tr>
</tfoot>
</table>
</body>
</html>
3.2、表格样式
使用 CSS 可以使 HTML 表格更美观。指定CSS表格边框,使用border属性。请注意,在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。为了显示一个表的单个边框,使用 border-collapse属性。border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开:Width和height属性定义表格的宽度和高度。表格中的文本对齐和垂直对齐属性。text-align属性设置水平对齐方式,向左,右,或中心:垂直对齐属性设置垂直对齐,比如顶部,底部或中间:如需控制边框和表格内容之间的间距,应使用td和th元素的填充属性:下面的例子指定边框的颜色,和th元素的文本和背景颜色:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="xiaoge-education">
<meta name="Description" content="this is a chapter of xiaoge-education page">
<title>xiaoge-education</title>
<style>
html,
body {
width: 100vw;
height: 100vh;
}
table {
width: 300px;
border-collapse: collapse;
/*
border-collapse 边框分隔
collapse 不分隔
separate 分隔
border-spacing 边框间距
*/
}
table,
th,
td {
border: 1px solid blue;
}
th {
height: 30px;
background-color: green;
color: white;
}
td {
height: 20px;
vertical-align: bottom;
padding: 0 15px;
}
</style>
</head>
<!--
-->
<body>
<table border="1">
<caption>报价单</caption>
<colgroup>
<col style="background-color: yellow;">
<col style="background-color: green;">
<col style="background-color: red;">
</colgroup>
<thead>
<tr>
<th>商品</th>
<th>单价</th>
<th>库存</th>
</tr>
</thead>
<tbody>
<tr>
<td>xxx</td>
<td>$100</td>
<td>100</td>
</tr>
<tr>
<td>yyy</td>
<td>$150</td>
<td>80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总价</td>
<td colspan="2">$22000</td>
<!--
标签属性colspan="" 合并列
rowspan="" 合并行
-->
</tr>
</tfoot>
</table>
</body>
</html>