前端学习第一天-HTML初识
一、基础认知：
目标：认识网页组成和五大浏览器，明确Web标准的构成，使用HTML骨架搭建出一个网页
1.基础概念铺垫（了解）
1.1 认识网页（了解）
网页有哪部分组成？
文字、图片、音频、视频、超链接
我们看到的网页背后本质是什么？
前端程序员写的代码
前端的代码是通过什么软件转换成用户眼中的页面的？
通过浏览器转化（解析和渲染）成用户看到的网页
1.2 五大浏览器
浏览器：是网页显示、运行的平台，是前端开发必备利器
常见的五大浏览器：
IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）
1.3 渲染引擎（了解）
渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分
浏览器出品的公司不同，内在的渲染引擎也是不同的：
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| FierFox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| Chrome / Opera | Blink | Blink 其实是 Webkit 分支 |
注意点：
渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同的。
谷歌浏览器的渲染引擎速度快、性能好、效果好，所以更吸引用户的喜爱（推荐）
1.4 Web标准
为什么需要Web标准（了解）
不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异；如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差
Web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一
1.5 Web标准的构成
Web标准中分成三个结构：
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构 | HTML | 页面元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式（如：颜色、大小等） |
| 行为 | JavaScript | 网页模型的定义与页面交互 |
1.6 Web标准的记忆方法
Web标准要求页面实现：结构、表现、行为三层分离
2.HTML初体验
2.1 HTML的概念
HTML（Hyper Text Markup Language）中文译为：超文本标记语言
专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
2.2 HTML页面固定结构
网页类似于一篇文章：
每一页文章内容是有固定的结构的，如：开头、正文、落款等……
网页中也是存在固定的结构的，如：整体、头部、标题、主体
网页中的固定结构是通过特点的HTML标签进行描述的
2.3 为什么要使用 VS code开发工具
通过文本编辑器，如：记事本，完全可以编写网页源代码；但是效率太低
实际开发中，注重开发的 效率和便捷性 ，因此我们会使用一些开发工具
开发工具有很多： Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder
前端开发神器：VS Code → 速度快、体积小、插件多
3. HTML语法规范
3.1 HTML注释
程序员在写代码的时会添加注释，方便下次看到此处时方便想起功能和含义
注释的作用：
为代码添加具有解释性、描述性的信息，主要用来帮助开发人员理解代码
浏览器执行代码时会忽略所有的注释
注释的快捷键：
在 VS Code 中：ctrl + /
3.2 HTML标签的结构
标签的结构图：
结构说明：
1. 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
2. 常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
3. 少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
3.3 HTML标签的关系
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级标题，重要程度依次递减
特点：
1. 文字都有加粗
2. 文字都有变大，并且从h1➡h6文字逐渐减小
3. 独占一行
注意点：h1标签对于网页尤为重要，开发中有特定的使用场景。如：新闻的标题、网页的logo部分
1.2 段落标签
场景：在新闻和文章页面中，用于分段显示
代码：<p>我是一段文字</p>
语义：段落
特点：
1. 段落之间存在间隙
2. 独占一行
1.3 换行标签
场景：让文字强制换行显示
代码：<br>
语义：换行
特点：
1. 单标签
2. 让文字强制换行
1.4 水平线标签
场景：分割不同主题内容的水平线
代码：<hr>
语义：主题的分割转换
特点：
1. 单标签
2. 在页面中显示一条水平线
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="" atl="">
特点：
1. 单标签
2. img标签需要展示对应的效果，需借助标签的属性进行设置
标签的完整结构图：
属性注意点：
1. 标签的属性写在开始标签内部
2. 标签上可以同时存在多个属性
3. 属性之间以空格隔开
4. 标签名与属性之间必须以空格隔开
5. 属性之间没有顺序之分
3.1.1 图片标签的src属性
属性名：src
属性值：目标图片的路径
注意点：
1. 当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）
路径写法：<img src="./1.jpg" alt="" title="">
路径的情况有很多稍后会详细介绍
3.1.2 图片标签的alt属性
属性名：alt
属性值：替换文本
1. 当图片加载失败时，才显示alt的文本
2. 当图片加载成功时，不会显示alt文本
3.1.3 图片标签的title属性
属性名：title
属性值：提示文本；当鼠标悬停时，才显示的文本
注意点：title属性不仅仅可以用于图片标签，还可以用于其他标签
3.1.4 图片标签的width和height属性
属性名：width和height
属性值：宽度和高度（数字）
注意点：
1. 如果只设置widt和height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
2. 如果同时设置了width和height两个，若设置不当此时图片可能会变形
3.1.5 图片标签常见属性
| 属性 | 说明 |
|---|---|
| src | 指定需要展示图片的路径 |
| alt | 替换文本，当图片加载失败时，才显示的文字 |
| title | 提示文本，当鼠标悬停时，才显示的文字 |
| width | 图片的宽度 |
| height | 图片的高度 |
3.2 路径的介绍
场景：页面需要加载的图片，需要先找到对应的图片
类似于：生活中两个人，我要去找你，需要通过一定的路径才能找到
同理：页面需要找到图片，也是需要通过路径才能找到
路径可分为：绝对路径、相对路径
3.2.1 绝对路径
绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
例如：
盘符开头：D:\day01\images\1.jpg
完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif（了解）
3.2.2 相对路径
概念普及：
当前文件：当前的html网页
目标文件：要找到的图片
相对路径：从当前文件开始出发找目标文件的过程
相对路径的分类：
1. 同级目录
2. 下级目录
3. 上级目录
3.2.3 相对路径-同级目录
同级目录：当前文件和目标文件在同一个目录中
类似于：我（当前文件）和你（目标文件）都在大厅（一个文件夹中）
代码：直接写目标文件夹的名字即可
方法1. <img src="目标图片.jpg">
方法2. <img src="./目标图片.jpg">
VS Code快捷操作：直接敲./后，会自动提示同级目录中有哪些文件，直接选择即可！
3.2.4 相对路径-下级目录
下级目录：目标文件夹在下级目录中
类似于：我在大厅，你累了去卧室休息了，我现在要找到你！
1. 先知道你去了哪一个房间 → 房间名：卧室
2. 进入这个房间 → 进入
3. 此时又独处一室 → 直接喊你名字
代码步骤：
1. 先知道在哪个文件夹里面 → 文件夹名字
2. 进入这个文件夹 → /
3. 此时看到目标文件直接喊她 → 直接写目标文件名字
VS Code快捷操作：直接敲./后，会自动提示当前目录下有哪些文件夹，直接一层层选择即可！
3.2.5 相对路径-上级目录
上级目录：目标文件在上级目录中
类似于：乾坤大挪移，我在卧室，你还在大厅，我现在要找到你！
1. 先要出卧室，来到大厅 → 出去
2. 此时又独处一室 → 直接喊你名字
代码步骤：
1. 先出当前文件夹，到上一级目录 → ../
2. 此时看到目标文件直接喊她 → 直接写目标文件
VS Code快捷操作：直接敲../后，会自动提示上级目录下有文件，直接选择即可！
3.3 音频标签的介绍
场景：在页面中插入音频
代码：<audio src="./music.mp3" controls></audio>
常见属性：
| 属性名 | 功能 |
|---|---|
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
注意点：音频标签目前只支持三种格式：MP3、Wav、Ogg
3.4 视频标签的介绍
场景：在页面中插入视频
代码：<video src="./video.mp4" controls></video>
常见属性：
| 属性名 | 功能 |
|---|---|
| src | 视频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（谷歌浏览器中需配合muted实现静音播放） |
| loop | 循环播放 |
注意点：视频标签目前支持三种格式：MP4、WebM、Ogg
4.链接标签
4.1 链接标签的介绍
场景：点击之后，从一个页面跳转到另一个页面
名称：a标签、超链接、锚链接
代码：<a href="./目标网页.html">超链接</a>
特点：
1. 双标签，内部可以包裹内容
2. 如果需要a标签点击之后去指定页面，需要设置a标签的href属性
4.1.1 链接标签的href属性
属性名：href
属性值：点击之后跳转去哪一个网页（目标网页的路径）
1. 外部链接 ：<a href="https://www.baidu.com">百度一下</a>
2. 内部链接 ：<a href="./目标网页.html">目标网页</a>
4.1.2 链接标签的显示特点
显示特点：
1. a标签默认文字有下划线
2. a标签从未点击过，默认文字显示蓝色
3. a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）
4.1.3 链接标签的target属性
属性名：target
属性值：目标网页的打开形式
| 取值 | 效果 |
|---|---|
| _self | 默认值，在当前窗口跳转（覆盖原网页） |
| _blank | 在新窗口中跳转（保留原网页） |
<a href="https://www.baidu.com" target="_blank">百度一下</a>
4.1.4 空链接
代码 ：<a href="#">空链接</a>
功能：
1. 点击之后回到网页顶部
2. 开发中不确定该链接最终跳转位置，用空链接占个位置
