HTML：常用标签

本篇博客是作为个人自学记录，如有不足之处，请批评指正。

此博客是《HTML：入门笔记》的续篇，需要查看请点击此链接

---

a 标签

href

• 超链接
  hyper+reference

href 的取值

• （写网址就写//…就行）

网址：

• https
• http
• //…

路径：

• /a/b/c 以及 a/b/c
  （前者是绝对路径，后者是相对路径。http打开的话，/a/b/c 也是当前文件夹下的路径）
  index.html 以及 ./index.html

伪协议

javascript:;

• 如果想做一个a标签，又想这个a标签里面什么都不做，那么就在href里写入javascript:; 这样点击a标签只会执行一段空的js,页面不会有其它改变。

id:

• href=#xxx，然后在其他标签添加id选择器的话娿，点击a标签就会跳到相应的位置

mailto：邮箱地址

• 直接发邮件

tel:手机号

• 直接打电话

target

内置名称

_blank

• 在空白页面（新窗口）打开

_top

• 当前页面最顶层（层级）的窗口打开，可以用iframe引入，这样就实现内嵌页中页

_parent

• 父级窗口
  在当前链接所在的iframe的上一层（父级）打开

_self

window 的 name

• 在自己的层级打开，也是默认值
  target 的值写字符串，这样就可以重复在同一个窗口
  target=“xxx” 打开如果有一个叫xxx的窗口，就用xxx窗口，如果没有，就创建一个xxx窗口打开

download

• 下载内容，但不是所有浏览器都支持，尤其是手机浏览器

作用

• 不是打开页面，而是下载页面

问题

• 不是所有浏览器都支持，尤其是手机浏览器可能不支持

---

iframe 标签

• 内嵌窗口，实现 “页中页”
  已经很少使用了，只有一些老系统在用

table 标签

• 表格标签 里面只能有 thead tbody tfoot

相关的标签

thead

• 表格头部

tbody

• 表格的主要部分

tfoot

• 表格脚部（底部）

tr

• 表格的行

th

• 行内的头部（标题）

td

• 行内的数据（内容）

相关的样式

• css样式

table-layout 单元格内容宽度

• auto
• fixed

border-collapse

• 控制 border 是否合并

border-spacing

• 控制 border 之间的空隙

---

img 标签

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

属性

• 不是css的属性，就是自身的属性

alt

• 可选的、替换的 加载失败时显示alt的内容

宽和高

• 前端工程师的底线：永远不要让图片变形
  width 和 height不能同时写，同时写可能会使图片变形，只写一个就可以，另一个属性会自适应

src

• 图片地址，可以是网址也可以是本地地址

事件

onload

• 加载成功时执行的事件

onerror

• 加载失败时执行的事件

响应式

max-width:100%

• 适配手机页面

可替换元素

• 之后会讲到

---

form 标签

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

属性

action

• 控制请求哪个页面

method

• 控制用 get 还是 post 来请求

autocomplete

• 是否自动填充

target

• 跟a标签的用法相似
  告诉浏览器应该提交到哪个页面，哪个页面应该刷新

事件

onsubmit

• form 想要触发提交事件，必须要有 type=“submit”

input 和 button 里的 type=“submit” 有什么区别

• input 里面不能再有其他的内容，button 里面可以有任何内容；
  button 里面是可以含有标签的

---

input 标签

• 让用户输入内容
  用于表单创建交互式控件，以便接受来自用户的数据;
  可以使用各种类型的输入数据和控件小部件

属性

type=“password”

• 密码框

type=“radio”

• 单选框，但是要添加给 name 命名

type=“checkbox”

• 复选框，最好也要给 name 命名，尤其是页面复选框很多的时候

type=“file”

• 上传文件 上传多个文件的时候需要加 multiple

type=“hidden”

• 隐藏，多用于使用 js 获取网页某些数据而不需要用户交互的场景
  事件

onchange

• 当用户输入改变的时候

onfocus

• 当用户鼠标聚焦在标签上的时候

onblur

• 当用户鼠标从标签失去聚焦的时候

验证器

• H5 新增自带验证 以后会讲
  比如：input 里写上required 如果用户没填写内容就无法提交

---

注意事项

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