HTML入门笔记2(常用标签)

详细介绍HTML的a,img,table和form标签

一 a标签

a标签属性：href，taiget，download，rel=noopener。
a标签作用：主要是用来跳转到外部页面，内部页面或者电话邮箱等等。
代码类似这样<a href=""></a>
i

1 href

注释：href是输入地址，可以输入 1.1 网址 ，1.2 路径，1.3 伪协议，1.4 id锚点，1.5 邮箱等

• 注意：永远也不要双击打开html，用户都是输入网址进去，我们要像用户一样使用网页输入打开。

• 用输入网址打开，方法一：终端输入安装yarn gloal add http-server
  安装好后输入 http-server . -c-1
  这里"."可忽略，-c是缓存，-1是不要缓存。推荐用yarn。
  然后会出现几个地址，复制地址或直接打开后在地址栏接上要打开的文件。
• 方法二：终端输入安装yarn global add parcel
  安装好后直接parcel xxx.html
  xxx是打开文件名称

1.1 网址

href可输入网址，取值例如：

• https://baidu.com
• http://baidu.com
• //baidu.com

注意：最好选用//baidu.com，即无协议网址，点击链接时，会自动跳转选择适用http还是https，防止选错http，还是https而出错。
查看具体怎么传的可以打开网页开发工具(F12)在netwok里选中Preserve log进行查看

1.2 路径

href可输入路径，例如：

• /a/b/c
• a/b/c

注意：/a/b/c，"/"难道不是根目录吗？

答：当我们使用http后就不再是文件了，在哪里开的服务，哪里就是根目录。

开发时，如果双击打开链接页面的话，是以文件形式，会在file根目录下寻找，链接失效，绝对路径就错了。要用网页形式打开

1.3 伪协议

什么是伪协议呢，是点击a标签就会执行href里的代码，叫JavaScript伪协议。

<a href="javascript:alert(1);">javascript伪协议</a>

1.4 id锚点

可以通过点击a标签内容实现页内跳转

 	<p id="xxx">你点击了查看</p>


 	<a href="">查看（页面会刷新）</a>
    <a href="#">查看(页面不会刷新，会跳到页面顶部)</a>
    <a href="#xxx">查看（通过id跳转到指定的标签，锚点)</a>
    <a href="javascript:;">查看（这才是什么也不会做的a标签）</a>

1.5 邮箱等

• 跳转邮箱

 <a href="mailto:dwwei0527@gmail.com">发邮件给我</a>

效果：发邮件给我

• 跳转电话

<a href="tel:13258378250">请打电话给我</a>

效果：请打电话给我

2 a的 target 属性

target是"目标"的意思。target有以下几种常用取值：

2.1 _blank

新打开个窗口打开

2.2 _top

有多个网页嵌套的情况下，会在最顶层上的窗口打开。可以用iframe嵌套网站。

2.3 _parent

在当前链接的上一层打开

2.4 _self

在自己这一层打开

2.5 xxx

注释：xxx是taiget="xxx"时，xxx是id，可以随便取，有xxx时就打开，没有xxx时就创建一个窗口，把它叫做xxx。
注意：有两个链接都叫xxx时，点击相同xxx不同链接，每一次点击都会在xxx窗口执行点击的链接。

---

二 img标签

img标签的作用：