《HTML常用标签》

157 阅读2分钟

1. a标签的用法

<a>,即a标签,a是单词anchor(锚点)的第一个字母。它的作用是跳转到一个元素上。与其他标签一样,它具有许多属性,一些常用的属性如下:

<a>的属性
  • herf属性。hyper reference 超链接的缩写。herf的内容指向<a>跳转的元素。
  • target属性。声明在哪个页面打开需要跳转的元素。若此页面不存在则创建一个新页面并用target中的值命名。
  • download属性。下载而非打开页面,手机浏览器可能不支持。
  • ref=noopener属性。

一些属性的常用取值如下:

  1. herf属性
  • 网址:可以是https://google.comhttp://google.com 还可以是 //google.com
  • 路径:可以是本地文件的一个绝对或相对路径。/a/b/ca/b/c./index.html等。
  • 伪协议:包括js动作、mailto: 邮箱tel: 手机号等。
  • id: href=#xxx,同页面元素的id,此时点击a标签会跳转到id=xxx的元素。
  1. target属性
  • 内置名字:如_blank_top_parent_self等。
  • iframe中自定义的名字,代表打开的页面的名字。

2.table标签的用法

<table> table标签,顾名思义就是表格的样式,与之相关的标签如下:

  • <thead> table head的缩写,只代表包含区域的位置在表头。
  • <th> 表头的真正标题。
  • <tbody> 表的主体。
  • <tfoot> 表结尾部分。
  • <tr> table row代表表格中的一行。
  • <td> table data表格中的内容。 注意<thead><tbody><tfoot>不一定按顺序出现。

相关样式

  • table-layout: fixed 表示每行/列尽量平均。table-layout: auto则会根据内容的多少来自动调整每行/列的高度或宽度。
  • border-collapse: collapse 表示表格内的框线合并。

3.img标签的用法

<img>img标签,image的简称,其作用是发出get请求,展示一张图片。

<img>的属性
  • src属性。src即为source的简称,声明该图片的来源,可以是一个网址,也可以是图片的本地路径。
  • alt属性。其内容为当图片加载不出来时显示的内容。
  • height,width属性。设定图片的高和宽,注意只设定一个,否则可能会导致图片变形。
事件
  • <script> xxx.onload= js code </script>当图片加载出来时会执行什么操作。
  • <script> xxx.onerror= js code </script>当图片加载不出来时会执行什么操作。
响应式
  • 通过设置样式为max-width: 100%来确保图片在小屏幕手机上可以完全显示。 此外,img标签/元素还是一个可替换元素

可替换元素指的是一个外部对象,它们外观的渲染不受CSS的控制。CSS规则至多影响可替换元素的位置,不会影响其内容。