一.无序列表

<ul>
                            <li>无序列表</li>
                            <li>有序列表</li>
                            <li>自定义列表</li>
                        </ul>

特性:1.没有顺序,每个<li>标签独占一行(块级元素)
                          2.默认每一个li标签前有一个实心小圆点
                          3.主要用于无序类型信息的展示,如导航栏等

二.有序列表

<ol>
                            <li>无序列表</li>
                            <li>有序列表</li>
                            <li>自定义列表</li>
                        </ol>

特性:1.有顺序,每个<li>标签独占一行(块级元素)
                          2.默认每一个li标签前有顺序标识
                          3.一般用于排序类型的列表,如试卷、问卷选项等

三:定义列表

<dl>
                            <dt>列表项1</dt>
                                <dd>列表项1内容1</dd>
                                <dd>列表项1内容2</dd>
                            <dt>列表项2</dt>
                                <dd>列表项2内容1</dd>
                                <dd>列表项2内容2</dd>
                        </dl>

特性:1.没有顺序,每一个dt和dd标签独占一行(块元素)
                          2.默认没有标记
                          3.一般用于一个标题下有一个或多个列表项的情况

四.表格

组成部分:行
                             列
                             单元格
                    表格优点:结构稳定
                              简单通用

<table border="1" align="right">
                        <tr>
                            <td rowspan="2">张三</td>

<td>语文</td>
                            <td>98</td>
                            <tr>
                                <td>数学</td>
                                <td>89</td>
                            </tr>
                            </tr>

<tr>
                            <td rowspan="2">李四</td>

<td>语文</td>
                            <td>76</td>
                            <tr>
                                <td>数学</td>
                                <td>60</td>
                            </tr>
                        </tr>

</table>

<!--border:边框粗细        align:位置    center:居中        colspan:跨列   rowspan:跨行-->
                    <table border="1" align="center">
                            <tr>
                                    <td colspan="2" align="center">分数</td>

</tr>
                            <tr>
                                    <td>89</td>
                                    <td>95</td>
                            </tr>

</table>

五.媒体元素
                        video:视频
                                <video controls autoplay>
                                    <source src="视频地址 " type="video/视频格式">
                                    <source src="视频地址 " type="video/视频格式">
                                </video>
                        audio:音频
                                <audio controls autoplay>
                                    <source src="音频地址 " type="audio/音频格式">
                                    <source src="音频地址 " type="audio/音频格式">
                                </audio>

六.页面格局结构
                        header    标题头部区域的内容(用于页面或页面中的一块区域)
                        footer    标记脚部区域的内容(用于整个页面或页面的一块区域)
                        section    Web页面中的一块独立区域
                        article    独立的文章内容
                        aside    相关内容或应用(常用于侧边栏)
                        nav    导航类辅助内容
                        <header style="border: 1px; height: 100px;"><h1>页面头部</h1></header>
                        <section style="border: 1px; height: 500px;"><h1>页面主题部分</h1></section>
                        <footer style="border: 1px; height: 100px;"><h1>页面脚部</h1></footer>

七.内联框架
                        <iframe src="嵌套地址" name="自定义名称"></iframe>
                        <!--target值必须和iframe的name属性值相等才能完成点击a标签时会在内联框架中显示要跳转的页面-->
                        <a href="页面地址" target="内联框架自定义名称"></a>

HTML的列表,表格与媒体元素的更多相关文章

  1. HTML列表,表格与媒体元素

    一.无序列表 <ul> <li>无序列表</li> <li>有序列表</li> <li>自定义列表</li> < ...

  2. HTML第二章:列表,表格,媒体元素

    第二章:列表,表格,媒体元素 列表:有三种,有序列表,无序列表,定义列表 1.有序列表:<ol></ol>            列表项:<li></li&g ...

  3. 【学习笔记】HTML基础:列表、表格与媒体元素

    一.列表是信息资源的一种展现形式,它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能够快速的获取相应的信息. 1.无需列表 <ul> <li>第一项</li ...

  4. HTML5 第二章 列表和表格和媒体元素

    列表: (1)什么是列表? 列表就是信息资源的一种展示形式. (2)无序列表: 语法: <ul> <li>第1项</li> <li>第2项</li ...

  5. HTML列表,表格与媒体元素

    一.列表  信息资源的一种展示形式   二.列表的分类  1.有序列表   <ol>    <li>列表项1</li>    <li>列表项2</ ...

  6. HTML5 列表、表格、媒体元素

    无序列表 <ul> <li>范冰冰演藏族女孩</li> <li>拍集体合影后自拍</li> <li>诗隆甜蜜出游</li& ...

  7. 第48天学习打卡(HTML 行内元素和块元素 列表 表格 视频和音频 页面结构分析 iframe内联框架 表单语法 )

    行内元素和块元素 块元素 ​ 无论内容多少,该元素独占一行 ​ (p.h1-h6) 行内元素 ​ 内容撑开宽度,左右都是行内元素的可以排在一行 ​ (a.strong.em...) 列表 什么是列表 ...

  8. Bootstrap框架(基础篇)之列表,表格,表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...

  9. CSS 笔记——列表表格

    6. 列表表格 -> 列表 (1)list-style 基本语法 list-style : list-style-image || list-style-position || list-sty ...

随机推荐

  1. PAT(B) 1017 A除以B(Java)

    题目链接:1017 A除以B 分析 读取输入的A和B后,保存为字符串.模拟除法运算过程. 不要用BigInteger,因为会超时. 另外字符串经常要扩展(例如:append())的话,不要用Strin ...

  2. 让Sublime Text3支持新建.vue高亮显示模板

    首先要使用Package Control,安装要好 Vue Syntax Highlight和sublimetmpl插件. 1, 在Packages\SublimeTmpl\templates目录下新 ...

  3. Hinton胶囊网络后最新研究:用“在线蒸馏”训练大规模分布式神经网络

    Hinton胶囊网络后最新研究:用“在线蒸馏”训练大规模分布式神经网络 朱晓霞发表于目标检测和深度学习订阅 457 广告关闭 11.11 智慧上云 云服务器企业新用户优先购,享双11同等价格 立即抢购 ...

  4. sqlyog无操作一段时间后重新操作会卡死问题

    在使用 sqlyog 的过程中,遇到了这种情况:打开一个连接,进行了一些操作之后,过一段时间没有操作,然后再来操作会卡死一段时间,等一段时间后操作完成了继续进行其它操作,又很流畅了.但是过一段时间不操 ...

  5. java封装数据类型——Boolean

    众所周知,java对常见的原始数据类型都提供了对应的封装类型,增加一些常用的特性(如 计算hash值.比较相等.类型转换等),以扩展他们对数据处理的能力,使得他们更好地适应面向对象编程的各种场景.今天 ...

  6. 12种不宜使用的Javascript语法

    Douglas Crockford列出了12种应该避免使用的Javascript语法,我觉得非常值得推广. ============================== 1. == Javascrip ...

  7. Ceph 调整crush map

    目录 Ceph 调整crush map 1.前言 2.示例 1.创建新的replicated 2.修改当前pool的rule Ceph 调整crush map 1.前言 本文章适用于ceph n版 2 ...

  8. Image Processing and Analysis_8_Edge Detection:Design of steerable filters for feature detection using canny-like criteria ——2004

    此主要讨论图像处理与分析.虽然计算机视觉部分的有些内容比如特 征提取等也可以归结到图像分析中来,但鉴于它们与计算机视觉的紧密联系,以 及它们的出处,没有把它们纳入到图像处理与分析中来.同样,这里面也有 ...

  9. Linux shell循环遍历

    有时候需要紧急处理一些Excel列表中的数据,如提供一堆id列表,需要删除对应的表,一开始的办法是通过python pandas读取excel,然后拼接id元祖执行sql命令: 运维的同事说不用这么麻 ...

  10. 3.Vue过滤器

    1.概念: Vue.js 允许你自定义过滤器,可被用作一些常见文本的格式化,过滤器可以用在两个地方:mustache 插值和 v-bind 表达式.过滤器应该被添加在 JavaScript 表达式的尾 ...