「HTML」 常用标签(a、img、table标签用法)

1. a 标签

属性：
    href：a链接的地址
    取值
    1. 网址：
       https://www.baidu.com
       http://www.baidu.com
       //www.baidu.com 推荐使用这一种写法。放进浏览器会自动补全
    2. 路径:
       绝对路径：/a/b/c, 【这里的根目录指的是http服务的根目录】
       相对路径：index.html和./index.html
    3. 伪协议:
       javascript:代码;  【需要写冒号和分号】
         - 应用场景：希望点击a标签之后页面不刷新也不返回到顶部，什么也不做：
         - < a href="javascript:0;"> 
         - 这就相当于执行一段没有意义的js代码
       mailto:邮箱
         - < a href="mailto:123@qq.com">
       tel:手机号
         - < a href="tel:123456789">
    4. id: href=#id名，可以跳转到id名为Id的标签
       如< p id="xxxx">, < a href="#xxx">就可以定位到这个p标签

2. img 标签

作用：
    发出GET请求，展示图片
属性：
    src: 图片网络地址或者本地相对绝对地址
    alt: 如果图裂了，无法加载，会显示这个alt属性的文字作为备用
    width 如果只写宽度，高度会自适应
    height 如果只写高度，宽度会自适应
    一个合格的前端不能让图变形！所以就只写宽度或者高度！
事件：
    onload 加载成功
    onerror 加载失败（可以在加载失败的时候替换一张图提升用户体验）
    代码如下：
        < img id="xxx" src="地址" alt="一直狗子">
        < script>xxx.onerror=function(){
          console.log("加载失败")；
          xxx.src="/404.jpg"
        }
        
响应式：
    关键是 max-width:100%
    图片可以自适应手机端不同的屏幕大小

3. table 标签

table标签包含的元素有：
    1.thead
      th   (table head 表头)
      td   (table data 数据)
    2.tbody
      tr   (table row 一行)
      td   (table data 数据)
    2.tfoot
      tr   (table row 一行)
      td   (table data 数据)
table的样式
    1.table-layout:
      table-layout: auto; auto表示根据内容来计算宽度
      table-layout: fixed; fixed表示定宽，尽可能地让宽度平均
    2.border-collapse 和 border-spacing用来调整表格Border的间隔
      一般会设置为：
      table {
                  table-layout: auto;
                  border-collapse: collapse;
                  border-spacing: 0;
              }

4. 总结

html5 标签记忆：
章节标签、内容标签清楚有哪些怎么用，a 标签、img 标签、table 标签、form 标签、input 标签这些  重难点标签需要重点去记，html5 总共有 110 个标签，忘记是很正常的，更多的是知道怎么去搜索，怎么用，实践出真知。