HTML5学习笔记（六）

作者: 理以周 | 来源:发表于2019-08-20 16:35 被阅读0次

1、被安排得明明白白

1.1 无序列表和有序列表：

无序列表(Unordered List):使用ul元素来定义，其中的每个项使用li元素包裹起来；

<!--使用ul元素创建一个无序列表-->
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Juice</li>
    </ul>

image.png

有序列表(Ordered List)：使用ol元素来定义，列表中每个项使用li元素包裹起来；

<!--使用ol元素创建一个有序列表-->
    <ol>
        <li>HTML5 & CSS3</li>
        <li>JavaScript</li>
        <li>JQuery</li>
        <li>BootStrapt</li>
        <li>Vue</li>
        <li>PHP</li>
    </ol>

image.png
ol中属性设置：

属性	值	描述
reversed	reversed	规定列表顺序为降序。（9，8，7，.....）
start	number	规定有序列表的起始值。
type	1、A、a、I、i	规定在列表中使用的标记类型

<ol type="I" reversed>

image.png

1.2 两个常用的CSS属性：

list-style-type：允许你将列表的标志设置为方的、圆的、看不见的...

<!DOCTYPE html>
<html>
<head>list-style-type演示</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="keywords" content="周小雨进阶前端大神记">
    <meta name="description" content="《跟随小甲鱼成为前端大神》">
    <meta name="author" content="Belle zhou">
    <style>
    <!--通过list-style-type设置列表的标志-->
    ul.a {list-style-type:square;}
    ul.b {list-style-type:disc;}
    ul.c {list-style-type:circle;}
    ul.d {list-style-type:none;}
    </style>
    
</head>
<body>
    <ul class="a">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Juice</li>  
    </ul>
    
    <ul class="b">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Juice</li>  
    </ul>
    
    <ul class="c">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Juice</li>  
    </ul>
    
    <ul class="d">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Juice</li>  
    </ul>
</body>
</html>

image.png
ul中属性设置：

值	描述
disc	实心圆
circle	空心圆
square	实心方块
decimal	阿拉伯数字
lower-roman	小写罗马数字
upper-roman	大写罗马数字
lower-alpha	小写英文字母
upper-alpha	大写英文字母
none	不使用项目符号
........	....

<list-style-image>:列表标志自定义；

<style>
        ul{
            list-style-image:
            url("img/jianshu.png");
            width:16px;
            height:16px;
            }
    </style>

1.3 列表嵌套：

<ol>
        <li><del>《零基础入门学习c语言》</del></li>
        <li>《零基础入门学习汇编语言》</li>
        <li>《c++快速入门》</li>
        <li>《零基础入门学习DELPHI》</li>
        <li>《数据结构和算法》</li>
        <li>《win32汇编语言程序设计》</li>
        <li>《解密系列》
            <ul>
                <li>基础篇</li>
                <li>调试篇</li>
                <li>系统篇</li>
                <li>脱壳篇</li>
                <li>工具篇</li>
                <li>密码学</li>
            </ul>
        </li>
    </ol>

image.png

1.4 定义列表：使用dl元素，还需要dt、dd元素配合使用；

<!--单条术语与描述-->
    <dl>
        <dt>fishc.com.cn</dt>
        <dd>一个神奇的论坛。</dd>
    </dl>
    
    <!--多条术语，单条描述-->
    <dl>
        <dt>fishc.com.cn</dt>
        <dt>bbs.fishc.com</dt>
        <dd>一个神奇的论坛。</dd>
    </dl>
    
    <!--单条术语，多条描述-->
    <dl>
        <dt>fishc.com.cn</dt>
        <dd>一个神奇的论坛。</dd>
        <dd>一个可以结识一群志同道合的朋友的地方。</dd>
    </dl>
    
    <!--多条术语，多条描述-->
    <dl>
        <dt>fishc.com.cn</dt>
        <dd>一个神奇的论坛。</dd>
        <dd>一个可以结识一群志同道合的朋友的地方。</dd>
        <dt>ilovefishc.com</dt>
        <dd>鱼c工作室的主页。</dd>
    </dl>

image.png

2、数据就应该整整齐齐

2.1 表格的制作：

tr=table row（行）；
th=table header cell（表头，默认加粗）；
td=table data cell（数据）

<table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>Bellezhou</td>
            <td>22</td>
        </tr>
        <tr>
            <td>lily</td>
            <td>23</td>
        </tr>
    </table>

表格比较朴素，连边框都没有：

image.png
增加边框，自动调整表格大小：

<style>
        table,th,td{
            border:1px solid black;
            }
    </style>

image.png
边框有两条平行线？ 原来是属于不同元素的边框

<style>
        table{
            border:1px solid black;
            }
        th{
            border:1px solid red;
        }
        td{
            border:1px solid blue;
        }
    </style>

image.png
如何把两者合并：

<style>
        table{
            border:1px solid black;
            border-collapse:collapse;
            }
        th{
            border:1px solid red;
        }
        td{
            border:1px solid blue;
        }
    </style>

image.png
给表格增加标题：

<caption>一个简单的表格</caption>

image.png
完整版创作：

image.png
表格中增加图片、pedding样式调整边距：

<!DOCTYPE html>
<html>
<head>
    <title>一个简单的表格</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="keywords" content="周小雨进阶前端大神记">
    <meta name="description" content="《跟随小甲鱼成为前端大神》">
    <meta name="author" content="Belle zhou">
    <style>
        table{
            border:1px solid black;
            border-collapse:collapse;
            }
        th,td{
            border:1px solid black;
            pedding:5px;
        }
        caption{
            pedding:10px;
            }
    </style>
</head>
<body>
    <table>
        <caption>著名男演员</caption>
            <tr>
                <th>姓名</th>
                <th>代表作品</th>
                <th>图片</th>
            </tr>
            <tr>
                <td>陈建斌</td>
                <td>《甄嬛传》</td>
                <td><img src="img/陈建斌.jpg" alt ="著名男演员"width ="150"></td>
            </tr>
            <tr>
                <td>崔弈</td>
                <td>《少儿主持节目》</td>
                <td><img src="img/崔弈.jpg" alt ="著名女演员"width ="150"></td>
            </tr>
            <tr>
                <td>雷恪生</td>
                <td>《少小离家老大回》</td>
                <td><img src="img/雷恪生.jpg" alt ="著名男演员"width ="150"></td>
            </tr>
            <tr>
                <td>王学圻</td>
                <td>《战争片》</td>
                <td><img src="img/王学圻.jpg" alt ="著名男演员"width ="150"></td>
            </tr>
            <tr>
                <td>王志文</td>
                <td>《人民的名义》</td>
                <td><img src="img/王志文.jpg" alt ="著名男演员"width ="150"</td>
            </tr>
    </table>
</body>
</html>

image.png

2.2继续表格制作的优化

thead（表头）；
tbody（主体）；
tfoot（表尾）；

<!DOCTYPE html>
<html>
<head>
    <title>一个简单的表格</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="keywords" content="周小雨进阶前端大神记">
    <meta name="description" content="《跟随小甲鱼成为前端大神》">
    <meta name="author" content="Belle zhou">
    <style>
        table{
            border:1px solid black;
            border-collapse:collapse;
            }
        thead th{
            background:gray;
            color:white;
        }
        tbody th{
            background:lightgray;
            color:white;
        }
        th,td{
            border:1px solid black;
            pedding:5px;
        }
        caption{
            pedding:10px;
            }
    </style>
</head>
<body>
    <table>
        <caption>著名男演员</caption>
        <thead>
                <tr>
                    <th>评价</th>
                    <th>姓名</th>
                    <th>代表作品</th>
                    <th>图片</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>著名男演员</th>
                    <td>陈建斌</td>
                    <td>《甄嬛传》</td>
                    <td><img src="img/陈建斌.jpg" alt ="著名男演员" width ="150"></td>
                </tr>
                <tr>
                    
                    <th>著名女演员</th>
                    <td>崔弈</td>
                    <td>《少儿主持节目》</td>
                    <td><img src="img/崔弈.jpg" alt ="著名女演员" width ="150"></td>
                </tr>
                <tr>
                    <th>著名男演员</th>
                    <td>雷恪生</td>
                    <td>《少小离家老大回》</td>
                    <td><img src="img/雷恪生.jpg" alt ="著名男演员" width ="150"></td>
                </tr>
                <tr>
                    <th>著名男演员</th>
                    <td>王学圻</td>
                    <td>《战争片》</td>
                    <td><img src="img/王学圻.jpg" alt ="著名男演员" width ="150"></td>
                </tr>
                <tr>
                    <th>著名男演员</th>
                    <td>王志文</td>
                    <td>《人民的名义》</td>
                    <td><img src="img/王志文.jpg" alt ="著名男演员" width ="150"</td>
                </tr>
            </tbody>
    </table>
</body>
</html>

image.png
增加表尾：

<!--添加tfoot元素，以及使用colspan使其表尾横跨4列，和表格一样长，比较美观-->
            <tfoot>
                <tr>
                    <td colspan="4">上述资料均为周普莉主观臆断的，不具有权威性，仅供娱乐。</td>
                    
                </tr>
            </tfoot>

image.png
rowspan实现跨列：

<!DOCTYPE html>
<html>
<head>
    <title>一个简单的表格</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta name="keywords" content="周小雨进阶前端大神记">
    <meta name="description" content="《跟随小甲鱼成为前端大神》">
    <meta name="author" content="Belle zhou">
    <style>
        table{
            border:1px solid black;
            border-collapse:collapse;
        }
        td{
            border:1px solid black;
            pedding:5px;
        }
    </style>
    
</head>
<body>
    <table>
        <!--修改代码，让中间列纵跨3行-->
        <tr>
            <td>1</td>
            <td rowspan="3">2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            
            <td>9</td>
        </tr>
    </table>
    
</body>
</html>

image.png
批量操作表格行列：

<table>
        <!--修改代码，让中间列纵跨3行-->
        <!--将第一列的背景颜色设置为红色-->
        <!--将第2、3列的背景颜色设置为绿色-->
        <colgroup>
            <col style="background:red">
            <col span="2"style="background:green">
        </colgroup>
        <tr>
            <td>1</td>
            <td rowspan="3">2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            
            <td>9</td>
        </tr>
    </table>

image.png

HTML5学习笔记（六）

1、被安排得明明白白

1.1 无序列表和有序列表：

1.2 两个常用的CSS属性：

1.3 列表嵌套：

1.4 定义列表：使用dl元素，还需要dt、dd元素配合使用；

2、数据就应该整整齐齐

2.1 表格的制作：

2.2继续表格制作的优化

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读