链接/列表/图像
1. 链接元素
| 属性 |
描述 |
举例 |
href |
指向链接页面的 URL |
href="https://php.cn" |
target |
打开 URL 的页面来源 |
`target=_self |
_blank |
_top |
_parent”` |
download |
自定义下载文件名 |
download="banner1.jpg" |
type |
设置链接文档的 MIME 类型 |
type="image/jpeg" |
| 属性 |
描述 |
href="url" |
跳转的目标地址 |
href="mailto: 123456@qq.com" |
打开邮箱,发送邮件 |
href="tel:13388**2345" |
点击后,会询问用户是否要拨打电话 |
href="outline.md" |
浏览器不能解析的文档, 会直接下载 |
| 属性 |
描述 |
target="__self" |
当前窗口打开链接 |
target="_blank" |
新窗口打开链接 |
target="_parent" |
父窗口打开链接 |
target="_top" |
顶层窗口打开链接 |
target="name" |
指定名称的窗口, 与<iframe>元素配合 |
target="#anchor" |
跳转到设置了锚点的元素所在位置 |
<!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> <!-- 默认在当前窗口打开_self, 现自定义为新窗口打开_blank --> <a href="https://php.cn" target="_blank">php中文网</a> <!-- 浏览器不能直接解析markdown文档,所以会自动下载,下载的文件名可由download属性自定义 --> <a href="2-html基础知识.md" download="HTML教案.md">html教程</a> <!-- 拔打电话,会调用默认通信工具 --> <a href="tel:1579988***33">电话</a> <!-- 发送邮件,会调用本机电邮软件 --> <a href="mailto: 123456789@qq.com">联系我们</a> <a href="#anchor">跳转到当前面中的锚点</a> <h1 id="anchor" style="margin-top:1000px;">我是锚点</h1> </body></html>
2. 列表元素
2.1 列表的基本概念
- 将一组关联的数据集中展示,使用列表最合适
- 如果列表中的每个项目顺序无关紧要, 例如:购物车, 可以使用无序列表来描述
- 如果列表中的每个项目顺序非常重要, 例如:工作计划,可以使用有序列表来描述
- 如果想给每一个列表项添加一个小标题, 例如联系方式,可以使用自定义列表来描述
- 可见, HTML 中的列表由列表与内部的列表项二部分组成,而这二部分是包含关系
- 所以, HTML 使用一组复合标签来描述列表,
| 列表元素 |
描述 |
<ul> + <li> |
无序列表 |
<ol> + <li> |
有序列表 |
<dl> + <dt> + <dd> |
自定义列表 |
2.2 示例
-运行效果图:
<!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> <!--无序列表--> <h3>购物车</h3> <ul> <li>苹果5斤</li> <li>电水壶1个</li> <li>牛奶2箱</li> </ul> <hr /> <!--有序列表--> <h3>工作计划</h3> <!-- 可设置起始序号 --> <ol start="5"> <li>给客户打回访电话</li> <li>整理新客户资料</li> <li>准备晚上的约会</li> </ol> <hr /> <!--自定义列表--> <h3>前端三兄弟</h3> <dl> <dt>html</dt> <dd>超文本标记语言</dd> <dt>css</dt> <dd>层叠样式表</dd> <dt>JavaScript</dt> <dd>前端通用脚本语言</dd> </dl> </body></html>
3. 图像元素
- 当前文档的图像元素,仅仅是外部图片资源的占位符,只有解析时才会加载进来
- 所以, 在确保用户可以看清的情况下, 图片体积越小越好, 以提升加载速度
- 推荐使用可压缩的
jpg格式, 小图片,或需要背景透明的,推荐使用png格式 - 对于简单的动图,或者颜色要求较少的,可使用
gif格式 - 对于图标, 建议使用 css 字体图标,而不是使用图像图标
| 元素 |
描述 |
<img> |
图片元素,空元素(单标签) |
<figure> |
图片/插图区域 |
<figcaption> |
图片/插图区域的标题 |
| 属性 |
描述 |
src |
图片来源地址, 可以是本地, 也可以是来自网络 |
alt |
图片描述信息, 当图片无法显示时, 显示该信息, 也可以为无障碍阅读器所识别 |
width/height |
图片大小, 宽高只需设置一个,另一个会等比缩放, 推荐使用 css 设置 |
<!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> <figure> <figcaption>前端经典教程</figcaption> <img src="images/js1.jpg" alt="javascript高级程序设计" style="width: 200px;" /> <img src="images/js2.jpg" alt="javascript权威指南" style="width: 200px;" /> <img src="images/css.jpg" alt="css权威指南" style="width: 200px;" /> </figure> </body></html>
