前言
本文为HTML入门笔记系列的第二篇,将重点介绍HTML中常用的标签。
以下为正文
a标签的用法
a标签主要用法可分为如下四点
- href ------- 主要起跳转作用,如跳转至指定页面,跳转至内部锚点等
- target
- download ------- 下载页面,存在一定兼容性上的问题
- rel=noopener ------- 后续内容再进行讲解
其中,最重要的就是href和target用法。
先来介绍一下href,其全称为 hyper reference,取值也具有多样性,如下:
- 网址:可使用 https://(网址) 或 http://(网址) 以及 //(网址)等用法。 其中最常用的是最后一项。因为它可以不用人为辨别网页类型,直接HTML自动识别。
- 路径:/a/b/c 或 a/b/c ;index.html 或 ./index.html
- 伪协议:
- javascript:(此处接代码);
- #xxx
- mailto:(此处接邮箱)
- tel:(此处接手机号)
接着就是target的取值,其取值分为内置名字与程序员命名,如下:
- 内置名字
- _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就可以实现,实在是非常方便。