链接/列表/图像0404

  • 内容
  • 相关

链接/列表/图像

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> 
⬆︎
⟳︎

Image Helper

 

Click me to browse image file

Click me to browse image file

use  to upload images
Show history

上一篇:语义化文本元素0404

下一篇:没有了

本文标签:

版权声明:若无特殊注明,本文皆为《峰仔》原创,转载请保留文章出处。

本文链接:链接/列表/图像0404 - http://94ni.cn/sxbj/390.html

百度收录:本文已被百度收录点击查看详情

发表评论

电子邮件地址不会被公开。 必填项已用*标注

sitemap