灯塔：HTML笔记

网页由哪些部分组成？

*文字图片音频视频超链接

程序员写的代码是通过浏览器转换成网页的

五大浏览器有哪些？

*IE浏览器

*火狐浏览器（Firefox）

*谷歌浏览器（Chrome）

*Safari浏览器

*欧朋浏览器（Opera）

相同的网页在不同的浏览器中的显示效果不会完全一致，因为不同浏览器渲染引擎不同，解析的效果会存在差异

前端工程师日常推荐使用谷歌浏览器

Web标准的构成有哪些？分别通过什么语言表示？

*结构：HTML -> 页面元素

*表现：CSS -> 页面样式

*行为：JavaSccript -> 页面交互的动态效果

HTML骨架结构由哪些标签组成？

*html标签：网页的整体

*head标签：网页的头部

*body标签：网页的身体

*title标签：网页的标题

HTML标签的结构：

标签的结构图：

<strong>文字要变粗</strong>^        ^        ^|        |        |
开始标签  包裹的内容  结束标签

结构说明：

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

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

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

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

*父子关系(嵌套关系)，如

<head><title> <title>
<head>

*兄弟关系（并列关系），如

<head> <head>
<body> <body>

标题标签：

h系类标签：

<h1>1级标签</h1>
<h2>2级标签</h2>
<h3>3级标签</h3>
<h4>4级标签</h4>
<h5>5级标签</h5>
<h6>6级标签</h6>

特点：

*文字都有加粗

*文字都有变大，但是从h1->h6文字逐渐变小

*独占一行

段落标签：

<p>此处为文字</p>

特点：

*段落之间存在间隙

*独占一行

换行标签：

<br>

特点：单标签让文字强制换行

水平线标签：

<hr>

特点：单标签在页面中显示一条水平线

文本格式化标签的介绍：

代码：

标签	说明
b	加粗
u	下划线
i	倾斜
s	删除线

为突出重要语境用：

标签	说明
strong	加粗
ins	下划线
em	倾斜
del	删除线

图片标签的介绍：

场景：在网页中显示图片

代码：

<img src ="" alt="">

特点：

*单标签

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

标签的完整结构图：

<img src="" alt="">^      ^|      |属性名 + 属性值 ->标签属性
属性名="属性值"

属性注意点：

1.标签的属性写在开始标签内部

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

3.属性之间以空格隔开

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

5.属性之间没有顺序之分

图片标签的src属性

属性名：src

属性值：目标图片的路径

注意点：

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

*路径的情况有很多

图片标签的title属性：

属性名：title

属性值：提示文本

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

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

图片标签的alt属性：

属性名：替换文本

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

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

图片标签的width和height属性

属性名：width和height

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

注意点：

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

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

绝对路径：

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

相对路径（常用）：

*当前文件：当前的html网页

*目标文件：要找到的图片

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

相对路径的分类：

*同级目录

*下级目录

*上级目录

相对路径-同级目录

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

方法一：

<img src="目标图片.jpg" >

方法二：

<img src="./目标图片.jpg" >

相对路径-下级目录

代码步骤：

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

2.进入这个文件夹-> /

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

音频标签：

场景：在页面中插入音频

代码：

<audio src="./music.mp3" controls></audio>

常见属性：

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

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

视频标签：

场景：在页面中插入视频

代码：

<video src="./video.mp4" controls></video>

常见属性：

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需配合muted实现静音播放）
loop	循环播放

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

链接标签的介绍：

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

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

代码：

<a href ="./目标网页.html">超链接</a>

特点：

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

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

链接标签的target属性：

属性名:target

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

取值	效果
_self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

列表：

无序列表：

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

标签组成:

标签名	说明
ul	表示无序列表的整体，用于包裹li标签
li	表示无序列表的每一项，用于包含每一行的内容

显示特点：

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

注意点：

*ul标签中只允许包含li标签

*li标签可以包含任何内容

有序列表

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

标签组成：

标签名	说明
ol	表示有序列表的整体，用于包裹li标签
li	表示有序列表的每一项，用于包含每一行的内容

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

注意点：

*ol标签中只允许包含li标签

*li标签可以包含任意内容

自定义列表

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

标签组成：

标签名	说明
dl	表示自定义列表的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

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

注意点：

*dl标签中只允许包含dt/dd标签

*dt/dd标签可以包含任意内容

表格的基本标签

场景：

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

基本标签：

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

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

表格相关属性：

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

常见相关属性：

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

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

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

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

其他标签：

标签名	名称	说明
caption	表格大标题	默认在表格整体位置顶部剧中位置显示
th	表格单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

注意点：

*caption标签书写在table标签内部

*th标签书写在tr标签内部（用于替换td标签）

表格的结构标签

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

结构标签：

标签名	名称
thead	表格头部
tbody	表格主体
tfoot	表格底部

注意点：

*表格结构标签内部用于包裹tr标签

*表格的结构标签可以省略

合并单元格

步骤：

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

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

*上下合并 -> 只保留最上的，删除其他

*左右合并 -> 只保留最左的，删除其他

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

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多列的单元格水平合并

注意点：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并

（不能跨：thead tbody tfoot）

表单标签：

目标：能够使用表单相关标签和属性，实现网页中表单类网页结构搭建

input系列标签的基本介绍：

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

标签名：input

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

type属性值：

标签名	type属性值	说明
input	text	文本框，用于输入单行文本
input	password	密码框，用于输入密码
input	radio	单选框，用于多选一
input	checkbox	多选框，用于多选多
input	file	文件选择，用于之后上传文件
input	submit	提交按钮，用于提交
input	reset	重置按钮，用于重置
input	button	普通按钮，默认无功能，之后配合js添加功能

input系列标签 — 文本框

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

type属性值：text

常用属性：

属性名	说明
placeholder	占位符，提示用户输入内容的文本

input系列标签 — 单选框

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

type属性值：radio

常用属性：

属性名	说明
name	分组，有相同name属性值的单选框为一组，一组中同时只能有一个被选中
checked	默认选中

注意点：

*name属性对于单选框有分组功能

*有相同name属性值的单选框为一组，一组中只能同时有一个被选中

input系列标签 — 按钮

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

type属性值：

标签名	type属性值	说明
input	submit	提交按钮，点击之后提交数据给后端服务器
input	reset	重置按钮，点击之后恢复表单默认值
input	button	普通按钮，默认无功能，之后配合js添加功能

注意点：

*如果需要实现以上按钮功能，需要配合form标签使用

*form使用方法：用form标签把表单标签一起包裹起来即可

button按钮标签

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

标签名：button

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

标签名	type属性值	说明
button	submit	提交按钮，点击之后提交数据给后端服务器
button	reset	重置按钮，点击之后恢复表单默认值
button	button	普通按钮，默认无功能，之后配合js添加功能

注意点：

*谷歌浏览器中button默认是提交按钮

*button标签是双标签，更便于包裹其他内容：文字，图片等