HTML常用标签

a标签的用法

1、a标签的作用

（1）跳转至外部页面

（2）跳转至内部锚点

（3）跳转到邮箱或者电话

2、a标签的属性

href 超链接href=hyper reference

target 定义在什么位置打开a标签的内容

download 下载该网页（很多浏览器不支持该属性）

rel=noopener 用于防止bug

3、href取值：

（1）网址：

google.com

google.com

//google.com

（2）路径

/a/b/c

a/b/c

index.html

./index.html

（3）伪协议

javascript: 代码;（若a标签内为"javascript: ;"则可生成一个什么都不做的a标签）

maito： 邮箱

tel： 手机号

（4）id

href=#xxx(id) 则可跳转到id为xxx的标签

4、a标签target的取值

（1）target="_blank" 在新的空白页面打开

（2）target="_top" 在顶部窗口打开页面

（3）target="_parent" 在母窗口打开页面

（4）target="_self" 在本身窗口打开页面

（5）target="xxx(id)" 在id为xxx的窗口打开页面

img标签的用法

1、img标签的作用

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

2、属性

（1）alt 当图片加载失败时，显示alt内容alt=alternate

（2）height/width 设定图片的高和宽，当只设定一个值时另一个会根据图片自适应。注意尽量不要同时设定两个值容易导致图片变形

（3）src 图片地址

3、事件

onload图片加载成功时响应, onerror图片加载失败时响应

 <script>
 xxx(id).onload = function(){
     console.log('图片加载成功')
 }
 
 xxx.onerror = function(){
     console.log('图片加载失败');
     xxx.scr="另一张图片地址";
 }
 

4、响应式

使图片最大宽度为100%，可以很好适应不同浏览器或者手机

style: max-width=100%

注意，img为可替换元素

table标签用法

table标签用于生成表格

thead 表头

tbody 表格内容

tfoot 表尾

tr = table row 一行

th = table head 表头（用于thead标签）

td = table data 表格数据（用于tbody/tfoot标签）

例子

<table>
    <thead>
        <tr>
            <th>英语</th>
            <th>翻译</th>
       </tr>
   </thead>
   <tbody>
       <tr>
           <td>hyper</td>
           <td>超级</td>
       </tr>
       <tr>
           <td>target</td>
           <td>目标</td>
      </tr>
   </tbody>
</table>

若在table中漏写thead/tfoot/tbody浏览器会自动将tr内容加入tbody中

table相关的样式

table-layout :auto(fixed); 自动设定表格宽度

border-collapse: collapse; 合并边框

border-spacing Xpx; 单元格间空隙大小

其他感想

HTML常用标签的属性很多，其中form标签和input标签的属性尤其多，需要大量练习熟记。