目录
1. HTML 语法规范
1.1 基本语法概述
1. HTML 标签是
由尖括号包围的关键词
，例如
<html>
。
2. HTML 标签
通常是成对出现的
，例如 <html> 和 </html> ，我们称为
双标签。
标签对中的第一个标签是 开始标签，第二个标签是结束标签。
3. 有些特殊的标签必须是单个标签（极少情况），例如 <br />，我们称为
单标签。
1.2 标签关系
双标签关系可以分为两类：
包含关系
和
并列关系
。
2. HTML 基本结构标签
2.1 第一个 HTML 网页
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
HTML页面也称为 HTML 文档。
| 标签名 | 定义 | 说明 |
| <html></html> | HTML标签 | 页面中最大的标签，我们称为根标签 |
| <head></head> | 文档的头部 | 注意在head标签中我们必须要 设置的标签是title |
| <titile></title> | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| <body></body> | 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到body里面 |
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
HTML 文档的的后缀名必须是 .html 或 .htm
，浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。 ，用浏览器打开这个网页预览我们写的第一个 HTML 文件了
3. 网页开发工具
3.1 VSCode 的使用
1. 双击打开软件；
2. 新建文件（Ctrl + N ）；
3. 保存（Ctrl + S ）, 要保存为 .html 文件；
4. Ctrl + 加号键 ，Ctrl + 减号键 可以放大缩小视图；
5. 生成页面骨架结构，
输入! 按下 Tab 键；
6. 利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口中点击“Open In Default Browser”。
3.2 VSCode 工具生成骨架标签新增代码
1. <!DOCTYPE> 标签：
<!DOCTYPE html>，文档类型声明标签,
告诉浏览器这个页面采取
html5
版本来显示页面
.
2. lang 语言：
<html lang=“en”> 告诉浏览器或者搜索引擎这是一个英文网站. 本页面采取英文来显示.
3. charset 字符集:
<meta charset=“
UTF-8
” />
必须写
.
采取
UTF-8
来保存文字
.
如果不写就会乱码
.
4. HTML 常用标签
4.1 标题标签 <h1> - <h6>
<h1>
我是一级标题
</h1>
单词 head 的缩写，意为头部、标题。
标签语义：
作为标题使用，并且依据重要性递减。
特点：
1. 加了标题的文字会变的加粗，字号也会依次变大。
2. 一个标题独占一行。
4.2 段落和换行标签
<p> 我是一个段落标签 </p>
特点：
1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
2. 段落和段落之间保有空隙。
换行标签 <br />
特点：
1. <br /> 是个单标签。
2. <br /> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
4.3 文本格式化标签
| 语义 | 标签 | 说明 |
| 加粗 | <strong></strong>或者<b></b> | 更推荐使用<strong>标签，语义更强烈 |
| 倾斜 | <em></em>或者<i></i> | 更推荐使用<em>标签，语义更强烈 |
| 删除线 | <del></del>或者<s></s> | 更推荐使用<del>标签，语义更强烈 |
| 下划线 | <ins></ins>或者<u></u> | 更推荐使用<ins>标签，语义更强烈 |
4.4 <div> 和<span>标签
<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。
<div>
分割、分区
</div>
<span>
跨度、跨距
</span>
特点：
1. <div> 标签用来布局，但是现在一行只能放一个<div>。 大盒子
2. <span> 标签用来布局，一行上可以多个 <span>。小盒子
4.5 图像标签和路径 (重点）
1. 图像标签
在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。
<img src="
图像
URL" />
src
是<img>标签的
必须属性
，它用于
指定图像文件的路径和文件名
。
| 属性 | 属性值 | 说明 |
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示的文字 |
| title | 文本 | 提示文本。鼠标放到图像上,显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
图像标签属性注意点：
① 图像标签可以拥有多个属性，必须写在标签名的后面。
② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
③ 属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。
2. 路径(前期铺垫知识)
2.1
(1)目录文件夹和根目录:
目录文件夹：
普通文件夹，里面存放了我们做页面所需的相关素材，比如 html 文件、图片等。
根目录：
打开目录文件夹的第一层就是根目录
(2) VSCode打开目录文件夹
:
文件---- 打开文件夹 . 选择目录文件夹. 后期非常方便管理文件.
采用“路径”的方式来指定图像文件的位置
2.2 路径
相对路径：
以
引用文件所在位置
为参考基础，而建立出的目录路径，即
图片相对于 HTML 页面的位置
| 相对路径分类 | 符号 | 说明 |
| 同一级路径 | 图像文件位于HTML文件同一级，如<img src="baidu.gif" /> | |
| 下一级路径 | / | 图像文件位于HTML文件下一级，如<img src="images/baidu.gif" /> |
| 上一级路径 | ../ | 图像文件位于HTML文件上一级，如<img src=../baidu.gif" /> |
绝对路径：
目录下的绝对位置，直接到达目标位置。
通常是从盘符开始的路径 例如，“D:
\web
\img
\logo.gif”
或完整的网络地址 “http://www.itcast.cn/images/logo.gif”
4.6超链接标签 (重点）
<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。
1. 链接的语法格式
<a href="
跳转目标
" target="
目标窗口的弹出方式
">
文本或图像
</a>
| 属性 | 作用 |
| href | 用于指定链接目标的urI地址， (必须属性) 当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式， 其中_self为默认值（当前窗口打开），_ blank为在新窗口中打开方式。 |
2.链接分类
1. 外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >。
2. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，
例如
< a href="index.html"> 首页 </a >
。
3. 空链接: 如果当时没有确定链接目标时，
< a href="#"> 首页 </a >
。
4. 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
5. 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
6. 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
在链接文本的 href 属性中，设置属性值为
#名字
的形式，如
<a href="#two"> 第2集 </a>
找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：
<h3 id="two">第2集介绍</h3>
5. HTML 中的注释和特殊字符
5.1 注释
HTML中的
注释以“<!--”开头，以“ -->”结束
。
<!-- 注释语句 -->
快捷键
: ctrl + /
即： 注释标签里面的内容是给程序猿看的, 不执行不显示到页面中
5.2 特殊字符
| 特殊字符 | 描述 | 字符的代码 |
| 空格符 | | |
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ￥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ° | 摄氏度 | ° |
| ± | 正负号 | ± |
| ✕ | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方2 (上标2) | ² |
| ³ | 立方3 (上标3) | ³ |
987
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
