HTML基础（一）

一、基础认知

1.1.1认识网页（了解）

问题1：网页有哪些部分组成？

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

问题2：我们看到的网页背后本质是什么？

前端程序员写的代码

问题3：前端的代码是通过什么软件转换成用户眼中的页面的？

通过浏览器转化（解析和渲染）成用户看到的网页。

1.2.1五大浏览器

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

常见五大浏览器：

IE浏览器、火狐浏览器、谷歌浏览器、Safari浏览器、欧朋浏览器

1.2.2渲染引擎（了解）

1.3.1Web标准

web标准中分成三个构成：

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式
行为	JavaScript	网页模型的定义与页面交互

2.1.1HTML的概念

超文本标记语言

2.2.1HTML页面固定结构

 

标签关系

嵌套关系

并列关系

1.1.1标题标签

h系列标签

​

1级标签

​​

2级标签

​​

3级标签

​​

4级标签

​​

5级标签

​​

6级标签

​

1.2.1段落标签

​

一段文字

​

独占一行

1.3.1换行标签

<br>

让文字强制换行

1.4.1水平线标签

​<hr>

---

​

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

文本格式化标签

代码

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

后四种突出重要性的强调语境

3.1.1图片标签

<img src="" alt="">

借助标签属性进行设置

alt 替换文本

3.1.4图片标签的title属性

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

3.1.5图片标签的width和height属性

宽度和高度

只设置一个，会等比缩放

3.2.1路径的介绍

绝对路径（了解）

从盘符开始

相对路径

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

相对路径分类：

同级目录

下级目录

上级目录

3.3.1 音频标签

在页面中插入音频

​

<audio src=""></audio>

​

属性名	功能
src	音频路径
controls	显示播放的控件
autoplay	自动播放
loop	循环播放

3.4.1视频标签

在页面中插入视频

​ <video src=""></video>

​

4.1链接标签

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

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

4.4链接标签的target属性

目标网页的打开形式

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

列表标签

能够使用无序列表、有序列表 、自定义列表标签，实现网页中列表结构的搭建

2.1无序列表

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

标签组成：

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

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

li标签可以包含任意内容

ol有序列表

自定义列表

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

标签组成：

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

显示特点：

dd前会默认显示缩进效果

注意：

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

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

表格标签

基本标签：

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

表格相关属性

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

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

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

其他标签：

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

4.1表格的结构标签（了解）

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

结构标签：

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

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

表格的结构标签可以省略

5.2合并单元格

步骤：

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

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

上下合并：只保留最上的，删除其他

左右合并：只保留最左的，删除其他

3、给保留的单元格设置：

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

注意：

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

表单