HTML常用标签

陈家小狼
203 阅读3分钟

都市，阴天，一只猿。

今天给大家介绍一下HTML中的常见重要的几个标签，如果有讲的不好或者不全的地方，欢迎指正！

a标签

a标签的作用有三：

  1. 跳转外部页面
  2. 跳转到内部锚点
  3. 跳转到电话或者邮件

其主流的几种用法如下:

1. href标签

代码示例：

<a href="https://baidu.com" >百度</a>

href后面如何取值？

  1. 网址

  • baidu.com

  • baidu.com

  • //baidu.com

  • 这三者的区别在于//baidu.com的优先级高于前面两者，自适应会去寻找正确的站点，但是需要在网页里面勾选preserve log设置方能生效。

  1. 路径
  • /a/b/c/(绝对路径)以及a/b/b(相对路径)
  • index.html或./index.html
  1. 伪协议
  • Javascript:代码;
  • mailto:邮箱
  • tel:手机号
  1. ID号
  • href= #xxx

2. target标签

  • blank 在新的空白页打开目标窗口
  • top 在当前页面的顶级页面打开目标窗口
  • parent 在当前页面的上一级页面打开目标窗口
  • self 在当前页面打开窗口

代码示例（含href标签）：

<a href="https://baidu.com" translate="_blank">百度</a>
<a href="https://baidu.com" translate="_top">百度</a>
<a href="https://baidu.com" translate="_parent">百度</a>
<a href="https://baidu.com" translate="_self">百度</a>

table标签(表格)

table标签中只能含有三个标签，分别是：

  • thead
  • tbody
  • tfoot

其他相关标签还有tr、td和th这个三个标签，其用法是嵌套在上面三个标签中使用。 其中tr标签用来包裹行。th不限制只在thead中使用，它只是简单表示标题信息。td则用来包裹数据。

相关样式

  • table-layout
  1. auto 与文本内容长度向适应
  2. fixe 手动设置宽度，达到等宽的效果
  • border-collaps 用来控制border之间是否合并，默认的情况下是间隔2px,
table {
    border-collapse: separate;
    border-spacing: 2px;
}

当然，更多的情况是选择合并。

table {
  border-collapse: collapse;
}
  • border-spacing border之间的间距，上面已经说了默认情况下是间隔2px,当然了，我们可以手动设置这个宽度：
table {
  border-spacing: 50px;
}

img标签

这个标签的作用说的通俗一点就是插入一张图片，学术一点呢就是发出get请求，展示一张图片，通常的代码如下：

<img src="" alt="">

src属性后面接图片的地址，可以是本地，也可以是网络链接。

其他属性

img的其他属性有alt、weight和height。后两者的作用是用来调节图片在屏幕中的大小，记住了！一个合格的前端永远不能让图片变形的。

alt

alt属性这一栏的文本是当图片地址出错时用来替代的图片的，可以是文字，也可以是另一张图片

学习感想

学习前端其实是一件很琐碎的事情，比如你需要记住很多种标签和它的许多属性及其用法，学习的时候往往会觉得有力气却没出使的感觉，这让我想起方方老师（饥人谷的前端教学老师之一）教我的时候说过的一句话——“所见即所学”。学好前端可能更需要一颗能够静下来的心吧，就像生活一样，琐碎沉长，你需要一样一样慢慢的去处理。

完。（欢迎指正错误！）

avatar
文章
阅读
粉丝