HTML常用标签--持续更新

HTML 常用标签

$$一、<a></a>标签详解$$

1、作用

• 跳转到外部页面。

• 跳转到内部锚点。

• 跳转到邮箱或电话等。

---

2、属性取值及含义

• href

网址：

• https://www.xxx.com/

• http://www.xxx.com/

• ///xxx.com/

推荐使用第三种写法：因为第三种写法浏览器会自动补全前缀，避免网址写错。

---

路径（相对于所在页面的路径来说）：

• 相对路径(一定不以/开头)：a/b/c

• 绝对路径（一定以/开头）：/a/b/c

• index.html 或 ./index.html

---

伪协议：

• javascrpt:/*这里是代码块*/; （进行一段 js 代码）

• mailto 邮箱 （发邮件）

• tel：手机号码 （直接就能进行呼叫）

• id 值（就是锚点链接）

• target

内置取值：

• _blank：在空白页打开

• _top：在顶级窗口打开

• _parent：在当前窗口的上一级打开

• _self：在自己窗口打开

程序员命名：

• window.name ：即 target 的值是一个随意命名的名称，打开一个空白页面，该页面的名称为命名的名称。
• iframe 的 name：target 的值为 iframe 的 name 属性值，点击后直接在 iframe 中打开

---

$$二、<img><img>标签详解$$

1、作用

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

2、属性取值及含义

• alt：当图片加载失败显示的信息
• height:img 的高的属性
• width：img 的宽的属性
• src(source)：路径地址

3、相关的事件

• onload：当图片加载成功后触发
• onerror：当图片加载失败后触发

4、响应式

max-width:100%

5、属于可替换元素

$$三、<table></table>标签详解$$

1、基本代码规范格式

<table>
    <thead>
        <tr><!-- table row -->
            <th>表头1标题1</th><!-- table head -->
            <th>表头2标题2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>表头1的数据1</td><!-- table data -->
            <td>表头2的数据1</td>
        </tr>
        <tr>
            <td>表头1的数据2</td><!-- table data -->
            <td>表头2的数据2</td>
        </tr>
        <tr>
            <td>表头1的数据3</td><!-- table data -->
            <td>表头2的数据3</td>
        </tr>
    </tbody>
    <tfoot></tfoot>
</table>

2、table 的相关样式(解释信息的为样式的属性值)

• table-layout

  fixed：尽量均衡表格行和列的宽度和高度

  auto：自动根据文字字数等预测表格行和列的宽度和高度

  inherit：从父元素继承 border-collapse 属性的值

• border-collapse

  separate：默认值，边框会被分开

  collapse：合并表格单元格

  inherit：从父元素继承 border-collapse 属性的值

• border-spacing

  $$length--length:规定相邻单元的边框之间的距离。使用px、cm等单位。不允许使用负值。$$

  如果定义一个 length 参数，那么定义的是水平和垂直间距。

  如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。

注：以上内容整理来自菜鸟教程和MDN若相关内容有误，可评论或私信我更改（重点常用标签后续跟进更新）