一:img:
1.img?=>添加图片
2.属性:
src:设置图片路径
路径的分类:
绝对路径:与文件的地址无关。本地地址(不要使用)、网址
相对路径:与文件的地址有关
alt:当图片不能正常显示时,alt值会出现
title:当鼠标悬停时,title里面的内容会出现
比如:
图片引入路径:相对地址或者网址
img是行内块标签=》可以设置宽高,如果只设置宽或高一个,那另外的一个就是等比例缩放
图片的分类**:**
JPEG:支持的颜色表较多,图片可以压缩,但是不支持透明=》保存照片等颜色丰富的图片
GIF:支持颜色较少,支持简单透明和动图=》图片颜色单一或动图
PNG:支持颜色多,支持复杂透明,但不支持动图=》用来显示颜色复杂的透明图片,多用于网页
webp:谷歌推出专门用来表示网页的一种格式,具备其他格式的所有优点,文件格式小,但是兼容性不好
base64:将图片使用base64编码,图片转换成字符,通过字符形式来引入=》需要和网页一起加载的图片才会使用base64
图片使用原则:效果不一致,使用效果好的,效果一致,使用内存小的
二:视频
1.如何设置?=》video
属性:
src:设置视频的路径
controls:显示控件
loop:设置视频循环播放
autoplay:设置视频自动播放
-->
兼容性:
source:添加视频
音频:
1.如何设置?=》audio
属性:
src:设置视频的路径
controls:显示控件
loop:设置视频循环播放
autoplay:设置视频自动播放
兼容性:
source:添加视频
三:内联框架
1.如何设置内联框架:iframe标签:不经常使用,不会被浏览器收录
属性:
frameborder:设置内联框架的边框
width:设置内联框架的宽度
height:设置内联框架的高度
name:设置内联框架的名称,可以和a链接联合使用
四:列表
无序列表:
1、如何设置:ul
列表项:li,块元素
2.属性
type:设置列表项图标
属性值:circle:空心圆
square:实心正方形
默认是实心圆
使用场景:导航栏
有序列表
1、如何设置:ol
列表项:li,块元素
2.属性
type:设置列表项图标
start:设置列表项从几开始
使用场景:需要排序的时候
定义列表
1.如何设置:dl
定义项:dt
解释项:dd=>解释定义项=》相当于举例子在来解释定义项
使用场景:网页底部的区域的导航
五:表格
设置要素:
要点:
<!-- 2.属性
border:设置单元格和表格边框,但是不推荐使用,在css中设置
cellspacing:设置单元格与单元格边框之间的距离,不推荐使用
cellpadding:设置单元格内容与单元格边框之间的距离,不推荐使用-->
<!-- 3.css设置的属性
/* 设置边框合并 */
border-collapse: collapse;
/* 设置边框与边框之间的距离,与cellspacing是一样的效果 */
border-spacing: 0px;
/* border-collapse与 border-spacing:一起使用border-spacing失效 */
/* 设置单元格内容与边框之间的距离,与cellpadding效果一致 */
padding: 20px-->
<!-- 4.单元格合并
①行向合并:colspan属性来设置=》影响所在行的单元格数量
思路:合并结束后该行应该还剩几个单元格,在要合并的单元格中添加colspan="num",
num是指该单元格水平方向要占有的单元格空间
②列合并:rowspan属性来设置=》不影响所在行的单元格数量,影响是垂直方向的单元格数量
思路:合并之后该行下面行的单元格数量,在要合并的单元格添加rowspan=“num”,
num是指该单元格垂直方向要占有的单元格空间
注意:行合并是向右合并,列合并时向下合并
-->
<!-- <table border="1" cellspacing="0" cellpadding="20px" > -->