一、基础认知

目标：认识网页组成和五大浏览器，明确web标准的构成，使用html骨架搭建出一个网页。

1.1.1认识网页

1. 网页由那些部分组成 ？ 文字、图片、音频、视频、超链接。

2. 我们看到的网页背后本质是什么？ 代码。

3. 前端的代码是通过什么软件转换成用户眼中的页面的？ 通过浏览器转化（解析和渲染）成用户看到的网页。

1.2.1五大浏览器

浏览器：是网页显示、运行的平台，是前端开发必备利器。

常见的五大浏览器：

IE、火狐（firefox）、谷歌（Chrome）、Safari、欧朋（opera）  

1.2.2渲染引擎

渲染引擎（浏览器内核）：浏览器中专门对代码进行解析渲染的部分。

浏览器出票的公司不同，内在的渲染引擎也是不同的：

注意点：

• 渲染引擎不同，导致解释相同代码时的速度、性能 、效果也不同的；
• 谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱。

1.3.1为什么需要web标准

不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异。

Web标准：让不同的浏览器按相同的标准显示结果，让显示的效果统一。  

1.3.2web标准的构成

Web标准中分成三个构成：

1.3.3 web标准的记忆方法

Web标准要求页面实现：结构、表现、行为三层分离。

2.1.1 html的概念

Html（hyper text Markup language）中文译为：超文本标记语言。

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

Html中是通过html标签来对网页仲的文本、图片、音频、视频等被人进行描述。

2.2.1 html页面固定结构

网页中存在固定的结构，如：整体、头部、标题、主体。

网页中的固定结构是要通过特定的html标签进行描述的。

Html骨架结构组成：

• Html标签：网页的整体
• Head标签：网页的头部
• Body标签：网页的身体
• Title标签：网页的标题

2.3.1使用VS code

注重开发效率和便捷性。

开发工具：visual studio code、webstorm、sublime、Dreamweaver、hbuilder

2.3.2VS code的基本快捷键

1.快速生成标签：英文+tab

2.保存文件：Ctrl+s

3.快速查看网页效果：右键→open in default browser

快捷键：alt+b

4.快速生成结构标签：！+tab

注意1：！必须是英文的，中文无效

    2：文件后缀为.html，否则无效

5.注释:Ctrl+/

3.1.1注释的作用和写法

作用：为代码添加的具有解释性、描述性的信息，主要是用来帮助开发人员理解代码。

浏览器执行代码时会忽略所有的注释。

快捷键：Ctrl+/

3.2.1html标签的结构

标签的结构图：

结构说明：

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

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

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

HTML标签的属性

3.3.1 HTML标签的属性

标签的完整结构图：

属性注意点：

1.标签的属性卸载开始标签内部

2.标签可以同时存在多个属性

3.属性之间以空格隔开

4.标签名与属性之间必须以空格隔开

5.属性之间没顺序之分

3.4.1HTML标签之间的关系

HTML标签与标签之间的关系可分为：

父子关系（嵌套关系）

兄弟关系（并列关系）

 

二．Html标签学习

目标：学习html排版、媒体、链接等基础标签，完成基础网页的开发

1.排版标签

①标题标签

②段落标签

③换行标签

④水平线标签

2.文本格式化标签

3.媒体标签

4.链接标签

 

1.1.1标题标签

代码：h系列标签

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

特点：

• 文字都有加粗
• 文字都有变大，并且从h1→h6文字逐渐减小
• 独占一行

注意点：h1标签对于网页尤为重要，开发仲有特点的使用场景，如：新闻的标题，网页的logo部分

 

1.2.1段落标签

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

代码：< p > < / p >

特点：

• 段落之间存在间隙
• 独占一行

1.3.1换行标签

场景：让蚊子强制换行显示

代码：< br >

特点：

• 单标签
• 让文字强制换行  

1.4.1水平线标签

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

代码:< hr >

特点：

• 单标签
• 在页面仲显示一条水平线

2.1文本格式化标签

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

代码：

3.1.1图片标签的介绍

场景：在网页中显示图片

代码：<img src=”” alt=””>

特点：

• 单标签
• Img标签想要显示对应的效果，需要借助标签的属性进行设置

3.1.2图片标签的src属性

属性名：src

属性值：目标图片的路径

注意点： 当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）

3.1.3图片标签的alt属性

属性名：alt

属性值：替换文本

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

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

3.1.4图片标签的title属性

属性名：title

属性值：提示文本

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

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

3.1.5图片标签的width和height属性

属性名：width和height

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

注意点：

• 如果只设置width或者height仲的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
• 如果同时设置了width和height两个，若设置不当此时图片可能会变形

3.2.1路径的介绍

场景：页面需要加载图片，需要先找到对应的图片，需要通过路径才能找到

路径可分为：

• 绝对路径
• 相对路径

3.3.1绝对路径

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

例如：

3.3.2相对路径

当前文件：当前的html网页

目标文件：要找到的图片

相对路径：从当前文件开始出发找目标文件的过程

相对路径分类：

• 同级目录
• 下级目录
• 上级目录

3.3.3相对路径-同级目录

同级目录：当前文件和目标文件在同一个目录仲

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

VScode快捷键：输人./后，会自动提示同级目录仲有哪些文件，直接选择即可

3.3.4相对路径-下级目录

下级目录：目标文件在下级目录仲

代码步骤：

1.先知道在哪个文件里面→文件夹名字

2.进入这个文件夹→/

3.此时看到目标文件→直接写目标文件名字

VScode快捷键：输入./后，会自动提示当前目标下有哪些文件夹，直接一层层选择即可

3.3.5相对路径-上级目录

上级目录：目标文件在上级目录中

代码步骤:

1.先出当前文件，到上一级目录→../

2.此时看到目标文件→直接写目标文件

VScode快捷键：直接出入../后，会自动提示上级目录下有文件，直接选择即可

 

4.1.1音频标签的介绍

场景：在页面仲插入音频

代码：

常见属性：

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

5.1.1视频标签

场景：在页面中插入视频

代码：

常见属性：

注意点： 视频标签目前支持三种格式：MP4、webM、Ogg

6.1.1链接标签

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

城户：a标签、超链接、锚链接

代码：

特点：

• 双标签，内部可以包裹内容
• 如果需要a标签点击之后去指定页面，需要设置a标签的href属性

显示特点：

• a标签默认文字有下划线
• a标签从未点击过，默认文字显示蓝色
• a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）

6.1.2链接标签的target属性

属性名：target

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

6.1.3空链接

代码：

功能：

• 点击之后回到网页顶部
• 开发中不确定改链接最终跳转位置，用空链接站个位置

7.1.1列表标签

场景：在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等

特点：按照行的方式，整齐显示内容

种类：无序列表、有序列表、自定义列表

7.2.1无序列表

场景：在网页中表示一组无顺序之分的列表，如：新闻列表

标签组成：

显示特点：列表的每一项前默认显示圆点标识

注意点：

• ul标签中只允许包含li标签
• Li标签可以包含任意内容

7.3.1有序列表

场景：在网页中表示一组有顺序之分的列表，如：排行榜

标签组成：

显示特点： 列表中的每一项前默认显示序号标识

注意点：

• ol标签中只需要包含li标签
• li标签可以包含任意内容

7.4.1自定义列表

场景：在网页的底部导航中通常会使用自定义列表实现

标签组成：

显示特点： dd前会默认显示缩进效果

注意点：

• dl标签中只允许包含dt/dd标签
• dt/dd标签可以包含任意内容

8.1.1表格的基本标签

场景：在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表

基本标签：

注意点： 标签的嵌套关系：table＞tr＞td

8.2.1表格相关属性

场景：设置表格基本展示效果

常见相关属性：

注意点： 实际开发时针对于样式效果推荐用CSS设置

8.3.1表格标题和表头单元格标签

场景：在表格中表示整体大标题和一列小标题

标签：

注意点：

• caption标签在书写在table标签内部
• th标签书写在突然标签内部（用于替换td标签）

8.4.1表格的结构标签

场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰

结构标签：

注意点：

• 表格结构标签内部用于包裹tr标签
• 表格的结构标签可以省略

8.5.1合并单元格

步骤：

1.明确合并那几个单元格

2.通过左上原则，确定保留谁删除谁

上下合并→至保留最上的，删除其他

左右合并→至保留最左的，删除其他

3.给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

注意点：

只有同一个结构标签中的单元格才能合并，不能挂结构标签合并（不能跨：thead、tbody、tfoot）

9.1.1表单标签

场景：在网页中显示收集用户信息的表单效果，如：登录页、注册页

标签名：input

input标签可以通过type属性值的不同，展示不同效果

type属性值：

9.1.2 input系列标签-文本框

场景：在网页中显示输入单行文本的表单控件

type属性值：text

常见属性：

9.1.3 input系列标签-密码框

场景：在网页中显示输入密码的表单控件

type属性值：password

常见属性：

注意点：

type属性值不要拼错或者多加空格，否则相当于设置了默认值状态：text→文本框

9.1.4 input系列标签-单选框

场景：在网页中显示多选一的单选的表单控件

type属性值：radio

常见属性：

注意点：

• name属性对于单选框有分组功能
• 有相同name属性值的单选框为一组，一组中只能同时有一个被选中

9.1.5 input系列标签-复选框

场景：在网页中显示多选多的多选的表单控件

type属性值：checkbox

常见属性：

9.1.6 input系列标签-文件选择

场景：在网页中显示文件选择的的表单控件

type属性值：file

常见属性：

9.1.7 input系列标签-按钮

场景：在网页中显示不同功能的按钮的表单控件

type属性值：

注意点：

• 如果需要实现以上按钮功能，需要配合form标签使用
• form使用方法：用form标签把表单标签一起包裹起来即可

9.1.8 input系列标签-日历

Type属性值：date

9.1.9 input系列标签-搜索框

Type属性值：search

9.2.1 button按钮标签

场景：在网页中显示用户点击的按钮

标签名：button

type属性值（同input的按钮系列）

更改按钮里文字，属性：value

注意点：

• 谷歌浏览器中button默认是提交按钮
• button标签是双标签，更便于包裹其他内容：文字、图片等

9.3.1 select下拉菜单标签

场景：在网页中提供多个选择项的下拉菜单表单控件

标签组成：

• select标签：下拉菜单的整体
• option标签：下拉菜单的每一项

常见属性：

selected：下拉菜单的默认选中

9.4.1 textarea文本域标签

场景：在网页中提供可输入多行文本的表单控件

标签名：textarea

常见属性：

• cols：规定了文本域内可见宽度
• rows：规定了文本域内可见行数

注意点：

• 右下角可以拖拽改变大小
• 实际开发时针对于样式效果推荐用CSS设置

9.5.1 label标签

场景：常用于绑定内容与表单标签的关系

标签名：label

使用方法①：

1.使用label标签把内容（如：文本）包裹起来

2.在表单标签上添加id属性

3.在label标签的for属性中设置对应的id属性值

使用方法②：

1.直接使用label标签把内容（如：文本）和表单标签一起包裹起来

2.需要把label标签的for属性删除即可

 

10.1.1语义化标签

没有语义的布局标签-div和span

场景：实际开发网页时会大量频繁的使用到div和span这两个没有语义的布局标签

div标签：一行只显示一个（独占一行）

span标签：一行可以显示多个

 

10.2.1有语义的布局标签

场景：在html5新版本中，退出了一些有语义的布局标签供开发者使用

标签：

注意点：

以上标签显示特点和div一致，但是比div多了不同的语义

11.1.1字符实体

Html的空格合并现象

场景：如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格

常见的字符实体

场景：在网页中展示特殊符号效果时，需要使用字符实体替代

结构：&英文；

常见字符实体：