【HTML非全解3】HTML常用标签

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

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

`<a></a>` 标签属性

href 超链接（hyper + ref）链接一个网址
target 指定在哪个窗口大开href
download布尔属性
rel=noopener：no 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请求，Headers是http://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);。
又或者试试###，#!

页面内id锚点(1)

href=#xxx点击查看xxx锚点

demo目录下新建a-herf.html，./a/b/c.html，index.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>`标签的用法

`<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新增功能

其他输入标签

注意事项

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

其他

注意事项2

兼容性：文档

【HTML全解】HTML重难点pdf

参考文章

作者： Joel
文章链接：
版权声明
非自由转载-非商用-非衍生-保持署名
河掘思知简

文章目录

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

<a></a> 标签属性

<a></a> 作用

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

可取值（9）种 ：网址（3）/路径（2）/伪协议（3）/id（1）

网址(3)

路径(2)

javascript伪协议(3)

页面内id锚点(1)

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

内置名字

target=_self默认值，在当前页面打开链接

target=_blank在新的标签页打开

target=_top在顶级页面打开链接

target=_parent在当前连接所在页面的上一级页面打开链接

target="xxx"有两个链接才看得出来，它的意思是如果有xxx，就在xxx打开窗口，如果不存在，就创建一个叫xxx的窗口，第二次打开不同的，会覆盖掉之前的