一、HTML 语法规范
1.基本语法
- HTML 标签由尖括号包围关键词，如
<html>。- 多数标签成对出现，分别为开始标签和结束标签，如
<html>和</html>，这类称为双标签。- 少数特殊标签是单个标签，如
<br />，称为单标签。
2.标签关系
- 包含关系：如
<head>标签包含<title>标签，表现为父子层级结构。
- 并列关系：像
<head>和<body>标签，它们处于同一层级，相互并列。
二、HTML 基本结构标签
1.第一个 HTML 网页
每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写｡
HTML页面也称为 HTML 文档.
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
</body>
</html>2. HTML 基本结构标签
每个网页都会有一个基本的结构标签(也称为骨架标签),页面内容也是在这些基本标签上书写｡
HTML 文档的的后缀名必须是 .html 或 .htm ,浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们｡ 此时,用浏览器打开这个网页,我们就可以预览我们写的第一个 HTML 文件了｡
三、 网页开发工具
1.VSCode 的使用
⑴双击打开软件。
⑵ 新建文件（Ctrl + N ）。
⑶保存（Ctrl + S ）, 注意移动要保存为 .html 文件
⑷ Ctrl + 加号键 ，Ctrl + 减号键 可以放大缩小视图
⑸生成页面骨架结构。
输入! 按下 Tab 键。
⑹ 利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口中点击“Open In Default Browser”。
2.好用插件
⑴.Auto RenameTag
改一个标签，自动改剩下那一个
⑵.vs自带的格式化
按ctrl+s能自动将代码对齐好看点
按Ctrl+s
⑶.open in browser
⑷.live Server
在open in browser的基础上多加了个实时更新
注意：要将整个文件夹拖进vscode才行
⑸vscode-icons
可以先显示对应文件的小图标
⑹会了吧
3.常用操作
⑴快速复制一行
快捷键：shift+alt+下箭头（上箭头） 或者ctrl+c然后ctrl+v
⑵选定多个相同的单词
快捷键：ctrl+d
先双击选定一个单词，然后按下ctrl+d可以往下依次选择相同的单词，这样同时修改相同的单词非常方便
⑶添加多个光标
快捷键： Ctrl + Alt + 上箭头(下箭头)
⑷全局替换某写单词
当我们一个页面需要修改大量相同的文字的时候，我们一个的修改超级麻烦，此时我们可以使用全局替换
快捷键： ctrl + h 注意选择全部替换即可
⑸快速定位到某一行
当我们页面比较长的时候，上下滚动页面布方便，其实我们可以利用快捷键，快速的调到指定的行数上。
快捷键： ctrl + g
⑹选择某个区块
可以选择一个区块进行操作
快捷键： 按住shift + alt 然后拖动鼠标
⑺ 放大缩小整个编辑器界面
快捷键： ctrl + + / - ctrl + 加号或者减号
8. 自定义快捷键
有些快捷键，我们使用不习惯，其实我们可以自定义快捷键的。
比如js 的多行注释是 shift + alt + a ，我们想修改为 ctrl + shfit + /
设置方法： 管理按钮 --- 键盘快捷方式 --- 输入 shift + alt + a 找到这个快捷键 ----- 点击编辑按钮 ---- 直接按下 ctrl + shift + / ---- 最后按下回车 修改完毕。
4. 文档类型声明标签
<!DOCTYPE> 文档类型声明,作用就是告诉浏览器使用哪种HTML版本来显示网页｡
<!DOCTYPE html>这句代码的意思是: 当前页面采取的是 HTML5 版本来显示网页.
注意:
1. <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。
2. <!DOCTYPE>不是一个 HTML 标签，它就是 文档类型声明标签。 <!DOCTYPE html>
5. lang 语言种类
用来定义当前文档显示的语言。
1. en定义语言为英语
2. zh-CN定义语言为中文
简单来说,定义为en 就是英文网页, 定义为 zh-CN 就是中文网页
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文
这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的
6.字符集
字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。
在<head>标签内，可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
<meta charset=" UTF-8" />charset 常用的值有:GB2312 ､BIG5 ､GBK 和 UTF-8,其中 UTF-8 也被称为万国码,基本包含了全世界所 有国家需要用到的字符.
注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量 统一写成标准的 "UTF-8"，不要写成 "utf8" 或 "UTF8"。
7.总结
1. 以上三个代码 vscode 自动生成,基本不需要我们重写.
2. <!DOCTYPE html> 文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.
3. <html lang=“en”> 告诉浏览器或者搜索引擎这是一个英文网站. 本页面采取英文来显示.
4. <meta charset=“ UTF-8” /> 必须写. 采取 UTF-8来保存文字. 如果不写就会乱码.具体原理后面分析.
四、HTML常用标签
1.标题标签 <h1> - <h6>(重要)
单词 head 的缩写,意为头部､标题｡
标签语义:作为标题使用,并且依据重要性递减｡
特点：
1. 加了标题的文字会变的加粗，字号也会依次变大。
2. 一个标题独占一行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html>运行结果：
2.段落和换行标签(重要)
在网页中,要把文字有条理地显示出来,就需要将这些文字分段显示｡在 HTML 标签中,<p>标签用于定义段 落,它可以将整个网页分为若干个段落｡
单词 paragraph [ˈpærəgræf] 的缩写,意为段落｡
标签语义:可以把 HTML 文档分割为若干段落｡
特点:
1. 文本在一个段落中会根据浏览器窗口的大小自动换行｡
2. 段落和段落之间保有空隙｡
在 HTML 中,一个段落中的文字会从左到右依次排列,直到浏览器窗口的右端,然后才自动换行｡如果希望 某段文本强制换行显示,就需要使用换行标签 <br />｡
<br />单词 break 的缩写,意为打断､换行｡
标签语义:强制换行｡
特点:
1. <br /> 是个单标签｡
2. <br /> 标签只是简单地开始新的一行,跟段落不一样,段落之间会插入一些垂直的间距｡
3.文本格式化标签
在网页中,有时需要为文字设置粗体､斜体 或下划线等效果,这时就需要用到 HTML 中的文本格式化标签,使 文字以特殊的方式显示｡
标签语义: 突出重要性, 比普通文字更重要.
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或者<b></b> | 更推荐使用<strong>标签加粗语义更强烈 |
| 倾斜 | <em></em>或者<i></i> | 更推荐使用<em>标签加粗语义更强烈 |
| 删除线 | <del></del>或者<s></s> | 更推荐使用<del>标签加粗语义更强烈 |
| 下划线 | <ins></ins>或者<u></u> | 更推荐使用<ins>标签加粗语义更强烈 |
同学们重点记住 加粗 和 倾斜｡
⑴推荐使用的语义化标签
<strong>
全称: Strong emphasis
中文意思: 强调（加粗显示）
用途: 表示文本的重要性，通常以粗体形式显示。它不仅用于样式上的加粗，还传达了语义上的重要性 。
<em>
全称: Emphasis
中文意思: 强调（倾斜显示）
用途: 用于强调文本，通常以斜体形式显示，但更重要的是它带有语义上的强调作用 。
<del>
全称: Deleted text
中文意思: 删除的文本
用途: 标记文档中已被删除或应被删除的文本，通常在文本中间划线表示。
<ins>
全称: Inserted text
中文意思: 插入的文本
用途: 标记文档中新增加的文本，通常以下划线形式显示 。
⑵.传统样式标签
<b>
全称: Bold
中文意思: 粗体
用途: 单纯地为了视觉效果上的加粗文本，不携带额外的语义信息 。
<i>
全称: Italic
中文意思: 斜体
用途: 仅用于视觉上的斜体效果，没有语义上的强调 。
<s>
全称: Strike through
中文意思: 删除线
用途: 文本中间有一条线穿过，表示该文本不再准确或有效。与<del>相比，它更侧重于样式而非语义 。
<u>
全称: Underline
中文意思: 下划线
用途: 在文本下方添加一条线，主要用于装饰目的，而不像<ins>那样具有插入文本的含义
⑶示例代码
<!DOCTYPE html>
<html>
<head>
<title>文本格式化示例</title>
</head>
<body>
<!-- 推荐使用的语义化标签 -->
<p><strong>加粗文本（推荐）strong</strong></p>
<p><em>倾斜文本（推荐）</em></p>
<p><del>删除线文本（推荐）</del></p>
<p><ins>下划线文本（推荐）</ins></p>
<!-- 传统样式标签 -->
<p><b>加粗文本</b> | <i>倾斜文本</i></p>
<p><s>删除线</s> | <u>下划线</u></p>
</body>
</html>运行结果：
4. <div> 和<span>标签
<div> 和 <span> 是没有语义的,它们就是一个盒子,用来装内容的｡
<div> 这是头部 </div>
<span> 今日价格 </span>div 是 division 的缩写,表示分割､分区｡span 意为跨度､跨距｡
特点:
- <div> 标签用来布局,但是现在一行只能放一个<div>｡ 大盒子
- <span> 标签用来布局,一行上可以多个 <span>｡小盒子
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>文本格式化示例</title>
</head>
<body>
<div style="background: #f0f0f0; padding: 20px;">
<h2>这是div块级容器</h2>
<p>每个div独占一行</p>
</div>
<span style="color: red;">行内元素1</span>
<span style="color: blue;">行内元素2</span>
<span style="color: green;">行内元素3</span>
</body>
</html>运行结果：
4. 图像标签和路径 (重点)-单标签
⑴.图像标签
在 HTML 标签中,<img> 标签用于定义 HTML 页面中的图像｡
<img src="图像URL" />单词 image 的缩写,意为图像｡
src 是<img>标签的必须属性,它用于指定图像文件的路径和文件名｡
所谓属性:简单理解就是属于这个图像标签的特性｡
图像标签的其他属性:
①src（source 的缩写）属性：用于指定图像文件的路径。
路径可以是相对路径（相对于当前 HTML 文件的位置）或绝对路径（完整的 URL 地址）。
②alt 属性：图片无法显示时，用文字替换
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图像标签</title>
</head>
<body>
<h4> 图像标签的使用:</h4>
<img src="img.jpg" />
<h4> alt 替换文本 图像显示不出来的时候用文字替换:</h4>
<img src="img1.jpg" alt="我是pink老师" />
</body>
</html>运行结果：
③title:鼠标放在图片上，会显示信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图像标签</title>
</head>
<body>
<h4> title 提示文本 鼠标放到图像上,提示的文字:</h4>
<img src="img.jpg" title="思密达" alt="我是pink老师" />
</body>
</html>运行结果：
鼠标放图片上：
④width 和 height 属性分别用于指定图像的宽度和高度，单位可以是像素（px）或其他 CSS 支持的单位。通过设置这两个属性，可以控制图像在页面上的显示大小
这有助于确保即使在图像完全加载之前，页面布局也不会发生变化。
一般设置一个即可，让其等比缩放
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图像标签</title>
</head>
<body>
<h4> width 给图像设定宽度:</h4>
<img src="img.jpg" alt="我是pink老师" title="思密达" width="500" />
<h4> height 给图像设定高度:</h4>
<img src="img.jpg" alt="我是pink老师" title="思密达" height="100" />
</body>
</html>运行结果：
⑤border：给图像设置边框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图像标签</title>
</head>
<body>
<h4> border 给图像设定边框:</h4>
<img src="img.jpg" alt="我是pink老师" title="我是pink老师思密达" width="500" border="15" />
</body>
</html>
运行结果：
图像标签属性注意点：
① 图像标签可以拥有多个属性，必须写在标签名的后面。
② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
③ 属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。
⑵路径(前期铺垫知识)
①目录文件夹和根目录:
实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。
目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如 html 文件、图片等。
根目录：打开目录文件夹的第一层就是根目录
②路径
页面中的图片会非常多, 通常我们会新建一个文件夹来存放这些图像文件(images),这时再查找图像,就需 要采用“路径”的方式来指定图像文件的位置｡
路径可以分为:
1. 相对路径
2. 绝对路径
③路径之相对路径
相对路径:以引用文件所在位置为参考基础,而建立出的目录路径｡
这里简单来说,图片相对于 HTML 页面的位置
- 上 2 级路径：使用
../../。例如，若图像文件在 HTML 文件上两级目录，代码为<img src="../../baidu.gif" />。这里每一个../代表向上回溯一级目录 。 - 上 3 级路径：使用
../../../。即如果图像文件在 HTML 文件上三级目录，代码是<img src="../../../baidu.gif" />，依此类推，每增加一个../就多向上回溯一级目录。
./（当前目录）
- 含义：表示当前所在的目录，可理解为 “当前文件位置”。在路径中使用时，指向当前目录下的文件或子目录。
- 特点：
- 可省略不写。例如，
./file.txt与file.txt效果相同，都表示当前目录下的file.txt文件。 - 用于明确引用当前目录资源，增强代码可读性（如
./imgs/logo.png表示当前目录下imgs文件夹中的图片）。
- 可省略不写。例如，
../（上一级目录）
- 含义：表示当前目录的父目录（上一层目录），用于向上回溯路径。
- 特点：
- 每出现一次
../，就向上一级目录。例如，../../file.txt表示向上两级目录寻找file.txt。 - 若当前目录是项目根目录（无父目录），则
../可能指向根目录外的上级（如磁盘层级的上一级）。
- 每出现一次
对比示例
假设文件结构如下：
项目根目录/
├── index.html
└── assets/
├── img/
│ └── logo.png
└── data.txt - 在
index.html中引用assets/data.txt，需用./assets/data.txt（或直接assets/data.txt）。 - 在
assets/img/logo.png中若要引用data.txt，需用../data.txt（从img目录向上一级到assets，再找data.txt）。
简而言之，./ 是 “立足当前”，../ 是 “向上一层”，二者通过相对位置定位资源，灵活适配项目结构。
④路径之绝对路径
绝对路径:是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径｡
例如,“D:\web\img\logo.gif” 或 完整的网络地址“http://www.itcast.cn/images/logo.gif”｡
5. 超链接标签 (重点)
在 HTML 标签中,<a> 标签用于定义超链接,作用是从一个页面链接到另一个页面｡
⑴链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>单词 anchor [ˈæŋkə(r)] 的缩写,意为:锚｡
两个属性的作用如下:
⑵链接分类:
①外部链接:
例如 < a href="http:// www.baidu.com "> 百度</a >｡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>超链接标签</title>
</head>
<body>
<h4>1.外部链接</h4>
<a href="http://www.qq.com" target="_self"> 腾讯</a>
</body>
</html>运行结果：
_self:在当前页面打开www.qq.com
_blank:新窗口打开页面
②内部链接:
网站内部页面之间的相互链接. 直接链接内部页面名称即可,例如 < a href="index.html"> 首页 </a >｡
gongsijianjie.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>公司简介</title>
</head>
<body>
传智播客公司简介xxxxxxxx.
</body>
</html>超链接标签.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>超链接标签</title>
</head>
<body>
<h4>2.内部链接: 网站内部页面之间的相互链接</h4>
<a href="gongsijianjie.html" target="_blank">公司简介</a>
</body>
</html>运行结果：
③空链接:
如果当时没有确定链接目标时,< a href="#"> 首页 </a > ｡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>超链接标签</title>
</head>
<body>
<h4>3.空链接:#</h4>
<a href="#">公司地址</a>
</body>
</html>
④下载链接:
如果 href 里面地址是一个文件或者压缩包,会下载这个文件｡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>超链接标签</title>
</head>
<body>
<h4>4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4>
<a href="img.zip">下载文件</a>
</body>
</html>
⑤网页元素链接:
在网页中的各种网页元素,如文本､图像､表格､音频､视频等都可以添加超链接.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>超链接标签</title>
</head>
<body>
<h4>5.网页元素的链接</h4>
<a href="http://www.baidu.com"><img src="img.jpg" /></a>
</body>
</html>运行结果：
点了图片自动跳转网站：
⑥锚点链接:
点我们点击链接,可以快速定位到页面中的某个位置.
在链接文本的 href 属性中,设置属性值为 #名字 的形式,如<a href="#two"> 第2集 </a>
找到目标位置标签,里面添加一个 id 属性 = 刚才的名字 ,如:<h3 id="two">第2集介绍</h3>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>锚点链接示例</title>
</head>
<body>
<!-- 目录部分 -->
<h2>目录</h2>
<ul>
<li><a href="#chapter1">第1集介绍</a></li>
<li><a href="#chapter2">第2集介绍</a></li>
<li><a href="#chapter3">第3集介绍</a></li>
</ul>
<!-- 内容部分 -->
<div style="margin-top: 500px;"></div> <!-- 这里添加一些空白来模拟长页面 -->
<h3 id="chapter1">第1集介绍</h3>
<p>这里是第1集的内容...</p>
<div style="margin-top: 1500px;"></div> <!-- 这里添加一些空白来模拟长页面 -->
<h3 id="chapter2">第2集介绍</h3>
<p>这里是第2集的内容...</p>
<div style="margin-top: 1500px;"></div> <!-- 这里添加一些空白来模拟长页面 -->
<h3 id="chapter3">第3集介绍</h3>
<p>这里是第3集的内容...</p>
</body>
</html>
6.HTML 中的注释和特殊字符
⑴ 注释
如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字,就需要使用注释标签｡
HTML中的注释以“<!--”开头,以“ -->”结束｡
<!-- 注释语句 --> 快捷键: ctrl + /⑵ 特殊字符
在 HTML 页面中,一些特殊的符号很难或者不方便直接使用,此时我们就可以使用下面的字符来替代｡
重点记住:空格 ､大于号､ 小于号 这三个, 其余的使用很少,如果需要回头查阅即可。
扫一扫
686
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
