引言
致谢 尚硅谷、MDN、掘金、Google 等平台
本篇笔记综合以上平台相关内容，结合自己理解写成！
整理时间：🍅🍅🍅🍅🍅🍅🍅
一、前置知识
1.1 计算机先驱者
二战时期破译德军的战争编码：英格玛
让二战提前2年结束，拯救了上千万人的生命
设立图灵奖，被后人誉为：”人工智能之父”
制定了现代计算机标准：冯诺依曼体系结构
提出计算机要采用二进制，明确计算机组成部分
被后人誉为：”现代计算机之父”
1.2 计算机基础知识
计算机：俗称电脑，是现代一种用于高速计算的电子计算机器，可以进行数值计算，又可以进行逻辑计算，还具有
存储记忆功能
计算机组成：硬件(物理部件) + 软件(控制指令)
软件分类：系统软件(Windows、Linux) + 应用软件(微信、QQ)
1.3 系统结构
C/S架构：需要安装、偶尔更新、不跨平台、开发更具针对性
B/S架构：无需安装、无需更新、可跨平台、开发更具通用性
名词解释：C => client（客户端）、B => browser（浏览器）、S => server（服务器）
前端工程师：主要负责编写 B/S架构中的网页（呈现界面、实现交互）
1.4 浏览器相关
浏览器：是网页运行的平台，常见的有谷歌(Chrome) 、 Edge、 IE 、 火狐(Firefox)等
浏览器内核：浏览器最核心的部分，负责对网页语法的解释并渲染网页，常见的有webkit内核、Blink内核、
Trident内核、Gecko内核等
浏览器原理：
Google开发者团队指导：https://web.dev/about?hl=zh-cn
Google文档：https://developer.chrome.com/docs?hl=zh-cn
《深入了解现代网络浏览器》
https://developer.chrome.com/blog/inside-browser-part1
https://developer.chrome.com/blog/inside-browser-part2
https://developer.chrome.com/blog/inside-browser-part3
https://developer.chrome.com/blog/inside-browser-part4
1.5 网页相关
网址：我们在浏览器中输入的地址
网页：浏览器所呈现的每一个页面
网站：多个网页构成了一个网站
网页标准：HTML(结构)、CSS(表现)、JavaScript(行为)
1.6 其他
1.6.1 ⽂件夹、⽂件命名规则
- ⽂件夹名称 和 ⽂件名称 使⽤⼩写，⽤ 短横线 来分隔
- ⽆空格、⽆下划线
1.6.2 代码命名规则
变量/函数 “小驼峰式命名法”
常量 “全部大写 + 下划线”
类的私有属性/方法 “_小驼峰式命名法”
1.6.2 网站结构
- index.html主⻚
- images⽂件夹
- styles⽂件夹
- scripts⽂件夹
二、HTML简介
2.1 什么是HTML
HTML：（超文本标记语言 - HyperText Markup Language）
- 定义网页内容的含义和结构
- “超⽂本”（hypertext）是指连接单个⽹站内或多个⽹站间的网页链接
- “标记”（markup）来注明⽂本、图片和其他内容
- HTML标签⾥的元素名不区分⼤⼩写
HTML文件后缀名：.html或.htm
元素间对空格、换行、缩进等形成的空白不敏感，有无空白对在浏览器中加载的效果没有影响
HTML中的空白折叠现象： ⽆论你在HTML元素的内容中使⽤多少空格（包括⼀个或多个空⽩字符或换⾏），当渲染这些代
码的时候，HTML解释器会将连续出现的空⽩字符减少为⼀个单独的空格符
和XML的区别
2.2 相关国际组织
W3C(万维网联盟)：https://www.w3.org/
2.3 HTML发展历史
2.4 开发者文档
W3School：https://www.w3school.com.cn/
MDN：https://developer.mozilla.org/zh-CN/docs/learn/HTML
2.5 HTML语法检查
网站：https://validator.w3.org/
2.6 SEO
2.6.1 SEO权重标签
突出网页中关键词或重要主题的HTML标签、语义化清晰的标签
2.6.2 SEO标签属性
突出网页中关键词的HTML标签属性，如meta的name属性（keywords、description）,超级链接和图片的title、alt属性
三、准备工作
3.1 安装VSCode_代码编辑器
网址：https://code.visualstudio.com/
插件：
- Chinese (Simplified) (简体中文) Language Pack
- Live Server
快捷键：
3.2 安装Chrome_浏览器
网址：https://www.google.cn/chrome/
四、HTML4基础
HTML4.01诞生于1999年
4.1 第一个Hello World
学一门新的编程语言，最最最开始的第一步就是写一个Hello World
1
2
3
4
5
6
7
8
9
10
11
12
| <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello World</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
|
4.2 HTML文档声明 DTD
作用：告诉浏览器当前网页的版本
1
2
3
4
5
| <!DOCTYPE html> //代表HTML5版本解析该网页
或
<!DOCTYPE HTML>
或
<!doctype html>
|
注：必须在网页的第一行，且在html标签的外侧
DOCTYPE(⽂档类型) 的作用？
DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样
（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的
解析。它必须声明在HTML⽂档的第⼀⾏。
浏览器渲染页面的两种模式（可通过document.compatMode获取）
- CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
- BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。
标准模式和怪异模式的区别：
盒模型的差异：
标准模式 - W3C盒模型 - 盒子总宽度/高度 = 内容区宽度/高度 + padding + border + margin
怪异模式 - IE盒模型 - 盒子总宽度/高度 = width/height + margin
4.3 HTML基本结构/元信息
Quick写法：vscode中输入 ! 快速生成基本结构
1
2
3
4
5
6
7
8
9
| <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
</body>
</html>
|
<html>元素
lang属性
- 为站点设定语⾔
<html lang="zh-CN"> / <html lang="en">
- 为分段设定语⾔
<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>
命名空间xmlns
<head>元素
<meta>元素（详见：4.11）
<title>元素 - 唯一必须的元素
- 网页的标题
- 页面标签的建议名，提高SEO搜索引擎的优化
- 显示在搜索引擎结果页面的标题
- 收藏夹默认的书签名称
<link>元素
<script>元素
<style>元素
<base>元素
<body>元素
注：
- 在存放代码的文件夹中，存放一个 favicon.ico 图片，可配置网站图标
4.3.1 元数据内容标签
1
2
3
4
5
6
7
8
| <title>
<base>
<link>
<meta>
<style>
<script>
<noscript>
<template>
|
4.4 HTML标签
标签：又称元素，是HTML的基本组成元素
- 双标签：
<标签名>标签体</标签名>
- 单标签：
<标签名/>
- 仅一个开始标签
- 用于在元素所在位置插入/嵌入一些内容
- 在开始标签加斜杠，是关闭空元素的正确⽅法
标签名：不区分大小写，但推荐小写，因为小写更规范
标签之间的关系：
容器级标签和文本级标签：
容器级标签：可以存放任意内容
文本级标签：只能存放文字或类似文字的内容
4.4.1 排版标签
注：
- h1标签至多一个，h2 ~ h6可多写（约定俗称）
- h1 ~ h6不能互相嵌套
- h1到h6重要程度递减
<hgroup>标签 组合标题- 每个页面最好不超过三个标题层次
- p标签内部不能写排版标签（甚至不能写块级标签）
4.4.2 语义化标签
语义化标签的理解？
语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）
语义化的优点如下：
- 代码结构清晰，可读性强
- 有利于SEO，即搜索引擎优化
常见的语义化标签：
注：
标签的默认效果不重要（后面可以通过CSS任意修改）
SEO中的TDK：title、description、keywords这三个标签，title表示标题标签，description是描述标签，
keywords是关键词标签
4.4.3 块级标签与行内标签
块级标签/块级元素：独占一行（排版标签是块级标签）
行内标签/内联元素：不独占一行（input标签、img标签）
注：
- 块级标签中能写块级标签和行内标签，占据父元素全部宽度
- 行内标签能写行内标签，不能写块级标签，占据必要的宽度
4.4.4 文本标签
概念：文本标签用于包裹短语、词汇等，通常都是行内标签
通常写在排版标签中：排版标签更宏观（大段的文字），文本标签更微观（词汇、短语）
常用文本标签：
不常用文本标签：
4.4.5 图片标签
border属性
title属性
src属性值（图片路径）：
引⽤⽂件路径的通⽤规则
若引⽤的⽬标⽂件与HTML⽂件同级，只需直接使⽤⽂件名，例如：my-image.jpg
要引⽤⼦⽬录中的⽂件，请在路径前⾯写上⽬录名，再加上⼀个正斜杠，例如：subdirectory/my-
image.jpg
若引⽤的⽬标⽂件位于HTML⽂件的上级，需要加上两个点。例如：../my-image.jpg
以上⽅法可以随意组合，⽐如：../subdirectory/another-subdirectory/my-image.jpg
alt属性的作用：
- 搜索引擎通过alt属性，得知图片内容
- 图片无法展示时，显示alt属性的值
- 盲人阅读器会阅读alt属性的值
width、height属性
常见图片格式：
1
| jpg、png、bmp、gif、webp、base64
|
<figure>元素 <figcaption>元素
- 为图⽚提供⼀个语义容器，在标题和图⽚之间建⽴清晰的关联
- figure⾥可以任意的独⽴内容单元
1
2
3
4
5
6
7
| <img src="images/MyTestImage.jpg" alt="⻛景图" width="200" height="200" title="⻛景图">
<figure>
<img src="images/MyTestImage.jpg" alt="⻛景图" width="200" height="200" title="⻛景图">
<figcaption>
这是⼀张⻛景图⽚
</figcaption>
</figure>
|
响应式图片
srcset属性
- 定义了浏览器可选择的图⽚设置以及每个图⽚的⼤⼩
- 每张图⽚信息的设置和前⼀个⽤逗号隔开
- 每个设置 ⼀个⽂件名 ⼀个空格 图⽚的固有宽度
sizes属性
定义了⼀组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图⽚尺⼨是最佳选择
每个设置 ⼀个媒体条件 ⼀个空格 当媒体条件为真时，图像将填充的槽的宽度
sizes="[media query] [length], [media query] [length] ... "
1
2
3
4
5
6
| <img
srcset="images/elva-fairy-480w.jpg 480w, images/elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="images/elva-fairy-800w.jpg"
alt="Elva dressed as a fairy" />
|
分辨率切换：相同的尺⼨，不同的分辨率
- 不需要sizes属性，系统会根据屏幕的分辨率⾃动选择合适的图⽚
1
2
3
4
| <img
srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
src="elva-fairy-640w.jpg"
alt="Elva dressed as a fairy" />
|
src和href的区别？
src和href都是用来引用外部的资源，它们的区别如下：
- src：表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内，如请求js脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在页面底部。
- href：表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常用在a、link等标签上。
4.4.6 超链接标签
注：
title属性：鼠标悬停进行文字提示，是有必要的！
download属性：提供一个默认的保存文件名
如何写一个块级链接？
将块级元素包裹在<a>元素中
1
| <a href=" https://www.baidu.com" title="搜索引擎" target=”_blank”><h1>百度</h1></a>
|
统一资源定位符 URL
定义在⽹络上的位置的⼀个⽂本字符串
万维网用url统一资源定位符标识分布因特网上的各种文档
格式
scheme://host.domain:port/path/filenamescheme - 定义因特⽹服务的类型。最常⻅的类型是 httphost - 定义域主机（http 的默认主机是 www）domain - 定义因特⽹域名，⽐如 runoob.com:port - 定义主机上的端⼝号（http 的默认端⼝号是 80）path - 定义服务器上的路径（如果省略，则⽂档必须位于⽹站的根⽬录中）filename - 定义⽂档/资源的名称
URL Scheme
绝对URL和相对URL
注意
- 不要将URL作为链接⽂本的⼀部分
- 不要在链接⽂本中说链接或链接到
- 保持链接⽂本尽可能短
- 尽量减少相同⽂本的多个副本链接到不同地⽅的情况
假链接中我们通常在a标签的href中添加什么能使得页面不跳转？
a标签未添加href属性，是不能获取焦点的
写法：
1
2
3
4
|
<a href="https://www.jd.com/" target="_blank">去京东</a>
<a href="./10_HTML排版标签.html" target="_self">去看排版标签</a>
|
- 跳转至指定文件
- 若浏览器无法打开文件，会引导用户下载文件
- 若想强制触发下载，请使用 download 属性，属性值即为下载文件的名称
1
2
3
4
5
6
7
8
9
|
<a href="./resource/自拍.jpg">看自拍</a>
<a href="./resource/小电影.mp4">看小电影</a>
<a href="./resource/小姐姐.gif">看小姐姐</a>
<a href="./resource/如何一夜暴富.pdf">点我一夜暴富</a>
<a href="./resource/内部资源.zip">内部资源</a>
<a href="./resource/小电影.mp4" download="电影片段.mp4">下载电影</a>
|
4.4.7 列表标签
1
2
3
4
5
| <ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
|
1
2
3
4
5
6
| <ul>
<li>成都</li>
<li>上海</li>
<li>西安</li>
<li>武汉</li>
</ul>
|
1
2
3
4
5
6
7
8
9
| <dl>
<dt>做好笔记</dt>
<dd>笔记是我们以后复习的一个抓手</dd>
<dd>笔记可以是电子版，也可以是纸质版</dd>
<dt>多加练习</dt>
<dd>只有敲出来的代码，才是自己的</dd>
<dt>别怕出错</dt>
<dd>错很正常，改正后并记住，就是经验</dd>
</dl>
|
注：
- 列表可以嵌套使用，形成多级列表
li元素的祖先元素可能是li，但父元素不可能是li- 一组dl标签最好只有一组dt和dd
4.4.8 表格标签
概念：一个完整的表格由：表格标题、表格头部、表格主体、表格脚注，四部分组成
图示：
基本代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
| <table border="1">
<caption>
学生信息
</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
<tr>
<td>李四</td>
<td>女</td>
<td>20</td>
<td>满族</td>
<td>群众</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>20</td>
<td>回族</td>
<td>党员</td>
</tr>
<tr>
<td>赵六</td>
<td>女</td>
<td>21</td>
<td>壮族</td>
<td>团员</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>共计：4人</td>
</tr>
</tfoot>
</table>
|
常用属性：
注：
- 元素的 border 属性可以控制表格边框，但 border 值的大小，并不控制单元格边框的宽度，只能控制表格最外侧边框的宽度
- 默认情况下，每列的宽度，得看这一列单元格最长的那个文字
- 给某个 th 或 td 设置了宽度之后，他们所在的那一列的宽度就确定了
- 给某个 th 或 td 设置了高度之后，他们所在的那一行的高度就确定了
<table><tr><td></td></tr></table>这么写也是可以的
单线表格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <table border="2" style="border-collapse: collapse;">
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
</table>
|
跨行跨列：
rowspan：指定要跨的行数
colspan ：指定要跨的列数
制作技巧：
- 先列出所有行
<tr>，以最小单元格为标准
- 再添加每一行的td和th
小练习：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <table border="2" style="border-collapse: collapse; width: 500px;">
<tr>
<td colspan="2">1</td>
<td rowspan="2">2</td>
<td colspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td rowspan="2">5</td>
<td>6</td>
<td rowspan="2">7</td>
</tr>
<tr>
<td rowspan="2">8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td colspan="2">12</td>
<td>13</td>
</tr>
</table>
|
4.4.9 表单标签
概念：收集用户提供的数据，向Web服务器提交信息
1
2
3
4
| <form action="https://www.baidu.com/s" target="_blank" method="get" name="first">
<input type="text" name="wd" />
<button>去百度搜索</button>
</form>
|
enctype属性
input标签属性
- type、name、value、size、checked、maxlength
常用表单控件：
解决文本框被拖拽的方法
在CSS样式中设置resize:none
select标签中的optgroup标签 - 分组管理