a标签跳到另一个页面指定选项卡_HTML常用标签

前言

本文为HTML入门笔记系列的第二篇，将重点介绍HTML中常用的标签。

以下为正文

---

a标签的用法

a标签主要用法可分为如下四点

• href ------- 主要起跳转作用，如跳转至指定页面，跳转至内部锚点等
• target ------- 指定打开位置
• download ------- 下载页面，存在一定兼容性上的问题
• rel=noopener ------- 后续内容再进行讲解

其中，最重要的就是href和target用法。

先来介绍一下href，其全称为 hyper reference，取值也具有多样性，如下：

1. 网址：可使用 https://(网址) 或 http://(网址) 以及 //(网址)等用法。 其中最常用的是最后一项。因为它可以不用人为辨别网页类型，直接HTML自动识别。
2. 路径：/a/b/c 或 a/b/c ；index.html 或 ./index.html
3. 伪协议：

• javascript:(此处接代码); 此处的冒号与分号都不可省，若代码为空，则可实现点击后页面无任何响应
• #xxx 可直接跳转到id=xxx的标签
• mailto:(此处接邮箱） 可直接打开邮箱发送邮件
• tel:(此处接手机号） 可实现手机点击直接拨打电话

接着就是target的取值，其取值分为内置名字与程序员命名，如下：

1. 内置名字

• _blank ------- 在空白页面打开
• _self ------- 在当前页面打开
• _parent ------- 在当前页面的上一级页面打开
• _top ------- 在最顶层页面打开

2. 程序员命名

· windows的name ------- 代表若有该name的窗口则用它打开，相反则打开新窗口并命名为该name

· iframe的name

img标签的用法

首先是img标签的作用——发出get请求，展示一张照片。

而它的属性也有四点：

• alt ------- 代表图片的描述
• height ------- 图片高度
• width ------- 图片宽度
• src ------- 图片地址

P.S. 若宽和高其中只设置了一个，则另一个会自适应，保持图片原比例。

img标签的响应事件有两种：onload 和 onerror ，分别代表加载成功与失败。

而响应式max-width:100% 可以使得图片自适应窗口变化，保持宽度与窗口一致。

table标签的用法

table标签主要用于建立一个表格。

主要标签如下：

• table 表格起手式
• thead 表头
• tbody 表中
• tfoot 表末
• tr (table row) 新开一行
• td (table data) 表格内容
• th (table head) 表头内容，字体会被加粗

除此之外还有如下样式：

• table-layout : auto/fixed 其中，auto会使表格宽度各自适应，而fixed则平均化
• border-collapse : collapse 会将表格合并
• border-spacing 调整表格线的间距

以上便是HTML常用标签的重点荟萃。

我的想法

任何学习都不是一蹴而就的，知识的积累与即使运用都十分重要，因此在接下来的学习中应该在使用的同时不断回顾旧的内容。而此次学习学到的内容也几乎囊括了HTML的最基础用法的所有内容，理应足够做出一个粗糙的页面了。而且更多的是，平时感觉一些很方便的用法比如输入用户名会有系统推荐，竟然只需要一个autocomplete：on就可以实现，实在是非常方便。