一.无序列表

<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第二章:列表,表格,媒体元素

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

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

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

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

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

  4. HTML的列表,表格与媒体元素

    一.无序列表 <ul>                            <li>无序列表</li>                            &l ...

  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. 剑指offer-拓展训练-字符的所有组合-全组合

    /* 题目: 给定不含重复字符字符串的全组合. */ /* 思路: 递归法. 例给定abc,输出的组合长度为1,2,3. 对于长度为2的组合,分选择a(ab,ac)和不选择a的情况(bc). 选择a, ...

  2. layui弹出表单提交后,界面model验证部分起作用

    情况1----input属性中type=submit时验证都可以起作用,但是弹出层表单的返回值不能获取,所以用ajax二次提交后会出现重复添加数据的问题 情况2----input属性中type=but ...

  3. 论文阅读笔记(十七)【ICCV2017】:Dynamic Label Graph Matching for Unsupervised Video Re-Identification

    Introduction 文章主要提出了 Dynamic Graph Matching(DGM)方法,以非监督的方式对多个相机的行人视频中识别出正确匹配.错误匹配的结果.本文主要思想如下图: 具体而言 ...

  4. ABP前端-关于不同按钮调用同一事件传入的参数变为相同的数据

    现象: 在一个含有的Tab标签的页面,两个标签页的新增按钮调用同一个新增事件并传入不同的参数,但实际在调用的的时候传入的参数都变成了最后一个按钮传入的值,即,不论点击哪个Tab按钮的新增事件,最终传入 ...

  5. select count(1)和select count(*)的区别

    select count(1) from 表a //查询时会对常数列进行统计行数select count(*) from 表a //查询时会找表a中最短的列进行统计行数 因为使用count(*)查询会 ...

  6. UVA750回溯法典例-八皇后

    文章代码选自UVA750-8 Queens Chess Problem的部分代码 vj题目链接:https://vjudge.net/problem/UVA-750 由于UVA中要求按照字典序输出,下 ...

  7. PAT (Basic Level) Practice (中文)1056 组合数的和 (15 分)

    给定 N 个非 0 的个位数字,用其中任意 2 个数字都可以组合成 1 个 2 位的数字.要求所有可能组合出来的 2 位数字的和.例如给定 2.5.8,则可以组合出:25.28.52.58.82.85 ...

  8. PAT (Basic Level) Practice (中文)1023 组个最小数 (20 分) (排序)

    给定数字 0-9 各若干个.你可以以任意顺序排列这些数字,但必须全部使用.目标是使得最后得到的数尽可能小(注意 0 不能做首位).例如:给定两个 0,两个 1,三个 5,一个 8,我们得到的最小的数就 ...

  9. 选课系统项目_python

    一.功能简要 基本实现以下功能,但是有部分地方由于时间关系并未写,而且并未做细微的完善,大致功能完成.角色:学校.学员.课程.讲师要求:1. 创建北京.上海 2 所学校2. 创建linux , pyt ...

  10. window - 安装 tomcat

    一.下载安装包 参考网址:https://archive.apache.org/dist/tomcat 百度网盘:https://pan.baidu.com/s/1mtNuTUCFp-_SIHIp_R ...