1、HTML初识_排版、图片、音频、视频、超链接标签和绝对、相对路径学习

一、学习目标

能够理解HTML的 基本语法 和标签的关系

能够使用 排版标签 实现网页中标题、段落等效果

能够使用 相对路径 选择不同目录下的文件

能够使用 媒体标签 在网页中显示图片、播放音频和视频

能够使用 链接标签 实现页面跳转功能

二、认识网页

A、网页由哪些部分组成？

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

B、我们看到的网页背后本质是什么？

前端程序员写的代码

C、前端的代码是通过什么软件转换成用户眼中的页面的？

通过浏览器转化（解析和渲染）成用户看到的网页，浏览器是网页显示、运行的平台，是前端开发必备利器，常用的浏览器是谷歌浏览器（Chrome）

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

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

E、Web标准的构成

（二）、HTML的概念

（1）、HTML中文译为：超文本标记语言

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

（2）、HTML页面固定结构

（3）、HTML骨架结构由哪些标签组成？

html标签：网页的整体

head标签：网页的头部

body标签：网页的身体

title标签：网页的标题

（4）、HTML的注释

为了方便下次的阅读代码者（自己或者其他程序员）看到此处时想起功能和含义，帮助开发人员理解代码，浏览器执行代码时会忽略所有的注释，不会执行被注释了的代码。

注释的快捷键：ctrl + /

三、HTML标签学习

（一）、标签

结构说明：

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

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

（3）、少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容

（二）、标签关系

（1）、父子关系（嵌套关系）

（2）、兄弟关系（并列关系）

（三）、排版标签

1、标题标签

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

代码：h系列标签

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

特点：

文字都有加粗

文字都有变大，并且从h1 → h6文字逐渐减小

独占一行

2、段落标签

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

代码：

语义：段落

特点：

段落之间存在间隙

独占一行

3、换行标签

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

代码：<br>

语义：换行

特点：

单标签

让文字强制换行

4、水平线标签

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

代码：<hr>

语义：主题的分割转换

特点：

单标签

在页面中显示一条水平线

5、文本格式化标签

场景：需要让文字加粗、下划线、倾斜、删除线等效果

代码：

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

推荐：

strong、ins、em、del，表示的强调语义更强烈！

（四）、图片标签

场景：在网页中显示图片

代码：

特点：

单标签

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

标签的完整结构图：

属性注意点：

A、标签的属性写在开始标签内部

B、标签上可以同时存在多个属性

C、属性之间以空格隔开

D、标签名与属性之间必须以空格隔开

E、属性之间没有顺序之分

1、src属性

属性名：src

属性值：目标图片的路径

2、alt属性

属性名：alt

属性值：替换文本

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

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

3、title属性

属性名：title

属性值：提示文本

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

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

4、width和height属性

属性名：width和height

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

注意点：

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

如果同时设置了width和height两个，若设置不当此时图片可能会变形

图片的常见属性

（五）、路径

1、绝对路径

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

如：

盘符开头：D:\day01\images\1.jpg

完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif

2、相对路径

从当前文件开始出发找目标文件的过程

（1）、同级目录

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

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

（2）、下级目录

目标文件在下级目录中

（3）、上级目录

目标文件在上级目录中

（六）、音频标签

场景：在页面中插入音频

代码：

常见属性：

注意点：

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

（七）、视频标签

场景：在页面中插入视频

代码：

常见属性：

注意点：

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

（八）、链接标签

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

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

代码：

特点：

双标签，内部可以包裹内容

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

1、href属性

属性名：href

属性值：点击之后跳转去哪一个网页（目标网页的路径）

2、target属性

属性名：target

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

3、空链接

代码：

功能：

点击之后回到网页顶部

开发中不确定该链接最终跳转位置，用空链接占个位置

四、综合案例

（一）、招聘案例

1、效果图

2、文本资料

腾讯科技高级web前端开发岗位

职位描述

负责重点项目的前端技术方案和架构的研发和维护工作；

岗位要求

5年以上前端开发经验， 精通html5/css3/javascript等 web开发技术；

熟悉bootstrap，vue，angularjs，reactjs等框架，熟练掌握一种以上；

代码⻛格严谨，能⾼保真还原设计稿，能兼容各种浏览器； 

对web前端的性能优化以及web常见漏洞有一定的理解和相关实践；

具备良好的分析解决问题能力，能独立承担任务，有开发进度把控能力；

责任心强，思路路清晰，抗压能力好，具备良好的对外沟通和团队协作能力。

工作地址

上海市-徐汇区-腾云大厦

（二）、今日热词案例

1、效果图

2、文字资料

今日搜索热词

1、阿卡贝拉

阿卡贝拉（意大利：Acappella )即无伴奏合唱。其起源可追溯至中世纪的教会音乐，当时的教会音乐只以人声清唱，并不应用乐器。音频示例：阿卡贝拉《千与千寻》 

2、翻唱

“翻唱”是指将已经发表并由他人演唱的歌曲根据自己的风格重新演唱，包括重新填词，编曲。现在已有不少明星，都在翻唱他人的歌，不断在翻唱中突破自己，给大家带

来不一样的风格。视频示例： 有一种悲伤（翻唱）-《A Kind of Sorrow》

阿卡贝拉《千与千寻》-AZA微唱团

音频

有一种悲伤（翻唱）-《A Kind of Sorrow》-Madilyn

视频