第六节：连接、列表、表格样式

发布于：2022-12-04 ⋅ 阅读:(370) ⋅ 点赞:(0)

第六节：连接、列表、表格样式

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、列表

​ 列表分为三类，一种是有序列表，一种是无序列表，一种是自定义列表。无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记；有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于

  1. 标签。每个列表项始于
  2. 标签；自定义列表以
    标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以
    开始。

2.1、列表标签

2.1.1、无序列表

  • 无序列表使用

    • 标签

    <ul>
    <li>无序列表第一项</li>
    <li>无序列表第二项</li>
    <li>无序列表第三项</li>
</ul>
    • 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

    ​

2.1.2、有序列表

  • 有序列表使用

    1. 标签

    <ol>
    <li>有序列表第一项</li>
    <li>有序列表第二项</li>
    <li>有序列表第三项</li>
</ol>
    • 有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于
      1. 标签。每个列表项始于
      2. 标签。

    ​

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>
本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布