本文档是HTML与CSS学习的第一天内容，涵盖了网页和HTML的本质，Web标准的定义、作用和构成，HTML的基本语法、常用标签，如标题、段落、图像、音频和视频标签的使用，以及文件路径、超链接的语法和类型。此外，还介绍了VSCode编辑器的快捷键，以及HTML注释和特殊字符。内容深入浅出，适合初学者入门。
HTML与CSS学习第一天
目录
1. 网页
1.1 网页介绍
-
网页是网站的一“页”，通常是HTML格式的文件，通过浏览器来阅读。
-
网站是在因特网上根据一定的规则，使用HTML等制作的用于展示特点内容相关的网页集合
-
网页本质是HTML文件，通常由图片，链接，视频，音频，文字等元素组成。
1.2 HTML本质
-
HTML是 超文本标记语言(Hyper Text Markup Language)
-
是标记语言，和markdown类似，不是编程语言
2. web标准
2.1 web标准定义
web标准是有W3C组织和其他标准化组织制定的一系列标准的的集合。
W3C：万维网联盟。
2.2 web标准作用
不同的浏览器解析各自标准的HTML文件得到的效果不同，为了让在不同浏览器解析的效果相同，就需要web标准。
2.3 web标准的构成
- 主要由结构，表现，行为三个方面
- 结构，行为，样式分离
- 表格
| 标准 | 说明 |
|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，现阶段主要学HTML。 |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS。 |
| 行为 | 行为是指网页模型的定义及其交互的编写，现在主要学JavaScript。 |
3. HTML语法介绍
3.1. 基本语法
-
HTML标签是由尖括号包围的关键词，如
<Html>。 -
双标签：成对出现，如
<HTML></HTML>，前面的称开始标签，后面为结束标签。 -
单标签：
<br>,<img>标签。
3.2 结构图
4. VSCode编译器使用
4.1 快捷键使用
-
！+table/回车 ：生成文档类型声明标签（<!DOCTYPE>），告诉浏览器使用何种HTML版本显示网页。
-
Ctrl+D:在选中一个关键字或内容的情况下，加选相同的内容。
-
alt+鼠标左键：加选光标，配合crtl+shift+左方向键使用。
-
crtl+shift+左方向键：选择所有光标的左边部分。
5. HTML常用标签
5.1 标题标签
-
<H1>-<H5> -
标签语义：标题使用，根据重要性从1到6递减。
-
特点：1. 文字会变粗，字号会变大。
2.一个标题独占一行。
5.2 段落标签
<p></p>- 标签语义：可以把HTML文档分割成若干段落。
- 特点：1. 一个段落中的文本会根据浏览器窗口的大小自 动换行。
2. 段落和段落之间保有间隙。
5.3 换行标签
<br>标签- 标签语义：强制换行。
- 特点：
- 单标签。
- 标签简单的开始下一行，和段落间隙不一样（段落之间有垂直间距）。
5.4一些格式化标签
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或<b></b> | 推荐使用strong标签，加粗 |
| 倾斜 | <em></em>或<i></i> | 推荐使用em标签倾斜，倾斜 |
| 删除线 | <del></del>或<s></s> | 推荐使用del标签加上删除线 |
| 下划线 | <ins></ins>或<u></u> | 推荐使用ins标签加上下划线 |
5.5 div和span标签
| 标签 | 相同点 | 不同点 |
|---|---|---|
| div | 无语义标签 | 一行放一个，大盒子 |
| span | 无语义标签 | 一行放多个，小盒子 |
5.6 图像标签
-
<img>- 特点：单标签
- 语义：图像
- src属性是该标签必须的
-
标签属性介绍
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图像加载失败时显示 |
| title | 文本 | 提示文本，鼠标悬停在图片上显示的文字 |
| width | 像素（px） | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像边框的粗细 |
注意点
- 图像标签拥有多个属性，每个属性写在标签的后面，如
<img src="xxx" alt="加载失败"> - 属性之间不分先后顺序，属性与属性之间用空格隔开
- 属性与属性值的书写格式：key=“value”格式
5.7 音频标签
- 目前支持三种格式：MP3，wav，ogg
- 格式
<audio src="音频路径" controls></audio>
- 常用属性
| 属性名 | 功能 |
|---|---|
| src | 音频路径 |
| controls | 显示播放控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
- 插图
5.8视频标签
- 目前支持三种格式：MP4，webm，ogg。
- 格式
<video src+"视频路径" controls></video>
- 常用属性
| 属性名 | 功能 |
|---|---|
| src | 视频路径 |
| controls | 显示播放控件 |
| autoplay | 自动播放（谷歌浏览器需配合mutex实现静音播放） |
| loop | 循环播放 |
5.9 水平线线标签
- 单标签
- 在页面中显示一条水平线
- 格式
<hr>
6.文件路径
6.1路径的相对路径
- 定义：以引用文件所在位置为参考基础，而建立出的目录路径
- 图表介绍
| 相对路径类别 | 符号 | 说明 |
|---|---|---|
| 同级目录 | 直接写路径名 | |
| 下级目录 | / | 当前目录下的文件 |
| 上级目录 | …/ | 回到上级目录 |
6.2 路径的绝对路径
- 绝对路径：通常为以盘符开始的路径。
7.超链接标签
7.1链接的语法格式
- a即英文单词anchor，锚点
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
7.2 链接的属性
| 属性 | 作用 |
|---|---|
| href | 用于指定链接的URl（统一资源定位符）地址，必须属性，标签具有href属性时，他就拥有了超链接的功能 |
| target | 指定链接页面的打开方式，_self为默认值，当前窗口打开， _ blank在新窗口打开 |
7.3 链接分类
| 链接类别 | 举例 | 说明 |
|---|---|---|
| 外部链接 | <a href="https://www.baidu.com">百度一下</a> | 外部的资源链接 |
| 内部链接 | <a href="index.html">内部资源</a> | 链接访问本地资源,网站内部页面之间的相互链接，直接链接内部名称即可。 |
| 空链接 | <a href="#">回到顶部</a> | 没有确定链接时，单击可以回到页面顶部 |
| 下载链接 | <a href="一个文件或压缩包地址">下载</a> | 下载地址对应的文件 |
| 网页元素链接 | 网页中的各种元素，如文本，音频，视频，表格，图像都可以添加超链接 | |
| 锚点链接 | 目标位置：<h3 id="two">HTML介绍</h3>链接位置： <a href="#two">html介绍</a> | 通过点击，可以迅速定位到页面中的某个位置 |
8.HTML注释和特殊字符
8.1 HTML注释格式
<!-- 注释语句--> vscode快捷键：ctrl+/
/* 注释语句 */ 标签内的注释样式
8.2特殊字符
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
9. HTML标签与标签之间的关系
- 父子关系（嵌套关系）
<head>
<title></title>
</head>
- 兄弟关系（并列关系）
<head></head>
<body></body>
3696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
