美文网首页
HTML5学习笔记（六）

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学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之表单标签

    HTML5学习笔记之表单标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之基础标签

    HTML5学习笔记之基础标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之...

  • HTML5学习笔记之音视频标签

    HTML5学习笔记之音视频标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记...

  • HTML5基本介绍

    HTML5基本介绍 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 ...

  • HTML5学习笔记（六）

    1、被安排得明明白白 1.1 无序列表和有序列表： 无序列表(Unordered List):使用ul元素来定义，...

  • HTML5存储

    HTML5学习笔记 Web存储 HTML5 web存储，一个比cookie更好的本地存储方式。 什么是html5 ...

  • 2021-12-20

    HTML5学习笔记 input标签 新增placeholder calendar日历类 contenteditab...

  • HTML基础--基础标签

    跟着视频学习了HTML5，简要记录一下学习的笔记。 基础标签学习 H系列标签（Header1~Header6） -...

  • App与HTML的交互

    title: App与HTML的交互tags: 学习笔记,Android,App与HTML5的交互 App操作HT...

网友评论

      本文标题：HTML5学习笔记（六）

      本文链接：https://www.haomeiwen.com/subject/rxossctx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|HTML5学习笔记（六）|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！