2019-7-22 [HTML] 列表 有序与无序的对比 表格 跨行与跨列 音频与视频标签 网页布局

最新推荐文章于 2023-03-15 21:34:31 发布
最新推荐文章于 2023-03-15 21:34:31 发布
阅读量1.4k 收藏
点赞数
分类专栏： HTML 文章标签： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45172861/article/details/96893706
版权

文章目录

0.HTML网页技术(中级)

1.列表

1.1 列表

1.1.1 什么是列表?

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

1.1.2 列表的分类

a) 无序列表
在这里插入图片描述

无序列表的特性

u 没有顺序，每个

  • 标签独占一行（块元素）
    u 默认
  • 标签项前面有个实心小圆点
    u 一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等
    b) 有序列表
    在这里插入图片描述

  • 有序列表的特性

    u 有顺序，每个

  • 标签独占一行（块元素）
    u 默认
  • 标签项前面有顺序标记
    u 一般用于排序类型的列表，如试卷、问卷选项等

  • 1.1.3 有序列表和无序列表对比

    在这里插入图片描述

    1.1.4 课堂练习 : 模拟百度新闻制作新闻列表

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>HTML案例</title>
	</head>
	<body>
		<h1>搜索热点</h1>
		<ol>
			<a href="https://www.baidu.com/s?wd=空姐集体睡地板"><li>空姐集体睡地板</li></a>
			<a href="https://www.baidu.com/s?wd=许家印告贾跃亭"><li>许家印告贾跃亭</li></a>
			<a href="https://www.baidu.com/s?wd=吴亦凡专辑回榜首"><li>吴亦凡专辑回榜首</li></a>
			<a href="https://www.baidu.com/s?wd=合肥一化肥厂爆炸"><li>合肥一化肥厂爆炸</li></a>
			<a href="https://www.baidu.com/s?wd=公交八条防盗暗语"><li>公交八条防盗暗语</li></a>
		</ol>
	</body>
</html>

    在这里插入图片描述

    2 表格

    为什么使用表格?
    简单通用
    结构稳定
    HTML 表格
    表格由 <table> 标签来定义。
    每个表格均有若干行（由 标签定义），每行被分割为若干单元格（由 标签定义）。
    字母 td 指表格数据（table data），即数据单元格的内容。
    数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
    表格的构造:
    在这里插入图片描述
    实例

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>HTML案例</title>
	</head>
	<body>
		<table border="1">
			<tr>
				<td>row 1, cell 1</td>
				<td>row 1, cell 2</td>
			</tr>
			<tr>
				<td>row 2, cell 1</td>
				<td>row 2, cell 2</td>
			</tr>
		</table>
	</body>
</html>

    在这里插入图片描述
    HTML 表格和边框属性
    如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。

    使用边框属性来显示一个带有边框的表格：

    <table border="1">
    <tr>
        <td>Row 1, cell 1</td>
        <td>Row 1, cell 2</td>
    </tr>
</table>

    HTML 表格表头
    表格的表头使用 <th> 标签进行定义。

    大多数浏览器会把表头显示为粗体居中的文本：

    <table border="1">
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>

    2.1 课堂练习 : 构建一个简单的表格用于保存地区信息

    2017年北京人口数量排名情况
    在这里插入图片描述

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>HTML案例</title>
	</head>
	<body>
		<table border="1">
			<tr>
				<th>排名</th>
				<th>地区名称</th>
				<th>人口总数(万)</th>
			</tr>
			<tr>
				<td>1</td>
				<td>朝阳区</td>
				<td>395.5</td>
			</tr>
			<tr>
				<td>2</td>
				<td>海淀区</td>
				<td>369.4</td>
			</tr>
			<tr>
				<td>3</td>
				<td>丰台区</td>
				<td>232.4</td>
			</tr>
			<tr>
				<td>4</td>
				<td>昌平区</td>
				<td>196.3</td>
			</tr>
			<tr>
				<td>5</td>
				<td>大兴区</td>
				<td>156.2</td>
			</tr>
			<tr>
				<td>6</td>
				<td>西城区</td>
				<td>129.8</td>
			</tr>
		</table>
	</body>
</html>

    在这里插入图片描述

    2.2 跨行与 跨列 合并单元格问题

    2.2.1 跨行 : 在td中添加colspan属性即可

    在这里插入图片描述
    当N等于2的时候
    在这里插入图片描述
    代码实现 :

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>HTML案例</title>
	</head>
	<body>
		<table border="1">
			<tr>
				<td colspan="2">学生成绩</td>
			</tr>
			<tr>
				<td>语文</td>
				<td>98</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>95</td>
			</tr>
		</table>
	</body>
</html>

    在这里插入图片描述

    2.2.2 跨列 : 在td上添加rowspan是修改呢即可

    在这里插入图片描述
    案例效果
    在这里插入图片描述
    代码实现:

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>HTML案例</title>
	</head>
	<body>
		<table border="1">
			<tr>
				<td rowspan="2">张三</td>
				<td>语文</td>
				<td>98</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>95</td>
			</tr>
			<tr>
				<td rowspan="2">李四</td>
				<td>语文</td>
				<td>88</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>91</td>
			</tr>
		</table>
	</body>
</html>

    2.3 综合练习 : 表格的跨行与跨列

    在这里插入图片描述
    代码实现 :

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>HTML案例</title>
	</head>
	<body>
		<table border="1">
			<tr>
				<td colspan="3">学生成绩</td>
			</tr>
			<tr>
				<td rowspan="2">张三</td>
				<td>语文</td>
				<td>98</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>95</td>
			</tr>
			<tr>
				<td rowspan="2">李四</td>
				<td>语文</td>
				<td>88</td>
			</tr>
			<tr>
				<td>数学</td>
				<td>91</td>
			</tr>
		</table>
	</body>
</html>

    3 音频和视频

    3.1 video 与 audio 标签的使用

    学了这么多标签之后我们能不能用网页播放音频和视频呢?答案是可以的,我们可以使用 audio标签播放音频用video标签来播放视频,下面我们来看下语法:
    视频播放设置
    在这里插入图片描述
    音频播放设置
    在这里插入图片描述

    3.2 自制网页视频播放器

    在项目中创建audio文件夹,把文件放入audiao文件夹里面
    audio标签的属性 :
    在这里插入图片描述

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>HTML案例</title>
	</head>
	<body>
		<h1>音频播放器</h1>
		<audio src="audio/Scott%20Bradley%20-%20Pecos%20Pest.mp3" controls="controls">您的浏览器不支持音频播放</audio>
		<h1>视频播放器</h1>
		<video src="video/猫和老鼠杰瑞与金鱼.mp4" muted="muted" autoplay="autoplay" controls="controls"></video>
	</body>
</html>

    代码说明 :

    1. controls=“controls”
      代表播放器带有控制选项(音量控制,全屏控制等)
    2. muted=“muted” autoplay=“autoplay”
      muted表示静音 autoplay 表示自动播放
      注意 : 新版谷歌浏览器自动播放视频的前提必须是静音视频(可能是怕突然播放一个视频再把人家吓着了,还得赔钱)
      而且谷歌不是所有的mp4都支持所以此次我们选择的IE作为测试
      需要说明的是 : 网页播放媒体文件有很多文件类型限制,不是说你想播放啥就播放啥的,所以视频播放器该下还是得下;
      在这里插入图片描述

    4.网页布局

    我们已经学习了很多个标签,并且我们也能绘制出自己想要的一些内容,但是有一个问题也非常明显,就是网页内容变多之后网页会非常混乱,那么这个时候就需要网页布局来帮忙了,在学网页布局之前我们先来看一下网页布局的重要性:下面这个是京东的网站

    内容虽然多,但是很有条理,这个就是网页布局的功效;那么一般网页都怎么布局呢?
    在这里插入图片描述
    一般情况一个网页都会有上 左 下 右 中的布局风格,那么这种风格在HTML中对应如下属性:
    在这里插入图片描述
    代码编写 :

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>HTML案例</title>
	</head>
	<body>
		<header><h2>网页头部</h2> </header>
		<section><h2>网页主体部分1</h2></section>
		<section><h2>网页主体部分2</h2></section>
		<section><h2>网页主体部分3</h2></section>
		<section><h2>网页主体部分N</h2></section>
		<footer><h2>网页底部</h2></footer>
	</body>
</html>

    在这里插入图片描述

    5.总结

    在这里插入图片描述

景子墨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
利用表格建立如下网页（歌曲自选，至少选择3首歌曲）。
The_star_is_at的博客
06-21 944
var num1 = 0,num2 = 0,num3 = 0,num4 = 0; function a1() { num1++; document.getElementById("count1").innerHTML=num1; } function a2() { num2++; document.getElementById("count2").inn
视频播放+列表
11-03
视频播放+列表，html页面。
android 在线播放视频列表
03-21
listview播放视频和点击每一个适配进去全屏模式，listview播放视频和点击每一个适配进去全屏模式，全屏切换效果不错，适合初学者研究，感觉同学分享。 （静态图不能展示完整的效果，望谅解，感兴趣的朋友自行下载研究探讨）
安卓列表播放视频完整版
09-30
无bug完整版 首发
网页带列表视频播放器
10-25
绝对好用的网页带列表视屏播放器，只需要修改XML文件就可以，简单易用，但是此版不带广告。
HTML5+CSS3网页设计-第二章 列表表格与媒体元素.pptx
12-21
表格可以跨行（`colspan`属性）和跨列（`rowspan`属性），通过设置这两个属性可以实现单元格的合并，以适应复杂的数据布局。 **媒体元素(Media Elements)** HTML5引入了新的媒体元素`<audio>`和`<video>`，使得在...
Web-Design-Challenge:网页设计作业
03-29
3. 内容元素：HTML中的内容元素包括段落（`<p>`）、标题（`<h1>`至`<h6>`）、无序列表（`<ul>`和`<li>`）、有序列表（`<ol>`和`<li>`）、以及引用（`<blockquote>`）等。这些元素帮助组织和呈现文本内容。 4. 链接...
Gruppe-22
02-23
在`<body>`中，`<h1>`至`<h6>`定义了六级标题，`<p>`用于创建段落，`<a>`创建超链接，`<img>`插入图像，`<ul>`和`<ol>`创建无序列表和有序列表，`<li>`则是列表项。`<div>`是通用容器，常用于布局和分组其他元素。 ...
Web-Homework1:Web技术作业（HTML）
03-21
`<ul>`用于无序列表，`<ol>`用于有序列表，`<li>`则定义列表项。`<dl>`、`<dt>`和`<dd>`分别用于定义描述列表、描述术语和描述内容。 【HTML表单】 `<form>`元素用于创建表单，`<input>`定义各种类型的输入字段（如...
html基础-第一天
05-25
7. HTML与浏览器的关系：浏览器解析HTML代码并将其呈现为可视化的网页。不同的浏览器可能对某些HTML特性的支持程度不同，因此开发者需要关注跨浏览器兼容性问题。 通过“web第一天”这个压缩包，你将初步了解HTML的...
android_手机本地视频列表
01-21
获取本地视频使用GridView展示出来，使用自定义VideoView播放视频
JavaSE基础视频01
05-17
java学习视频，第一阶段学习视频，跟好的了解java编程
仿uc的视频播放效果
05-04
节操大神的视频播放控件，效果非常好，可以直接嵌套在recyclerview，listview，viewpager里面使用，也可以自定义界面
手机播放器（功能丰富，支持单文件循环播放或全部循环播放、后台播放）
08-23
本手机播放器功能丰富，支持单文件循环播放或全部循环播放、后台播放等。
手把手教你做视频播放器（五）－视频列表的横屏
不积跬步无以至千里
07-20 1万+
视频列表界面从竖屏转换成横屏时，界面的生命周期会发生变化。需要处理好这样的变化。
JavaSE
weixin_54157504的博客
09-05 9517
第一次发文章，哈哈哈哈哈
java se 05
热门推荐
哇哇哇js
03-17 1万+
1：方法重载(理解) (1)在同一个类中，方法名相同，参数列表不同的方法。 参数列表不同：个数不同，数据类型不同 与返回值类型无关。 (2)练习： A:判断哪些和给定的方法是方法重载 B:写4
SE01 Unit04 集合框架 、 集合操作 —— 线性表
KopWelkin的博客
06-12 8721
达内java学习day16 javaSE01 Unit04： 集合框架 、 集合操作 —— 线性表
se01普通线路和加密线的区别
最新发布
weixin_51378457的博客
03-15 3万+
数据传输速度不同：由于需要执行额外的加密操作，加密线路的数据传输速度通常会慢于普通线路。不过，在传输敏感数据时，使用加密线路可以更好的保护数据的完整性和机密性。安全等级不同：加密线路的安全等级比普通线路更高，可以提供更好的数据保护和防御能力。加密线路采用的是加密算法和密钥协商机制，而普通线路则不具备这些安全特性。综上所述，普通线路和加密线路是针对不同使用场景下数据安全需求而产生的两种不同的工作模式。成本不同：由于需要较高的安全性能和更复杂的设计，加密线路的成本通常会比普通线路高一些。
HTML5与CSS3：列表、表格与媒体元素解析
跨行和跨列的设置可以通过`<td>`（表格数据单元格）的`rowspan`和`colspan`属性实现。例如，`rowspan="2"`会让一个单元格占据两行，`colspan="3"`则会让它占据三列。 HTML5引入了新的媒体元素，如`<audio>`和`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值