这是我参与「第五届青训营」伴学笔记创作活动的第 1 天

一、基础认知

1、什么是前端？

解决GUI人机交互问题
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
Web技术栈

2、前端技术栈

构成	语言	说明
内容	HTML	页面元素和内容
样式	CSS	网页元素的外观和位置等页面样式（如：颜色、大小等）
行为	JavaScript	网页模型的定义与页面交互

3、前端应该关注哪些方面？

功能、美观、无障碍、安全、性能、兼容、体验

4、前端的边界？

Node.js：开发服务器端的应用

Electron/React Native：开发客户端的应用

Web RTC：PPT的在线传输，实现多人会议

WebGL：开发3D游戏

WebASSEMBLY：WASM支持将C/C++/Go/Rust等语言实现的代码编译为浏览器可执行的机器码，从而支持浏览器以接近原生应用的性能运行相关应用。

5、开发环境

四大浏览器内核： IE（Trident）、Firefox（Gecko）、Safari（Webkit）、Chrome / Opera / Edge（Blink 属于 Webkit 的分支，Blink 兼容 Webkit）

编辑器：VsCode、Vim、WebStorm

二、HTML标签

1、什么是HTML?

超文本： 由图片、声音、动画、视频、标题、链接、表格……构成且可以相互链接的文本。

HTML：超文本标记语言（HTML 不是编程语言，而是由一套标记标签构成的标记语言）。

2、标准骨架

<!DOCTYPE html>
<html lang="en">
		<head>
    	<meta charset="UTF-8">
    	<title>页面标题</title>
	</head>
	<body>
    <h1>一级标题</h1>
    <p>段落内容</p>
	</body>
</html>

2.1 文档类型声明标签

<!doctype> 文档类型声明，作用是告诉浏览器应该使用哪种 HTML 版本来解析渲染网页。

<!doctype html>
<!-- 当前页面采用 HTML5 版本 -->

注意：

<!doctype> 声明位于文档最前面的位置，处于 <html> 标签之前
<!doctype> 文档类型声明标签，不属于 HTML 标签

2.2 lang语言种类

用来定义当前网页显示的主语言，书写在 <html> 标签内。

en 定义语言为英语
zh 定义语言为中文

zh-CN 中文（简体，中国大陆）

<html lang="zh-CN"> 
</html>

语言的设置是为了方便 浏览器搜索推荐 以及触发 浏览器翻译功能，并不是说设置了某类主语言后网页中就不能存在其他类型的语言了。

2.3 字符集

字符集： 多个字符的集合，以便计算机能够识别和储存各种文字。

在 <head> 标签内，可以通过 <meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。

<meta charset="UTF-8">

charset 常用的值有：GB2312、BIG5、GBK、UTF-8，其中 UTF-8 也被称为：万国码，基本包含了全世界所有国家需要用到的字符。

注意： 字符设置是必须的，否则极大可能引起网页乱码。一般情况下，统一使用 "UTF-8" 编码，尽量统一写成标准的 UTF-8，不要写成 "utf8" 或 "UTF8"。

DOM树

dom树.png

3、HTML语法

标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如 input、meta
属性值推荐用双引号包裹
某些属性值可以省略，比如required、readonly

4、HTML常用标签

4.1 标题标签

HTML 提供了 6 个等级的网页标题，即：<h1> 到 <h6>。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

特点：

加了标题的文字会自动加粗，字号也会依次变大
一个标题就独占一行，同一行标题后不会再放置其他任何内容（后期可以通过 CSS 修改）

4.2 列表标签

列表就是用来布局的，在实际开发中凡是遇到排列整齐的简洁内容，都可以使用列表来进行布局。

根据使用情景不同，列表可以分为三大类：无序列表、有序列表 和 自定义列表。

标签名	定义	说明
`<ul>` `</ul>`	无序标签	里面只包含 li，没有顺序，使用较多，li 里面可以包含任何标签
`<ol>` `</ol>`	有序标签	里面只包含 li，有顺序，使用相对较少，li 里面可以包含任何标签
`<dl>` `</dl>`	自定义标签	里面只能包含 dt 和 dd，dt 和 dd 里面可以放任何标签，dd 一般作为对 dt 的细分描述

4.2.1 无序列表

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。

无序列表的基本语法格式如下：

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>

无序列表的各个列表项之间没有顺序级别之分，是并列的
<ul> </ul> 中只能嵌套 <li> </li>，直接在 <ul> </ul> 标签中输入其他标签或者文字的做法是不被允许的，列表中的任何内容都应该放在 li 中
<li> 与 </li> 之间相当于一个容器，可以容纳所有的元素
无序列表会带有自己的样式属性（比如圆点），但在实际开发中，我们会使用 CSS 来设置

附：去除 li 前符号的方法：style="list-style: none;"

4.2.2 有序列表

有序列表即为有序排列顺序的列表，其各个列表项会按照一定的顺序排列定义。

在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。

有序列表的基本语法格式如下：

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ol>

<ol> </ol> 中只能嵌套 <li> </li>，直接在 <ol> </ol> 标签中输入其他标签或者文字的做法是不被允许的
<li> 与 </li> 之间相当于一个容器，可以容纳所有的元素
有序列表会带有自己样式属性（比如序号），但在实际使用时，我们会使用 CSS 来设置

4.2.3 自定义列表

自定义列表的使用场景：

自定义列表常用于对术语或名词进行解释、描述和展开，定义列表的列表项前没有任何项目符号（开发中常用）。在 HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用。

其基本语法如下：

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

<dl> </dl> 里面只包含 <dt>、<dd>
<dt> 和 <dd> 个数没有限制，经常是一个 <dt> 对应多个 <dd>

4.3 超链接标签

在 HTML 标签中，<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。

（1）链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式">文本、图像或其他内容</a>

单词 anchor 的缩写，意为：锚。

两个属性的作用如下：

属性	作用
`href`	用于指定链接目标的 url 地址，（必须属性）当标签应用 href 属性时，它就具有了超链接的功能
`target`	用于指定链接页面的打开方式，其中 `_self` 在当前页面打开的方式（为默认值），`_blank` 在新窗口中打开的方式

（2）链接分类

外部链接： 例如：<a href="http://www.baidu.com">百度</a>
内部链接： 网站内部页面之间相互链接，直接链接内部页面名称即可，例如： <a href="index.html">首页</a>
空链接： 如果当时没有确定链接目标时， <a href="javascript:void(0)">首页</a>"，当用户点击链接时，void(0) 计算为 0，但 Javascript 上没有任何效果
下载链接： 如果 href 里面地址是一个文件或者压缩包（前提：路径包含文件类型后缀名，如：.exe、.zip 等），便会下载这个文件
网页元素链接： 在网页中的各种网页元素，如：文本、图像、表格、音频、视频等都可以添加超链接
锚点链接： 点击链接，可以快速定位到当前页面中的某个位置
- 在链接文本的 href 属性中，设置属性值的 #名字 的形式，如：<a href="#two">第2集</a>
- 找到目标位置标签（此处以 h3 标签为例），里面添加一个 id属性="刚才的名字"，如：<h3 id="two">第2集介绍</h3>
- <a href="#"></a> 默认定位到页面顶部

4.4 媒体标签

4.4.1 图像标签和路径

（1）图像标签

在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。

<img src="图像URL">

src 是 <img> 标签的必须属性，它用于指定图像文件的路径和文件名。

URL 是 统一资源定位符（通俗理解：地址、网址）。

图像标签的其他属性：

属性	属性值	说明
`src`	图片路径	必须属性
`alt`	文本	替换文本，图像显示失败时显示
`title`	文本	提示文本，鼠标放到图片上，显示的提示文字
`width`	像素	设置图像的宽度
`height`	像素	设置图像的高度
`border`	像素	设置图像的边框粗细

图像标签的注意点：

图像标签可以同时拥有多个属性（其它标签也是同理）
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开（其它标签也是同理）
属性均采取键值对的格式，即：key="value" 的格式，属性="属性值"
设置图像的宽度与高度时：一般设置其中之一便可，另外一个会自动按比例适配
设置宽高时，可以使用百分数作为值，此时图片大小会以当前父元素的大小为基础进行比例缩放，这样做的好处在于当父元素改变大小时，图片也会随比例同等缩放

（2）路径

相对路径

相对路径：以引用文件所在位置为参考基础，而建立出目录路径。

相对路径分类	符号	说明
同一级路径	`.`	如：`<img src="baidu.png" />`
下一级路径	`/`	如：`<img src="image/baidu.png" />`
上一级路径	`../`	如：`<img src="../image/baidu.png" />`

绝对路径

绝对路径：指目录下的绝对位置，直接到达目的位置，通常是从盘符开始的路径。

如 Windows 系统的绝对路径：D:\web\img\logo.png

网络地址

https://github.com/JERRY-Z-J-R/JERRY-Z-J-R/blob/main/mark-img/readme.gif

注意：

相对路径为 /（正斜杆），绝对路径为 \（反斜杆）
实际开发中建议使用相对路径或网络地址（都是 / 正斜杆）

这里所说的绝对路径为 /（正斜杠）指的是在 Windows 环境中，而 Linux 系统依旧是反斜杠。

4.4.2 音频标签

场景：在页面中插入音频

<audio src="/assets/music.ogg" controls></audio>

常见属性：

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放
loop	循环播放

注意点：

音频标签目前支持三种格式：MP3、Wav、Ogg

4.4.3 视频标签

场景：在页面中插入视频

<video src="/assets/video.mp4" controls></video>

常见属性：

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放
loop	循环播放

注意点：

视频标签目前支持三种格式：MP4、WebM、Ogg

4.5 表单控件（输入）

（1）<input> 表单元素

在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本、字段、复选框、掩码后的文本控件、单选按钮、按钮等）。

<input type="属性值" />

<input /> 标签为单标签
type 属性设置不同的属性值用来指定不同的控件类型

type 属性的属性值及其描述如下：

属性值	描述
`button`	定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
`checkbox`	定义复选框，即：多选框，在一组多选中，要求它们必须拥有相同的 name
`file`	定义输入字段和 “浏览” 按钮，供文件上传
`date`	定义输入日期
`image`	定义图像形式的提交按钮
`password`	定义密码字段，该字段中的字符被掩码
`radio`	定义单选按钮，在一组单选按钮中，要求它们必须拥有相同的 name
`reset`	定义重置按钮，重置按钮会清除表单中的所有数据
`submit`	定义提交按钮，提交按钮会把表单数据发送到服务器
...	...

除 type 属性外，<input> 标签还有很多其他属性，其常用属性如下：

属性名	属性值	描述
`name`	由用户自定义	定义 input 元素的名称
`value`	由用户自定义	规定 input 元素的值，也就是提交到服务器的值
`checked`	checked	规定此 input 元素首次加载时应当被选中
`maxlength`	正整数	规定输入字段中的字符的最大长度

name 和 value 是每个表单元素都有的属性值，主要给后台人员使用
name 表单元素的名字，要求：单选按钮和复选框要有相同的 name 值
checked 属性主要针对于单选按钮和复选框，主要作用：打开页面时默认选中某个表单元素
maxlength 是用户可以在表单元素输入的最大字符数，一般很少使用
<label> 标签

<label> 标签为 input 元素定义标注（标签）。

<label> 标签用于绑定一个表单元素，当点击 <label> 标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。

语法：

<label for="sex">
	男<input type="radio" name="sex" id="sex" />
</label>

核心： <label> 标签的 for 属性应当与相关元素的 id 属性相同。

（2）<select> 表单元素

使用场景： 在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用 <select> 标签控件定义下拉列表。

语法：

<select>
    <option>选项1</option>
    <option>选项2</option>
    <option>选项3</option>
    ...
</select>

<select> 中至少包含一对 <option>
在 <option> 中定义 selected="selected" 时，当前项即为默认选中项

每个 <option> 元素都应该有一个 value 属性，其中包含选择该选项时要提交给服务器的数据值。如果不包含 value 属性，则 value 默认为元素内包含的文本。可以在 <option> 元素上包含 selected 属性，以使其在页面首次加载时默认选中。

（3）<textarea> 表单元素

使用场景： 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签

在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。

使用多行文本输入控件，可以输入更多的文字，该控件常用于留言板、评论。

语法：

<textarea rows="3" cols="20">
	文本内容
</textarea>

通过 <textarea> 标签可以轻松地创建多行文本输入框
cols="每行中的字符数"，rows="显示的行数"，我们在实际开发中不会使用，都是用 CSS 来改变大小
如果要禁止拉伸文本框大小，则：style="resize: none"

4.6 文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。

标签语义： 突出重要性，比普通文字更重要。

语义	标签	说明
加粗	`<strong>` `</strong>` 或 `<b>` `</b>`	介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者
倾斜	`<em>` `</em>` 或 `<i>` `</i>`	介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者
删除线	`<del>` `</del>` 或 `<s>` `</s>`	介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者
下划线	`<ins>` `</ins>` 或 `<u>` `</u>`	介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者

注意：<em> 标签不只是单纯的用于倾斜文本，其核心的意义在于对元素进行强调！所以在后期的开发中可以把一些特殊性、强调性的元素放在 em 标签中，然后再对 em 这个盒子进行样式设置，这比把其放入其他盒子（如：span）中要更合理，同理 <strong> 标签页适合放一些重点强调的元素。

5、语义化

5.1 语义化是什么？

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
- 有序列表用ol;无序列表用ul
- lang属性表示内容所使用的语言

5.2 语义化的好处

代码可读性
可维护性
搜索引擎优化
提升无障碍性

5.3 如何做到语义化

了解每个标签和属性的含义
思考什么标签最合适描述这个内容
不使用可视化工具生成代码

参考引用

部分内容参考了周吉瑞github上整理的资料

前端与 HTML | 青训营笔记

一、基础认知

1、什么是前端？

2、前端技术栈

3、前端应该关注哪些方面？

4、前端的边界？

5、开发环境

二、HTML标签

1、什么是HTML?

2、标准骨架

2.1 文档类型声明标签

2.2 lang语言种类

2.3 字符集

DOM树

3、HTML语法

4、HTML常用标签

4.1 标题标签

4.2 列表标签

4.2.1 无序列表

4.2.2 有序列表

4.2.3 自定义列表

4.3 超链接标签

4.4 媒体标签

4.4.1 图像标签和路径

4.4.2 音频标签

4.4.3 视频标签

4.5 表单控件（输入）

4.6 文本格式化标签

5、语义化

5.1 语义化是什么？

5.2 语义化的好处

5.3 如何做到语义化

参考引用