4-链接/列表/图像元素 · 前端教学笔记[更新中...]

# 链接/列表/图像 ## 1. 链接元素 - `<a>`: 链接元素,常用属性如下 | 属性 | 描述 | 举例 | | ---------- | ------------------------ | ----------------------------------- | | `href` | 指向链接页面的 URL | `href="https://php.cn"` | | `target` | 打开 URL 的页面来源 | `target=_self|_blank|_top|_parent"` | | `download` | 自定义下载文件名 | `download="banner1.jpg"` | | `type` | 设置链接文档的 MIME 类型 | `type="image/jpeg"` | - `href`属性值 | 属性 | 描述 | | ------------------------------ | -------------------------------- | | `href="url"` | 跳转的目标地址 | | `href="mailto: 123456@qq.com"` | 打开邮箱,发送邮件 | | `href="tel:13388**2345"` | 点击后,会询问用户是否要拨打电话 | | `href="outline.md"` | 浏览器不能解析的文档, 会直接下载 | - `taget`属性值 | 属性 | 描述 | | ------------------ | ------------------------------------ | | `target="__self"` | 当前窗口打开链接 | | `target="_blank"` | 新窗口打开链接 | | `target="_parent"` | 父窗口打开链接 | | `target="_top"` | 顶层窗口打开链接 | | `target="name"` | 指定名称的窗口, 与`<iframe>`元素配合 | | `target="#anchor"` | 跳转到设置了锚点的元素所在位置 | - 示例: ```html <!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>  <a href="https://php.cn" target="_blank">php中文网</a>  <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 示例 -运行效果图: - 示例代码 ```html <!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>` | 图片/插图区域的标题 | - `<img>`常用属性 | 属性 | 描述 | | -------------- | ---------------------------------------------------------------------- | | `src` | 图片来源地址, 可以是本地, 也可以是来自网络 | | `alt` | 图片描述信息, 当图片无法显示时, 显示该信息, 也可以为无障碍阅读器所识别 | | `width/height` | 图片大小, 宽高只需设置一个,另一个会等比缩放, 推荐使用 css 设置 | - 示例 ![](https://img.kancloud.cn/c6/8e/c68e165b22389f2feb612c7ba635b037_1290x600.jpg) ```html <!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> ```