HTML常用标签

Hello大家好，我是Cathy海希！今天来聊一下HTML里常用的一些标签。

a 标签的用法

a标签是很常用，但是初心者往往不会用的标签。

• 作用

  • ️跳转外部面

  • ️跳转页面内部的某处

  • ️跳转到邮箱或者电话等

• 属性

  重点介绍两个：href和target。

  ✅ href

    href是hyper reference的缩写，就是超链接的意思。它可以链接到
    - 网址：//google.com(输入时省略前面就绝对不会错)
    - 路径: ./index.html
    - 伪协议
    
        1.JavaScript代码：这里需要注意的是，只有`herf=“JavaScript:;” `时，才会什么执行都不操作；不信的话，可以试试如果是`herf=“” `时，页面会刷新；如果是`herf=“#” `的话，会滚动到页面的顶部。
  
        2. ️mailto：邮箱
        
        3. ️tel：手机号码
    - id
        `href=#xxx`跳转页面内部某处
  

  ✅ target

    - 可以指向内置的名字
        - _blank:在空白页打开
        - _top：在顶级窗口打开
        - _parent：在上一层窗口打开（可以靠iframe去理解）
        - _self：在当前页面打开
    - 还可以指向我们自行命名，包括：
        - windwo的name
        
            如果我命名`target = xxx`，那么不管我尝试打开几个新页面，浏览器都只会跳向一个页面（可以在console里确认：window.name = xxx)
        - iframe的name
            举个例子吧，可以实现一个将百度和Google同时放在一个页面的效果（不过Google不允许iframe指向自己）。
  

img 标签的用法

• 作用

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

• 属性

  ✅alt

    alt是用于图片无法正常显示时或者给是有视觉障碍的用户说明图片内容的。
  

  ✅height/width

    用于调整图片的高度和宽度，我们改一个的值，另外一个会自动适应。一般不要同时改动两个的值，因为会造成图片的变形！方方老师说不能让图片变形的前端是底线之一。）
  

• 响应式

  很简单，一句代码解决max-width: 100%; 手机端只要满足宽度是100%就够了。

table标签

• 相关的6个标签

thead
tbody
tfoot
tr（row）
th（head）
td（data）

• 相关的样式

  • tale-layout：常用的包括fixed和auto;
  • border-collapse = collaspe;和border-spacing：0;是很常用的CSS rest，意思就是“表格你的默认样式我不喜欢，把我给空隙并起来”。

总结

以上我只介绍了常用的几个标签里的常用的用法，HTML5里总共有110多个标签，想把它们一下子全部掌握可不是容易的事情！我们更应该采取的思路是：掌握基础的常用的，然后在实际操作过程中遇到新的再去学习就好了。

See you next time!