博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML列表,表格与媒体元素
阅读量:5056 次
发布时间:2019-06-12

本文共 1691 字,大约阅读时间需要 5 分钟。

一.无序列表

<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>

 

转载于:https://www.cnblogs.com/chx9832/p/9158908.html

你可能感兴趣的文章
Windows Phone Marketplace 发布软件全攻略
查看>>
Unity3D研究院之打开Activity与调用JAVA代码传递参数(十八)【转】
查看>>
语义web基础知识学习
查看>>
hexo个人博客添加宠物/鼠标点击效果/博客管理
查看>>
python asyncio 异步实现mongodb数据转xls文件
查看>>
关于WPF的2000件事 02--WPF界面是如何渲染的?
查看>>
单元测试、、、
查看>>
深入理解include预编译原理
查看>>
SVN使用教程总结
查看>>
JS 浏览器对象
查看>>
TestNG入门
查看>>
【ul开发攻略】HTML5/CSS3菜单代码 阴影+发光+圆角
查看>>
虚拟中没有eth0
查看>>
Unity 3D游戏开发学习路线(方法篇)
查看>>
BZOJ2049[Sdoi2008]Cave 洞穴勘测(LCT模板)
查看>>
vuex插件
查看>>
2011年12月09日
查看>>
[ZJOI2007]棋盘制作 【最大同色矩形】
查看>>
合并单元格
查看>>
swift-初探webView与JS交互
查看>>