html学习3

1. 添加图片

标签img

格式：<img src="" alt="" border="" width="" height="">

常用属性:

• src 设置图片路径

• alt 设置图片无法正常加载出现的字符

• border 设置图像边框（数字）

• width 设置图像的宽

• height 设置图像的高

宽和高如果只设置了一个，另一项就会等比例缩小

路径：

相对路径：与文件的地址有关。

绝对路径：与文件的地址无关。又分为本地地址（不推荐使用）和网络地址。

2. 添加视频

标签video

格式：

<video controls loop autoplay>

<source src="" type="">

</video>

属性：

controls 显示视频控件

source 添加视频

src 设置视频路径

loop：设置视频循环播放

autoplay：设置视频自动播放

type 设置视频类型 如：video/mp4

注：在选择添加视频时，要注意视频的格式与浏览器是否兼容

3. 添加音频

标签audio

格式：

<audio controls loop autoplay>

<source src="" type="">

</audio>

controls 显示控件

source 添加音频

src 设置音频路径

4. 内联框架

标签iframe

属性：

frameborder：设置内联框架的边框

width：设置内联框架的宽度

height：设置内联框架的高度

name：设置内联框架的名称，可以和a链接联合使用

<iframe src=" " frameborder="0" width=" " height=" " name="a"></iframe>

<a href=" " target="a">点击跳转到百度</a>

5. 列表

• 无序列表

格式：

<ul>

<li></li>

<li></li>

</ul>

ul的属性值：

type 可设置列表项前面的图标 例:circle空心圆 、square正方形。在默认状态下是黑色实心圆。

li是列表项，是块元素。

一般使用场景：导航栏

• 有序列表

格式：

<ol>

<li></li>

<li></li>

</ol>

ol的属性值:

type 可设置列表前的序号种类，例 1是数字、A是大写字母、a是小写字母。

start 可设置把第几个序号设为第一个，其值必须是数字。

一般使用场景：需要排序的位置

• 定义列表

格式：

<dl>

<dt></dt>

<dd></dd>

</dl>

dt是定义项

dd是解释项

形式上dt里面总写的内容，dd里的内容是对dt的解释说明

一般使用场景：网页底部区域导航

6. 列表

标签table

格式：

<table>

<caption>表格标题</caption>

<tr>

<th></th>

<th></th>

<th></th>

</tr>

</table>

一行三列

tr:行，块元素

td:单元格，行内块元素

caption：表格标题，默认居中显示

th:表头，可以理解为特殊的单元格，默认单元格居中，字体加粗

caption：表格标题

在html中通常用css来编辑table的属性,css要写在head标签内

<style>

table,td,th{ //选择table、th、td

border:1px solid red; //设置边框：1像素实线红色边框

border-collapse: collapse; //设置边框合并

border-spacing:0px; //设置边框与边框之间的距离

padding:20px; //设置单元格内容与边框之间的距离

}

td{

width:100px; //设置行宽

}

</style>

单元格的合并

使用td的属性

横向合并colspan

纵向合并rowspan

格式：

<tr>

<td colspan = "num"> </td>

</td>

<tr>

<td rowspan = "num"> </td>

</td>

行向合并：

思路：合并结束后该行应该还剩几个单元格，在要合并的单元格中添加colspan="num",

num是指该单元格水平方向要占有的单元格空间

列合并：

思路：合并之后该行下面行的单元格数量,在要合并的单元格添加rowspan=“num”，

num是指该单元格垂直方向要占有的单元格空间

整体思路:

合并的本质是减少单元格的数量，而tr和td是设置单元格的数量，合并之后，要删除部分td保证表格的平衡。而tr和td每个单元格在编程的意义都相同，故同一个tr下，删除任意一个td的意义都相同。