黑马Pink老师的前端课程b站链接：https://www.bilibili.com/video/BV14J4114768?p=1
老师的PPT和源码案例在他的专栏中有提供下载地址。
本文在原教程的基础上对目录结构进行了整理、排序和裁剪，一些太基础的概念没有写入。针对视频中的讲解、案例、PPT和源码材料作了一些总结，仅用于个人复习以及前端学习交流分享。
目录
网页：通常是HTML格式的文件，通过浏览器阅读。组成网站的基本元素。由图片、链接、文字、音乐、视频等组成。
HTML：超文本标记语言Hyper Text Markup Language，不是编程语言，而是标记语言，由各种标签组成。超文本的含义：1.超越文本限制，可以是图片、声音、多媒体等；2.超级链接文本，可以从一个文件跳到另一个文件。
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。
| 内核 | 浏览器 |
|---|---|
| Trident | IE、猎豹、360、百度 |
| Gecko | 火狐 |
| Webkit | 苹果 |
| Blink | chrome/opera。blink是webkit的分支 |
web标准：由W3C组织和其他标准化组织指定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。
主要构成：结构structure、表现persentation、行为behavior。
| 标准 | 说明 |
|---|---|
| 结构 | 主要是html。用于对网页元素进行整理和分类。 |
| 表现 | 主要是css。用于设置网页元素的版式、颜色、大小等外观样式。 |
| 行为 | 主要是JavaScript。网页模型的定义以及交互的编写。 |
最佳体验方案：结构、行为、表现相互分离。
类比：身体、衣服、动作。
Chapter1. HTML概述
1.1 概述
双标签：成对的标签。如< html ></ html>。有两种关系：包含关系和并列关系。
单标签：特殊的单个标签。如< br >。
1.2 HTML的基本结构标签（骨架标签）
| 标签名 | 定义 | 说明 |
|---|---|---|
| < html ></ html > | HTML标签 | 根标签 |
| < head ></ head > | 文档的头部 | 头部标签 |
| < title ></ title > | 文档的标题 | head标签中必须设置的标签 |
| < body ></ body > | 文档的主题 | 和头部标签并列 |
<html>
<head>
<title>第一个页面</title>
</head>
<body>
万丈高楼平地起。
</body>
</html>
1.3 网页开发工具
1.3.1 vscode的使用
- 双击打开软件。
- 新建文件（Ctrl + N ）。
- 保存（Ctrl + S ）, 注意移动要保存为 .html 文件
- Ctrl + 加号键 ，Ctrl + 减号键 可以放大缩小视图
- 生成页面骨架结构。
输入! 按下 Tab 键。 - 利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口中点击“Open In Default Browser”（“Open In Live Server”）。
- 输入标签名+tab，自动补全标签
1.3.2 < !DOCTYPE >文档类型声明标签
< !DOCTYPE >文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。
< !DOCTYPE html >这句代码的意思是: 当前页面采取的是 HTML5 版本来显示网页。
- 声明位于文档中的最前面的位置，处于 标签之前。
-
< !DOCTYPE >不是一个 HTML 标签，它就是 文档类型声明标签。
1.3.3 lang语言种类
< html lang="en">
- en定义语言为英语
- zh-CN定义语言为中文
简单来说，定义为en 就是英文网页，定义为 zh-CN 就是中文网页。
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。
1.3.4 charset字符集
字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。在< head >标签内，可以通过< meta > 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。
<meta charset=" UTF-8" />
charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符。
注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的 “UTF-8”，不要写成 “utf8” 或 “UTF8”。
Chapter2. HTML常用标签
2.1 标题标签
6个等级的网页标题标签：< h1 > - < h6 >
标签语义：作为标题使用，并且依据重要性递减。
特点：
- 加了标题的文字会变的加粗，字号也会依次变大。
- 一个标题独占一行。
2.2 段落和换行标签
2.2.1 段落< p >
< p >标签用于定义段落，它可以将整个网页分为若干个段落。
特点：
- 文本在一个段落中会根据浏览器窗口的大小自动换行。
- 段落和段落之间保有空隙。
2.2.2 换行< br >
< br >用于强制换行。
特点：
- < br > 是个单标签。
- < br > 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
2.3 文本格式化
在网页中，有时需要为文字设置粗体、斜体 或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。
标签语义: 突出重要性，比普通文字更重要。
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | < strong >< /strong> 或 < b >< /b> | 推荐使用strong，语义更强烈 |
| 倾斜 | < em >< /em>或< b >< /b> | 推荐使用em，语义更强烈 |
| 删除线 | < del >< /del >或< s >< /s> | 推荐使用del，语义更强烈 |
| 下划线 | < ins>< /ins >或< u >< /u> | 推荐使用ins，语义更强烈 |
2.4 < div >和< span >标签
< div > 和 < span > 是没有语义的，它们就是一个盒子，用来装内容的。div 是 division 的缩写，表示分割、分区。span 意为跨度、跨距。
特点：
- < div> 标签用来布局，但是一行只能放一个< div >。大盒子
- < span > 标签用来布局，一行上可以多个 < span >。小盒子
2.5 图像标签和路径
2.5.1 图像标签
在 HTML 标签中，< img > 标签用于定义 HTML 页面中的图像。src 是< img >标签的必须属性，它用于指定图像文件的路径和文件名。
<img src="图像url">
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 图片不能显示时，显示的文字。 |
| title | 文本 | 提示文本。鼠标放在图像上显示的文字。 |
| width | 像素 | 宽度 |
| height | 像素 | 高度 |
| border | 像素 | 边框粗细，一般用css指定 |
- 属性之间无先后顺序，用空格分开
- 属性采用键值对的格式
- 修改宽度和高度之中的一个，另外一个会等比例缩放
2.5.2 路径
2.5.2.1 相对路径
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。
| 分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 如< img src=“baidu.gif” > | |
| 下一级路径 | / | 如< img src=“images/baidu.gif” > |
| 上一级 | …/ | 如< img src="…/baidu.gif" > |
2.5.2.2 绝对路径
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
2.6 超链接标签
在 HTML 标签中，< a > 标签用于定义超链接，作用是从一个页面链接到另一个页面。
2.6.1 语法
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
| 属性 | 作用 |
|---|---|
| href | 必须属性。用于指定链接目标的url地址。 |
| target | 用于指定链接页面的打开方式。 _ self为默认值，_ blank为在新窗口中打开方式 |
2.6.2 分类
- 外部链接：
< a href="http:// www.baidu.com "> 百度</a >。 - 内部链接：网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如
< a href="index.html"> 首页 </a >。 - 空链接：如果当时没有确定链接目标时，
< a href="#"> 首页 </a >。 - 下载链接：如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
- 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
- 锚点链接：快速定位到页面中的某个位置。
- 在链接文本的 href 属性中，设置属性值为 #名字 的形式，如
<a href="#two"> 第2集 </a> - 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：
<h3 id="two">第2集介绍</h3>
- 在链接文本的 href 属性中，设置属性值为 #名字 的形式，如
2.7 注释和特殊字符
注释：<!-- 注释语句 -->快捷键：ctrl+/
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
| 空格符 | & nbsp; | |
| > | 大于号 | & gt; |
| < | 小于号 | & lt; |
| >= | 大于等于 | & ge; |
| <= | 小于等于 | & le; |
2.8 表格
表格不是用来布局页面的,而是用来展示数据的。
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
</table>
- tr: table row
- td: table data cell
- th: table head cell（加粗居中）
2.8.1 表格属性
一般在css中设置
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left, center, right | 表格相对周围元素的对齐方式 |
| border | 1 或 “” | 是否拥有边框，默认""无边框 |
| cellpadding | 像素值 | 边沿与内容之间的空白，默认1px |
| cellspacing | 像素值 | 单元格之间的空白，默认2px |
| width | 像素值或百分比 | 表格的宽度 |
2.8.2 表格结构标签
使用场景:因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。
在表格标签中，分别用：< thead >标签 表格的头部区域、< tbody >标签 表格的主体区域. 这样可以更好的分清表格结构。
<table>
<thead>
<tr>
<td>单元格内的文字</td>
...
</tr>
</thead>
<tbody>
<tr>
<td>单元格内的文字</td>
...
</tr>
</tbody>
</table>
2.8.3 合并单元格
- 跨行合并：rowspan=“合并单元格的个数”
- 跨列合并：colspan=“合并单元格的个数”
2.9 列表标签
- 无序列表
- 有序列表
- 自定义列表
2.9.1 无序列表
ul: unordered list
<ul>
<li></li>
<li></li>
<li></li>
</ul>
- < ul >< /ul > 中只能嵌套 < li >< /li >，直接在 < ul >< /ul > 标签中输入其他标签或者文字的做法是不被允许的。
- < li >与< /li >之间相当于一个容器，可以容纳所有元素。
2.9.2 有序列表
ol: ordered list
li: list item
<ol>
<li></li>
<li></li>
<li></li>
</ol>
- < ol >< /ol > 中只能嵌套 < li >< /li >，直接在 < ol >< /ol > 标签中输入其他标签或者文字的做法是不被允许的。
- < li >与< /li >之间相当于一个容器，可以容纳所有元素。
2.9.3 自定义列表
dl: definition list
dt: definition term
dd: definition description
<dl>
<dt></dt>
<dd></dd>
<dd></dd>
</dl>
- < dl >< /dl > 里面只能包含 < dt > 和 < dd >。
- < dt > 和 < dd >没有个数限制，经常是一个< dt > 对应多个 < dd >。
2.10 表单标签
表单：收集用户信息
在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。
2.10.1 表单域
<form action="demo.php" method="POST" name="name1">
...
</form>
2.10.2 表单控件（表单元素）
2.10.2.1< input >表单元素
input是一个单标签，表示用户输入，必要属：type。
<input type="属性值" />
type属性值表格
| 属性值 | 描述 |
|---|---|
| button | 可点击按钮 |
| checkbox | 复选框 |
| file | 供文件上传，如“浏览”按钮 |
| hidden | 隐藏的输入字段 |
| image | 图像形式的提交按钮 |
| password | 密码，字符被掩码 |
| radio | 单选按钮 |
| reset | 重置按钮，清除表单中所有数据 |
| submit | 提交按钮，把表单数据发送到服务器 |
| text | 单行的输入字段，输入文本，默认宽度为20字符 |
input的其他按钮
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 用户自定义 | 定义input元素的名称 |
| value | 用户自定义 | 规定input元素的默认值 |
| checked | checked | 规定input元素首次加载时应当被选中 |
| maxlength | 正整数 | 输入字符的最大长度 |
- name 和value 是每个表单元素都有的属性值,主要给后台人员使用
- name 表单元素的名字,主要作用就是用于区别不同的表单元素，要求单选按钮和复选框要有相同的name值
- checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素。
< label >标签：用于绑定一个表单元素, 当点击< label > 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上，用来增加用户体验。
<label for="text"> 用户名:</label> <input type="text" id="text" >
2.10.2.2 < select >下拉表单元素
在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用< select >标签控件定义下拉列表。
<select>
<option>山东</option>
<option>北京</option>
<option>天津</option>
<option selected="selected">火星</option>
</select>
- < select > 中至少包含一对< option >
- 在< option > 中定义 selected =“ selected " 时，当前项即为默认选中项
2.10.2.3 < textarea >文本域元素
当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 < textarea > 标签。
在表单元素中，< textarea > 标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
今日反馈:
<textarea cols="50" rows="5">pink老师,我知道这个反馈留言是textarea来做的 </textarea>