2023年HTML史上最全技术汇总(一)

话不多说,直接开始正题,前端人冲了!

Web标准中有三部分构成:1.HTML(结构)2.CSS(表现)3.JavaScript(行为)

HTML(Hyper Text Markup Language)中文译为“超文本标记语言”,其主要用于网页开发,通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述。

1.HTML的注释

在Vscode环境下,通过ctrl+/指令即可,注释内容不会被浏览器执行。

2.排版标签

2.1 标题标签

代码显示为<h1>-<h6>,在新闻和文章的页面中,都离不开标题,用来突出显示文章主题,1~6级标题,重要程度依次递减,特点是文字都有加粗且变大,并且从h1 → h6文字逐渐减小,独占一行。

需要注意的点:h1标签对于网页尤为重要,开发中有特定的使用场景,如新闻的标题、网页的logo部分等。

2.2 段落标签

代码显示为<p>,主要应用场景是在新闻和文章的页面中,用于分段显示。特点是段落之间存在间隙且独占一行。

2.3 换行标签

代码显示为<br>,主要应用场景是让文字强制换行显示,特点为单标签+让文字强制换行。

2.4 水平线标签

代码显示为<hr>,主要应用场景是分割不同主题内容的水平线,特点是单标签,并且在页面中会显示一条水平线。

3.文本格式化标签

主要应用场景为“需要让文字加粗、下划线、倾斜、删除线等效果”。实际项目开发中选择标签的原则:标签语义化。

即:根据语义选择对应正确的标签,比如需要写标题,就使用h系列标签。比如需要写段落,就使用p标签 ……

好处: 对人而言好理解,好记忆。 对机器而言有利于机器解析,对搜索引擎(SEO)有帮助

个人推荐: strong、ins、em、del,表示的强调语义更强烈!

4.媒体标签

4.1图片标签

主要应用场景为“在网页中显示图片”,特点是单标签 img需要展示对应的效果,需要借助标签的属性进行设置!

标签的完整结构图: 

 属性注意点:

1.标签的属性写在开始标签内部

2.标签上可以同时存在多个属性

3.属性之间以空格隔开

4.标签名与属性之间必须以空格隔开

5.属性之间没有顺序之分

图片标签的src属性:

属性值为目标图片的路径,需要注意,当前网页和目标图片在同一个文件夹中,路径直接写目标图片的名字即可(包括后缀名)路径的情况有很多,稍后会详细介绍。

 图片标签的alt属性:

属性值为替换文本,当图片加载失败时,才显示alt的文本,当图片加载成功时,不会显示alt的文本。

 图片标签的title属性:

属性值为提示文本,当鼠标悬停时,才显示的文本。需要注意,title属性不仅仅可以用于图片标签,还可以用于其他标签。

 图片标签的width和height属性:

属性值为宽度和高度(数字),需要注意的点, 如果只设置width或height中的一个,另一个没设置的会自动等比例缩放(此时图片不会变形);如果同时设置了width和height两个,若设置不当此时图片可能会变形。

 

总结:

4.2路径

页面需要加载图片,需要先找到对应的图片,类似于生活中两个人,我要去找你,需要通过一定的路径才能找到!

同理页面需要找到图片,也是需要通过路径才能找到,路径可分为绝对路径和相对路径。

 4.21 绝对路径

绝对路径指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径。

例如盘符开头:D:\day01\images\1.jpg

完整的网络地址:https://www.itcast.cn/2018czgw/images/logo.gif

4.22 相对路径

假设当前文件是当前的html网页,假设目标文件是要找到的图片。

那么相对路径就是从当前文件开始出发找目标文件的过程,。

相对路径分类:

01.同级目录:./

02.下级目录:文件夹/

03.上级目录:../

4.23 相对路径的同级目录

指的是当前文件和目标文件在同一目录中,类似于我(当前文件)和你(目标文件)都在大厅(一个文件夹中),生活中两个人独处一室,我想找你,直接喊名字即可!

代码步骤:直接写目标文件的名字即可

方法一:<img src="目标图片.gif">

方法二:<img src="./目标图片.gif">

VS Code快捷操作:直接敲./后,会自动提示同级目录中有哪些文件,直接选择即可!

 4.24 相对路径的下级目录

指的是目标文件在下级目录中,类似于我在大厅,你累了去卧室休息了,我现在要找到你! 先知道你去了哪一个房间 → 房间名:卧室

进入这个房间 → 进入 此时又独处一室 → 直接喊你名字

代码步骤:

先知道在哪个文件夹里面 → 文件夹名字

进入这个文件夹 → /

此时看到目标文件直接喊她 → 直接写目标文件名字

VS Code快捷操作:直接敲./后,会自动提示当前目录下有哪些文件夹,直接一层层选择即可!

4.25 相对路径的上级目录

指的是目标文件在上级目录中。

代码步骤:

1.先出当前文件夹,到上一级目录 → ../

2.此时看到目标文件直接喊她 → 直接写目标文件

VS Code快捷操作:直接敲../后,会自动提示上级目录下有文件,直接选择即可!

4.3音频标签

主要场景是在页面中插入音频,代码显示如下:

 常见属性:

 需要注意的点:音频标签目前支持三种格式,分别为MP3、Wav、Ogg

音频标签常见的四种属性:

src:音频路径

controls:音频控件

autoplay:自动播放

loop:循环播放

4.4视频标签

主要场景是在页面中插入视频,代码显示如下:

 常见属性:

 需要注意的点:视频标签目前支持三种格式,分别为MP4 、WebM 、Ogg

5.链接标签

主要场景为点击之后,从一个页面跳转到另一个页面。别称分别为a标签、超链接、锚链接。代码显示如下:

 特点是双标签,内部可以包裹内容,如果需要a标签点击之后去指定页面,需要设置a标签的href属性。

5.1 链接标签的href属性

属性名为href,点击之后跳转去哪一个网页(目标网页的路径)

外部链接: 

内部链接:

 5.2 链接标签的显示特点

a标签默认文字有下划线 ;a标签从未点击过,默认文字显示蓝色;a标签点击过之后,文字显示为紫色(清除浏览器历史记录可恢复蓝色)。

5.3 链接标签的target属性

属性名为target,属性值为目标网页的打开形式,如图所示:

 

5.4 空链接 

代码如下:

功能:

1.点击之后回到网页顶部

2.开发中不确定该链接最终跳转位置,用空链接占个位置

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr Web

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值