HTML常用标签

HTML预览工具(不要双击打开HTML文件(以file的形式打开)，而是要从用户角度思考，在浏览器输入网址访问(用http协议))

• http-server 或者使用缩写
• parcel

a标签

属性

• href(hyper reference)
  取值

1. 网址
   https://google.com
   http://google.com
   //google.com无协议网址
2. 路径
   a/b/c(相对路径)以及/a/b/c绝对路径
   index.html以及./index.html都表示当前目录的index.html
3. 伪协议
   javascript:代码；

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

mailto:邮箱
tel:手机号
id
实例：

<a href="google.com">跳转到外部网页</a>
<a href="#idName">跳转到内部锚点</a>
<a href="mailto:test@testmail.com">发邮件</a>

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

• target
• download很多浏览器不支持
• rel=noopen为了防止一个Bug，待补充

target取值
_blank 在空白页面打开链接
_top 在顶级窗口，所有iframe的最上边
_parent 当前链接的上一层iframe打开
_self(默认)在自己这打开

命名
可以写窗口window的名字
iframe的名字

iframe标签

内嵌窗口，已经很老了，很少使用。

table表格标签

table内的三个标签

当我们不使用thead tbody tfoot的时候，默认放在tbody中。

img标签

作用：发出get请求，展示一张图片。
属性：

• alt 图片加载失败时，显示的文字。
• height width,只写一个时，另一个自适应。如果同时设置宽和高，很可能让图片变形，永远不要让图片变形。
  事件：
  onload
  onerror

<img src="./image/photo.jpg" id="idName">
<script>
    idName.onload = function () {
        console.log("图片加载成功");
    }
    idName.onerror = function () {
        console.log("图片加载失败");
    }
</script>

响应式：让图片在手机上也能正常显示，使用max-width属性为图片元素进行响应式设置以使其最大宽度不超过移动设备的屏幕宽度

form标签

作用：发get或post请求，然后刷新页面。
属性：
action 提交表单后跳转到的请求页面
autocomplete 自动填充

method POST或GET
target 在哪新开窗口
事件：
onsubmit

input和button的区别：input里边不可以有别的标签，而button可以

form中必须有一个含有type="submit"的标签，如果不写type就默认type="submit"。

input标签

type="file"上传文件

以下两种，相同name的表示同一组标签。

• 多选一
• 同时选中多个
  type=“hidden”用于js自动填写

textarea标签

select标签