新人博主一只，欢迎大佬前来指导

喜欢请给个三连加关注呀，谢谢 🌷 🌷 🌷 三连加关注，追文不迷路

你们的支持就是我最大的动力！！！

前言：在我们上网冲浪总会在浏览器上看到各式各样的页面，它们契合我们的生活，密不可分，学习前端开发，第一步要探寻的，就是我们的HTML，这部分的学习其实并不难，因为这只是我们未来往更深的前端开发所铺垫的基石。在接下来的知识分享中，我相信你一定会有所感悟。让我们一起踏入这神奇的代码世界吧！

网络异常，图片无法展示

一.初识前端

在学习前稍微了解一下有关前端的小知识：

前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，最新的高级版本 HTML5 、 CSS3 ，以及 SVG 等。

而前端代码则通过浏览器转化（解析和渲染）成用户所看到的画面。

而渲染引擎（浏览器内核），就是浏览器中专门对代码进行解析渲染的部分。

接下来我们就来了解Web标准——三剑客

三剑客：HTML，CSS，JS

Web标准
构成	语言	作用
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置页面样式
行为	JavaScript	网页模型的定义和页面交互

而今天我们来学习的就是结构——HTML，造就三剑客第一剑。

二.HTML学习

HTML简介

HTML又被称作超文本标记语言，网页中的固定结构是要通过特定的HTML标签进行描述的

通过这一句话，可以看见，我们的HTML标签字段被我画上了重点，可见HTML标签将是我们学习的重头戏，就让我们一起正式进入学习吧！

开发部署

在敲代码前，我们肯定要选择合适的工具，工欲善其事必先利其器嘛，这里呢我给大家推荐的是vscode，纯推荐无恰饭，我觉得这个确实是肥肠好用~首先界面就很整洁干净，而且很多人也确实首推它，毕竟这是我见过插件多得不能再多的编程软件了。安装我就不多介绍，可以上网查询，软件中的插件呢，我就推荐安装open in browser，后面会告诉你为什么要装它。

网络异常，图片无法展示

那么就开始我们的学习吧

HTML标签

常见的标签通常由两部分组成，一前一后，即 双标签

标签则是由我们英文输入法下的<>和其中的英文构成，括号中的英文又称作标签名

我们敲代码首先是要在一个框架里进行的，在写html时，这个框架也完全不用记，我们只需要在vscode中新建一个html后缀的文件，在代码输入的地方，敲入英文状态下的感叹号!并回车，我们就能看到下面这串代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
</body>
</html>

标签逐一熟悉

首先重点！！！标签的括号不需要打，只要输入英文并回车就会自动显示！！！

<html><head><title><body>

现在我们就逐个认识这些标签，可以明显的看到，前后都有出现，互相对应的就是双标签

我们可以做一个形象的比喻

<html>···</html>就是我们一整个身体，包裹住里面的所有内容；

<head>···</head>就是我们的头；其中的<title>···</title>字面上理解就是常说的标题；

<body>···</body>则是我们的身体部分，特别要注意的是，未来我们写的代码，几乎都是在<body>里编写，例如文字，图片，超链接等。

（这个框架完全不用记，由软件帮我们自动生成就好）

现在我们来看需要记忆的内容⬇

<hr>

上面说到，我们写内容在<body>里撰写，那么我们就来学习几个常见的标签

第一个就是这是双标签，代表着加粗字体，观察规律可以看到，双标签最后的标签都会多加一个“/”，表示这个范围的结束，我们的内容被两个标签包含住，就能实现相应的效果了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <strong>文字内容</strong>
    文字内容
</body>
</html>

这是打完代码我们该怎么看？开篇我们讲到：前端代码则通过浏览器转化（解析和渲染）成用户所看到的画面。

那我们就运用上面推荐安装的插件

这时对着代码的地方右键，就可以看到多出了一个open in Default Browser，点击它，我们的代码就能在浏览器中显示出来了，（熟练之后可以直接按住Alt+B）

网络异常，图片无法展示

接着是 ，负责换行，<hr>,显示水平分割线，在上面这个位置的基础上添加这两个，重点： 和<hr>都是单标签，只需要写一个，同样的，我们只需打出br再回车，软件会自动给我们添加括号

<strong>文字内容</strong>
    <br>
    文字内容
    <hr>

这时展示出来的效果：

网络异常，图片无法展示

①h系列——标题标签

标题标签有且只有六个,为双标签，由数字递增字体逐级变小

显示特点：

文字都加粗
文字都变大且独占一行

<h1>h1标题</h1>
    <h2>h2标题</h2>
    <h3>h3标题</h3>
    <h4>h4标题</h4>
    <h5>h5标题</h5>
    <h6>h6标题</h6>

网络异常，图片无法展示

②段落标签

段落标签简称p标签，像我们写过的作文一样，一段内容就用一对括住

应用场景：新闻和文章页面，用于分段显示

显示特点:

段落间会有间隙隔开
每对P显示的内容都会自动换行

<p>第一段</p><p>第二段</p><p>第三段</p>

代码中看似粘连，但显示效果如下

网络异常，图片无法展示

③排版标签

前文已说过，即 换行；<hr>水平分割线

④文本格式标签

上面所说的strong就是其中一种，当然也有可以代替它的，下面列出的表格，每一行所对应的效果相同，但实际用途中，个人主观觉得内容不重要的，可以用前者，而内容重要，也需要用文本格式标签的，则使用后者

(重要性可根据文本意义判断，例如加粗“123”不重要，我们就使用123,而加粗"我爱HTML"无比重要，就可以使用我们的strong了)

b	strong	加粗
u	ins	下划线
i	em	倾斜字体
s	del	删除线

两种作用都相同，突出重要性的强调语境用后者

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <b>强调</b>
    <br>
    <strong>强调</strong>
    <br>
    <u>下划线</u>
    <br>
    <ins>下划线</ins>
    <br>
    <i>倾斜</i>
    <br>
    <em>倾斜</em>
    <br>
    <s>删除</s>
    <br>
    <del>删除</del>
</body>
</html>

网络异常，图片无法展示

⑤媒体标签

媒体标签所展示的内容肯定是我们所常见的三种，图片，音频和视频

（1）图片img标签

标签：<img src=" " alt=" ">

到了这里就要学习新知识了，此时img标签里多了src 和 alt 这两个叫做：属性名

双引号里所要填的值叫做：属性值，属性名+属性值=标签属性，即src=“ ”是一个标签属性

我们逐个来了解，src内所填写的值为图片存储的位置，输入正确就可以在网页中显示出图片

<img src="D:\code\Web\1.10\1.jpg">

若和代码在同一文件夹中，则可直接使用./+文件名代替

<img src="./1.jpg">

属性名	名称	作用
src	路径	图片存放的位置
alt	替换文本	无法显示时出现的替代文字
title	提示文本	鼠标悬停在图片上时显示的文本
width和height	宽与高	只设置其中一个值，图片会等比例缩放，两个都设置可能会变形

图片有两种路径

绝对路径：又包括盘符路径（他人电脑无此图就不显示）和网址路径（无网络显示不出图片）
相对路径：从当前文件(当前html文件)出发找目标文件（代指要找的图片）

相对路径也分为三种情况，

网络异常，图片无法展示

（2）音频标签

音频简单举例可以说是我们的录音或者是音乐，目前支持的文件类型有mp3,wav,ogg,flac这些

标签名：audio

常见属性：

src	音频路径
controls	显示播放控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

注：播放控件即我们平时所见的暂停播放，上/下一曲，控制音量的按钮

<!-- 代码示范 -->
<audio src="./袁王月 - 起风了（片段版）.mp3 " controls autoplay loop> </audio>
<audio src="./Ahxello - Horizon.flac" controls > </audio>

网络异常，图片无法展示

（3）视频标签

属性名：video

常见属性：与音频标签相同

特点：不同于音频，视频在使用autoplay时可能虽无法实现自动播放，但再添加一个muted属性，即可实现静音自动播放

（无法开声音自动播放其实也是为了提升用户体验，想必以前大家也试过，一不小心打开广告页面时，一声：一刀999，装备全靠苟的音响炸裂，那叫一个惊心动魄）

好了,这期的教学到这里就要告一段落后面还有一篇：HTML零基础教程，九大知识点带你玩转前端（上），正在努力码字中，喜欢的小伙伴请给个三连，我们下期不见不散！

HTML零基础教程，九大知识点带你玩转前端（上）

一.初识前端

三剑客：HTML，CSS，JS

二.HTML学习

HTML简介

开发部署

HTML标签

标签逐一熟悉

<html><head><title><body>

<strong><br><hr>

①h系列——标题标签

②段落标签

③排版标签

④文本格式标签

⑤媒体标签

（1）图片img标签

（2）音频标签

（3）视频标签

热门文章

最新文章

相关课程

相关电子书

相关实验场景