Html5知识点总结-02_html内包裹单元格宽度各占代码-CSDN博客

本文链接：https://blog.csdn.net/weixin_46798583/article/details/123637576

本文详细介绍了HTML5中列表（无序列表、有序列表、定义列表）的特性和用法，包括type属性、表格的基本语法、table属性、td属性，以及视频和音频元素的使用。此外，还提及了框架和iframe标签在页面间跳转的应用。内容涵盖了HTML5列表的样式控制、表格布局以及多媒体元素的交互功能。

摘要由CSDN通过智能技术生成

无序列表

<ul>
      <li>女孩</li>
      <li>自拍</li>
      <li>出游</li>
      <li>退烧</li>
 </ul>

type 属性规定列表的项目符号的类型

值：
disc 	默认值。实心圆。
circle 	空心圆。
square 	实心方块。
	示例：

	<ul type="square">
		<li>Coffee</li>
		<li>Tea</li>
		<li>Milk</li>
	</ul>

无序列表的特性

1.没有顺序，每个<li>标签独占一行（块元素）
2.默认<li>标签项前面有个实心小圆点
3.一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模等

有序列表

<ol>
  <li>女孩</li>
  <li>自拍</li>
  <li>出游</li>
  <li>退烧</li>
</ol>

1.（h5 中的属性）reversed 属性是逻辑属性。当使用该属性时，它规定列表属性为降序 (9, 8, 7…)，而不是升序 (1, 2, 3…)
2.start 属性规定有序列表的开始点。值：number
3.type 属性规定有序列表的项目符号的类型。
同时有type 和 start属性以type形式显示
值：1 A a I i

有序列表的特性

1.有顺序，每个<li>标签独占一行（块元素）
2.默认<li>标签项前面有顺序标记
3.一般用于排序类型的列表，如试卷、问卷选项等

定义列表

<dl>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>桃子</dd>
    <dd>李子</dd>
</dl>

定义列表的特性

1.没有顺序，每个<dt>标签、<dd>标签独占一行（块元素）
2.默认没有标记
3.一般用于一个标题下有一个或多个列表项的情况

列表对比

在这里插入图片描述

表格的基本语法

<table>//表格标签
    <tr>行标签
         <td>第1个单元格的内容</td>单元格标签
         <td>第2个单元格的内容</td>
        ……
    </tr>
    <tr>
         <td>第1个单元格的内容</td>
         <td>第2个单元格的内容</td>
        ……
    </tr>
</table>

table 属性

1.border 属性规定规定围绕表格的边框的宽度。

border 属性会为每个单元格应用边框，并用边框围绕表格。如果 border 属性的值发生改变，那么只有表格周围边框的尺寸会发生变化。表格内部的边框则是 1 像素宽。

语法：
<body border="value">
属性值
pixels 	规定表格边框宽度。
示例：
<table border="8">

2.width height 属性规定表格的宽度和高度。

如果没有设置 width 属性，表格会占用需要的空间来显示表格数据。

语法：
	<body width="value" height="value">
	值：
	pixels 	设置以像素计的宽度（例子：width="50"）。
	% 	设置以包含元素的百分比计的宽度（例子：width="50%"）。
示例：
	<table border="8" width="400" height="300">

3.align=“center” 定义表格的对齐方式

值 left center right

4.cellpadding 属性规定单元边沿与其内容之间的空白。

	语法：
	<body cellpadding="value">
	值：
	pixels 	规定单元边沿与其内容之间的空白。
示例：
	<table border="1" cellpadding="10">

5.cellspacing 属性规定单元格之间的空间。

	语法：
	<body cellspacing="value">
	值：
	pixels 	规定单元之间的空间
示例：
<table border="1" cellspacing="10">

表格的跨行和跨列

……
<tr>
        <td colspan="3">学生成绩</td>//跨列colspan
</tr>
<tr>
        <td rowspan="2">张三</td>//跨行rowspan
        <td>语文</td>
        <td>98</td>
</tr>
……

td 属性

可设置第一个单元格的宽和高来控制这个单元个所在的这一行的高和这一列的宽

1.width 属性规定表格单元格的宽度。

语法：

		<td width="value">

值：
	pixels 	以像素计的宽度值（比如 "100px"）。
	percent 	以包含元素百分比计的宽度值（比如 "20%"）。

2.height 属性规定表格单元格的高度。

通常，单元格占用的空间就是它显示内容需要的空间。
height 属性用于为单元格设置预定义的高度。
语法：

		<td height="value">

值：
	pixels 	以像素计的高度值（比如 "100px"）。
	percent 	以包含元素百分比计的高度值（比如 "20%"）。

示例：

	<td height="50px" width ="500px">January</td>

视频元素

<video src="视频路径"  controls（提供播放、暂停和音量的控件）></video>

音频标签

<audio src="资源路径/音频名称">...</audio>

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。

框架framset框架标签

<html>
<!--cols代表column列 a.html占用浏览器窗口的百分之25，
b.html占用浏览器窗口的百分之50，
c.html占用浏览器窗口的百分之25-->
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
</frameset>
</html>

< iframe>属性（实现页面间的相互跳转）

在被打开的框架上加name属性
<iframe name="mainFrame" src="subframe/the_second.html" />
在超链接上设置target目标窗口属性为希望显示的框架窗口名
<a href="subframe/the_second.html " target="mainFrame">下边显示第二页</a>