HTML常用标签

i. a标签的用法

• 属性

1. href 指定要跳转的页面
2. target 指定以哪种方式跳转，target=“_blank”新打开一个页面跳转
3. download 点击就下载网页 （不是所有浏览器都支持）
4. rel=noopener 为了防止一个bug

•  作用

    跳转外部页面跳转内部锚点 踢跳转到邮箱或电话等 

• a的href 的取值

1. 网址  （三种写法）

         https://google.com

         http://google.com

         //google.com

     2. 路径

        相对路径和绝对路径：/a/b/c以及a/b/c index.html以及./index.html

    3. 伪协议

       javascript:代码;

       mailto:邮箱

       tel:手机号

  4.id

     id:#xxx

注意：

​点击a标签页面就会刷新

 ​  点击a标签页面就会自动回答顶部，页面不会刷新

 ​         http://google.com 点击a标签页面就不会有任何反应

​ 点击a标签页面会跳转到id为xxx的地方开始显示 

​会自动到达发邮件的地方

   点击我会到打电话页面，电话号码会自动被获取

• a的target 的取值

1. 内置名字 _blank 在新的页面打开 _top 最顶层页面打开 _parent 当前链接页面的上一层打开

_self 在当前页面打开

1. 程序员命名 window的name iframe的 name

注意：

​

​

 以上两个a标签一起出现时，点击a标签就会新建一个叫xxx的窗口，target值一样，两个链接共用这个窗口，点击第二个a标签也不会新建窗口了！如要检测，控制台conse.log(window.name)即可看见结果。

ii.img标签

• 作用

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

• 属性

1.   src 用来链接图片地址
2. alt 图片显示不出来时代替图片显示的内容
3. height / width 设置宽，高会自适应；设置高，宽也会自适应  

• 事件

 onload / onerror 

• 响应式

 max-width: 100% 加上这个，图片就是响应式的，在手机上可以适配！ 

• 可替换元素，可以被替换

 考试可能会问，被问概率30%

iii.tab标签

• 相关的标签

1.  table
2. thead 表头部分
3. tbody 表的身体部分
4. tfoot 表的尾部
5. th 表头
6. tr 一行
7. td 一列 表的内容、数据 

• 相关的样式

 table-layout 

1.   auto列宽度由单元格内容设定，哪列内容多哪列就宽
2. fixed列宽由表格宽度和列宽度设定 ，它会让每一列都一样宽
3. inherit：规定应该从父元素继承table-layout属性的值  

 border-collapse  控制border是否合并，默认时不合并的控制border是否合并，默认时不合并的

 border-spacing  控制border是否合并，默认时不合并的

​   例子1                                                                                                                                                      

表头1	表头2
一列	2列

注意:

当我们写<tr> <td>时，没有写<thead><tbody>时，浏览器会自动将<tr> <td>都放到<tbody>里面去

iv.form表单

• 作用

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

• 属性

1.  action 控制请求哪个页面，里面写什么，就会请求到什么
2. autocomplete 是否自动填充，在点击输入框会给出一些自动填充数据供你选择
3. method 控制请求的方法是用get还是post
4. target 告诉浏览器我要提交到哪个页面进行刷新 

• 事件 onsubmit

  <input type="submit" value="按钮1">

    

区别：input里不能再有其他内容（标签），只能有纯文本；buttom里面还可以有其他任何内容

注意：form里必须要有一个type=“submit”， 若type=“ ”是这样为空的，就默认它是type=“submit”

1. input标签

•   作用  

让用户输入内容

•    属性   

类型type: 输入框输入的数据类型

1.  button 按钮

2. checkbox 多选 n个input标签的name相同，即多选内容就是一个分组

3. email 邮箱地址

4. file 文件类型 1.只能选一个文件<input type="file"> 2. 可选多个文件<input type="file" multiple >

5. hidden 看不见的输入，这个一般是给js输入的

6. number 数字

7. password 密码

8. radio 单选 需要n个input标签的name相同 <input name=" gender" type= "radio">男<input name="gender" type="radio">女

9. search 输入内容时右边会出现 x ，点击 x 会一键删除输入的内容

10. submit 提交按钮

11. tel 电话号码

12. text 文本

13. color 颜色

14. reset 重置按钮 重置按钮会清除表单中的所有数据 

• 其他 ：

 name / autofocus /checked / disabled /maxlength / pattern / value / placeholder 

• 事件

  onchange / onfocus / onblur

• 验证器 HTML5新增功能

注意：验证器例1

<input type="text" required >加上required就会验证，如果没有填写内容就提交不了

• 其他输入标签

 标签 

1.  select + option 一个下拉菜单 里面嵌套option标签，表示下拉菜单中的每一项

2. textarea 可输入多行内容，用户界面可放大缩小输入框 加上style="resize:none"就不能放大缩小啦；可设置宽高

3. label 

 注意事项 

1.  一般不监听input的 click事件

2. form里面的input要有name

3. form里要放一个type=submit 才能触发submit事 

---

本文为$Iron的原创文章，著作权归本人和饥人谷所有，转载务必注明来源