Featured image of post HTML常用标签

HTML常用标签

a 标签

HTML <a> 元素(或称锚元素)可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。

<a> 标签的属性

  • Download (HTML5的属性): 该属性告诉浏览器是下载该 URL 的文件。如果属性有值,那么此值将在下载保存过程中作为预填充的文件名(如果用户需要,仍然可以更改文件名)。
  • href: 包含超链接指向的 URL 或 URL 片段。URL 不限于基于 Web(HTTP)的文档,也可以使用浏览器支持的任何协议。
  • rel: 该属性指定了目标对象到链接对象的关系。该值是空格分隔的列表类型值。
  • target: 该属性指定在何处显示链接的资源。 取值为标签tab,窗口window,或框架iframe等浏览上下文的名称或其他关键词。

href取值

  • http协议地址: http://google.com/
  • https协议地址: https://google.com/
  • 无协议网址: //google.com/ 此地址会继承当前页面的协议。
  • 绝对路径和相对路径: /a/b/c 或 a/b/c 这个绝对路径的根目录指的是当前服务的根目录。
  • 文件名: index.html 或 ./index.html 当前目录的 index.html 文件。
  • JavaScript伪协议: javascript:alert(1); 点击执行JS事件。通常达成想要点击 a 标签什么事情都不做的需求,其他任何属性都无法达到。
  • 元素id名: 若 xxx 为某个元素的 id 名,点击 a 标签则跳转到 id="xxx" 的元素位置,通常用来做锚点。
  • 邮件协议: mailto:abc@qq.com 点击调起邮箱APP向该邮箱发送邮件。
  • 电话协议: tel:13313133131 点击调起电话APP向该电话拨号。

target取值

  • _blank 在新页面打开链接。
  • _top 在顶层页面打开链接。通常需要嵌套 <iframe> 才可以体现出来。
  • _parent 在父级页面打开链接。通常需要嵌套两层 <iframe> 才可以和 _top 区分开来。
  • _self 在当前页面打开链接。默认属性,如未赋值则默认为 self
  • xxx(页面名) 在名为 xxx 的页面打开链接。若无名为 xxx 的页面则创建一个。

img 标签

HTML<img>元素将一份图像嵌入文档。用来发出一个GET请求,获取并展示一个图片。

<img> 标签的属性

  • src: 该属性表示了想要嵌入的图片的路径,是必须的属性
  • alt: 包含一条对图片的描述文字。如果图片加载失败,则展示 alt 的内容,可提升用户体验。
  • height 和 width:该属性表示图片的宽和高,指定一项,另一项则等比例自适应,尽量不要两个同时设置。

<img> 标签的事件

  • onload: 当图片加载成功时会触发该事件。
  • onerror: 当图片加载失败时会触发该事件。可以通过 JS 使图片加载失败时加载一个 404 图片。

table 标签

HTML <table> 元素表示表格数据。

<table> 相关的标签

  • thead: 表示表格的头部。内部为 <tr> <th></th> </tr>
  • tbody: 表示表格的内容。内部为 <tr> <td></td> </tr>
  • tfoot: 表示表格的底部。内部为 <tr> <td></td> </tr>

注:theadtbodytfoot 的顺序不会影响表格的顺序,表格总是以 head -> body -> foot 来展示。

<table> 相关的样式

  • table-layout: 可取 fixedauto 等。fixed 则列宽度均为等宽,auto 则在设置的列宽度的基础上根据列内容自适应宽度。
  • border-collapse: 是用来决定表格的边框是分开的还是合并的,在分隔模式下,相邻的单元格都拥有独立的边框。在合并模式下,相邻单元格共享边框。
  • border-spacing: 指定相邻单元格边框之间的距离。该属性只适用于 border-collapse 值是 separate 的时候。

资料来源:饥人谷、MDN