HTML的列表,表格与媒体元素
一.无序列表
<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的列表,表格与媒体元素的更多相关文章
- HTML列表,表格与媒体元素
一.无序列表 <ul> <li>无序列表</li> <li>有序列表</li> <li>自定义列表</li> < ...
- HTML第二章:列表,表格,媒体元素
第二章:列表,表格,媒体元素 列表:有三种,有序列表,无序列表,定义列表 1.有序列表:<ol></ol> 列表项:<li></li&g ...
- 【学习笔记】HTML基础:列表、表格与媒体元素
一.列表是信息资源的一种展现形式,它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能够快速的获取相应的信息. 1.无需列表 <ul> <li>第一项</li ...
- HTML5 第二章 列表和表格和媒体元素
列表: (1)什么是列表? 列表就是信息资源的一种展示形式. (2)无序列表: 语法: <ul> <li>第1项</li> <li>第2项</li ...
- HTML列表,表格与媒体元素
一.列表 信息资源的一种展示形式 二.列表的分类 1.有序列表 <ol> <li>列表项1</li> <li>列表项2</ ...
- HTML5 列表、表格、媒体元素
无序列表 <ul> <li>范冰冰演藏族女孩</li> <li>拍集体合影后自拍</li> <li>诗隆甜蜜出游</li& ...
- 第48天学习打卡(HTML 行内元素和块元素 列表 表格 视频和音频 页面结构分析 iframe内联框架 表单语法 )
行内元素和块元素 块元素 无论内容多少,该元素独占一行 (p.h1-h6) 行内元素 内容撑开宽度,左右都是行内元素的可以排在一行 (a.strong.em...) 列表 什么是列表 ...
- Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...
- CSS 笔记——列表表格
6. 列表表格 -> 列表 (1)list-style 基本语法 list-style : list-style-image || list-style-position || list-sty ...
随机推荐
- 使用寄存器点亮LED(第2节)—寄存器映射代码讲解
// 打开 GPIOB 端口的时钟 *( unsigned int * )0x40021018|= ( 1 << 4 ); // 配置PC2 IO口为通用推挽输出,速度为10M *( un ...
- Python3 使用pygal 生成世界人口地图
最近在看<python从入门到实践>,其中有一个例子是使用pygal制作世界人口地图,觉得挺有意思的,这里就记录下来了, 其实代码不是很复杂,使用环境环境python3.废话不多说,直接上 ...
- 用python将项目中的所有代码(或txt)合并在一个文件中
设计模式开卷考试给的例子代码都是一个类一个java,实在太恶心了,所以写了一个python脚本. import os fileansdir=r'C:\Users\tonyson_in_the_rain ...
- (一)mybatis介绍
一.mybatis简介 MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis ...
- MySQL存储的字段是不区分大小写的,你知道吗?
做一个积极的人 编码.改bug.提升自己 我有一个乐园,面向编程,春暖花开! 00 简单回顾 之前写过一篇关于mysql 对表大小写敏感的问题,其实在mysql中字段存储的内容是不区分大小写的,本篇进 ...
- Entity framework 意外删除了表,如何在不影响其它表的情况下恢复回来
关于EntityFramework数据迁移原理 查询数据库的表"__MigrationHistory",遍历代码库的Migrations文件夹下的所有文件,如果文件不在__Migr ...
- Pyhon中迭代器与生成器
迭代器 我们知道,可以直接用for循环的数据类型有以下几种: 一类是集合数据类型:list.tuple.dict.set.str等 一类是generator:包括生成器和带yield的generato ...
- 解决IE8中select下拉列表文字上下不居中的问题
对IE8及以下的浏览器设置padding属性,其他浏览器则设置line-height 属性
- stm32 定时器 通用定时器
STM32F10xxx 2个基本定时器(TIM6.TIM7) 4个通用定时器(TIM2. TIM3. TIM4和TIM5) 2个高级定时器(TIM1.TIM8) 每个定时器都是完全独立的,没有互相共享 ...
- c#重写了窗体的OnKeyDown事件,但是不执行
设置下窗体的KeyPreview属性值为True即可 总结:遇到类似这样的问题,比如其他窗体运行没问题,就新建的窗体有问题.应该检查下窗体的属性.