一、基础认知
目标：认识 网页组成 和 五大浏览器
明确 Web标准的构成，使用HTML骨架 搭建出一个网页
学习路径：
1.基础概念铺垫
1.1 认识网页
1.1.1 网页由哪些部分组成？
答：文字、图片、音频、视频、超链接
1.1.2 我们看到的网页背后本质是什么？
答：前端程序员写的代码
1.1.3 前端的代码是通过什么软件转换成用户眼中的页面的？
答：通过浏览器转化（解析和渲染）成用户看到的网页
1.2 五大浏览器
浏览器：是 网页显示 运行的平台 是前端开发必备利器
常见的五大浏览器：IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览、欧朋浏览器（Opera）
浏览器市场份额
渲染引擎（了解）
渲染引擎（浏览器内核）：浏览器中专门 对代码进行解析渲染的部分
浏览器出品的公司不同，内在的渲染引擎也是不同的：
| 浏览器 | 内核 | 备注 |
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| FireFox | Gecko | 火狐浏览器内核 |
| Safari | Webkit | 苹果浏览器内核 |
| Chrome/Opera | Blink | Blink其实是Webikit的分支 |
注意点：渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同。
1.3 Web标准
1.3.1 为什么需要Web标准？（了解）
不同浏览器的渲染引擎不同，对于相同的代码解析的效果会存在差异
如果用户想看一个网页，结果用不同浏览器打开的效果不同，用户体验感极差！
Web标准：让不同浏览器按照相同的标准显示结果，让展示的效果统一！
Web标准中分成三个构成：
| 构成 | 语言 | 说明 |
| 结构 | HTML | 页面元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式（如：颜色、大小等） |
| 行为 | JavaScript | 网页模型的定义与页面交互 |
Web标准要求页面实现：结构、表现、行为三层分离
结构：HTML（决定了身体）
表现：CSS（决定了样式美观）
行为：JavaScript（决定了交互的动态效果）
2.HTML初体验
2.1 HTML的感知
2.1.1 HTML的概念
HTML（Hyper Text Markup Language）中文译为：超文本标记语言
专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
案例：文字表粗案例
体验构建一个网页，需要在网页中显示一个加粗的文字（代码：strong）
2.2 HTML骨架结构
2.2.1 HTML页面固定结构
网页类似于一篇文章：
每一页文章内容是有固定的结构的，如：开头、正文、落款等.....
网页中也是存在谷底你那个的结构的，如：整体、头部、标题、主体
网页中的固定结构是要通过特定的HTML标签进行描述的
<html>
<!-- HTML标签：网页的整体 -->
<head>
<!-- head标签：网页的头部 -->
<title>我是标题</title>
<!-- title标签：网页的标题 -->
</head>
<body>
<!-- body标签：网页的身体 -->
我是身体，网页的主体内容
</body>
</html>2.3 开发工具的使用
开发工具有很多：Visual Studio Code、Webstrom、Sublime、Dreamweaver、Hbuilder
3.语法规范
3.1 HTML的注释
3.1.1 什么是注释？
在段落间记录内容的注释，方便下次看到此处理解
3.1.2 注释的作用和写法
注释的作用：
为代码添加具有解释性、描述性的信息，主要用来帮助开发人员理解代码
浏览器执行代码时会忽略所有的注释
注释的快捷键：在VS Code中：ctrl + /
3.2 HTML标签的构成
结构说明：
标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名。
常见的标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分为结束标签，两部分之间包裹内容。
少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。
二、HTML标签学习
目标：学习HTML排版、媒体、链接等基础标签，完成基础网页的开发
学习路径：
1 排版标签
1.1 标题标签
| 场景 | 在新闻和文章的页面中，都离不开标题，用来突出显示文章主题 |
| 代码 | h系列代码 |
| 语义 | 1-6级标题，重要程度依次递减 |
| 特点 | 文字都有加粗、文字都有变大，并从h1-h6文字逐渐变小、独占一行 |
<h1>1级标签</h1>
<h2>2级标签</h2>
<h3>3级标签</h3>
<h4>4级标签</h4>
<h5>5级标签</h5>
<h6>6级标签</h6>1.2 段落标签
| 场景 | 在新闻和文章的页面中，用于分段显示 |
| 代码 | <p>我是一段文字</p> |
| 语义 | 段落 |
| 特点 | 段落之间存在间隙、独占一行 |
1.3 换行标签
| 场景 | 让文字强制换行显示 |
| 代码 | <br> |
| 语义 | 换行 |
| 特点 | 单标签、让文字强制换行 |
1.4 水平线标签
| 场景 | 分割不通主题内容的水平线 |
| 代码 | hr |
| 语义 | 主题的分割转换 |
| 特点 | 单标签、再页面中显示一条水平线 |
2 文本格式化标签
2.1文本格式化标签的介绍
| 场景 | 需要让文字加粗、下划线、倾斜、删除线等效果 |
| 语义 | 突出重要性的强调语境 |
| 标签 | 说明 |
| b | 加粗 |
| u | 下划线 |
| i | 倾斜 |
| s | 删除线 |
| strong | 加粗 |
| ins | 下划线 |
| em | 倾斜 |
| del | 删除线 |
3 媒体标签
3.1 图片标签
| 场景 | 在网页中显示图片 |
| 代码 | <img src="" alt="" |
| 特点 | 单标签、img标签需要展示对应的效果，需要借助标签的属性进行设置 |
标签的完整结构图：<img src="" alt=""> 其中src=属性名 ""=属性值 属性名=属性值
| 标签的属性卸载开始标签内部 |
| 标签上可以同时存在多个属性 |
| 属性之间空格隔开 |
| 标签名与属性之间必须空格隔开 |
| 属性之间没有顺序之分 |
3.1.2 图片标签的alt属性
| 属性名 | alt |
| 属性值 | 替换文本 |
| 当图片加载失败时，才显示alt的文本 | |
| 档图片加载成功时，不会显示alt的文本 | |
<body>
<img src="./XXXX" aly="我是替换文本" title="这是title文字，鼠标停留时显示">
<body>| 属性名 | title |
| 属性值 | 提示文本 |
| 档鼠标停留时，才显示的文本 | |
| 注意点：title属性不仅仅可以用于图片标签，还可用于其他标签 | |
| 属性名 | width和heigh |
| 属性值 | 宽度和高度（数字） |
| 如果只设置width或heigh中的一个，另一个没设置的会自动等比例缩放（图不变形）如果同时设置了width和heigh，若设置不当此时图片可能会变形 | |
3.2 路径
| 绝对路径 | 指目录下的绝对路径，可直接到达目标位置，通常从盘符开始 |
| 盘符开头 | F:\Day01\img\1.jpg |
| 完整的网络路径 | https:\\www.xxx.com/xxxx/img/1.jpg |
| 当前文件 | 当前的html网页 |
| 目标文件 | 要找到的图片 |
| 相对路径 | 从当前文件夹出发找目标文件的过程 |
| 根据路径分类可分为：同级、下级、上级目录 | |
| 同级目录 | 当前文件和目标文件在同一目录中 |
| 类似于 | 当前文件和目标文件都在一个文件夹中 |
| 代码 | |
| 方法一 | <img src="目标图片.gif" |
| 方法二 | <img src="./目标图片.gif" |
| 下级目录 | 目标文件在下级目录中 |
| 代码步骤 | |
| 1.先知道再哪个文件夹里面→文件夹名字 | |
| 2.进入这个文件夹→/ | |
| 3.此时看到目标文件直接打→直接写目标文件名字 | |
| 上级目录 | 目标文件在上级目录中 |
| 代码步骤 | |
| 1.先出当前文件夹，到上级目录中→../ | |
| 2.此时看到目标文件直接打→直接写目标文件名字 | |
3.3 音频标签
| 场景 | 在页面中插入音频 |
| 代码 | <audio src="./music.mp3" controls></audio> |
| 常见属性 | |
| 属性名 | 功能 |
| src | 音频的路径 |
| controls | 显示播放的插件 |
| autoplay | 自动播放 |
| loop | 循环播放 |
3.4 视频标签
| 场景 | 在页面中插入视频 |
| 代码 | <video src="./viedo.mp4 controls"></video> |
| 常见属性 | |
| src | 视频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（谷歌浏览器需配合muted实现静音播放） |
| loop | 循环播放 |
| 注：视频标签目前只支持三种格式：MP4、WebM、Ogg | |
4 链接标签
| 场景 | 点击之后，从一个页面跳转到另一个页面 |
| 称呼 | a标签、超链接、锚链接 |
| 代码 | <a href="./目标网页.html">点击跳转网页</a> |
| 特点 | |
| 双标签，内部可以包裹内容 | |
| 如果需要a标签点击之后去指定页面，需要设置a标签的href属性 | |
| 属性名 | target |
| 属性值 | 目标网页的打开形式 |
| _self | 此值为默认值，在当前窗口中进行跳转（覆盖原网页） |
| _balnk | 在新窗口跳转（保留原网页） |
<a href="https:\\www.baidu.com" target="_blank">打开新页面跳转到百度</a>
扫一扫
7673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
