HTML列表、图⽚、超链接Web前端基础 学习笔记
⼀、列表标签
1.1、⽆需列表标签（最常⽤，可⽤图标替代）
语法：
<h3>⽆序列表标签语法：</h3>
<ul type="">
<li>ul 的 type 属性, 默认 disc</li>
</ul>
<ul type="circle">
<li>ul 的 type 属性, circle 空⼼圆</li>
</ul>
<ul type="square">
<li>ul 的 type 属性, square 正⽅形</li>
</ul>
<ul type="none">
<li>ul 的 type 属性, none ⽆</li>
</ul>
<hr>
1.2、有序列表标签
语法：
<h3>有序列表标签语法：(观察序号变化)</h3> <ol type="">
<li>ol 的 type 属性, 默认值 1</li>
<li>ol 的 type 属性, 默认值 1</li>
</ol>
<ol type="a">
<li>ol 的 type 属性, 默认值 a</li>
<li>ol 的 type 属性, 默认值 a</li>
html图片展示特效
</ol>
<ol type="A">
<li>ol 的 type 属性, 默认值 A</li>
<li>ol 的 type 属性, 默认值 A</li>
</ol>
<ol type="i">
<li>ol 的 type 属性, 默认值 i</li>
<li>ol 的 type 属性, 默认值 i</li>
</ol>
<ol type="I">
<li>ol 的 type 属性, 默认值 I</li>
<li>ol 的 type 属性, 默认值 I</li>
</ol>
<hr>
1.3、定义列表标签
语法：
<h3>定义列表标签语法：</h3>
<dl>
<b>dl 包含以下：</b>
<dt>dt 定义列表项：书单</dt>
<dd>dd 列表描述项：书名</dd>
<dd>dd 列表描述项：书名</dd>
<dt>dt 定义列表项：书单</dt>
<dd>dd 列表描述项：书名</dd>
<b>到此处这整⼀块</b>
</dl>
<hr>
⼆、图⽚标签
2.1、图⽚标签语法：
2.2、图⽚标签注意：
1. src 属性必写(绝对路径：从盘符路径开始；相对路径——建议使⽤)
2. height 以及 width 属性取值为百分⽐时是相对于⽗级元素取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图像标签</title>
</head>
<body>
<div>
<hr>
<b>src：图⽚路径</b><br>
<b>alt：若⽹页因各种原因⽆法显⽰图⽚，则显⽰的内容</b><br>
<b>width：宽（数值或百分⽐） height：⾼（数值或百分⽐）</b><br>
<b>注意：width 和 height 取百分⽐时是相对于⽗级元素</b><br><br>
<!-- 绝对路径从盘符开始  -->
<img src="E:\Sublime Text Build 3207 x64\Project\lab_1\0.png" alt="0.png" width="30%" height="50%">  <!-- 成功后可尝试把图⽚移开, 观察对⽐有⽆ alt 的效果 -->
<!-- 相对路径同级⽂件夹 -->
<img src="0.png" alt="0.png" width="50%" height="30%">
<!-- 当前⽂件夹下的⽂件夹 -->
<img src="img\艺术.jpg" alt="艺术.jpg" width="100xp" height="100xp">
<!-- 在上级⽂件夹中 -->
<img src="..\~.jpg" alt="~.jpg" width="30%" height="50%">
<!-- ⽤于超链接 -->
<a href="" name="艺术"><img src="img\艺术.jpg"></a>
</div>
</body>
</html>
三、超链接标签
语法：
3.1、href 链接地址：内部、外部
<!-- 站内链接(跳转后⽹站不变, 可以看 url) -->
<a href="HTML 列表标签.html">点击，跳转⾄ “HTML 列表标签.html” （站内链接）</a><br>
<!-- 站外链接(跳转后⽹站发⽣改变) -->
<a href="www.baidu/">点击，跳转⾄ “www.baidu/” （站外链接）</a><br><br>
3.2、target ⽬标窗⼝
<!-- 当前窗⼝跳转 -->
<a href="HTML 列表标签.html" target="_self">点击，窗⼝不跳转（target = "_self"）</a><br>
<a href="HTML 列表标签.html" target="_blank">点击，窗⼝跳转，即新窗⼝打开（target = "_blank"）</a><br><br>
3.3、title 连接提⽰⽂字
<!-- ⿏标放置(1s、2s), 显⽰提⽰, 上⾯那些链接是没有的⽂字提⽰的 -->
<a href="HTML 列表标签.html" title="HTML 列表标签.html">点击，跳转⾄ “HTML 列表标签.html” </a><br><br>
3.4、name 标签（锚）
<!-- 同页⾯定位(点击就跳转到同页⾯的响应位置) -->
<a href="#~"> ~ 图⽚</a><br>
<a href="#艺术"> 艺术图⽚ </a><br>
<a href="" name="~"><img src="~.jpg" alt="" width="50%"></a>
<a href="" name="艺术"><img src="艺术.jpg" alt="" width="50%"></a><br><br>
<!-- 不同页⾯定位 -->
<a href="HTML 图像标签.html#艺术">点击, 跳转到另⼀页图⽚</a><br><br>
3.5、⽂件下载
<!-- ⽂件下载 -->
<a href="0.zip">点击下载</a><br><br>
3.6、电⼦邮件链接
填写要查看的邮件地址
<!-- 电⼦邮件链接 -->
<a href="mailto: 邮件地址">点击查看邮件</a><br><br>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。