这是我参与「第四届青训营 」笔记创作活动的的第1天
一. 前端基本概念
-
前端工程师解决的问题：解决多端界面交互。图形界面下的人机交互问题。
-
前端应该关注的方面：功能、美观、无障碍、安全、性能、兼容性、用户体验。
-
前端技术栈：通过HTML、CSS、JavaScript、网络协议与服务器端通信。
- HTML，CSS，JavaScript 运行在浏览器中。
- 浏览器通过HTTP等网络协议与服务端通信。
- 前端开发环境：浏览器 + 编辑器。
二. HTML中的概念
1. HTML的定义
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言：HyperText Markup Language。
- HTML 不是一种编程语言，而是一种标记语言。
- 标记语言是一套标记标签 (markup tag)。
- HTML 使用标记标签来描述网页。
- HTML 文档包含了HTML 标签及文本内容。
- HTML文档也叫做 web 页面。
2. HTML标签的定义
标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 < html >
- HTML 标签通常是成对出现的，比如 < b > 和 < /b >
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
- 开始和结束标签也被称为开放标签和闭合标签
3. HTML的语法
HTML的语法比较宽松。
- 标签和属性不区分大小写，推荐小写，比如
<p class="error">段落</p> - 空标签可以不闭合，比如
<input>、<meta> - 属性值推荐用双引号包裹，比如
width="2em" - 某些属性值可以省略，比如
required、readonly
三. HTML实例解析
1. HTML网页结构
<!doctype html>声明为 HTML5 文档。<html>元素是 HTML 页面的根元素。<head>元素包含了文档的元（meta）数据。<title>元素描述了文档的标题。<body>元素包含了可见的页面内容。<h1>元素定义一个大标题。<p>元素定义一个段落。
注：在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。
2. HTML文档解析与DOM树生成
浏览器会将HTML内容进行解析，得到一棵DOM树。
- 标签解析：使用标记化算法，从HTML字符串中解析出标签。
- DOM树构建：当标签解析器解析出标签后，会发送到DOM树构建器。通过起始标签入栈、结束标签出栈构建DOM树。
四. HTML的常用标签
1. 声明和结构标签
🔍 声明< !doctype >
- < !doctype >不是一个HTML标签，是一个声明。
- 位于文档中的最前面的位置，处于< html > 标签之前。
- 用来告知 Web 浏览器，页面的HTML 版本。
- < !doctype >不存在或格式不正确会导致文档以混杂模式呈现。
注（严格模式与混杂模式） ：
- 严格模式：标准模式，是指浏览器按照 W3C 标准解析代码。服务于标准规则。
- 混杂模式：怪异模式或兼容模式，是指浏览器用自己的方式解析代码。服务于旧式规则。
- HTML 4.01 规定了三种不同的 < !DOCTYPE > 声明，分别是：Strict、Transitional 和 Frameset。HTML5 中仅规定了一种。
🔍 < html >< /html >
- 限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
🔍 < head >< /head >
- 内容不会在浏览器中显示，作用是保存页面的一些元数据。
- < meta charset="utf-8" >：指定文档的字符编码。
- < title >指定整个HTML文档的标题。
🔍 < body >< /body >
- 存放用户在网页上能够看到的内容。
2. 标题标签
取决于文档内容结构。
🔍 一级标题< h1 >~六级标题< h6 >
- 呈现六个不同级别的标题，< h1 > 级别最高，而 < h6 > 级别最低。
3. 列表标签
🔍 有序列表 < ol >
- ordered lists，内部每一项用< li >表示，自动生成序号。
🔍 无序列表< ul >
- ordered lists，内部每一项用< li >表示。
🔍 定义列表< dl >
- definition lists，内部由< dt >和< dd >构成。< dt >是key，< dd >是value。
4. 超链接标签
🔍 超链接< a >
- 属性href ：标识超文本引用，在引用的文件和当前文件建立一种联系。
- 属性target："_self"，默认值，在当前窗口打开；"_blank"，在新的窗口打开。
5. 媒体标签
🔍 图片< img >
- 属性src：必选设置，规定显示图像的 URL。
- 属性alt：必选设置，图片加载不出来时显示的文本，即图像的替代文本。
- 属性title：可选设置，图片加载完成后鼠标移动上去的补充说明文本。
🔍 音频< audio >
- 属性src：播放音频的URL。
- 属性controls：向用户显示控制条。
🔍 视频< video >
- 属性src：引入视频的URL。
- 属性controls：向用户显示控制条。
6. input标签与选择标签
通过属性type设置是哪种类型的input标签。
🔍 单行输入框< input type="text" >
- 属性size：可见字符的个数。
- 属性maxlength：可输入的字符个数。
🔍 密码输入框< input type="password" >
- 属性maxlength：可输入的字符个数。
🔍 滑块< input type="range" >
- 属性min/max：最小值/最大值。
- 属性step：值的粒度。
🔍 日历选择 < input type="date/month/week…" >
- 属性value：设置默认值。
🔍 复选框< input type="checkbox" >
- 属性checked：选中或未选中状态。
🔍 单选按钮< input type="radio" >
- name相同的radio为一组选项。
🔍 下拉列表< select >
- < option > 为下拉选项。
🔍 输入选项列表< input list= "datalist-id" >
- < datalist >规定了< input > 元素可能的选项列表。
🔍 多行文本< textarea >
- 属性rows：可见行数。
7. 引用标签
🔍 表明引用来源< cite >
🔍 较短的引用 < q >
🔍 一整段的或较长的引用< blockquote >
8. 文本标签
🔍 定义预格式化文本< pre >
- 保留空格和换行符。
🔍 短语标签< code >
- 不能保留内容中的空格、换行符。
9. 突出重点的标签
🔍 全局强调< strong >
- 显示为加粗。
🔍 局部强调< em >
- 显示为倾斜。
- 在一句话中凸出一句重音、重点。
10. 内容划分标签
🔍 页头< header >
🔍 导航栏< nav >
🔍 主内容< main >
🔍 一段独立内容< article >
🔍 侧边栏< aside >
🔍 页脚< footer >
五. HTML语义化
1. 语义化的含义
HTML中的元素、属性及属性值都拥有某些含义。开发者应该遵循语义来编写HTML。
- 有序列表用 ol；无序列表用 ul。
- lang 属性表示内容所使用的语言。
2. 语义化的作用
- 开发者 - 修改、维护页面
- 浏览器 - 展示页面
- 搜索引擎 - 提取关键词、排序
- 屏幕阅读器 - 给盲人读页面内容
3. 语义化的优点
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
4. 标签的选择
根据含义、内容选择标签，而不是根据样式去选择标签。
5. 如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
