目录
无序列表：ul
type属性=>改变列表符号
type="" 默认黑色圆点
type="circle" 空心圆点
type="square" 方块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 无序列表：ul
type属性=>改变列表符号
type="" 默认黑色圆点
type="circle" 空心圆点
type="square" 方块
-->
<ul type="">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
<ul type="circle">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
<ul type="square">
<li>1111</li>
<li>2222</li>
<li>3333</li>
</ul>
</body>
</html>有序列表：ol
type属性 => 改变图标，
type="1" 默认数字
type="A" type="a" 字母列表
type="I" type="i" 罗马字母列表
start属性 => 从几开始
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 有序列表：ol
type属性 => 改变图标，
type="1" 默认数字
type="A" type="a" 字母列表
type="I" type="i" 罗马字母列表
start属性 => 从几开始
-->
<ol start="5">
<li>香蕉</li>
<li>苹果</li>
<li>李子</li>
</ol>
<ol type="A" start="3">
<li>香蕉</li>
<li>苹果</li>
<li>李子</li>
</ol>
<ol type="I">
<li>香蕉</li>
<li>苹果</li>
<li>李子</li>
</ol>
</body>
</html>定义列表：dl
定义项：dt
解释项：dd=>解释定义项=》相当于举例子在来解释定义项
使用场景：网页底部的区域的导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
定义列表
1.如何设置：dl
定义项：dt
解释项：dd=>解释定义项=》相当于举例子在来解释定义项
使用场景：网页底部的区域的导航
-->
<dl>
<dt>蔬菜</dt>
<dd>小白菜</dd>
<dd>西红柿</dd>
<dd>黄瓜</dd>
</dl>
</body>
</html>img标签
属性：
src：设置图片路径
路径的分类：
绝对路径：与文件的地址无关。本地地址(不要使用)、网址
相对路径：与文件的地址有关
alt:当图片不能正常显示时，alt值会出现
title:当鼠标悬停时，title里面的内容会出现
-->
<!-- <img src="C:/Users/11249/Desktop/预科班/预科补课/第三课/img/1.jpg" alt=""> -->
<!-- 图片引入路径：相对地址或者网址 -->
<!-- img是行内块标签=》可以设置宽高，如果只设置宽或高一个，那另外的一个就是等比例缩放
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>img</title>
</head>
<body>
<!--
1.img?=>添加图片
2.属性：
src：设置图片路径
路径的分类：
绝对路径：与文件的地址无关。本地地址(不要使用)、网址
相对路径：与文件的地址有关
alt:当图片不能正常显示时，alt值会出现
title:当鼠标悬停时，title里面的内容会出现
-->
<!-- <img src="C:/Users/11249/Desktop/预科班/预科补课/第三课/img/1.jpg" alt=""> -->
<!-- 图片引入路径：相对地址或者网址 -->
<!-- img是行内块标签=》可以设置宽高，如果只设置宽或高一个，那另外的一个就是等比例缩放 -->
<img src="./img/1.jpg" alt="" width="200px" title="这是一只猫">
<img src="./img/1.jpg" alt="" width="200px" title="这是一只猫">
<img src="https://img-blog.csdnimg.cn/1a1575d9e6cc4cb4b0fa50cf723d3743.gif" alt="">
<!-- <img src="./img/1.png" alt="地址错误" > -->
<!-- 图片的分类
JPEG：支持的颜色表较多，图片可以压缩，但是不支持透明=》保存照片等颜色丰富的图片
GIF：支持颜色较少，支持简单透明和动图=》图片颜色单一或动图
PNG：支持颜色多，支持复杂透明，但不支持动图=》用来显示颜色复杂的透明图片，多用于网页
webp：谷歌推出专门用来表示网页的一种格式，具备其他格式的所有优点，文件格式小，但是兼容性不好
base64：将图片使用base64编码，图片转换成字符，通过字符形式来引入=》需要和网页一起加载的图片才会使用base64
图片使用原则：效果不一致，使用效果好的，效果一致，使用内存小的
-->
</body>
</html>
内联框架：iframe标签
1.如何设置内联框架：iframe标签：不经常使用，不会被浏览器收录
属性：
frameborder：设置内联框架的边框
width：设置内联框架的宽度
height：设置内联框架的高度
name：设置内联框架的名称，可以和a链接联合使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内联框架</title>
</head>
<body>
<!--
1.如何设置内联框架：iframe标签：不经常使用，不会被浏览器收录
属性：
frameborder：设置内联框架的边框
width：设置内联框架的宽度
height：设置内联框架的高度
name：设置内联框架的名称，可以和a链接联合使用
-->
<iframe src="./01img.html" frameborder="0" width="400px" height="400px" name="frist"></iframe>
<a href="./02音视频.html" target="frist">点击跳转到百度</a>
</body>
</html>表格
<!--
1.如何设置表格：table
tr:行，块元素
td:单元格，行内块元素
caption：表格标题，默认居中显示
th:表头，可以理解为特殊的单元格，默认单元格居中，字体加粗
-->
<!-- 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是指该单元格垂直方向要占有的单元格空间
注意：行合并是向右合并，列合并时向下合并
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
<style>
table,td,th{/* 选择到table、th、td */
/* 设置边框：1像素实线红色边框 */
border: 1px solid red;
/* 设置边框合并 */
border-collapse: collapse;
/* 设置边框与边框之间的距离，与cellspacing是一样的效果 */
border-spacing: 0px;
/* border-collapse与 border-spacing:一起使用border-spacing失效 */
/* 设置单元格内容与边框之间的距离，与cellpadding效果一致 */
padding: 20px;
}
td{
/* td是行内块标签 */
width: 100px;
}
</style>
</head>
<body>
<table>
<caption>表格标题</caption>
<tr>
<th>第1列</th>
<th>第2列</th>
<th>第3列</th>
</tr>
<tr>
<td colspan="3">第1单元格</td>
<!-- <td>第2单元格</td> -->
<!-- <td>第3单元格</td> -->
</tr>
<tr>
<td rowspan="2">第1单元格</td>
<td>第2单元格</td>
<td>第3单元格</td>
</tr>
<tr>
<td>第1单元格</td>
<!-- <td>第2单元格</td> -->
<td>第3单元格</td>
</tr>
</table>
</body>
</html>
135
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
