文章目录
一、基础认知
1.网页组成与本质
1.1认识网页（了解）
1. 网页组成部分：文字、图片、音频、视频、超链接
2. 网页背后本质：前端代码
3. 前端代码是通过浏览器转化（解析和渲染）成用户看到的网页。
4. 五大浏览器：IE、Firefox、Google Chrome、Safari、Opera。
1.2 渲染引擎（了解）
渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分。- 浏览器出品的公司不同，内在的渲染引擎也是不同的；
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| FireFox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| chrome/Opera | Blink | Blink其实是Webit分支 |
- IE浏览器内核：Trident内核，也是俗称的IE内核；
- Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是
Blink内核；- Firefox浏览器内核：
Gecko内核，俗称Firefox内核；- Safari浏览器内核：
Webkit内核；- Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是
Blink内核；- 360浏览器、猎豹浏览器内核：IE+Chrome双内核；
- 搜狗、遨游、QQ浏览器内核：
Trident（兼容模式）+Webkit（高速模式）；- 百度浏览器、世界之窗内核：IE内核；
- 2345浏览器内核：以前是IE内核，现在也是
IE+Chrome双内核；
- 注意：渲染引擎不同，导致解析相同代码时的
速度、性能、效果也不同的。
1.3 Web标准
Web标准中分成三个构成：
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构 | HTML | 页面元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式（如：颜色、大小等） |
| 行为 | JavaScript | 网页模型的定义与页面交互 |
Web标准要求页面实现：结构、表现、行为三层分离
2. HTML
2.1 HTML的概念
HTML（Hyper Text Markup Language）中文译为：超文本标记语言
- 一个小案例
2.2 HTML页面固定结构
- 网页类似于一篇文章：
- 每一页文章内容是有固定的结构的，如：开头、正文、落款等……
- 网页中也是存在固定的结构的，如：整体、头部、标题、主体
- 网页中的固定结构是要通过特点的
HTML标签进行描述的
<!DOCTYPE html>
<html lang="en">
<head>
<title>网页标题</title>
</head>
<body>
网页主体内容
</body>
</html>
- HTML骨架结构组成：
html标签：网页的整体head标签：网页的头部body标签：网页的身体title标签：网页的标题
2.3 开发工具的使用
- 实际开发中，注重开发的效率性和便捷性，因此我们会使用一些开发工具：
Visual Studio Code、Webstorm、Sublime、Dreamweaver、Hbuilder。VS Code:速度快、体积小、插件多
3. 语法规范
3.1 注释
1. 注释的作用
- 为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码
- 浏览器执行代码时会忽略所有的注释
2. 注释的写法
- 注释快捷键：（VScode中）
ctrl + /- 注释语法：
<!-- 注释 -->
3.2 HTML标签的结构
1. 标签结构图：
2. 结构说明：
- 标签由
<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名。- 常见标签由两部分组成，我们称之为
双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容- 少数标签由一部分组成，我们称之为：
单标签。自成一体，无法包裹内容。
3.HTML标签与标签之间的关系：
父子关系（嵌套关系）
<head>
<title>网页标题</title>
</head>
兄弟关系（并列关系）
<head></head>
<body></body>
二、HTML标签学习
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.2 段落标签
- 场景：在新闻和文章的页面中，用于分段显示
- 代码：
<p>我是一段文字</p>- 语义：段落
- 特点：
- 段落之间存在间隙
- 独占一行
1.3 换行标签
- 场景：让文字强制换行显示
- 代码：
<br>- 语义：换行
- 特点：
- 单标签
- 让文字强制换行
1.4 水平线标签
- 场景：分割不同主题内容的水平线
- 代码：
<hr>- 语义：主题的分割转换
- 特点：
- 单标签
- 在页面中显示一条水平线
以上效果展示
2 文本格式化标签
2.1 文本格式化标签的介绍
- 场景：需要让文字加粗、下划线、倾斜、
删除线等效果。- 代码：
| 标签 | 说明 | 标签 | 说明 |
|---|---|---|---|
| b | 加粗 | strong | 加粗 |
| u | 下划线 | ins | 下划线 |
| i | 倾斜 | em | 倾斜 |
| s | 删除线 | del | 删除线 |
- 语义：突出重要性的强调语境用右边表格语句，左边无语义。
2.2 标签语义化
- 实际项目开发中选择标签的原则：
标签语义化
- 即：根据语义选择对应正确的标签
- 如：需要写标题，就使用h系列标签
- 如：需要写段落，就使用p标签
- ……
- 好处：
- 对人：好理解，好记忆
- 对机器：有利于机器解析，对搜索引擎（SEO）有帮助
- 推荐：
strong、ins、em、del、表示的强调语义更强烈
3 媒体标签
3.1 图片标签
场景：在网页中显示图片
代码：
<img src="" alt="">特点：
- 单标签
img标签需要展示对应的效果，需要借助标签的属性进行设置。标签的完整结构图
属性注意点：
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
src（属性名）
目标图片的路径（属性值）- 例：
<img src="lujing.gif" alt="">
alt（属性名）
替换文本（属性值）- 当图片加载失败时，才显示
alt的文本，成功加载则不会。- 例：
<img src="lujing.gif" alt="猫猫加载失败">
title（属性名）
提示文本（属性值）- 当鼠标悬停时，才显示的文本
- 注：
title属性不仅仅可以用于图片标签，还可以用于其他标签- 例：
<img src="lujing.gif" alt="猫猫加载失败" title="title效果">
width和height（属性名）
宽度和高度（属性值：为数字）- 注意：若只设置
width和height中的一个，另一个则会自动等比例缩放；若同时设置两个，设置不当图片可能会变形。
3.2 路径
- 场景：页面需要加载图片，需要先找到对应图片
- 路径分为两种：
- 绝对路径（了解）
- 相对路径（常用）
3.2.1 绝对路径（了解）
- 指目录下的绝对位置，可直接到达目标位置，通常
从盘符开始的路径。- 例如：
- 盘符开头：
F:\lxt\Web\第一个HTML文档.htm- 完整的网络地址：https://blog.csdn.net/qq_54549527?spm=1011.2415.3001.5343（了解）
3.2.2 相对路径（常用）
- 概念普及：
- 当前文件:当前的
html网页- 目标文件：要找到的图片
- 相对路径：从当前文件开始出发找目标文件的过程
- 相对路径分类：
- 同级目录
- 下级目录
- 上级目录
1.相对路径-同级目录
- 同级目录：当前文件、目标文件在同一目录中
- 代码步骤：直接写目标文件的名字即可（两种）
- 方法一
<img src = "猫猫.gif">- 方法二
<img src = "./猫猫.gif">2.相对路径-下级目录
- 下级目录：目标文件在下级目录中
- 代码：
<img src="image/猫猫.jpg">3.相对路径-上级目录
- 上级目录：目标文件在上级目录中
- 代码：先出当前文件夹，到上一级目录->
../（上两级../../）
<img src="../猫猫.jpg">
3.3 音频标签
- 场景：在页面中插入音频
- 代码：
<audio src="./录音.m4a" controls autoplay loop></audio>- 常见属性：
controls：显示播放的控件（如下图）
- 音频标签目前支持三种格式：
MP3、Wav、Ogg。（但我在vscode中使用audio标签也支持m4a，这个问题有待考察，目前尚不明确原因。）
3.4 视频标签
- 场景：在页面中插入视频
- 代码：
<video src=" " controls></video>- 常见属性：
- 注意点
- 视频标签目前支持三种格式：
MP4、WebM、Ogg
4 链接标签
- 场景：点击之后，从一个页面跳转到另一个页面
- 称呼：
a标签、超链接、锚链接- 代码：
<a href="./目标网页.html">超链接</a>
- 当开发网站初期，还不知道跳转地址的时候，
herf的值写为#，此时为空链接- 特点：
- 双标签，内部可以包裹内容
- 如果需要a标签点击之后去指定页面，需要设置
a标签的href属性- target（属性名）
- 目标网页的打开形式
483
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
