前端基础：网页认识、渲染引擎（浏览器内核）、各种标签、绝对路径与相对路径的区别

heimoxian15

已于 2024-07-19 13:02:48 修改

阅读量809

点赞数 14

文章标签：学习前端

于 2024-04-14 17:49:11 首次发布

本文链接：https://blog.csdn.net/m0_74249400/article/details/137749744

版权

1.网页认识

网页由哪些部分组成?

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

我们看到的网页背后本质是什么?

前端程序员写的代码通过浏览器呈现，浏览器是网页显示、运行的平台

常见的五大浏览器：
IE浏览器、火狐浏览器(Firefox)、谷歌浏览器(Chrome)、Safari浏览器（苹果）、欧朋浏览器(Opera)

2.渲染引擎（浏览器内核)：

浏览器中专门对代码进行解析渲染的部分浏览器出品的公司不同，内在的渲染引擎也是不同的；渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同。

3.Web标准

Web标准的构成有哪些?分别通过什么语言表示?
结构：HTML → 页面元素
表现：CSS → 页面样式
行为：JavaScript →页面交互的动态效果

HTML骨架结构由哪些标签组成?
html标签：网页的整体

head标签：网页的头部

body标签：网页的身体

title标签：网页的标题

注释的作用和写法注释的作用？

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

注释的快捷键：在VSCode中：ctrl+/

4.标签

标签结构说明：

1.标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名

2.常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容

3.少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。<br>强行换行

HTML标签与标签之间的关系可分为：
父子关系（嵌套关系）
<head>
<title></title>
</head>

兄弟关系（并列关系）
<head></head>

标题标签

场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题
代码：h系列标签
<h1>1级标题</h1>

语义：1~6级标题，重要程度依次递减
特点：
文字都有加粗
文字都有变大，并且从h1→h6文字逐渐减小
独占一行

<!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>
    <!-- ctrl + D -->
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
</body>
</html>

效果

换行标签

场景：让文字强制换行显示
代码：<br>
语义：换行
特点:
单标签
让文字强制换行

变换展示

变换前

变换后

水平线标签

场景：分割不同主题内容的水平线代码：<hr>

语义：主题的分割转换

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

文本格式化标签

    <b>加粗</b>
    <strong>加粗</strong>
    <u>下划线</u>
    <ins>下划线</ins>
    <i>倾斜</i>
    <em>倾斜</em>
    <s>删除线</s>
    <del>删除线</del>

图片标签的alt属性

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

width和height属性只需要给出一个值, 另一个等比例缩放 -- 好处就是图片不变形

width和height属性同时设置但不合适，图片变形

只给出一个值, 另一个等比例缩放

音频标签

场景：在页面中插入音频
代码：<audio src="./music.mp3" controls></audio>

常见属性：

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

播放的控件的模样

音频标签目前支持三种格式：MP3、Wav、Ogg

视频标签

介绍场景：在页面中插入视频

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

常见属性：

src视频的路径

controls显示播放的控件

autoplay自动播放（谷歌浏览器中需配合muted实现静音播放）<video src=".video.mp4" controls autoplay muted loop><video>

loop循环播放

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

链接标签

介绍场景：点击之后，从一个页面跳转到另一个页面称呼：a标签、超链接、锚链接代码：<ahref="./目标网页.html">超链接</a>

特点：双标签，内部可以包裹内容

如果需要a标签点击之后去指定页面，需要设置a标签的href属性

链接标签的target属性

属性名：target
属性值：目标网页的打开形式
取值效果
_self 默认值，在当前窗口中跳转（覆盖原网页）
_b1ank 在新窗口中跳转（保留原网页）
<a href="https://www.baidu.com/"target=" blank">百度一下</a>

<a href="#">空链接

特殊字符

在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。

特殊字符   描述   字符代码
~    空格符   &nbsp
<   小于号   &lt
>   大于号   &gt
&   和号   &amp
￥   人民币   &yen
©   版权   &copy
®   注册商标   &reg
°   度   &deg
±   正负号   &plusmn
×   乘号   &times
÷   除号   &divide
²   平方2（上标2）   &sup2
³   立方3（上标3）   &sup3
说明：
1.重点记住：空格、大于号、小于号这三个，其余的使用很少，如果需要回头查阅即可。
2.对比较新的各浏览器，特殊字符基本已经可以和普通文本一样正常输入，但为了网页兼容性和开发方便，大多数情况下依然推荐使用字符代码代替特殊字符本身。