《HTML常用标签》

• a
• img
• table

a标签：

• 属性：
  1 .href
  2 .target
  3 .download
  4 .rel=noopener

• 作用：
  跳转外部页面
  跳转内部锚点
  跳转到邮箱或电话

<a herf="https://google.com">超链接</a>

超链接，超级引用。表示a是一个超链接，链接到某一个网页。
创建一个<a-href.html>文件在vscode打开,打上a标签，在终端输入

yarn global add http-server

http-server . -c-1

然后得到几个网址(用这个方法得到网址是因为永远都不可以双击html，如双击打开，绝对路径就错了)，打开网址一般是无法正常运作的，需要添加一个路径/a-href.htm/，然后得到以下页面。此页面是默认当前页面打开的。

image

• 另一种打开html的方式：

yarn global add parcel

`
parcel a-href.html

a的href的取值：

• 网址:a的href可写以下的网址类型
  https://google.com
  http://google.com
  //google.com
  开发者工具-Network-勾选Preserve log-点击超链接。可以看到系统自动补全网址。所以写哪一个都可以。

• 路径

1 ./a/b/c以及a/b/c

<a herf="https://google.com">超链接</a>
<a herf="/a/b/c.html">c.html</a>

创建一个新的<c.html>文件，路径是/a/b/c.html

image

2 .index.html以及./index.html

a的href取值不管取哪一个都是一样的。

伪协议

• javascript：代码；

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

很早以前使用，现在很少用了

<a herf="javascript:;">空的伪协议</a>

image

点击空的伪协议，发现点击它一点动静都没有。这个用途一般用于很无聊的产品经理的需求。

image

若写三十个p标签，并且

<a herf="#">查看</a>

页面会滚到顶部

• mailto：xxxxxx@qq.com

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

点击“发邮件给我”后，会自动跳转到邮箱页面

• tel：手机

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

点击“打电话给我”后，会自动跳转拨打电话的页面

• id

href=#xxx
若写一个a标签，href=#xxx，同时在第十个p标签写id=xxx ，页面就会滚到第十个那里。

image

这是a的href的取值。

a的target取值：

• _blank 在空白页面打开
• _top 在顶层窗口打开
• _parent 在副级窗口打开
• _self 在当前窗口打开

<a herf="https://google.com target="_blank">google</a>

targei指定在哪个窗口打开超链接，target=“_blank”指定使用空白页面打开a标签的链接。

<a herf="https://google.com target="_self">google</a>

targei指定在当前页面打开。

<a herf="https://google.com target="_top">google</a>

在顶层页面打开

新建一个<iframe.html>文件，写上，我是iframe
在原来页面引用，iframe

<iframe src="iframr.html"></iframe>

在原来的页面上就会出现所引用的文件所写的”我是"irame"

<a herf="https://google.com target="_parent">google</a>

在副级窗口打开

iframe=xxx

<a herf="https://google.com target="xxx">google</a>

在空白页面打开，因为找不到谁是XXX，当已经有一个XXX页面的时候，就在当前的XXX页面打开

download

download

很多浏览器不支持这个属性，理论上download是下载网页的。

rel=noopener

rel=noopener

• table标签：

相关标签：

• table
• thead
• tbody
• tfoot
• tr （table row:table里面的一行）
• td （table data：数据）
• th （表头）

相关样式：

• table-layout 宽度的调节
• border-collapse 合并
• border-spacing 间隙

• img标签：

作用：

发出get请求，展示一张图片

属性：

height 设置高度，只设置高度时，宽度会自适应

alt

当图片加载失败用文字替换

width 设置宽度，当只设置宽度，高度会自适应

src

写图片的地址

<img width=400 src="dog.png" alt="一只狗子"></img>

永远不要让图片变形
永远不要让图片变形
永远不要让图片变形
永远不要让图片变形
永远不要让图片变形
永远不要让图片变形
永远不要让图片变形
永远不要让图片变形
永远不要让图片变形

事件：

• onload 监听图片加载成功
• onerror 监听图片加载失败

响应式：

• max-width：100%

form标签

作用：

发get或post请求，然后刷新页面

属性：

action
autocomplete：是否自动填充，on/off
method：控制用get还是post来请求
target：告诉浏览器我要提交到哪个页面，哪个页面需要刷新

事件

• onsubmit