1. 阶段一 前端基础入门
1.1. HTML5 基础语法与标签
1.1.1. 开发环境搭建
1.1.1.1. 什么是 IDE？前端开发主流 IDE
IDE（Integrated Development Environment ，集成开发环境）是含代码编辑、关键词高亮、智能感应、智能纠错 、格式美化、版本管理等功能于一身的“高级代码编辑器”。每个 IT 工程师都要有自己趁手的 IDE，它是我们的武器。
前端开发主流 IDE
IDE 名称 公司 是否免费 功能强大度 Visual Studio Code 微软 是 强大 Sublime 个人开发者 是（但会弹出注册信息） 适中 Atom Github 是 适中 WebStorm JetBrains 否 非常强大 HBuilder DCloud 是 非常强大
1.1.1.2. Visual Studio Code
- Visual Studio Code 简称 VS Code，来自微软公司
- 优点: 内置功能非常丰富、插件全且安装简单、轻量、有 MAC 版本
# 安装 Scoop
## 打开 PowerShell 远程权限
Set-ExecutionPolicy RemoteSigned -scope CurrentUser
## 自定义 Scoop 和 App 安装目录
### Scoop 默认将 Scoop 和 App 安装在 `$HOME/scoop` 目录下
$env:SCOOP='D:\Applications\Scoop'
[Environment]::SetEnvironmentVariable('SCOOP', $env:SCOOP, 'User')
## 安装 Scoop
### 使用代理
$Env:http_proxy="http://127.0.0.1:7890";$Env:https_proxy="http://127.0.0.1:7890"
Invoke-Expression (New-Object System.Net.WebClient).DownloadString('https://get.scoop.sh')
### or shorter
iwr -useb get.scoop.sh | iex
## 使用 scoop 安装 vscode 和 chrome
scoop install vscode googlechrome
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1.1.1.3. VSCode 插件
- Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code - Visual Studio Marketplace
- Prettier - Code formatter - Visual Studio Marketplace
- Live Server - Visual Studio Marketplace
- GitLens — Git supercharged - Visual Studio Marketplace
1.1.1.4. VSCode 快捷键
VSCode 键盘快捷键文档（PDF）:
已经有大佬将其翻译为中文，github 传送门: 52cik/vscode-keyboard-shortcuts，在线访问: Visual Studio Code - 快捷键参考 (52cik.com)。因为站点使用 Github Pages，所以国内访问速度不是很理想，所以我克隆了一份部署在 Vercel 上，地址: Visual Studio Code - 快捷键参考 (codes.vercel.app)
常用快捷键:
| 快捷键 | 命令 |
|---|---|
| Ctrl + X | 剪切行 (空选定) |
| Ctrl + C | 复制行 (空选定) |
| Alt + ↑ / ↓ | 向上/向下移动行 |
| Shift + Alt + ↓ / ↑ | 向上/向下复制行 |
| Ctrl + Shift + K | 删除行 |
| Ctrl + Enter | 在下面插入行 |
| Ctrl + Shift + Enter | 在上面插入行 |
| Ctrl + Shift + \ | 跳到匹配的括号 |
| Ctrl + ] / [ | 行增加/减少缩进 |
| Home | 转到行首 |
| End | 转到行尾 |
| Ctrl + Home | 转到文件开头 |
| Ctrl + End | 转到文件末尾 |
| Ctrl + ↑ / ↓ | 向上/向下滚动(行) |
| Alt + PgUp / | 向上/向下滚动(页) |
| Ctrl + Shift + [ | 折叠区域 |
| Ctrl + Shift + ] | 展开区域 |
| Ctrl + K Ctrl + [ | 折叠所有子区域 |
| Ctrl + K Ctrl + ] | 展开所有子区域 |
| Ctrl + K Ctrl + 0 | 折叠所有区域 |
| Ctrl + K Ctrl + J | 展开所有区域 |
| Ctrl + K Ctrl + C | 添加行注释 |
| Ctrl + K Ctrl + U | 删除行注释 |
| Ctrl + / | 切换行注释 |
| Shift + Alt + A | 切换块注释 |
| Alt + Z | 切换自动换行 |
| Ctrl + G | 转到行... |
| Ctrl + P | 转到文件... |
| Ctrl + F | 查找 |
| Ctrl + H | 替换 |
| Ctrl + K M | 更改文件语言 |
| Ctrl + ` | 显示集成终端 |
| Ctrl + Shift + ` | 新建集成终端 |
| Ctrl + Shift + P, F1 | 显示命令面板 |
1.1.2. HTML 语法与基础标签
1.1.2.1 HTML 是什么？如何创建网页？如何浏览网页？
HTML(HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
- HTML 指的是超文本标记语言：HyperText Markup Language。
- HTML 不是一种编程语言，而是一种标记语言。
- 标记语言是一套标记标签 (markup tag)。
- HTML 使用标记标签来描述网页。
- HTML 文档包含了 HTML 标签及文本内容。
- HTML 文档也叫做 web 页面。
创建网页：VSCode 中新建文件，保存时文件后缀名为
.html或.htm。浏览网页：VSCode 中安装插件
Live Server，然后在命令面板 (Ctrl + Shift + P) 中输入Live Server: Open with Live Server（快捷键Alt + L Alt + O) 打开默认浏览器预览。
1.1.2.2. HTML5 骨架是什么结构？什么是 DTD?
- HTML5 骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body></body>
</html>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<!DOCTYPE html>— 文档类型。混沌初分，HTML 尚在襁褓（大约是 1991/92 年）之时，DOCTYPE用来链接一些 HTML 编写守则，比如自动查错之类。DOCTYPE在当今作用有限，仅用于保证文档正常读取。现在知道这些就足够了。<html></html>—<html>元素。该元素包含整个页面的内容，也称作根元素。<head></head>—<head>元素。该元素的内容对用户不可见，其中包含例如面向搜索引擎的搜索关键字（keywords）、页面描述、CSS 样式表和字符编码声明等。<meta charset="utf-8">— 该元素指定文档使用 UTF-8 字符编码 ，UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容，还可以避免以后出现某些问题，没有理由再选用其他编码。<title></title>—<title>元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。<body></body>—<body>元素。该元素包含期望让用户在访问页面时看到的内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。
DTD (Document Type Definition，文档类型声明）
<!DOCTYPE>标签没有结束标签。<!DOCTYPE>声明不区分大小写。<!DOCTYPE>位于文档中的最前面的位置，处于<html>标签之前。<!DOCTYPE>声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。不写 DTD 会引发浏览器的一些兼容问题。
在 HTML 4.01 中，
<!DOCTYPE>声明需引用 DTD （文档类型声明），因为 HTML 4.01 是基于 SGML (Standard Generalized Markup Language 标准通用标记语言）。DTD 指定了标记语言的规则，确保了浏览器能够正确的渲染内容。 HTML5 不是基于 SGML，因此不要求引用 DTD。提示：总是给您的 HTML 文档添加
<!DOCTYPE>声明，确保浏览器能够预先知道文档类型。
1.1.2.3. 标题和段落标签、div 标签要如何使用？
- 标题标签
<h1>-<h6>标签被用来定义 HTML 标题。<h1>定义重要等级最高的标题。<h6>定义重要等级最低的标题。- 使用时根据语义确定使用哪一个。
- 段落标签
<p>标签定义段落。<p>元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，也可以在样式表中规定。
- div 标签
<div>标签定义 HTML 文档中的一个分隔区块或者一个区域部分。<div>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。<div>元素经常与 CSS 一起使用，用来布局网页。- 默认情况下，浏览器通常会在
<div>元素前后放置一个换行符。然而可以通过使用 CSS 改变这种情况。
1.1.2.4. 网页的字符集有什么区别？
UTF-8 和 GB2312 区别：
字符集 涵盖字符 1 个汉字字节数 适用场景 UTF-8 涵盖全球所有国家、民族的文字和大量图形字符 3 制作有非汉字文字的网页， gb2312(GBK) 收录所有汉字字符（包括简体、繁体）和英语、少量韩文、日语和少量图形字符 2 制作只有汉语和英语的网页，由于 1 个汉字仅占 2 字节，网页文件尺寸明显减少 UTF-8 和 UTF-16 区别：
字符集 描述 UTF-8 UTF8 中的字符可以是 1-4 个字节长。UTF-8 可以表示 Unicode 标准中的任意字符。UTF-8 向后兼容 ASCII。UTF-8 是网页和电子邮件的首选编码。 UTF-16 16 比特的 Unicode 转换格式是一种 Unicode 可变字符编码，能够对全部 Unicode 指令表进行编码。UTF-16 主要被用于操作系统和环境中，比如微软的 Windows 2000/XP/2003/Vista/CE 以及 Java 和 .NET 字节代码环境。 最前面的 256 个 Unicode 字符集字符对应于 256 个 ISO-8859-1 字符。所有 HTML4 浏览器都已支持 UTF-8，而所有 XHTML 和 XML 处理器支持 UTF-8 和 UTF-16！
1.1.2.5. 常见的 SE0 配置项和应该遵守的规则有哪些？
SEO(Search Engine Optimization，搜索引擎优化）利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名让网站在搜索引擎的结果中内占据领先地位，获得品牌收益。
- 定义页面标题：
<title>元素可定义文档的标题。浏览器会以特殊的方式来使用标题，并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样，当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。title 也是搜索引擎收录网站时显示的标题。<title>标题</title> - 页面描述：每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。超过 150 个字符的
<meta name="description">标记可能会将网页标记为待审阅，或标记为使用欺诈行为。每个网页都应有一个以不超过 150 个字符准确反映网页内容的唯一描述。<meta name="description" content="不超过150个字符" /> - 页面关键词：每个网页应具有描述该网页内容的一组唯一的关键字。与出现在
<meta name="keywords">标记中靠后位置的单词相比，出现在该标记靠近开头位置的单词可能会被视为更加相关。通常，<meta name="keywords">标记不应超过 874 个字符。<meta name="keywords" content=""/> - 网页作者：
<meta name="author" content="name, email@gmail.com" /> - 网页搜索引擎索引方式，robotterms 是一组使用英文逗号
,分割的值，通常有如下几种取值: none，noindex，nofollow，all，index 和 follow。WEB1038 - 标记包含无效的值 | Microsoft Docs
SEO 详细规则: SEO 规则 | Microsoft Docs
1.1.2.6. HTTP 是什么？我们做好的网页如何被用户看见？
HTTP 协议是 Hyper Text Transfer Protocol（超文本传输协议）的缩写，是用于从万维网 (WWW: World Wide Web) 服务器传输超文本到本地浏览器的传送协议。基于 TCP/IP 通信协议来传递数据 (HTML 文件，图片文件，查询结果等）。
1.1.3. 列表标签
1.1.3.1. ul、ol 和 dl 分别在什么场合下使用?
列表标签
- 无序列表:
<ul><li></li></ul>。 - 有序列表:
<ol><li></li></ol>。 - 定义列表:
<dl><dt></dt><dd></dd></dl>。
- 无序列表:
使用场景: 根据语义确定。
- 无序列表: 列表形态项目中语义上有 “对于顺序没要求” 含义，每个列表项目不遵循某种顺序，应该使用无序列表。
- 有序列表: 列表形态项目中语义上有 “对于顺序有要求” 含义，每个列表项目前面需要一个递增值(例如 1,2,3 等)，应该使用有序列表。
- 定义列表: 列表形态项目中语义上有 “解释说明” 含义(名值对，名字-描述)，应该使用定义列表。
1.1.3.2. ul 和 li 标签的嵌套使用规则是什么?
- 无序列表使用
<ul></ul>标签，每个列表项都是<li></li>标签。 - 无序列表是一个父子组合标签，上阵父子兵，不能单独出现。
<li>标签不能单独使用，它必须放到<ul>或者<ol>中使用。<ul>的子标签只能是<li>，绝对不能出现其它任何标签。<li>标签是容器，内部可以放任何其他标签。
1.1.3.3. ul 和 ol 的常见属性有哪些?
ul: 无序列表有 type 属性，可以定义前导符号的样式，但是在 HTML5 中已经被废弃，建议使用 CSS 替代。
值 描述 disc 实心圆(默认值) circle 空心圆 square 实心方块 ol: 有序列表。
type 属性，用来设置编号的类型。
属性值 意义 a 表示小写英文字母编号 A 表示大写英文字母编号 i 表示小写罗马数字编号 I 表示大写罗马数字编号 1 表示数字编号(默认) start 属性(属性值必须是一个整数): 指定列表编号的起始值。此属性的值应为阿拉伯数字，尽管列表条目的编号类型 type 属性可能指定为了罗马数字编号等其他类型的编号。
reversed 属性: 指定列表中的条目是否是倒序排列的。reversed 属性不需要值，只需要写 reversed 单词即可，这是 HTML5 的全新特性。
1.1.4. 多媒体与语义化标签
- 正确拼写、背诵每种标签和它们的属性，不要张冠李戴
- 正确理解每个标签的语义，要在合适的地方使用它们
1.1.4.1. 如何正确地在网页中插入图片，它有哪些常见属性？
<img src="./image/logo.png" alt="logo" />
<img src="https://www.baidu.com/logo.png" alt="logo" />
1
2
2
<img>标签定义 HTML 页面中的图像。<img>标签有两个必需的属性：src 和 alt。- 提示：从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。
<img>标签的作用是为被引用的图像创建占位符。 - 提示：通过在
<a>标签中嵌套<img>标签，给图像添加到另一个文档的链接。
常见属性：
- alt 属性是在图片不能正常显示时出现的文本提示。
- title 属性是在鼠标在移动到元素上的文本提示。
- width、height 属性分别设置宽度和高度，单位是像素，但是不需要写单位。如果省略其中一个属性，则表示按原始比例缩放图片。
支持的图片格式：
| 格式 | 说明 |
|---|---|
.bmp | windows 画图软件默认保存的格式，位图 |
.gif | 支持动画（比如表情包） |
.jpeg ( .jpg ) | 有损压缩图片，用于照片 |
.png | 便携式网络图像，用于 logo、背景图形等，支持透明和半透明 |
.svg | 矢量图片 |
.webp | 最新的压缩算法非常优秀的图片格式 |
1.1.4.2. 如何使用 a 标签插入超级链接，它有哪些常见属性？
<a href="http://www.baidu.com">Baidu</a>
<a name="label">锚（显示在页面上的文本）</a>
<a href="web/2.html">去第二个网页</a>
<a href="../web/2.html">去第二个网页</a>
<a href="http://www.immoc.com">去慕课</a>
1
2
3
4
5
6
2
3
4
5
6
<a>标签定义超链接，用于从一个页面链接到另一个页面。<a>元素最重要的属性是 href 属性，它指定链接的目标。- 提示：如果没有使用 href 属性，则不能使用 hreflang、media、rel、target 以及 type 属性。
- 提示：通常在当前浏览器窗口中显示被链接页面，除非规定了其他 target。
- 提示：请使用 CSS 来改变链接的样式。
常见属性：
- href 属性：目标 URL。
- target 属性：规定在何处打开目标 URL。仅在 href 属性存在时使用。_blank: 新窗口打开。_parent: 在父窗口中打开链接。_self: 默认，当前页面跳转。_top: 在当前窗体打开链接，并替换当前的整个窗体（框架页）。
- title 属性是在鼠标在移动到元素上的文本提示。
- name 属性规定锚（anchor）的名称。可以使用 name 属性创建 HTML 页面中的书签。当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。可以使用 id 属性来替代 name 属性，命名锚同样有效。
<!-- 创建锚点 -->
<a name="tips">基本的注意事项 - 有用的提示</a>
<h2 id="tips">基本的注意事项 - 有用的提示</h2>
<!-- 使用锚点 -->
<a href="http://www.xx.com/test.html#tips">有用的提示</a>
1
2
3
4
5
2
3
4
5
1.1.4.3. 如何在网页上插入音频和视频？
<audio src="./assets/test.mp3" controls autoplay loop>
抱歉, 您的浏览器不支持 audio 标签, 请升级浏览器
</audio>
<audio src="./assets/test.m4a" controls autoplay loop>
抱歉, 您的浏览器不支持 audio 标签, 请升级浏览器
</audio>
<video src="./assets/test.mp4" controls autoplay loop>
抱歉, 您的浏览器不支持 video 标签, 请升级浏览器
</video>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
音频
<audio>标签定义声音，比如音乐或其他音频流。提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。
属性 值 描述 autoplay autoplay 音频在就绪后马上播放。 controls controls 显示控件，比如播放按钮。 loop loop 当音频结束时重新开始播放。 muted muted 规定视频输出应该被静音。 preload preload 音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 src url 要播放的音频的 URL。
视频
<video>标签定义视频，比如电影片段或其他视频流。目前，
<video>元素支持三种视频格式：MP4、WebM、Ogg。提示：可以在
<video>和</video>标签之间放置文本内容，这样不支持<video>元素的浏览器就可以显示出该标签的信息。属性 值 描述 autoplay autoplay 视频在就绪后马上播放。 controls controls 显示控件，比如播放按钮。 height pixels 设置视频播放器的高度。 loop loop 文件完成播放后再次开始播放。 muted muted 规定视频的音频输出应该被静音。 poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。 preload preload 视频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。 src url 要播放的视频的 URL。 width pixels 设置视频播放器的宽度。
1.1.4.4. 常见大纲标签和语义化标签有哪些？
大纲区块标签
区块标签 说明 <section>文档的区域，语义比 div 大 <article>文档的核心文章内容，会被搜索引擎主要抓取 <aside>文档的非必要相关内容，比如广告等 <nav>导航条 <header>页头 <main>网页核心部分 <footer>页脚 语义化标签
标签 说明 <span>文本中的 "区块" 标签，本身没有任何特殊的显示效果，可以结合 CSS 来丰富样式 <b>被加粗的文字，CSS 已经替代了它的功能 <u>加下划线的文字，CSS 已经替代了它的功能 <i>倾斜的文字，CSS 已经替代了它的功能 <strong>代表特别重要文字 <em>代表强调文字 <mark>代表一段需要被高亮的文字
1.1.4.5. 相对路径和绝对路径是什么意思？
<img src="./images/gugong.jpg" />
<img src="../images/gugong.jpg" />
<img src="https://www.imooc.com/static/img/index/logo-recommended.png" />
1
2
3
2
3
相对路径
- 描述从网页出发，如何找到图片。比如 "前面路口左转，直走 100 米后右转就到了"。
- 随着网页和图片的位置关系不同，插入图片的代码随之改变。
- 如果需要回退层级，使用 "../" 这样的写法。
绝对路径
- 描述图片精准地址。比如 "北京市海淀区西三环北路甲 2 号院中关村国防科技园 2 号楼"。
- 不管网页在哪里，绝对路径不需要改变。
1.1.5. 表单标签
- 表单用来收集信息，比如注册、登录、发送评论反馈、购买商品等等
- 熟背每种表单元素的 type 属性，不要弄混
1.1.5.1. 表单如何创建？
<!-- action 属性表示表单要提交到的后台程序的网址 -->
<!-- method 属性表示表单提交的方式, 有 get 或 post -->
<form action="save.php" method="post"></form>
1
2
3
2
3
1.1.5.2. 常用的表单元素有哪些？
<form>标签用于创建供用户输入的 HTML 表单。<form>元素包含一个或多个如下的表单元素：<input>: button 普通按钮 /checkbox 复选框 /color 颜色选择器 /date 日期 /email 邮件地址 /file 文件浏览 /hidden 隐藏 /image 图像浏览 /month 月份 /number 数字 /password 密码框 /radio 单选框 /range 拖拽条 /reset 重置按钮 /search 搜索框 /submit 提交按钮 /tel 电话号码 /text 文本字段 /time 时间 /url 网址 /week 周。比如文本字段、复选框、单选框、提交按钮等等<textarea>: 多行的文本输入控件<button>: 按钮<select>: 下拉列表<option>: 下拉列表中的一个选项（一个条目）<optgroup>: 把相关的选项组合在一起<fieldset>: 将表单内的相关元素分组<label>: 为 input 元素定义标注（标记）.label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。<label>标签的 for 属性应当与相关元素的 id 属性相同。
<!-- input text 文字片段 -->
First name: <input type="text" name="fname" placeholder="王" /><br />
Last name: <input type="text" name="lname" /><br />
<!-- input password 密码框 -->
密码:<input type="password" name="passwd" /><br />
<!-- input radio 单选框 -->
血型:
<label><input type="radio" name="blood" value="blood-type-a" />A</label>
<label><input type="radio" name="blood" value="blood-type-b" />B</label>
<label><input type="radio" name="blood" value="blood-type-o" checked />O</label
><br />
<!-- input checkbox 复选框 -->
爱好运动:
<label><input type="checkbox" name="sport" value="basketball" />篮球</label>
<label><input type="checkbox" name="sport" value="football" />足球</label>
<label><input type="checkbox" name="sport" value="tennis" />网球</label><br />
<!-- select 下拉列表/option 列表条目 -->
请选择你喜欢的编程语言:
<select name="program">
<option value="python" selected>Python</option></select
><br />
<!-- textarea 多行文本框 -->
<textarea name="message" cols="30" rows="2" placeholder="message"></textarea>
<!-- button/input reset/submit 重置/提交按钮-->
<button type="reset">重置</button>
<input type="reset" value="重置" />
<button type="submit">提交</button>
<input type="submit" value="提交" /><br />
<!-- input button 普通按钮 -->
<button>普通按钮</button>
<button disabled="disabled">灰色按钮</button>
<input type="button" value="普通按钮" /><br />
<!-- input color 颜色选择 -->
颜色选择:<input type="color" name="color" /><br />
<!-- input month/week/date/time 选择月/周/日/时间 -->
选择月: <input type="month" /><br />
选择周: <input type="week" /><br />
选择日: <input type="date" /><br />
选择时间:<input type="time" /><br />
<!-- input email/file/image/url 邮件/文件/图像/URL -->
邮件: <input type="email" name="email" value="666666@qq.com" required /> 文件:
<input type="file" name="file" /> 图像:
<input type="image" src="https://www.baidu.com/favicon.ico" alt="favicon" />
URL: <input type="url" name="url" value="https://www.baidu.com" />
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
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
1.1.5.3. 单选按钮、复选框使用时要注意什么？
单选按钮：
<input type="radio">使用 type 属性值被设置为 radio 的<input>元素可以创建单选按钮- 互斥的单选按钮应该设置它们的 name 为相同值
- 单选按钮要有 value 属性值，向服务器提交的就是 value 值
- 单选按钮如果加上了 checked 属性，表示默认被选中
复选框
<input type="checkbox">使用 type 属性值被设置为 checkbox 的<input>元素可以创建复选框- 同组复选框应该设置它们的 name 为相同值
- 复选框要有 value 属性值，向服务器提交的就是 value 值
1.1.6. 表格标签
要多多练习表格的单元格合并, 分析出每个小格属于哪行, 每行有几个小格, 养成自己拆分表格的方法
1.1.6.1. table、tr、td 和 th 标签的正确使用
<table border="1">
<caption>课程表</caption>
<tr>
<th>星期一</th>
<th>星期二</th>
<th>星期四</th>
<th>星期五</th>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
<tr>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>生物</td>
</tr>
</tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table>元素表示表格数据 — 即通过二维数据表表示的信息. 为了让表格能够显示边框,<table>标签通常有 border 属性. 简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成. tr 元素定义表格行, th 元素定义表头, td 元素定义表格单元.<tr>(table row, 表格行)元素定义表格中的行. 同一行可同时出现<td>和<th>元素.<td>(table row, 表格数据)元素定义了一个包含数据的表格单元格. td 元素内的文本通常是左对齐的正常字体.<th>(table header, 表格表头)元素定义表格内的表头单元格. 这部分特征是由 scope and headers 属性准确定义的. th 元素内部的文本通常会呈现为居中的粗体文本.
1.1.6.2. 实现单元格的合并
<table border="1" width="200">
<caption>
单元格行列合并
</caption>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td rowspan="2">F</td>
<td rowspan="3" colspan="2">G</td>
</tr>
<tr>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
</tr>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
- colspan 属性用来设置 td 或者 th 的列跨度.
- rowspan 属性用来设置 td 或者 th 的行跨度.
1.1.6.3. caption、thead、tbody 和 tfoot 标签的正确使用
<table border="1" width="100%" cellspacing="0" cellpadding="5px">
<caption>
电子产品销量统计表
</caption>
<thead>
<tr>
<th rowspan="2">产品</th>
<th colspan="2">全球销量</th>
</tr>
<tr>
<th>国内</th>
<th>国外</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>手机</td>
<td>1234</td>
<td>1234</td>
</tr>
<tr align="center">
<td>平板</td>
<td>1234</td>
<td>1234</td>
</tr>
</tbody>
<tfoot>
<tr align="center">
<td>汇总</td>
<td>2468</td>
<td>2468</td>
</tr>
</tfoot>
</table>
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
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
<caption>是表格的标题, 必须紧随 table 标签之后. 您只能对每个表格定义一个标题. 通常这个标题会被居中于表格之上.<thead>元素定义表格的表头. 该标签用于组合 HTML 表格的表头内容. thead 元素应该与 tbody 和 tfoot 元素结合起来使用. thead 元素用于对 HTML 表格中的表头内容进行分组.<tbody>元素表格主体(正文). 该标签用于组合 HTML 表格的主体内. tbody 元素应该与 tbody 和 tfoot 元素结合起来使用. tbody 元素用于对 HTML 表格中的主体内容进行分组.<tfoot>元素定义表格的页脚(脚注或表注). 该标签用于组合 HTML 表格中的表注内容. tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组. tfoot 元素用于对 HTML 表格中的表注(页脚)内容进行分组.
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组. 当您创建某个表格时, 您也许希望拥有一个标题行, 一些带有数据的行, 以及位于底部的一个总计行. 这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动. 当长的表格被打印时, 表格的表头和页脚可被打印在包含表格数据的每张页面上.
注释: 如果您使用 thead、tfoot 以及 tbody 元素, 您就必须使用全部的元素. 它们的出现次序是:thead、tfoot、tbody, 这样浏览器就可以在收到所有数据前呈现页脚了. 您必须在 table 元素内部使用这些标签. 提示: 在默认情况下这些元素不会影响到表格的布局. 不过, 您可以使用 CSS 使这些元素改变表格的外观.
1.2. CSS3 基础语法与盒模型
1.2.1 CSS3 基础入门
- CSS 的语法要练熟, 不要犯一些低级错误。
- 背诵记忆 CSS 属性是重中之重。
1.2.1.1. CSS 中文全称是什么? 最新版本是? 功能是?
- CSS (Cascading Style Sheets)，中文全称为层叠样式表, 也称级联样式表。
- CSS3 是 CSS 的最新版本，增加了大量的样式、动画、3D 特效和移动端特性等。
- 功能：CSS 是用来给 HTML 标签 添加样式 的语言。
- CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素。
- CSS 节省了大量工作。它可以同时控制多张网页的布局。
- 外部样式表存储在 CSS 文件中。
- CSS 使样式和结构分离，样式和结构不用“杂糅着写”，而是彼此分开：HTML 就负责结构，CSS 负责样式。
1.2.1.2. 前端分为哪几层? 功能分别是什么?
| 语言 | 功能 | |
|---|---|---|
| 结构层 | HTML | 搭建结构、放置部件、描述语义 |
| 样式层 | CSS | 美化页面、实现布局 |
| 行为层 | JavaScript | 实现交互效果、数据收发、表单验证等 |
1.2.1.3. 样式表的书写位置有哪些? 我们常用哪些?
- 内嵌式（内部样式表）：在 head 部分的
<style>元素中进行定义。 - 外链式（外部样式表）：将 CSS 单独存为
.css文件，然后在 head 部分的<link>元素内包含对外部样式表文件的引用。 - 导入式：使用导入式引入的样式表，不会等待 css 文件加载完毕，而是会立即渲染 HTML 结构，所以页面会有几秒中的“素面朝天”的时间。
- 行内式（内联样式）：直接通过 style 属性写在标签身上，用于为单个元素应用唯一的样式。行内样式失去了样式表的许多优点（通过将内容与呈现混合在一起）。请谨慎使用此方法。
<head>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>我是一级标题~</h1>
</body>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1>我是一级标题~</h1>
</body>
1
2
3
4
5
6
7
2
3
4
5
6
7
h1 {
color: red;
}
1
2
3
2
3
<head>
<style>
@import url(index.css);
</style>
</head>
<body>
<h1>我是一级标题~</h1>
</body>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
h1 {
color: red;
}
1
2
3
2
3
<body>
<h3 style="color: #29E199;"></h3>
</body>
1
2
3
2
3
- 选择器权重计算
1.2.2.1. CSS 选择器有哪些? 请按 CSS2.1 和 CSS3 分别回答
- 传统 CSS2.1 选择器: 标签选择器和 id 选择器、class 选择器、复合选择器和伪类
- CSS3 新增选择器: 元素关系选择器、序号选择器、属性选择器、CSS3 新增伪类和伪元素
<head>
<style type="text/css">
span {
color: #09a92d;
background-color: #75bef8;
}
ul {
/* 去除列表项默认小圆点 */
list-style: none;
}
a {
/* 去除超链接下划线 */
text-decoration: none;
color: #111315;
}
</style>
</head>
<body>
<p>我们一定<span>不负韶华,只争朝夕</span></p>
<ul>
<li>A</li>
<li><span>B</span></li>
<li><span>C</span></li>
</ul>
<a href="#">超级链接</a>
<a href="#">超级链接</a>
</body>
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
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
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
#para1 {
width: 16.25rem;
background-color: #2f86a6;
}
#para2 {
width: 16.875rem;
background-color: #34be82;
}
#para3 {
width: 17.5rem;
background-color: #2fdd92;
}
#para4 {
width: 18.125rem;
background-color: #f2f013;
}
/* 不能以数字开头 */
/* #5para{
background-color: #09A92D;
} */
</style>
</head>
<body>
<p id="para1">我们一定<span>不负韶华，只争朝夕</span></p>
<p id="para2">我们一定<span>不负韶华，只争朝夕</span></p>
<p id="para3">我们一定<span>不负韶华，只争朝夕</span></p>
<p id="para4">我们一定<span>不负韶华，只争朝夕</span></p>
<!-- 不能以数字开头 -->
<!-- <p id="5para">我们一定<span>不负韶华，只争朝夕</span></p> -->
</body>
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
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
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
/* class 选择器 */
.unordered-list {
list-style: none;
}
.para0 {
color: #34be82;
}
</style>
</head>
<body>
<div class="box">
<ul class="unordered-list" id="ulist">
<li>
<p class="para0" id="spec0">我是段落元素</p>
</li>
<li>
<p class="para1" id="spec1">我是段落<em>元素</em></p>
</li>
<li>
<p class="para1" id="spec2">the paragraph <strong>element.</strong></p>
</li>
<li>
<p class="para1" id="spec3">THE PARAGRAPH <strong>ELEMENT.</strong></p>
</li>
</ul>
</div>
<div class="footer">
<p id="footer-content">
Copyright © 2021 <a href="https://www.zxj.guru"><em>JaimeZeng</em></a
>.All Rights Reserved. Powered by
<a href="https://v2.vuepress.vuejs.org/"><em>VuePress</em></a
>.
</p>
</div>
</body>
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
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
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
/* 后代选择器 */
.box #ulist {
background-color: #75bef8;
font-size: 1em;
}
.box .para1 {
color: #55007f;
font-style: italic;
}
</style>
</head>
<body>
<div class="box">
<ul class="unordered-list" id="ulist">
<li>
<p class="para0" id="spec0">我是段落元素</p>
</li>
<li>
<p class="para1" id="spec1">我是段落<em>元素</em></p>
</li>
<li>
<p class="para1" id="spec2">the paragraph <strong>element.</strong></p>
</li>
<li>
<p class="para1" id="spec3">THE PARAGRAPH <strong>ELEMENT.</strong></p>
</li>
</ul>
</div>
<div class="footer">
<p id="footer-content">
Copyright © 2021 <a href="https://www.zxj.guru"><em>JaimeZeng</em></a
>.All Rights Reserved. Powered by
<a href="https://v2.vuepress.vuejs.org/"><em>VuePress</em></a
>.
</p>
</div>
</body>
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
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
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
/* 交集选择器 */
p.para1#spec2 {
text-transform: uppercase;
}
.para1#spec3 {
text-transform: lowercase;
}
</style>
</head>
<body>
<div class="box">
<ul class="unordered-list" id="ulist">
<li>
<p class="para0" id="spec0">我是段落元素</p>
</li>
<li>
<p class="para1" id="spec1">我是段落<em>元素</em></p>
</li>
<li>
<p class="para1" id="spec2">the paragraph <strong>element.</strong></p>
</li>
<li>
<p class="para1" id="spec3">THE PARAGRAPH <strong>ELEMENT.</strong></p>
</li>
</ul>
</div>
<div class="footer">
<p id="footer-content">
Copyright © 2021 <a href="https://www.zxj.guru"><em>JaimeZeng</em></a
>.All Rights Reserved. Powered by
<a href="https://v2.vuepress.vuejs.org/"><em>VuePress</em></a
>.
</p>
</div>
</body>
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
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
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
/* 并集选择器 */
em,
strong {
font-size: 1.6rem;
}
.box,
.footer {
font-family: "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<div class="box">
<ul class="unordered-list" id="ulist">
<li>
<p class="para0" id="spec0">我是段落元素</p>
</li>
<li>
<p class="para1" id="spec1">我是段落<em>元素</em></p>
</li>
<li>
<p class="para1" id="spec2">the paragraph <strong>element.</strong></p>
</li>
<li>
<p class="para1" id="spec3">THE PARAGRAPH <strong>ELEMENT.</strong></p>
</li>
</ul>
</div>
<div class="footer">
<p id="footer-content">
Copyright © 2021 <a href="https://www.zxj.guru"><em>JaimeZeng</em></a
>.All Rights Reserved. Powered by
<a href="https://v2.vuepress.vuejs.org/"><em>VuePress</em></a
>.
</p>
</div>
</body>
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
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
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
/* 复合选择器 */
div.footer #footer-content a {
color: #000000;
}
</style>
</head>
<body>
<div class="box">
<ul class="unordered-list" id="ulist">
<li>
<p class="para0" id="spec0">我是段落元素</p>
</li>
<li>
<p class="para1" id="spec1">我是段落<em>元素</em></p>
</li>
<li>
<p class="para1" id="spec2">the paragraph <strong>element.</strong></p>
</li>
<li>
<p class="para1" id="spec3">THE PARAGRAPH <strong>ELEMENT.</strong></p>
</li>
</ul>
</div>
<div class="footer">
<p id="footer-content">
Copyright © 2021 <a href="https://www.zxj.guru"><em>JaimeZeng</em></a
>.All Rights Reserved. Powered by
<a href="https://v2.vuepress.vuejs.org/"><em>VuePress</em></a
>.
</p>
</div>
</body>
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
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
标签/元素选择器
- 标签选择器也称元素选择器、类型选择器, 它直接使用元素的标签名当做选择器, 将选择页面上所有该种标签.
- 标签选择器将选择页面上所有该种标签, 无论这个标签所处位置的深浅.
- 标签选择器"覆盖面"非常大, 所以通常用于标签的初始化.
id 选择器
认识 id 属性
- 标签可以有 id 属性, 是这个标签的唯一标识.
- id 的名称只能由字母、数字、下划线、短横构成, 且不能以数字开头, 字母区分大小写, 但习惯上一般为小写字母.
- 同一个页面上不能有相同 id 的标签.
- id 选择器使用 HTML 元素的 id 属性来选择特定元素.
- 元素的 id 在页面中是唯一的, 因此 id 选择器用于选择一个唯一的元素!
- 要选择具有特定 id 的元素, 请写一个井号(＃), 后跟该元素的 id.
class 选择器
- class 选择器器使用 HTML 元素的 class 属性来选择特定元素.
- class 可以在多个元素中使用。
- class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点
.显示。
后代选择器
- 后代选择器（descendant selector）又称为包含选择器。
- 后代选择器可以选择作为某元素后代的元素。
- 两个或多个用空格分隔的选择器以空格分隔。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。例如：，
h1 em选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。 - 两个选择器之间的层次间隔可以是无限的。从某元素继承的所有后代元素，不论后代元素的嵌套层次多深。
交集选择器：选择两个或多个选择器相交的部分。例如：
p.para1#spec2表示，它既是一个 p 元素，同时它还具有 para1 类和 spec2 属性。并集选择器：
复合选择器：