HTML5学习笔记（六）

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

最后编辑于：2019.08.20 17:52:52

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 205,132评论 6赞 478
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 87,802评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 151,566评论 0赞 338
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,858评论 1赞 277
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,867评论 5赞 368
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,695评论 1赞 282
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,064评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,705评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 42,915评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,677评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,796评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,432评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,041评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,992评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,223评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,185评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,535评论 2赞 343

HTML5学习笔记（六）

1、被安排得明明白白

1.1 无序列表和有序列表：

1.2 两个常用的CSS属性：

1.3 列表嵌套：

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

2、数据就应该整整齐齐

2.1 表格的制作：

2.2继续表格制作的优化

推荐阅读更多精彩内容