a标签的用法
a 标签的属性:
-
href。取值如下:
- 网址,例如://google.com(会自动适应 https 或 http)
- 路径:
- /a/b/c 以及 a/b/c。如果我们开启 http 服务,那么/a/b/c 的根目录就不是硬盘的根目录,你在哪里开的 http 服务哪里就是根目录。
- index.html 或者./index.html。
- 伪协议:
- javascript:代码;(写一个点击后不刷新页面不跳转的 a 标签,就可以加 javascript:;)
- mailto:邮箱(点击 a 标签后,直接跳转到发邮件的页面,并且自动补全此邮箱地址)
- tel:手机号(点击此 a 标签,会弹出一个界面,可直接拨打此手机号。这个技巧可以用在简历上)
- id:
href=#xxx
。
a 标签的作用:跳转外部页面,跳转内部锚点,跳转到邮箱或电话等
- target,指定在哪个窗口打开你的超链接:
- 一般使用 _blank ,表示在空白页打开。
- 默认值是_self,表示在当前页面打开。
- _top,当文件引用另一个文件,并且另一个文件里面有一个链接,target 的值为_top,这时在页面上点击这个链接会在该引用文件的顶级窗口打开。
- _parent,当文件引用另一个文件,另一个文件再引用一个文件,并且在这再一个文件里面有链接,target 的值为_parent,这时在页面上点击这个链接会在该引用文件的上一级窗口打开。
- xxx,如果有一个叫做 xxx 的窗口,点击 a 链接时就在 xxx 窗口打开,如果没有叫 xxx 的窗口,就创建一个叫 xxx 的窗口。怎么验证呢?控制台,输入
window.name
,会出现'xxx',也就是当前窗口的名字。 - 做一个 goodbye 网站。链接的 target 为 xxx,iframe 的 name 也等于 xxx,这时在页面上点击链接,就会在 iframe 里打开链接的网页。
- iframe 标签,目前前端已经很少使用这个标签了,因为它不好用,一般老系统使用,不需要过多学习。新的前端一般都使用 Ajax。
img 标签的用法
作用:发出 get 请求,展示一张图片。
属性:alt/height/width/src。图片加载失败,就会显示 alt 的文字内容,一般用来提示用户。height、width 的单位不用写,默认是 px,因为只支持 px,只写 height,width 会自适应,只写 width,height 会自适应,都写的话,图片会变形。
事件:onload/onerror,监听图片是否加载成功。
xxx.onload = function() {
console.log("图片加载成功");
};
xxx.onerror = function() {
console.log("图片加载失败");
xxx.src = "/404.png";
};
复制代码
- 响应式:max-width:100%
table 标签的用法
table相关的标签:
<table>
<thead>
<tr>
<th></th>
//table head
</tr>
//table row
</thead>
<tbody>
<tr>
<td></td>
//table data
</tr>
</tbody>
<tfoot></tfoot>
</table>
复制代码
table 里只能有thead、tbody、tfoot这三个标签,可以只有 thead 和 tbody,或者只有 tbody。
table 相关的样式:
- table-layout,取值有 auto、fixed,auto 是根据内容确定每一份所占宽度,fixed 是每一份等宽。
- border-collapse,控制表格的 border 是否合并,合并的取值是 collapse,不写默认是不合并。
- border-spacing,控制 border 和 border 之间的距离,取值是数值,一般写 0,因为我们一般不希望表格之间有空隙。
- border-collapse 和 border-spacing 一般都事先在 reset.css 里写好。
作者:wujilin
链接:https://juejin.im/post/5d61f2426fb9a06ace525ab2
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。