HTML常用标签

a标签：超链接标签

a标签的属性：href，target，download，rel=noopener

href： 添加连接。连接的形式有三种。

 1.https:  HTTP协议的加密版本.    
 2.http: 超文本传输协议, 是用于在 Web上传输超媒体文件的底层协议.    
 3.无协议网址：//www.baidu.com 
为什么建议使用无协议网址？因为无协议网址会在浏览器超强的纠错功能中，被自动补充并跳转，比较高级的网址。 
大概过程：a标签连接 -> //www.baidu.com  -> 补充http~ -> 跳转到http~ -> 再跳转到https~。

target:网址的打开方式。

target属性:分多个窗口和单个窗口的情况，单页面情况默认为空白页打开。
1. _blank：空白页窗口打开。
2. _self：在自己当前的窗口打开。
3. _top:在顶级也叫最外面的窗口打开。
4. _parent:在父级页面打开。
target="xxx"，有xxx的窗口就打开或者覆盖该网页，没有就新打开一个。列如优酷的视频窗口只能打开一个。
target和iframe配合使用：targe="xxx" iframe里加一个name="xxx"，则在iframe里打开该页面。

download:点击后不打开该网页，直接下载该网页。

rel=noopener:rel属性指定了目标对象到链接对象的关系为浏览器打开链接而不授予新的浏览上下文对打开它的文档的访问权限。

填写a标签的路径：相对路径与绝对路径。

绝对路径： /a/b/c.html，最前面的/是服务器开启的根目录。
相对路径：不加/或者./。如a/b or ./a/b

伪协议:JavaScript：alert(1);只是为了执行js代码.a标签点击后什么都不执行的需求。

<a href="mailto：315429889@qq.com">查看<a/>点击链接后跳转发送邮箱界面，地址自动跳转。
<a href="tel:10086">打电话给10086<a/>点击链接后跳转到拨号页面，自动填入电话号码。

结合id使用

<a href="#xxx">查看<a/>点击链接后跳转到id为xxx的元素.

img标签：发送get请求，展示图片

img属性：alt/height/width/src

src：一般是使用相对路径。
alt：该属性为当图片未加载出来时显示的文字信息。
height/width:当二者未定义时，图片自适应，或其中之一定义时，另一个自适应。

img标签的事件：onload和onerror

    onload：图片加载成功调用的函数
    onerror：图片加载失败调用的函数，可以用于优化用户体验，比如加载失败后执行xxx.src = "/404.png"展示其他图片。

        (面试手写题：Promise 加载一张图片失败 返回一张默认图片占位？)

响应式：max-width:100%

合格的前端工作人员不会让网页中展示的图片变形。

table标签：表格

table的属性：thead(th)，tbody，tfoot，tr(tbale row)，td(table data)。表头，内容，表格底部，表格行，表格内容。

注意表格的表头和底部可以省略，只有一个tbody也可以。
相关CSS样式

*{margin:0;padding:0}//内边距，外边距为0
table{table-layout:auto;//根据标题字数长度来计算。fixed：算法为平均值
border-collapse:collapse;//调节表格间的间隙
border-spacing:0}//合并表格

<table>
    <thead>
      <tr>
        <td></td>
        <th>数学</th>
        <th>语文</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>分数</th>
        <td>100</td>
        <td>90</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <th>总分</th>
        <td>100</td>
        <td>90</td>
      </tr>
    </tfoot>
  </table>

form标签：发送get或者post请求，刷新页面。(内里组件必须要有一个submit才能提交成功)

required：输入不能为空！H5新增验证器

form属性：action/method/autocomplete/target

action:提交的表单地址，也叫刷新的地址。
method：get或者post两种方式。
autocomplete：会自动读取缓存信息(cookie,starge等)里和name命名相同的信息。
target：和a标签的四个属性相同(_blank,_parent,_self,_top)。

多种input之类的标签的属性：
type="text/color/password/radio(单选，name相同)/checkbox/file(多选,multipe)"
多行文本输入框:
textarea :style="resize:none;width:50%;height:50%"（输入框不可拖动）

form事件：onsubmit

其他事件：onchange和onfocus/onblur
(面试题：button和type的区别?input里不能加其他东西，button可以有任何东西)