HTML学习日记（2）-HTML基础列表、表格、媒体元素、html5元素

本文链接：https://blog.youkuaiyun.com/qq_45774939/article/details/118245394

这篇博客详细介绍了HTML的基础知识，包括列表（无序列表、有序列表、定义列表）、表格（物理表格、逻辑表格、跨列跨行）和HTML5的媒体元素（视频、音频标签）。此外，还讲解了网页布局，如使用div和HTML5标签进行布局，以及内联框架和块元素、内联元素的区别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

1. 列表

在网页的布局中，经常需要使用列表对数据进行展示。
通过列表展示的数据更有结果性，条理性，能够使用户更容易发现自己关注的信息。

列表的分类：

无序列表
有序列表
定义列表

无序列表

使用无序列表时，列表中每一项是一种并列，没有顺序的含义。

<!--一个无序列表-->
<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  ...
  <li>列表项n</li>
</ul>

<ul>
  <a><img /></a>   <!--错误的写法，ul的子标签只能是li-->
  <li> <!--合法的写法-->
  	<a>
      	<img />
      </a>
  </li>
</ul>

注意：无序列表<ul>的直接子级标签只能是<li>。在<li>之内才可以根据自己的需要编写其他的标签。

  <ul>
  	<p></p>  <!--这是一种错误的写法，p标签不是ul允许的直接子元素。-->
  	<li>
  		<p></p>  <!--这种写法是合法的-->
  	</li>
  </ul>

无序列表的每个一个列表项在默认情况下都有一个项目符号（默认实心圆）。通过制定type属性可以修改项目符号

type属性允许的值：

disc: 默认值，实心圆
circle: 空心圆
square：方块

默认支持的项目符号并不美观，在大多数情况，都需要将项目符号去除（通过css实现）。

有序列表

与无序列表相似，有序列表强调的语义是一种顺序。

  <!--一个有序列表-->
  <ol>
  	<li>列表项1</li>
  	<li>列表项2</li>
  	...
  	<li>列表项n</li>
  </ol>

有序列表同样也可以通过type属性设置项目符号
type属性允许的值：

1 :数字1，默认值。以阿拉伯数字作为项目符号
a ：小写英文字母。
A ：大写的英文字母
i ：小写的罗马数字
I ：大写的罗马数字

定义列表

定义列表由标题和描述共同组成。
定义列表出现的场合通常是图文并茂的情况，或者友情链接等。

  <dl>
  	<dt>标题</dt>
  	<dd>描述</dd>
  </dl>

2. 表格

网页中的表格和excel中的表格相似。网页中的表格由行和列的交汇处形成了单元格。
通过表格展示的数据更具有结构性和条理性。

网页中的表格有两种写法：

物理表格
逻辑表格

在后台管理系统中，通常使用表格对后台数据进行展示以及维护。

一个多行的表格，每行中列的个数应该是相同的。否则表格会出现参差不齐的效果。

表格<table>具有的属性：

border: 表格的边框。值为数字，值越大，边框越粗
width: 表格的宽度
align: 表格水平对齐方式，可选值（ left,center,right）
默认值为left，表格靠左显示

物理表格

物理表格就是由行和列组成。
一个表格由<table></table>标签标示。

  <!--表格-->
  <table>
  
  	<!--table row:  行-->
  	<tr>
  		
  		<!--td:列-->
  		<td>1</td>
  		<td>2</td>
  		<td>n</td>
  	</tr>
  	
  	<!--第二行-->
  	<tr>
  		
  		<!--td:列-->
  		<td>1</td>
  		<td>2</td>
  		<td>n</td>
  	</tr>
  </table>

逻辑表格

逻辑表格将一个表格分为了三个部分：表头thead，表体tbody，表底部tfoot。

逻辑表格是以后使用表格中通常使用的方式。

  <table>
  	<!--表头-->
  	<thead>
  		<tr>
  			<th>1</th>  <!--th标签中的文本会加粗显示，充当的也是列的作用-->
  			<th>2</th>
  			<th>3</th>
  		</tr>
  	</thead>
  	
  	<!--表体-->
  	<tbody>
  		<tr>
  			<td>1</td>
  			<td>2</td>
  			<td>3</td>
  		</tr>
  	</tbody>
  	
  	<!--表底部-->
  	<tfoot>
  		<tr>
  			<td>1</td>
  			<td>2</td>
  			<td>3</td>
  		</tr>
  	</tfoot>
  </table>

跨列

在同一行中，将多个单元格合并为一个单元格时，需要用到跨列。跨列是横线，从左往右合并。

跨列通过cospan属性实现，跨列是发生在单元格td之上的行为。需要保证跨列之前列的个数和跨列之后
列的个数是相同的，不然表格会出现不同行的单元格参差不齐的问题。

  <!--
  	如下代码：第一个列正常显示，第二个列横向向右合并了4个列，因此整个行占用了5个列。
  -->
  <tr>
  	<td>统计：</td>
  	<td colspan="4">2人</td>
  </tr>

跨行

跨行发生在相邻的下一行的单元格中。跨行会使单元格高度发生变化。相当于纵向合并单元格。与跨列相同，跨行之后的另一行的列的数量
也必须和其他行的列的数量相同。否则出现层次不齐的问题。

跨行通过rowspan属性实现，跨行同样也发生在列之上。

行和单元格支持的属性

需要单元格中的文本改变对齐方式时，可以通过align属性实现。

在tr之上写align:整行单元格中的文本水平对齐方式
在td之上写align:当前单元格的文本水平对齐方式

当需要为行指定高度时，可以通过height属性实现。

设置文本在单元格中的垂直对齐方向： valign。可选值（top 上对齐，middle垂直居中，bottom 底部对齐）。

3. HTML5媒体元素

在HTML5中，新增浏览器识别媒体元素的标签。媒体元素指视频、音频。以前在网页中播放视频可以通过FLASH实现、或者通过第三方的专用播放器同样可以播放视频。

现代浏览器逐渐开始淘汰FLASH。谷歌浏览器已经发布声明，在2020年会全面禁用浏览器中的FLASH插件。以后在网页中播放视频可以通过HTML5中的媒体元素实现。

HTML5中新增了视频播放标签和音频播放标签。

视频播放标签

通过video标签在网页中播放一个本地的或网络的视频。不同的浏览器对视频的格式兼容性不同。因此为了能够使视频在多数的的浏览器中都能够正常播放，因此一个视频通常需要提供
两个文本的格式。通常是webm和mp4.

  <video 属性>
  	<source src="视频的路径" type="视频的格式" />
      您的浏览器版本过低，请升级后获得更好的体验
  </video>

video的属性：

controls: 控制面板，默认不显示
autoplay: 打开页面后，自动播放视频。注意：在现代浏览器中，浏览器为了安全问题，自动播放的视频必须设置静音。否则无法自动播放
muted: 视频静音播放
preload: 打开页面就立刻开始缓存视频，和autoplay有矛盾。
loop：视频循环播放
width: 视频的宽度和高度通常在css中设置。不会在属性中设置
height：高度

音频播放标签

通过HTML5新增的audio标签可以实现在网页中播放音频的功能。

  <audio 属性>
  	<source src="音频的路径" type="音频的格式" />
  	您的浏览器版本过低，请升级后获得更好的体验
  </audio>

audio的属性：

controls: 控制面板，默认不显示
autoplay: 打开页面后，自动播放
muted: 静音播放
preload: 打开页面就立刻开始缓存，和autoplay有矛盾。
loop：循环播放

4. 网页的布局

在开发一个网页之初，首先应该考虑的是对这个网页如何布局。在HTML5新增的布局标签出现之前，对页面布局重要通过div标签+css 样式堆叠表实现。
通过div + css的方式实现页面布局的语义不不够明显的。

使用div对网页布局

  <!--范围标签-->
  <div></div>

div标签没有特殊的默认样式，其是一个块级元素。比如标题标签具有默认样式（字体加粗，上下具有间距），段落标签也有默认样式（每个段落之间存在间距）。
在编写网页时，div的样式需要程序手动的去指定。通过div作为某个逻辑区域的父级容器标签。为这个父级容器设置我们自己定义的语义。

结合PPT中的网易邮箱登录，以前可以用如下代码的方式对页面布局：


  <!--使用div对网页进行布局-->
  <body>
  	<!--手动的指定，第一个div是网页的头部-->
  	<div id="header"></div>
  	
  	<!--网页的主体-->
  	<div id="wrap"></div>
  	
  	<!--网页的底部-->
  	<div id="footer"></div>
  </body>

如上，每个div都是一个范围标签。在标准的html中，div没有特殊的语义。利用div对页面布局时，div的语义由程序员自己指定。

使用HTML5标签对页面布局

在HTML5中新增了用于对页面布局的标签，这些标签都具有自己的语义。本质上和div标签没有什么不同，唯一的区别在于其从语义层面上比div更明确。
一个网页中要使用html5标签对页面布局，应该在页面的html标签之上添加：

  <!--页面支持html5标签-->
  <!DOCTYPE html>

元素名	描述
header	某个逻辑区域的头部
footer	某个逻辑区域的底部
section	某个逻辑区域
article	大逻辑区域中的小区域
aside	侧边栏
nav	某个逻辑区域的导航部分

通常情况，能够使用标题标签的地方就可以使用section。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Nlv8xPdW-1624678901752)(F:\大数据班\html\html_day2\网页的布局.png)]

  <body>
  	<!--网页的头部-->
  	<header></header>
  	
  	<!--网页的某个逻辑区域-->
  	<section></section>
  	
  	<!--网页的底部-->
  	<footer></footer>
  </body>

5. 内联框架

在一个页面中，通过内联框架嵌入另外一个完整的页面。
比如一个网页中需要投入广告，广告页面和内容页是分开。在内容中通过内联框架引入广告页。

  <!--
  	width : 内联框架的显示宽度
  	scrolling： 是否允许滚动条，通常为no
  	height： 内联框架的高度
  	frameborder： 内联框架的边框，通常为0
  	src： 要嵌入的网页的地址
  -->
  <iframe width="420" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="//i.tianqi.com/index.php?c=code&id=12&icon=1&num=5&site=12"></iframe>

6. 块元素和内联元素

浏览器在解析html标签时，会按照标签的类型进行相应的渲染。最终呈现用户看到的页面效果。html中的标签默认分为两类，一类为块元素，一类为内联元素。

块元素的特点
在网页中独占一行显示，并且能够设置其宽度和高度以及盒子模型（css讲解）。
块元素的宽度默认为父级元素的100%
块元素的display:block
现目前已知的块元素：
标题标签: h1~h6
段落标签： p
列表： ul,ol,dl,li,dt,dd
表格： table
布局标签： div,header,section,footer,article,nav,aside
内联元素的特点
内联元素默认情况下按照从左往右的方向依次排列，直到父级容器的宽度不足时才会自动换行。
内联元素的宽度默认为 auto * auto。意味着内联元素的宽度和高度由内容绝定。默认情况下不能够手动设置内联元素的宽度和高度。
内联元素的display:inline
已知的内联元素：
字体样式标签： em,strong
超链接： a
范围标签：span
表格： table
布局标签： div,header,section,footer,article,nav,aside
内联元素的特点
内联元素默认情况下按照从左往右的方向依次排列，直到父级容器的宽度不足时才会自动换行。
内联元素的宽度默认为 auto * auto。意味着内联元素的宽度和高度由内容绝定。默认情况下不能够手动设置内联元素的宽度和高度。
内联元素的display:inline
已知的内联元素：
字体样式标签： em,strong
超链接： a
范围标签：span