【前端】HTML认知

Zh0uKal1

已于 2023-12-01 19:44:55 修改

阅读量897

点赞数

分类专栏：前端文章标签：前端 html

于 2022-11-28 22:13:26 首次发布

本文链接：https://blog.csdn.net/qq_39757593/article/details/128088503

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

一、基础认知
二、HTML标签学习

一、基础认知

1.1基础概念铺垫（了解）

1.1.1认识网页（了解）

问题1：网页由哪些部分组成？

文字、图片、音频、视频、超链接

问题2：我们看到的网页背后本质是什么？

前端程序员写的代码

问题3：前端的代码是通过什么软件转换成用户眼中的页面的？

通过浏览器（解析和渲染）成用户看到的网页

1.1.2小结

网页由哪些部分组成？

文字、图片、音频、视频、超链接

咱们程序员写的代码是通过什么软件转换成网页的？

浏览器

1.2.1五大浏览器

浏览器：是网页显示、运行的平台，是前端开发必备利器

常见的五大浏览器：

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

浏览器市场份额

Google Number One！

1.2.2渲染引擎（了解）

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

浏览器出品的公司不同，内在的渲染引擎也是不同的：

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
FireFox	Gecko	火狐浏览器内核
Safari	WebKit	苹果浏览器内核
Chrome/Opera	Blink	Blink其实是Webkit的分支

注意点：

渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同的

1.2.3小结

五大浏览器有哪些？

IE，火狐，Google，Safari，欧朋

相同的网页在不同的浏览器中显示效果会完全一致吗？

因为不同浏览器渲染引擎不同，解析的效果会存在差异

前端工程师日常推荐使用哪一个浏览器？

谷歌浏览器（Chrome）

1.3.1为什么需要Web标准？（了解）

不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异

如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差！

Web标准：让不同的浏览器按照相同的标准显示结果，让显示的效果统一！

1.3.2Web标准的构成

Web标准中分成三个构成：

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式（如：颜色、大小等）
行为	JavaScript	网页模型的定义与页面交互

1.3.3Web标准的记忆方法

Web标准要求页面实现：结构、表现、行为三层分离

结构：HTML（决定了身体）

表现：CSS（决定了样式美观）

行为：JavaScript（决定了交互的动态效果）

1.3.4小结

Web标准构成有哪些？分别通过什么语言表示？

结构：HTML→页面元素
表现：CSS→页面样式
行为：JavaScript→页面交互的动态效果

2.1HTML初体验

2.1.1HTML的概念

HTML（Hyper Text Markup Language）中文译为：超文本标记语言

专门用于网页开发的语言，主要通过HTML标签对网页中的文本，图片，音频，视频等内容进行描述

案例：文字变粗案例

体验构建一个网页，需要在网页中显示一个加粗的文字

2.1.2网页体验-构建基本网页的步骤

<strong>Hello World</strong>

2.2.1HTML网页固定架构

网页类似于一篇文章：

每一页文章内容是有固定的结构的，如：开头，正文，落款等…
网页中也是存在固定的结构的，如：整体，头部，标题，主题

网页中的固定结构是要通过特点的HTML标签进行描述的

<html>
    <head>
        <title>网页的标题</title>
    </head>
    <body>
        网页的主体内容
    </body>
</html>

2.2.2小结

HTML骨架结构由哪些标签组成？

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

2.3.1开发工具有哪些？

Visual Studio Code、Webstorm、Sublime、Dreamweaver、Hbuilder

3.1语法规范

3.1.1什么是注释？

在之前上课学习时，同学们会在书本段落间记录内容的注释，方便下次看到此处理解

问题：同学们在书本段落间记录下的注解是为了给谁看的？
下次的阅读课本者（自己）

程序员在写代码时也会添加注释，方便下次看到此处时方便想起功能和含义

问题：程序员在代码中添加的注释，是为了给谁看的？
下次的阅读代码者（自己或者其他程序员）

3.1.2注释的作用和写法

注释的作用：

为代码添加的具有解析性、描述性的信息，主要用来帮助开发人员理解代码
浏览器执行代码时会忽略所有的注释

注释的快捷键：

在VS Code中：Ctrl+/

3.2.1HTML标签的结构

标签的结构图：

<strong>文字要变粗</strong>

结构说明：

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

<br>换行（单标签）是line break（换行）的缩写
<hr>水平分割线（单标签）是horize的缩写，意思是水平分割线

3.3.1HTML标签与标签之间的关系可分为

父子关系（嵌套关系）

<head>
    <title></title>
</head>

兄弟关系（并列关系）

<head>
</head>
<body>
</body>

二、HTML标签学习

1.1排版标签

1.1.1标题标签

场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题

代码：h系列标签

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

语义：1~6级标题，重要程度依次递减

特点：

文字都有加粗
文字都有变大，并且从h1→h6文字逐渐减小
独占一行

1.1.2小结

标题标签一共有几个？分别代表什么含义？

h1标签：一级标题
h2标签：二级标题
h3标签：三级标题
h4标签：四级标题
h5标签：五级标题
h6标签：六级标题

标题标签有哪些特点？

文字都有加粗
文字都有变大，但是从h1→h6文字逐渐减小
独占一行

1.2.1段落标签

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

代码：<p>我是一段文字</p>

语义：段落

特点：

段落之间存在间隙
独占一行

1.2.2小结

段落标签的标签名是？

p标签

段落标签有哪些特点？

段落之间存在间隙
独占一行

1.3.1 换行标签

场景：让文字强制换行显示

代码：<br>

语义：换行

特点：

单标签
让文字强制换行

1.4.1水平线标签

场景：分割不同主题内容的水平线

代码：<hr>

语义：主题的分割转换

特点：

单标签
在页面中显示一条水平线

2.1文本格式化标签

2.1.1文本格式化标签的介绍

场景：需要让文字加粗，下划线，斜体，~~删除线~~等效果

代码：

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线

标签	说明
strong	加粗
ins	下划线
em	倾斜
del	删除线

语义：突出重要性的强调语境

3.1媒体标签

3.1.1图片标签的介绍

场景：在网页中显示图片

代码：<img src="" alt="">

特点：

单标签
img标签需要展示对应的效果，需要借助标签的属性进行设置！

标签的完整结构图：

在这里插入图片描述

属性注意点：

标签的属性写在开始标签内部
标签上可以同时存在多个属性
属性之间以空格隔开
标签名与属性之间必须以空格隔开
属性之间没有顺序之分

3.1.2图片标签的src属性

属性名：src

属性值：目标图片的路径

注意点：

当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）
路径的情况有很多，稍后会详细介绍

3.1.3图片标签的alt属性

属性名：alt

属性值：替换文本

当图片加载失败时，才显示alt的文本
当图片加载成功时，不会显示alt的文本

3.1.4图片标签的title属性

属性名：title

属性值：提示文本

当鼠标悬停时，才显示的文本

注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签

3.1.5图片标签的width和height的属性

属性名：width和height

属性值：宽度和高度（数字）

注意点：

如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
如果同时设置了width和height两个，若设置不当此时图片可能会变形

3.2.1路径的介绍

场景：页面需要加载图片，需要先找到对应的图片

类似于：生活中两个人，我要去找你，需要通过一定的路径才能找到！

同理：页面需要找到图片，也是需要通过路径才能找到

路径可分为：

绝对路径（了解）
相对路径（常用）

3.2.2绝对路径（了解）

绝对路径：指目录下的绝对位置，可直接到达目标位置，常用从盘符开始的路径

例如：

盘符开头：D:\day01\images\1.jpg
完整的网络地址： https://www.baidu.com/img/PCfb_5bf082d29588c07f842ccde3f97243ea.png

3.2.3相对路径（常用）

概念普及：

当前文件：当前的html网页
目标文件：要找到的图片

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

相对路径分类：

3.2.4相对路径-同级目录

同级目录：当前文件和目标文件在同一个目录中

类似于：我（当前文件）和你（目标文件）都在大厅（一个文件夹中）

生活中：两个独处一室，我想找你，直接喊名字即可！

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

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

3.2.5相对路径-下级目录

在这里插入图片描述

类似于：我在大厅，你累了去卧室休息了，我现在要找到你！

先知道你去了哪一个房间→房间名：卧室
进入这个房间→进入
此时又独处一室→直接喊你名字

代码步骤：

先知道在哪个文件夹里面→文件夹名字
进入这个文件夹→/
此时看到目标文件直接喊它→直接写目标文件名字

3.2.6相对路径-上级目录

在这里插入图片描述

类似于：乾坤大挪移，我在卧室，你还在大厅，我现在要找到你

先要出卧室，来到大厅→出去
此时又独处一室→直接喊你名字

代码步骤：

先出当前文件夹，到上一级目录→…/
此时看到目标文件直接喊她→直接写目标文件

3.3.1音频标签的介绍

场景：在页面中插入音频

代码：<audio src="./music.mp3" controls></audio>

常见属性：

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

注意点：

音频标签目前支持三种格式：MP3，wav，ogg

3.3.2小结

要在网页中插入音频使用什么标签？

audio

音频标签有哪些常见的属性？

src，controls，autoplay，loop

3.4.1视频标签的介绍

场景：在页面中插入视频

代码：<video src="./video.mp4" controls></video>

常见属性：

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

注意点：

视频标签目前支持三种格式：MP4，WebM，Ogg

3.4.2小结

要在网页中插入视频使用什么标签？

video标签

视频标签有哪些常见属性？

src，controls，autoplay，loop

3.5.1链接标签的介绍

场景：点击之后，从一个页面跳转到另一个页面

称呼：a标签，超链接，锚链接

代码：<a href="./目标网页.html">超链接</a>

特点：

双标签，内部可以包裹内容
如果需要a标签点击之后

3.5.2链接标签的target属性

属性名：target

属性值：目标网页的打开形式

取值	效果
_self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

<a href="https://www.baidu.com/" target="_blank">百度一下</a>

Zh0uKal1

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
【前端】HTML认知

前端，HTML认知
复制链接

扫一扫

专栏目录

【前端】HTML认知

文章目录

一、基础认知

1.1基础概念铺垫（了解）

1.1.1认识网页（了解）

1.1.2小结

1.2.1五大浏览器

1.2.2渲染引擎（了解）

1.2.3小结

1.3.1为什么需要Web标准？（了解）

1.3.2Web标准的构成

1.3.3Web标准的记忆方法

1.3.4小结

2.1HTML初体验

2.1.1HTML的概念

2.1.2网页体验-构建基本网页的步骤

2.2.1HTML网页固定架构

2.2.2小结

2.3.1开发工具有哪些？

3.1语法规范

3.1.1什么是注释？

3.1.2注释的作用和写法

3.2.1HTML标签的结构

3.3.1HTML标签与标签之间的关系可分为

二、HTML标签学习

1.1排版标签

1.1.1标题标签

1.1.2小结

1.2.1段落标签

1.2.2小结

1.3.1 换行标签

1.4.1水平线标签

2.1文本格式化标签

2.1.1文本格式化标签的介绍

3.1媒体标签

3.1.1图片标签的介绍

3.1.2图片标签的src属性

3.1.3图片标签的alt属性

3.1.4图片标签的title属性

3.1.5图片标签的width和height的属性

3.2.1路径的介绍

3.2.2绝对路径（了解）

3.2.3相对路径（常用）

3.2.4相对路径-同级目录

3.2.5相对路径-下级目录

3.2.6相对路径-上级目录

3.3.1音频标签的介绍

3.3.2小结

3.4.1视频标签的介绍

3.4.2小结

3.5.1链接标签的介绍

3.5.2链接标签的target属性

“相关推荐”对你有帮助么？