本篇博客讲述一些HTML中重点标签的用法

a

作用：

跳转到外部页面
跳转到内部锚点
跳转到邮箱对话

属性：

href

hyper reference 超级引用

href的取值：
1. 网址
  - http://google.com
  - https://google.com
  - //google.com (最好用) 自动选择使用https:// 还是 http://
2. 路径
  - /a/b/c.html
    
    如果我们开启的是http服务，根目录就是开启http服务的目录，绝对路径相对路径都可以用
    
    如果我们在文件夹里双击打开这个网页，是以文件的形式打开，绝对路径就会失效
  - ./index.html / index,html
    
    在当前目录查找index.html
3. 伪协议
  - javascript:可以执行的js代码
    
    现在一般用作点击之后没有动作的a标签
    
    javascript:;
    
    和 #的区别： # 会跳转到页面顶部
  - mailto:邮箱
    
    如果有默认的邮件客户端，会自动跳转，并把邮件地址自动填入
  - tel:手机
    
    会将手机号自动填入并拨出
4. id
  
  #id 跳转到id="id" 的位置
target

设置在哪一个窗口打开此超链接

target的取值：
1. 内置名字
  - _blank
    
    在新的页面打开标签
  - _self(默认值)
    
    在当前页面跳转
  - _top
    
    有内嵌iframe时，在iframe里面使用target="_top"的a标签，会在本页面中打开，
    
    使用 target="_self"会在iframe中打开
  - _parent
    
    多级iframe嵌套时，在子级使用 target="_parent" 会在父级窗口打开标签
2. 程序员的命名
  - window.name
    
    设置自定义的名字设定打开的网页window.name
```
window.name
"xxx"
```
  - frame.name
    
    自定义的名字跳转到对应iframe name
download

下载此网页

实际上很多不能用，尤其是手机浏览器
rel = noopene(面试常问)

其中在a.html中有个超链接，点击后打开新的tab页，神奇的发现原tab页已经变成了谷歌页面。原因是使用target=_blank打开新的窗口时，赋予了新的窗口一些权限可以操作原tab页，其中window.location就是一个。不使用 rel=noopener就是让用户暴露在钓鱼攻击上。

table

相关标签

<table>
    <thead>
        <tr>
            <th></th>
            <th>小红</th>
            <th>小明</th>
            <th>小强</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>数学</th>
            <td>100</td>
            <td>23</td>
            <td>78</td>
        </tr>
        <tr>
            <th>语文</th>
            <td>100</td>
            <td>23</td>
            <td>78</td>
        </tr>
        <tr>
            <th>英语</th>
            <td>100</td>
            <td>23</td>
            <td>78</td>
        </tr>
    <tfoot>
        <tr>
            <th>总分</th>
            <td>100</td>
            <td>200</td>
            <td>300</td>
        </tr>
    </tfoot>
    </tbody>
</table>

相关样式

加在table上面的：

table-layout
1. auto 大多浏览器采用的自动算法,根据内容计算表格宽度
2. fixed 自动平均的设定宽度
border-collapse

border-collapse:collapse ：去除空隙
border-spacing

border-spacing:0 表格空隙为0，但是重叠起来会加粗

img

作用

发出get请求，展示一张图片
属性
- alt
  
  图片加载失败时裂图旁显示的文字
- height，width
  
  这里不是CSS，就是img标签的属性
  
  只设置height，width也会自适应；只设置width，height也会自适应
- src
  
  图片路径
事件
- onload
  
  加载成功
- onerror
  
  加载失败，通常可在次函数中挽救

响应式

在手机上也不会出现图片过大，体验感不好的问题

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
img{
    max-width:100%;
}

form

作用

发起get或post请求，然后刷新页面
属性
- action
  
  action="/..." action中是请求到的路径
- method
  
  get/post 规定请求的方式
- autocomplete
autocomplete="on"

自动建议填充的下拉框加在form标签上，在form中的imput加上name
```
    <form action="/XXX" autocomplete="on" >
        <input type="text" name="username">
        <input type="submit" value="submit">
    </form>
```
- target
  
  与a标签类似
事件

会触发onsubmit 事件
注意点
- input与button的区别
  
  input中不支持其他的标签；
  
  button中可以放其他的标签
- 一个form必须要有一个 type="submit"

input

作用

与用户交互
属性
- type
  
  text 输入文本
  
  button 按钮
  
  color 选中颜色
  
  password 密码不显示具体文本
  
  radio 单选
  
  设定同一个name才能单选
  
  checkbox 多选
  
  设定同一个name才可以知道是同一个类别
  
  file 选择文件
  
  <input type="file" multiple> 这样可以设置多选文件
  
  hidden 看不见的input，一般用于给机器自动填一些数值
事件
- onchange
- omfocus
- onblur
验证器（H5新增）

其他常用标签

textarea

<textarea style="resize:none"></textarea>

设置不能改变大小的输入框

select

多选

<select>
    <option value="0">-请选择-</option>
    <option value="1">星期一</option>
    <option value="2">星期二</option>
</select>

注意事项

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

感想

之前学习HTML标签的时候，常常是用到哪个不会了再去搜，但在温习完这些HTML中点标签之后，脑子里大概有了一个体系结构，下次再使用到相关知识的时候能够快速索引到对应的知识点，可以加快写代码的效率。

HTML重点标签

a

table

img

form

input

其他常用标签

感想