HTML常用标签

a 标签的用法

作用:

1. 跳转到外部页面

2. 跳转到内部锚点

3. 跳转到邮箱或电话

标签的属性

1. herf

a链接的地址

取值：

• www.google.com
• www.google.com
• //www.google.com 推荐使用这一种写法。放进浏览器会自动补全

2. 路径:

• 绝对路径：/a/b/c,
• 相对路径：index.html和./index.html

3. 伪协议:

• javascript:代码; 【需要写冒号和分号】

应用场景：希望点击a标签之后页面不刷新也不返回到顶部，什么也不做：

<a href="javascript:0;"></a>

• mailto:邮箱

<a href="mailto:123456@163.com"> </a>

• tel:手机号

<a href="tel:18066666660"></a>

• id: href=#id名，可以跳转到id名为Id的标签

如<p id="xxxx"></p>, <a href="#xxx"></a>就可以定位到这个p标签

2. target

1. 决定是在本页面还是新开一个页面打开链接
2. 取值：

系统内置的名字：

• a_blank 打开新页面
• a_self 在当前页面打开
• a_top 顶部页面打开
• a_parent 在父级页面打开， 3和4适用于有Iframe内嵌窗口的情况

img标签

• 作用：发出GET请求，展示图片

• 属性

1. src: 图片地址
2. alt: 如果图裂了，无法加载，会显示这个alt属性的文字作为备用
3. width:如果只写宽度，高度会自适应
4. height:如果只写高度，宽度会自适应

一个合格的前端不能让图变形！所以只写宽度或者高度！

• 事件 onload 加载成功 onerror 加载失败

• 响应式 关键就是“max-width: 100%;”

• 标签的用法:

      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  img {
      max-width: 100%;
  }

table 标签的用法

完整的table标签包含的元素有：

1. thead

• tr：table row 一行
• th： table head 表头

2. tbody

• tr：table row
• td：table data 数据

3. tfoot

• table的样式 table-layout: border-collapse 和 border-spacing用来调整表格Border的间隔.

一般会设置为：

table {
            table-layout: auto;
            border-collapse: collapse;
            border-spacing: 0;
        }

• 其他感想

HTML 标签种类有许多，需要反复练习不断熟悉每个的使用用法，才能更好的牢记。