列表(双标签)
作用:布局内容排列整齐的区域
列表分类:无序列表、有序列表、定义列表
无序列表:
作用:布局排列整齐的不需要规定顺序的区域
标签:<ul>嵌套<li>,<ul>是无序列表,<li>列表条目
属性:type="square"实心方块 type="disc"实心圆 type="circle"空心圆
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无序列表</title>
</head>
<body>
<ul type="square">
<li type="disc">
<a href="../表格.html" target="_blank">基础信息</a>
</li>
<li type="circle">
<a href="./522401200202258666.jpg" target="_blank">个人照片</a>
</li>
<li>列表条目3</li>
<li>列表条目4</li>
</ul>
</body>
</html>
浏览器效果:
有序列表:
作用:布局排列整齐的需要规定顺序的区域
标签:<ol>嵌套<li>,<ol>是有序列表,<li>是列表条目
属性:type="1/A/a/I/i"有五种不同的序列表示数字
注意:<ol>标签里只可以嵌套<li>标签
<li>标签可以包含其他的任何标签
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有序列表</title>
</head>
<body>
<ol type="1">
<li>步骤1</li>
<li>步骤2</li>
<li>步骤3</li>
</ol>
<ol type="I">
<li>步骤1</li>
<li>步骤2</li>
<li>步骤3</li>
</ol>
<ol type="A">
<li>步骤1</li>
<li>步骤2</li>
<li>步骤3</li>
</ol>
</body>
</html>
浏览器效果:
定义列表:
标签:<dl>嵌套<dt><dd>,<dl>是定义列表,<dt>是定义列表的标题,<dd>是定义列表的叙述或详情
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定义标签</title>
</head>
<body>
<dl>
<dt>服务中心</dt>
<dd>申请售后</dd>
<dd>售后政策</dd>
<dd>维修服务价格</dd>
<dt>线下门店</dt>
<dd>小米之家</dd>
<dd>服务网点</dd>
<dt>关于小米</dt>
<dd>了解小米</dd>
<dd>加入小米</dd>
<dt>关于我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
</dl>
</body>
</html>
浏览器效果:
视频标签:
标签:<video>(双标签)
属性:src="视频的URL", controls表示控制面板,使播放条显示出来。
注意:如果没有controls的话,浏览器是没有视频出现的。
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title视频标签</title>
</head>
<body>
<video src="./张学友 - 听海 (活出生命Live演唱会).mp4" controls></video>
</body>
</html>
浏览器效果:
音频标签:
标签:<audio>
属性:src="音频的URL",controls控制面板,loop循环播放
案例::
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音乐</title>
</head>
<body>
<!-- controls表示控制面板,使播放条显示出来 -->
<!-- 在html中属性名和属性值一样时,用一个单纯表示就可以 -->
<audio src="../RedXxxxxx - 上海.春.mp3" controls loop></audio>
</body>
</html>
浏览器效果:
iframe内联标签:
标签:<iframe>也可以理解为内置浏览器
作用:实现内部跳转页面
属性:name="命名" src="URL" frameborder="数字"表示框线
iframe和<a>标签使用时:<a>的属性target的内容和iframe的name的内容相同时,可以实现一个页面跳转
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内联标签</title>
</head>
<body>
<!-- 也可以理解为内置浏览器 -->
<table width="100%" align="center" width="100%" height="600">
<tr bgcolor="pink">
<td width="20%" height="100%">
<a href="./无序列表.html" target="iframe">1.无序列表</a><br>
<a href="./下拉菜单.html" target="iframe">2.下拉菜单</a><br>
<a href="./字体实体.html" target="iframe">3.字体实体</a><br>
<a href="./图片测试.html" target="iframe">4.图片测试</a>
<a href="./input标签使用.html" target="iframe">5.input标签使用</a>
<a href="./按钮-botton.html" target="iframe">6.按钮-botton</a>
</td>
<td>
<iframe src="../2023080910113-刘正月/表单测试.html" frameborder="0" width="100%" name="iframe" height="100%"></iframe>
浏览器效果: