<a></a> 标签的用法

请先了解下:专业前端怎么正确浏览Demo


<a></a> 标签属性

  • href 超链接(hyper + ref)链接一个网址
  • target 指定在哪个窗口大开href
  • download布尔属性
  • rel=noopenerno opener为防止一个bug

<a></a> 作用

  • 跳转外部页面
  • 跳转内部锚点
  • 跳转到邮箱等

<a></a> 标签属性href的取值

href 超链接(hyper + ref)链接一个网址,可以跳转到一个页面/锚点,可以发邮件,可以打电话,可以js死链测试

可取值(9)种 :网址(3)/路径(2)/伪协议(3)/id(1)

网址(3)
  • https://google.com
  • http://google.com
  • //google.com:无协议网址

手端机同步访问桌面端HTML页面

  • 保证同一个wifi下:直接访问hs给的访问端口+页面路径
  • 微信手机助手发链接到手机上,依次点击
  • Chrome开发测者工具F12
  • 点选Network>Preserve log
  • 然后点击a-href.html里的超链接,跳转到//google.com
  • 看第一个google.com请求,Headershttp://google.com,继承当前的http://127....,自动补全http://
  • http://google.com重定向,跳转到http://www.google.com
  • 进到http://www.google.com请求里
  • http://www.google.com重定向跳转到到https://www.google.com
  • 最终到达,绿色Status code:200,历史原因
  • 为什么用//,因为是最高级,会自动选择使用http://还是https://,不会选错(即使没配https的话),具体原因,请学HTTP协议
  • 注意要有https://或者http://亦或//
路径(2)
  • 绝对路径/a/b/c和相对路径a/b/c
  • 直接加index.html./index.html
  • 绝对路径/a/b/c 创建路径a/b/c.html:添加标签:<a href="/a/b/c.html">c.html</a>
  • Chrome开发测者工具F12
  • 清空Network>Preserve log,保留勾选
  • 地址栏显示:192.168.56.1:8080/a/b/c.html
  • 同样是/a/b/c.html根目录相对于a路径下,而不是到a盘下
  • http协议的约定
  • 区别基于文件的本地根目录
  • 使用http协议,就不再是基于本地文件,根目录就不是硬盘根目录
  • 在哪里开启hs服务,哪里就是根目录
  • Chrome地址栏隐藏了http://,复制粘贴一下地址栏
  • 所以绝对路径/a/b/c前面的/a不是根目录,而是hs的根目录,这里是html-demo-2下的路径
  • 不要用双击打开,flie:///作为前缀
  • 此时Preserve log显示,点击链接,就转到本地根目录下的路径里去了
  • 双击打开,绝对路径就错了
  • 相对路径a/b/c:添加标签:<a href="a/b/c.html">c.html</a>

意思是在当前目录(html-demo-2/)下,找a找b找c.html,效果和绝对路径一样,正确跳转到c.html

  • 直接写文件名index.html,会在当前目录下找,或写./index.html,效果等同
javascript伪协议(3)
  • javascript:code;
  • mailto:mailbox@xxx.com给我发邮件,注意隐私,地址用unicode转码
  • tel:12345678901简历上可以附上电话,打给我,手机页面上使用
  • <a href="javascript:alert(1);"></a>,小写javascript,冒号分号注意不能少,里面写可执行的js代码,早期功能,基本不用
  • 现在的javascript伪协议用作点击后无动作的<a></a>标签,点击后无事件发生
  • 产品经理的需求场景:需要一个什么都不做的<a></a>标签,需要点击“查看按钮”,弹出一个对话框div
  • 不写空的伪协议,即href留空,点击<a></a>标签,页面会刷新,蛋疼
  • 写了#的href,也不能满足需求:点击<a></a>标签,页面会自动滚到顶部
  • 而一般只是希望一个什么都不做的<a></a>标签
  • <a href="javascript:void(0);"></a>也一样,页面不会刷新,也不会滚到顶部,只访问了一个空代码

href="#"href="javascript:void(0)"的区别:

  • # 包含了一个位置信息,默认的锚是#top 也就是网页的上端。
  • javascript:void(0);, 仅仅表示一个死链接。
  • 在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id
  • 如果你要定义一个死链接请使用 javascript:void(0);
  • 又或者试试####!

更多请看<a href="javascript:void(0)">这样写为什么不好?这篇


页面内id锚点(1)
  • href=#xxx点击查看xxx锚点

demo目录下新建a-herf.html./a/b/c.htmlindex.thml等文件,测试代码链接


<a></a> 标签属性target的取值

target的取值决定指定目标窗口在哪里点开href

内置名字

  • _self
  • _blank
  • _top
  • _parent
target=_self默认值,在当前页面打开链接

谷歌不允许在iframe指向它,打开它的页面,防止gooBai

target=_blank在新的标签页打开
  • 引入一个新标签<iframe></iframe>帮助理解_top

两个页面是层级关系:测试代码链接

target=_top在顶级页面打开链接
target=_parent在当前连接所在页面的上一级页面打开链接
target="xxx"有两个链接才看得出来,它的意思是如果有xxx,就在xxx打开窗口,如果不存在,就创建一个叫xxx的窗口,第二次打开不同的,会覆盖掉之前的

验证:控制台打:

1
window.name # "xxx"

重复利用同一个窗口打开页面

除了写窗口的名字,还可以写iframe的名字

[测试代码链接]()

程序员命名

  • window的name:xxx
  • iframe的name:xxx

<a></a> 标签其他属性

  • download

不是打开页面,而是下载,不是所有浏览器都支持(特别是手机)

  • rel=noopener

<iframe>标签

内嵌窗口,较少使用,不好用,被Ajax方式代替


<table></table>标签的用法

相关的标签<table></table>系列

  • <thead></thead>
  • <tbody></tbody>
  • <tfoot></tfoot>
  • <tr></tr>
  • <td></td>
  • <th></th>

相关的样式

  • table-layout
  • border-collapse
  • spacing

<img> 标签的用法

作用

  • 发出get请求,展示一张图片

属性

  • alt/height/width/src

事件

  • onload/onerror

响应式

max-width:100%

可替换元素

面试题:可替换元素 mdn

代码:

<form> 标签的用法

作用

  • 法get或post请求,然后刷新页面

属性 mdn

  • action / autocomplete / method / target

事件

  • onsubmit

代码:

<input> 标签的用法

作用

  • 让用户输入内容

属性

  • 类型
  • 其他

事件

  • onchange / onfocus / onblur

验证器

HTML5新增功能

其他输入标签

标签

  • select + option
  • textarea
  • label

代码:

注意事项

  • 一般不监听input的click事件
  • form里面的input要有name
  • form里面放一个属性type=submit才能触发submit事件

其他

标签

  • video
  • audio
  • canvas
  • svg

注意事项2

  • 兼容性:文档

【HTML全解】HTML重难点pdf


·未完待续·

参考文章

相关文章