HTML 中的常用标签用法

达斯米奇430

已于 2023-06-03 22:39:23 修改

阅读量394

点赞数

文章标签：网络 html 前端

于 2023-06-03 22:39:03 首次发布

本文链接：https://blog.csdn.net/qq_66530223/article/details/130979014

版权

观前提示:本篇博客演示使用的 IDEA 版本为2021.3.3版本,使用的是Java8(又名jdk1.8)

前端使用VSCode(Visual Studio Code1.78.2)

电脑使用的操作系统版本为 Windows 10

前言

本篇博客开始介绍前端主要使用的三个编程语言, HTML, CSS, JavaScript(后续都称为: JS)

注意: 虽然Java 和 JavaScript 名字里面都带了 Java, 但是二者之间不能说没有关系也只能说八竿子打不着.

至于为什么 JavaScript 非要碰瓷 Java, 原因也很简单:因为 Java 是当时最流行的编程语言，带有 "Java" 的名字有助于这门新生语言的传播。

1. 前端三剑客

其中,HTML 和 CSS 这俩语言并不是通常意义上的编程语言,通常意义的编程语言是表述逻辑的,而这个两个语言是表达"属性",也就是描述一个东西是什么样子的,他们并不能描述这个东西干了什么.

HTML 描述了网页的骨架(页面里面有什么东西) -> 骨

CSS 描述了网页的形式(东西长什么样子) -> 皮

JS 描述了网页的行为(如何和用户交互) -> 魂

2. HTML

HTML 描述了网页的骨架. HTML 是非常有特点,标签化的语言

2.1 鲁棒性

我们先用记事本写一个 hello world

然后把记事本的 .txt 后缀修改成 .html 后缀

此时会发现他从记事本的图标变成了浏览器的图标,因为这是他的默认打开方式

如果不会修改后缀也不要着急,看下图

打开你的一个文件夹,查看 -> 隐藏的项目

把勾打上即可

再来看我们修改完的东西,直接双击打开,会发现他是打开浏览器,并且显示出来了 hello world

也可以先打开浏览器,再把这个浏览器图标的文件拖进去,一样可以打开

当然了我们也可以换一个更合法的 html 写法

我们在保存以后,重新打开文件

可以看到打印的效果并没什么区别

这就是鲁棒性(你对他越粗鲁,他表现的越棒)

浏览器对于 html 语法格式的检查没有很严格, 即使你写的代码有一些不合规范之处, 浏览器也会尽可能执行

2.2 VSCode

上面的演示是使用记事本编写前端代码,终究不是现在的主流

前端开发,使用的开发环境,最主流的就是两个

1. JB(JetBrains) 系列

IDEA 如果是专业版(收费),他自己是支持前端的,或者使用 JB 提供的 WebStorm(收费)

2. VSCode

使用体验略逊于 WebStorm,但是他免费

看到这里你可能有一个问题,除了 VSCode 还有一个 VS 他也是前端开工具,并且免费,为什么不推荐使用呢? 因为:

Visual Studio[重量级开发工具]

Visual Studio Code[轻量级开发工具]

除了上面说的这两种选择,还有其他的诸如dw,sublime text, vim等等(notepad++除外)

2.2.1 下载安装

下载安装VSCode,他的这些步骤并不难,但是要注意 VSCode 网上有山寨的,会收费,别下载错了

在浏览器输入 VSCode 然后注意观察标题下面的网址

这种就是科学的域名, 域名和产品名字是匹配的

这里附上一个官网链接

VSCode官网链接

2.3 使用 VSCode

2.3.1 VSCode 保存路径

VScode 和 idea 相比跟简单

因为: idea 用的时候需要先创建一个项目,创建过程需要配置很多东西

而vscode 则没有"项目"这个概念,都是用目录来组织的

这样做就可以选择一个你想要的目录用来存放代码,当你需要代码的时候,打开目录就可以了

(打开目录就相当于以这个目录作为项目目录)

2.3.2 使用 VSCode 编写代码

安装完成后,会看到欢迎页面,我的是已经安装成中文了

0. 切换成中文

点击左边的方块

输入 Chinese 就能找到,安装第一个简体中文的,然后就是简体中文了,如果不行,就重启试试

当然有的人可能打开软件就会提示你切换成中文,我这个是以防万一的

1. 打开目录

找一个你喜欢的目录,用来存放代码

2. 创建代码文件

输入文件名字,我这里起的名字是 blogtest.html

一定要记得加 .html 后缀,否则你创建的就是一个文本文件

这是我创建完的文件

3. 编写代码

把前面编写过的代码重新编写进 VSCode

此时代码的高亮,缩进,提示全都有了

注意: 代码写完要保存

此时他旁边的白色小白点就是未保存的意思

需要按下 CTRL + S 来进行保存

当然了 VSCode 也有自动保存这个功能

在设置里面输入 save

他默认的是off

选择 afterDelay 即可

现在我们在来看前面编写的代码

需要先找到他的本地保存路径,在文件夹中打开他

此时就能看到使用 vscode 创建的文件了

4. 运行代码

双击打开或者拖到浏览器打开

这样就看到了,编写的代码在浏览器中运行的样子了

注意: 红框里面路径显示的是你的电脑里面文件的保存路径,并不是网址,前端开发的时候,可以这样看自己的页面效果

2.4 HTML 基本语法结构

观察上面的代码,可以发现他的特点

1. html 代码是通过标签来组织的,形如 <html> </html> 用尖括号组织的, 成对出现的东西就是 "标签"(tag),也可以叫做 "元素"(element)

2. 一个标签通常是成对出现的 <html> 开始标签 </html> 结束标签 ,这两个中间就是标签的内容

3. 标签可以嵌套, 一个标签的内容可以是其他一个或者多个标签的, 此时,这些标签构成了一个"树形结构"

4.可以在开始标签中, 给标签赋予属性(Attribute), 属性相当于是键值对, 可以有一个或者多个

html: 这是一个 HTML 文件最顶层标签,根节点

head: 存放页面的属性

body: 存放这个页面包含那些内容

2.4.1 快速编辑

不需要每次编写前端代码的时候重新写这个"树形结构",只需要输入 ! (英文),按下 tab, 此时就能生成一个基本的页面, 只需要编辑 body 的内容即可

这个功能叫做 Emmet 快捷键,就是上图右边的

注意: 网页语言的英文是告诉浏览器, 我们当前网页内容是使用的英语, 然后有些浏览器打开网页的时候,会根据系统语言(中文) 和网页语言(英语) 提示用户,是否把网页翻译成中文,并不是展示给用户英文看.

网页标签可以修改,修改完,打开网页就能看到变化

3. HTML 标签用法

通过使用标签,HTML 可以实现更复杂的功能

前面在记事本中写下的 <html> <head> <body> 都是标签中的一部分

<html>: 定义整个文档的根元素，包含网页的基本结构和内容。
<head>: 位于<html>标签内，包含网页的元数据，如标题、描述、关键词等。
<body>: 包含网页的实际内容，可以包含其他HTML元素。

下面将介绍其他常见的标签以及他们的使用

3.1 注释标签

代码的注释, HTML 的注释和一般语言的注释, 差别很大

以前在Java 中使用的注释,在 HTML 中全部不起作用

// Java行注释

/*
 Java多行注释
*/

/**
* Java文档注释
*/

而 html 的注释是这个样子

注意: 虽然注释的内容不会出现在页面中,但是前端代码是可以直接被查看到的

右键 -> 查看网页源代码

如上所示,前端注释可以被直接查看到,所以注释需按照规范不要违规违法,更不要夹杂私人恩怨在里面

在 VSCode 里面使用快捷键 ctrl + / (行注释)或者 shift + alt + a(块注释) 来进行代码注释

3.2 标题标签

标题标签,顾名思义,就是负责调整标题大小的标签

早期 html 只是用来代替传统的媒体(报纸,杂志)的,把报纸,杂志搬到电脑里面

所有他有 H1~H6 这六个标题

其中 H1 最大最粗. H6 最小最细

代码展示

<body>
    <H1>一级标题</H1>
    <h2>二级标题</h2>
    <H3>三级标题</H3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>

网页效果展示

观察上图可知

每个标签都是独占一行,这个独占一行和代码的编写是没有关系的

在 html 里面标签是否换行, 和代码的编写无关,只是和标签自身有关(有的标签独占一行,有的标签不独占)

在html 源代码中写的换行会被忽略,写的多个空格会被视为一个(有的时候忽略,有的时候视为一个)

3.3 段落标签: P

一个生成段落的标签,上面说了,你在 html 中源代码的排版毫无意义, html 直接无视,所以需要使用段落标签来进行区分段落

为了测试段落标签,需要生成大量文字,这个不需要去专门找大段文字或者脸滚键盘,使用 "Lorem" 他可以自动生成一段随机文本,来帮助开发者调试显示效果

我在前两行代码中使用了<p> 标签,后两行代码中没有使用<p> 标签

可以看出,即使他们都在 html 的源代码中独占一行,但是显示出来的效果却是截然不同的

而且使用了<p> 标签, 每个段落之间,不光是换行,同时还有一个明显的段落间距

注意: 为了方便观察,我加入了 "随机文字" 这四个汉字,如果只是使用 Lorem 他自己生成的是全英文的随机文字

3.4 换行标签: br

可以用来换行的标签

观察上面三幅图,会发现,每使用一个 <br> 标签,就会换行一次,使用的越多,换行也就越多

3.5 格式化标签

它拥有四个手下,分别是,变粗,倾斜,下划线,删除线

注意: 这些标签都是不独占一行

3.6 图片标签: img

用来让网页上显示图片的标签

img 有个核心属性, src必填项

src 描述了图片的路径(这个路径可是相对路径,也可以是绝对路径)

3.6.1 绝对路径

这个就是绝对路径的演示

3.6.2 相对路径

这个就是相对路径的演示

注意: 使用相对路径的时候,一定要明确,工作目录是那个, html 的工作目录就是该 html 文件所在的目录

如果你的图片文件不在这里,相对路径是找不到图片的

此时,如果我们新建一个文件夹,名字叫做 image,把图片放到 image 里面,在刷新,会发现图片可以正常显示了

由此可以看出: 相对路径的 ./ 是可以省略的

只要相对路径正确, 图片就算换一个文件夹存储也不影响

那如果图片在 image 里面而 blogtest 在另一个文件夹(hello)里面,相对路径又该怎么写?

根据以前的博客中写的相对路径的写法,使用 ../ 即可返回上一级目录当中

3.6.3 URL路径

除了上面使用绝对路径和相对路径找到图片的方式还有一个方式也可以打开图片

使用图片的 URL 来打开图片

具体方式就是,找到你想要的图片,右键图片 -> 复制图片地址. 此时就得到了图片的网络路径

拿着这个网络路径填写到浏览器里面,就能直接打开图片. 或者把这个路径写到 img 里面, 也能显示这个图片

除了上面的打开图片功能以外, img 还有其他的属性

3.6.4 ALT

alt 属性: 在图片挂了的时候,就会显示 alt 对应的文本

3.6.5 图片属性及尺寸

title 属性

鼠标悬停在图片上,会给一个提示

无法截图,但是效果实现了,想看的可以自己去试试

width/height 描述图片的尺寸

这是高 50像素

这是宽 50像素

px: 像素,是前端开发中常用的单位(当然也有其他单位)

注意: 这两个属性可以同时设置,也可以只设置一个,当只设置一个的时候,另一个没有设置的会自动等比例设置

3.7 超链接标签: a

用来打开其他网址的标签

3.7.1 href

href: 必须具备, 他表示点击后会跳转到那个页面

<a href "网址"> 你想写的名字 </a>

3.7.2 链接的几种用法:

1.外部链接: href 引用其他网站的地址

2. 内部链接: 网站内部页面之间的链接. 写相对路径即可

在一个目录中, 先创建一个 AAA.html, 再创建一个 BBB.html

3. 空链接: 使用 # 在 href 中占位

4. 下载链接: href 对应的路径是一个文件. (可以使用 zip 文件)

5. 网页元素链接: 可以给图片等任何元素添加链接(把元素放到 a 标签中)

点击图片,就可以访问百度

6. 锚点链接: 可以快速定位到页面中的某个位置

<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a>
<p id="one">
第一集剧情 <br>
第一集剧情 <br>
...
</p>
<p id="two">
第二集剧情 <br>
第二集剧情 <br>
...
</p>
<p id="three">
第三集剧情 <br>
第三集剧情 <br>
...
</p>