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>
注:
thead
、tbody
、tfoot
的顺序不会影响表格的顺序,表格总是以head
->body
->foot
来展示。
<table>
相关的样式
- table-layout: 可取
fixed
、auto
等。fixed
则列宽度均为等宽,auto
则在设置的列宽度的基础上根据列内容自适应宽度。 - border-collapse: 是用来决定表格的边框是分开的还是合并的,在分隔模式下,相邻的单元格都拥有独立的边框。在合并模式下,相邻单元格共享边框。
- border-spacing: 指定相邻单元格边框之间的距离。该属性只适用于
border-collapse
值是separate
的时候。
资料来源:饥人谷、MDN