链接/列表/图像

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"`	跳转到设置了锚点的元素所在位置

示例:

<!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>`	图片/插图区域的标题

<img>常用属性

属性	描述
`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>

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

html 链接列表与图像

2020-04-04 22:09:47