列表表格内联框架

最新推荐文章于 2023-08-13 15:26:46 发布

W1ngman_

最新推荐文章于 2023-08-13 15:26:46 发布

阅读量485

点赞数

分类专栏：基础文章标签： html5 列表

本文链接：https://blog.csdn.net/W1ngman_/article/details/111631638

版权

基础专栏收录该内容

34 篇文章 0 订阅

订阅专栏

列表

什么是列表
列表就是信息资源化的一种展示。它可以使信息结构化和条理化，并以列表的形式显示出来，以便浏览者能更快的获得相应的信息

列表的分类
-无序列表
-有序列表
-定义列表

无序列表的特性
没有顺序，每个

标签独占一行（块元素）
默认<li>标签项前面有个实心小圆点
一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等

有序列表的特性
有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有顺序标记
一般用于排序类型的列表，如试卷、问卷选项等

定义列表的特性
没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
默认没有标记
一般用于一个标题下有一个或多个列表项的情况

无序列表ui>li

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <ul>
            <li></li>
        </ul>
    </body>
</html>

例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <ul>
            <li>平安夜里真平安</li>
            <li>嫦娥5号回家了</li>
            <li>明天就是圣诞节</li>
        </ul>
    </body>
</html>

有序列表ol>li

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <ol>
            <li></li>
        </ol>
    </body>
</html>

定义列表dl>dt+dd

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <dl>
            <dt>今日新闻大事件</dt><!-- dt是标题，也可以是顶格的列表项-->
            <dd>平安夜里真平安</dd><!-- dd是缩进的列表项-->
            <dd>嫦娥5号回家了</dd>
            <dd>明天就是圣诞节</dd>
        </dl>
    </body>
</html>

表格

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <table border="1">
           <tr>
                <th>学号</th>
                <th>学号</th>
                <th>学号</th>
            </tr>
            <tr>
                <td>1</td>
                <td>wsc</td>
                <td>18</td>
            </tr>
            <tr>
                <td>2</td>
                <td>pgone</td>
                <td>19</td>
            </tr>
            <tr>
                <td>3</td>
                <td>lxl</td>
                <td>20</td>
    </body>
</html>

<th></th>定义表头 <tr></tr>有几部分就有几行（除去表头）
<table border="1">加border="1"有线框，数字决定线框粗细

跨行与跨列

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>table</title>
    </head>
    <body>
        <table border="1">
            <tr>
                <th colspan="6">班级信息统计表</th>
            </tr>
            <tr>
                <th>班级</th>
                <th>学号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th rowspan="4" colspan="2">备注</th>
            </tr>
            <tr>
                <td rowspan="3">kb99</td>
                <td>1</td>
                <td>wsc</td>
                <td>18</td>
            </tr>
            <tr>
                <td>2</td>
                <td>pgone</td>
                <td>19</td>
            </tr>
            <tr>
                <td>3</td>
                <td>lxl</td>
                <td>20</td>
            </tr>
        </table>
    </body>
</html>

每一次跨列都需要单独写，跨行写在第一部分代码里
table[border=1]>(tr>th{表头}*3)>(tr>td{内容}*3)*3

Video and Audio
video例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <video src="vedio/vedio.mp4" controls="controls" autoplay="autoplay" loop="loop"></video>
    </body>
</html>

或

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <video controls>
            <source src="vedio/vedio.mp4" type="video/mp4"><!--多源-->
        </video>
    </body>
</html>

video[controls][src=""]
video[controls]>source[src="" type=""]

audio例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <audio src="" controls="controls"></audio>
    </body>
</html>

video和audio都不是块链接

HTML5结构

header：标题头部区域的内容（用于页面或页面中的一块区域）
footer：标记脚部区域的内容（用于整个页面或页面的一块区域）
section：Web页面中的一块独立区域
article：独立的文章内容
aside：相关内容或应用（常用于侧边栏）
nav：导航类辅助内容

内联框架

iframe[src]
<iframe src="path" name="mainFrame" ></iframe>

<iframe name="mainFrame" src="subframe/the_second.html" />
<a href="subframe/the_second.html "  target="mainFrame">下边显示第二页</a>

W1ngman_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
列表表格内联框架

**列表什么是列表列表就是信息资源化的一种展示。它可以使信息结构化和条理化，并以列表的形式显示出来，以便浏览者能更快的获得相应的信息列表的分类-无序列表-有序列表-定义列表无序列表的特性没有顺序，每个标签独占一行（块元素）默认<li>标签项前面有个实心小圆点一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等有序列表的特性有顺序，每个<li>标签独占一行（块元素）默认<li>标签项前面有顺序标记一般用于排序类型的列表，如试卷、问
复制链接

扫一扫