这是我参与「第四届青训营 」笔记创作活动的第1天。
一、前端
1、什么是前端
前端有三个要点：
- 图形用户界面(GUI)人机交互
- 跨终端：PC浏览器、移动浏览器、app、小程序、VR、AR……
- Web技术栈
用一句话总结前端工程师的任务，即“使用 web工作栈解决多端图形用户界面的交互问题”。
2、前端技术栈
3、前端关注的内容
4、前端的边界？
随着技术的不断发展，前端的范畴远远超出了制作一个简单的页面。
| 技术 | 用途 |
|---|---|
| Node.js | 开发服务器端应用 |
| ElECTRON, React Native | 开发客户端应用 |
| Web RTC | 进行P2P在线传输，实现多人会议 |
| WebGL | 开发一些3D游戏 |
| WebASSEMBLY | 将C++等语言编写的代码编译为直接运行于浏览器的代码 |
二、HTML(HyperText Markup Language)
超文本标记语言。
超文本指不仅仅包括文字，还包括图片、链接、标题、表格等内容。
使用标记语言，利用一系列成对出现的标签(开始标签与结束标签)来表示上述的不同内容。
标签上可设置属性，如<img src="photo.jpg" />，其中src为属性名，后面引号中的内容为属性值。标签与属性不区分大小写，推荐小写。
1、常见的一些基础标签
| 标签名 | 解释 |
|---|---|
<!doctype html> | 根标签，标记了html的版本，浏览器依此选择渲染模式 |
<head> | 存放页面源数据，不直接呈现给用户，如标题、编码方式 |
<body> | 存放呈现给用户的内容 |
2、DOM树
浏览器拿到 HTML 代码后会将其解析为一棵 DOM树。
3、标签
<1>、标题标签 h1~h6
六个级别的标题，字体大小依次减小。
<2>、列表标签 ol、ul、dl
有序标签 ol (ordered label), 无序标签 ul (unordered label), 定义列表 dl (definition list)。
其中，dl 列表下的 dt 与 dd 是多对多的关系。
<3>、链接标签 a
a标签最常用的属性是href（Hypertext Reference）。
<4>、图片、音频、视频标签 img、audio、video
src 为最常用的属性，可使用相对路径或绝对路径。
alt 属性是一个必需的属性，它规定在图像无法显示时的替代文本。假设由于一些原因（比如网速太慢、src 属性中的错误、浏览器禁用图像、用户使用的是屏幕阅读器）用户无法查看图像，alt 属性可以为图像提供替代的信息。
audio与video 下的 controls 表示需要显示浏览器默认的播放控件。
<5>、输入标签 input、textarea、select
type 属性用于选择不同的输入类型。（range、nubmer、date、checkbox、radio）
select 标签可以下拉选择。
<6>、引用标签 blockquote、cite、q、code、strong、em
快捷引用 blockquote
短引用 cite（效果为斜体）
短引用 q（效果为加引号）
代码引用 code（效果为等宽字体），引用多行代码时外面包裹<pre>
加粗引用 strong，斜体引用 em
4、内容划分
页头
导航
主体main（一般一个页面只有一个） aside（相关但不属于）
页尾
5、语义化
HTML中的元素、属性、属性值都拥有某些含义，应当遵循语义写HTML。因为不仅仅是你自己在使用你写出的代码。
谁在使用HTML？
- 开发者——协作——提高代码可读性
- 浏览器——展示页面——便于维护
- 搜索引擎——提取关键词、排序、优化——优化搜索引擎
- 屏幕阅读器——视障人群……——提升无障碍性
如何做到语义化？
- 学习mdn文档
- 仔细选择标签
- 不使用可视化工具直接生成代码
