分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 网页技术

HTML列表,表格与媒体元素

发布时间:2023-09-06 01:59责任编辑:郭大石关键词: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标记脚部区域的内容(用于整个页面或页面的一块区域)
sectionWeb页面中的一块独立区域
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列表,表格与媒体元素

原文地址:https://www.cnblogs.com/chx9832/p/9158908.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved