本文介绍了HTML中的三种列表类型（有序、无序和自定义列表）及其属性用法，展示了如何创建和定制列表。接着，讲解了HTML框架（iframe）的概念，包括src属性、高度宽度设置以及与a标签的配合使用。此外，还探讨了块级元素div和内联元素span的作用和应用场景，以及字符实体在编码特殊符号中的应用。
1.html--列表
ol---有序列表；ul---无序列表；dl---自定义列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 列表</title>
</head>
<body>
<h1>HTML 列表</h1>
<h2>1.HTML有序列表--ol</h2>
<h3>列表中的每一项都是有序号排列的</h3>
<h4>列表中的每一项---li标记</h4>
<h4>使用type属性设置每一项前面的顺序号 A a I i 1</h4>
<h4>使用start属性设置第一项顺序号</h4>
<ol type="I" start="3">
<li>姓名</li>
<li>年龄</li>
<li>地址</li>
</ol>
<h2>2.HTML无序列表--ul</h2>
<h3>列表中的每一项都是没有序号排列的</h3>
<h4>列表中的每一项---li标记</h4>
<h4>使用type属性设置每一项前面的标记号disc circle square</h4>
<ul type="square">
<li>姓名</li>
<li>年龄</li>
<li>地址</li>
</ul>
<h2>3.HTML自定义列表--dl</h2>
<h3>dt---主项目</h3>
<h4>dd---主项目中子项目</h4>
<h4>dt与dd之间没有包含关系</h4>
<dl>
<dt>家用电器</dt>
<dd>空调</dd>
<dd>电视</dd>
<dd>洗衣机</dd>
</dl>
<h1>注意：可能会出现嵌套使用</h1>
<ol>
<li>姓名</li>
<li>年龄</li>
<li>地址</li>
<ul>
<li>姓名</li>
<li>年龄</li>
<li>地址</li>
<dl>
<dt>家用电器</dt>
<dd>空调</dd>
<dd>电视</dd>
<dd>洗衣机</dd>
</dl>
</ul>
</ol>
<h1>HTML中的列表通常会被用来制作菜单，导航栏.....</h1>
</body>
</html>
2.框架---iframe
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML框架</title>
</head>
<body>
<h1>HTML框架--在同一个浏览器窗口中显示不止一个html页面。</h1>
<h1>frame语法:iframe src="URL" /iframe</h1>
<h2>src--网页地址[绝对 相对 网络]</h2>
<h2>height 和 width 属性用来定义iframe标签的高度与宽度。</h2>
<h2>frameborder--是否显示边框["0" 移除iframe的边框]</h2>
<iframe src="F:\20230522\html\20230523HTML(1)\code\biaoti.html" height="300px" width="400px" frameborder="0"></iframe>
<iframe src="HTML 列表.html" height="300px" width="400px" frameborder="20"></iframe>
<iframe src="https://www.baidu.com/home" height="300px" width="400px"></iframe>
<h1>使用iframe来显示目标链接页面</h1>
<h2>a标记，target属性为iframe元素的name属性值</h2>
<h2>iframe标记，name属性为a元素的target属性值</h2>
<h2><a href="http://www.baidu.com/home" target="myiframe">百度</a></h2>
<h2><a href="F:\20230522\html\20230523HTML(1)\code\biaoti.html" target="myiframe">biaoti</a></h2>
<h2><a href="HTML 列表.html" target="myiframe">HTML 列表</a></h2>
<iframe src="http://www.baidu.com/home" height="500px" width="80%" name="myiframe" frameborder="0"></iframe>
</body>
</html>
3.div和span
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML-div和span</title>
</head>
<body>
<h1>HTML-div和span--</h1>
<h2>块级元素---在浏览器显示时，通常会以新行来开始（和结束）</h2>
<h2>实例: h1, p, ul, table</h2>
<h1>我是h1，是一个块级元素，我的旁边不允许有其他元素</h1><a href="">h1旁边的a标记</a>
<h2>内联元素[行内元素]---在浏览器显示时通常不会以新行开始。</h2>
<h2>实例: b, td, a, img</h2>
<a href="">我是a标记,我的旁边允许有其他元素</a>
<img src="tupian/tupian3.PNG">
<h2>div -- 一个块级元素，没有特定的含义，网页中的一个空白区域</h2>
<h2>div可以包含其他的html元素在内，形成独立的一块</h2>
<h2>可以使用css样式设置让他显现</h2>
<div style="height: 200px; width: 200px; background-color: red;">
块级元素
<p>没有特定的含义</p>
<h2>网页中的一个空白区域</h2>
<a href="">包含其他的html元素在内</a>
</div>
<div style="height: 200px; width: 200px; background-color: blue;">
块级元素
<p>没有特定的含义</p>
<h2>网页中的一个空白区域</h2>
<a href="">包含其他的html元素在内</a>
</div>
<h2>span -- 一个内联元素，没有特定的含义，可用作文本的容器，方便控制一段文字中的个别文本</h2>
<p>我的母亲有一双<span style="color: blue; ">蓝色</span>的眼睛，我的父亲有一双<span style="color: red;">红色</span>的眼睛</p>
</body>
</html>
4.实体字符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 字符实体</title>
</head>
<body>
<h1>HTML字符实体</h1>
<h2>用来替换特殊符号的字符【将特殊符号编码成一串字符数据】</h2>
<table border="1px" width="400px">
<tr>
<td>空格</td><td>空 格</td>
<td>小于号</td><td><</td>
<td>大于号</td><td>></td>
</tr>
<tr>
<td>和号</td><td>&</td>
<td>引号</td><td>"</td>
<td>撇号</td><td>' (IE不支持)</td>
</tr>
<tr>
<td>镑</td><td>£</td>
<td>人民币/日元</td><td>¥</td>
<td>欧元</td><td>€</td>
</tr>
<tr>
<td>版权</td><td>©</td>
<td>注册商标</td><td>®</td>
<td>商标</td><td>™</td>
</tr>
<tr>
<td>乘号</td><td>×</td>
<td>除号</td><td>÷</td>
<td></td><td></td>
</tr>
</table>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
