01-HTML认知

基础认知

网页由文字、图片、音频、视频、超链接组成。

我们看到的网页本质是前端代码经过浏览器转换（解析和渲染）后的样子

五大浏览器

浏览器是网页显示、运行的平台，是前端必备的软件

常见的浏览器主要有：

IE浏览器
火狐浏览器（Firefox）
谷歌浏览器（Chrome）
Safari浏览器
欧朋浏览器（Opera）

当前大部分IE浏览器已经升级为Edge浏览器

渲染引擎

不同公司出品的浏览器有不同的浏览器内核，浏览器内核即浏览器中专门用于对代码进行解析渲染的部分

在这里插入图片描述

注意：

渲染引擎不同，导致解析相同代码时的速度、性能和效果也不同
谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱

Web标准

为了让不同的浏览器对同一代码有相同的展示效果，因此制定了Web相关标准，同一展示效果

image-20240722205315851

Web标准的实现要求为：结构、表现、行为三层分离，由HTML搭建页面结构、CSS渲染页面样式，JavaScript完善页面动态交互效果。

HTML概念

HTML（Hyper Text Markup Language）中文译为：超文本标记语言，专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述

搭建网页基本步骤

创建文本文档

之所以是文本文档，是因为该文档没有文件头、文件尾之类的结构，可以直接编写代码

输入代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-加粗文本</title>
</head>
<body>
    <strong>Hello World</strong>
</body>
</html>

修改后缀名为.html

在这里插入图片描述

**注意：**若看不到文件扩展名，则随便选一个文件夹勾选上文件扩展名选项

打开该文件

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

HTML骨架结构

HTML有一定的固定结构，这些固定结构通过特定的HTML标签进行描述

HTML骨架结构如下：

html标签—网页的整体
head标签—网页的头部
body标签—网页的身体
title标签—网页的标题

开发工具的使用

常用的前端开发工具主要有VScode、WebStrom和HBuildX

VScode安装教程参考博客：https://blog.csdn.net/msdcp/article/details/127033151

WebStrom安装教程参考博客：https://blog.csdn.net/qq_17584941/article/details/123497141

HBuild安装教程参考博客：https://blog.csdn.net/leah126/article/details/131443818

本人博客编写用的是WebStrom，后续代码截图基本上都来自于WebStrom

HTML标签学习

HTML注释

注释是程序员为了方便代码理解，添加在代码中，给自己或其他程序员看的内容

注释可以使得代码更具解释性，浏览器执行代码时会忽略所有注释

WebStrom注释快捷键：Ctrl + /

HTML标签的构成

标签结构图：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

HTML标签由<、>、/、英文单词或字母组成，并且<>包裹起来的英文单词或字母称为标签名
常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容

HTML标签的关系

HTML标签的关系主要分为两种：

父子关系

<父标签>
    <子标签></子标签>    
</父标签>

兄弟关系

<兄弟标签1></兄弟标签1>
<兄弟标签2></兄弟标签2>

排版标签

标题标签

HTML中一共有六级标题，重要程度一次递减

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

六级标签文字都存在加粗，并且从1到6，文字大小逐渐减小

h1标签对于网页尤为重要，开发中存在特定的使用场景

HTML有一个特点，那就是“是什么，就是什么”，即标题就是标题，段落就是段落

段落标签

段落标签在新闻和文章的页面中，用于分段显示。段落之间存在间隙，并且段落独占一行

<p>
    我是一段文字
</p>

换行标签

让文字强制换行显示，单标签，让文字强制换行。

换行<br/>

水平线标签

水平线是一条用于分割不同主题内容的水平线，单标签，在页面中显示为水平线

这是一条水平线
<hr/>

文本格式化标签

文本格式化标签主要用于文字的加粗、下划线、倾斜和删除等效果，突出重要性的强调语境

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在实际项目开发中，有一个重要的原则，即：标签语义化。因此相比于<b/>、<u/>之类的标签，我们更推荐使用<strong/>、<ins/>之类的标签

媒体标签

图片标签

在网页中显示图片，单标签，img标签对标签的属性进行设置，其中src是图片的路径、alt是图片加载失败时的替换文本。

<img src="" alt="">

还可以设置width和height属性，来限制图片的宽度和高度

如果只设置一个，则另一个没设置的会进行自动等比例缩放

如果同时设置两个，图片可能会变形

图片属性总结

路径

路径主要分为绝对路径和相对路径，在实际开发中，我们尽量使用相对路径，而不使用绝对路径，因为项目的地址很有可能会进行移动。

绝对路径指的是目录下的绝对位置，可直接到达目标位置，通常是从盘符开始的路径，例如：：D:\day01\images\1.jpg

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

./文件1—当前文件夹下的文件1
../文件2—上一个文件夹下的文件2
../文件夹1/文件3—上一层文件夹下的文件夹1下的文件3

音频标签

可以采用音频标签在页面中插入音频

<audio src=""></audio>

**注意：**目前音频只支持三种格式：MP3、Wav和Ogg

音频常用标签如下

在这里插入图片描述

视频标签

可以用视频标签在页面中插入视频

<video src=""></video>

**注意：**视频标签目前支持三种格式：MP4、WebM、Ogg

视频标签常用属性如下

在这里插入图片描述

链接标签

可以使用链接标签点击跳转到另一个页面，双标签内部可以包裹内容；如果需要a标签点击之后去指定页面，需要设置a标签的href属性

<a href=""></a>

a标签可以通过target的不同属性确定值

在这里插入图片描述

综合案例

案例一：招聘页面

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HTML综合案例</title>
    </head>
    <body>
        <h1>腾讯科技高级web前端开发岗位</h1>
        <hr>
        <h2>职位描述</h2>
        <p>负责重点项目的前端技术方案和架构的研发和维护工作；</p>
        <h2>岗位要求</h2>
        <p>5年以上前端开发经验，精通html5/css3/javascript等web开发技术；</p>
        <p>熟悉bootstrap，vue，angularjs，reactjs等框架，熟练掌握一种以上；</p>
        <p>代码⻛格严谨，能⾼保真还原设计稿，能兼容各种浏览器；</p>
        <p>对web前端的性能优化以及web常见漏洞有一定的理解和相关实践；</p>
        <p>具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力；</p>
        <p>责任心强，思路路清晰，抗压能力好，具备良好的对外沟通和团队协作能力。</p>
        <h3>工作地址</h3>
        <p>上海市-徐汇区-腾云大厦</p>
        <img src="./img/map.jpg" alt="上海市-徐汇区-腾云大厦位置图">
    </body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

案例二：今日热词

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>今日热词案例</title>
    </head>
    <body>
        <h1>今日搜索热词</h1>
        <hr>
        <h2>1、阿卡贝拉</h2>
        <p>
            阿卡贝拉（意大利：Acappella)即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例：
            <a href="./03-music.html" target="_blank">阿卡贝拉《千与千寻》</a>
        </p>
        <h2>2、翻唱</h2>
        <p>
            “翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带
            来不一样的风格。视频示例：
            <a href="./03-video.html" target="_blank">有一种悲伤（翻唱）-《A Kind of Sorrow》</a>
        </p>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>阿卡贝拉《千与千寻》-AZA微唱团</title>
    </head>
    <body>
        <h1>阿卡贝拉《千与千寻》-AZA微唱团</h1>
        <hr>
        <h2>音频</h2>
        <audio src="./img/music.mp3" controls loop></audio>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>有一种悲伤（翻唱）-《A Kind of Sorrow》-Madilyn</h1>
        <hr>
        <h2>视频</h2>
        <video src="./img/video.mp4" controls autoplay></video>
    </body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在这里插入图片描述