添加图片
标签img
格式:<img src="" alt="" border="" width="" height="">
常用属性:
src 设置图片路径
alt 设置图片无法正常加载出现的字符
border 设置图像边框(数字)
width 设置图像的宽
height 设置图像的高
宽和高如果只设置了一个,另一项就会等比例缩小
路径:
相对路径:与文件的地址有关。
绝对路径:与文件的地址无关。又分为本地地址(不推荐使用)和网络地址。
添加视频
标签video
格式:
<video controls loop autoplay>
<source src="" type="">
</video>
属性:
controls 显示视频控件
source 添加视频
src 设置视频路径
loop:设置视频循环播放
autoplay:设置视频自动播放
type 设置视频类型 如:video/mp4
注:在选择添加视频时,要注意视频的格式与浏览器是否兼容
添加音频
标签audio
格式:
<audio controls loop autoplay>
<source src="" type="">
</audio>
controls 显示控件
source 添加音频
src 设置音频路径
内联框架
标签iframe
属性:
frameborder:设置内联框架的边框
width:设置内联框架的宽度
height:设置内联框架的高度
name:设置内联框架的名称,可以和a链接联合使用
<iframe src=" " frameborder="0" width=" " height=" " name="a"></iframe>
<a href=" " target="a">点击跳转到百度</a>
列表
无序列表
格式:
<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的解释说明
一般使用场景:网页底部区域导航
列表
标签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的意义都相同。