前端工作的定义
三个要点：
1.解决GUI（图形用户界面）人机交互问题
2.跨终端（PC/移动浏览器、客户端/小程序、VR/AR等）
3.Web技术栈
前端技术栈拆解与分析
三层：（运行在浏览器里面<-->通过网络协议HTTP<-->服务器端）
1.HTML：内容
2.CSS：样式
3.JavaScript：行为
前端关注的问题：功能、美观、无障碍（对于所有人都适用：例如色盲症）、安全、性能、兼容性、用户体验等等。
前端的边界：nodeJS（服务器端）、ELECTRON（客户端）、React Native（PtoP在线传输）、WebRTC（开发3D游戏）、WebGL、WebASSEMBLY等等。
开发环境：浏览器、编辑器（VSCode、Vim、WebStorm）。
HTML作用解析
HyperText：超文本（图片、标题、链接、表格等）
Markup Language：标记语言（<h1>文章标题</h1>）
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
<!doctype html>：标记当前HTML文件的版本，浏览器会根据这个选择渲染模式，防止出现怪异模式。
<html></html>：根标签，其他标签都写在这里面。
<head></head>：页面的元数据（需要但不呈现），例如标题、编码。
<body></body>：页面需要展示的内容。
用HTML编写的文件，后缀以 .html 结尾。
HTML是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字。
标签有两种表现形式：
- 双标签，例如：
- 单标签，例如：
HTML的基本骨架
- html标签
- head标签
- body标签
- title标签
- meta标签：meta标签用来描述一个HTML网页文档的属性、关键词等。例如： charset="utf-8" 是说当前使用的是 utf-8 编码格式。
DOM树
把代码转化成一个树形的结构，每个结点就是一个DOM结点
HTML语法
标签和属性不区分大小写，推荐小写
空标签可以不闭合，例如input、meta
属性值推荐用双引号包裹
某些属性值可以省略，例如required、readonly（只读）
标题h1-h6
不要仅仅是为了生成粗体或大号的文本而使用标题。
应该将
<h1>用作主标题（最重要的），其后是<h2>（次重要的），再其次是<h3>，以此类推。
列表
- 有序ol
- 无序ul
- 定义列表key-value(dl dt标题 dd具体描述 多对多的关系)】
超链接 a
href="超链接的地址"
图片img
- src：路径（图片地址与名字）
- alt：规定图像的替代文本
- width：规定图像的宽度
- height：规定图像的高度
- title：鼠标悬停在图片上给予提示
音频audio
视频video
输入input
- placeholder：默认显示
- type="range"：滑动条
- type="number"：输入数字
- type="date"：日期选择框
- type="checkbox"：多选
- type="radio"：单选
<textarea></textarea>：文本框<select></select>：下拉选择<option></option>：选项
引用
<blockquote></blockquote>：长引用<cite></cite>：短引用，文章名或者章节名<q></q>：短引用，具体内容<code></code>：代码，等宽字体展示<strong></strong>：强调，强调重要性<em></em>：强调，强调语气
内容整体划分
<header></header>头部<nav></nav>导航<aside></aside>侧边栏<footer></footer>脚部，参考信息、备案信息等<article></article>代表一个独立的、完整的相关内容块,例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等<section></section>定义文档中的节,比如章节、页眉、页脚
HTML语义化
HTML中的元素、属性及属性值都拥有某些含义
开发者应遵循语义来编写HTML
原因：
- 开发者-修改、维护页面-方便协作
- 浏览器-展示页面
- 搜索引擎-提取关键词、排序
- 屏幕阅读器-给盲人读页面内容
好处：
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
传递内容，而不是样式
如何做：
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
