这是我参与「第四届青训营 」笔记创作活动的的第 1 天。
在2年前已经学过并运用过 HTML 技术啦，所以本文简要记录下课程笔记，作为复习啦！
一、 前端
1. 什么是前端？
- 解决 GUI 人机交互问题
- 跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR 等
- Web 技术栈
- HTML 内容
- CSS 样式
- JavaScript 行为
2. 前端应该关注哪些方面？
- 美观
- 功能
- 无障碍
- 安全
- 性能
- 兼容
- 体验
3. 前端的边界？
- Node.js 服务端
- Electron 桌面应用程序
- React Native 跨平台移动应用开发框架
- Web RTC 网页实时通信
- WebGL web图形库，开发3D游戏
- WebASSEMBLY 将 C++等编译为浏览器可运行的代码
前端技术不断更新。
二、HTML
1. HTML 是什么？
HyperText Markup Language 超文本标记语言。
超文本指图片、标题、链接、表格等非纯文字、更丰富的格式。
标记语言指 <h1>文章标题</h1> <img src="login.jpg />
其中，HTML 文件的第一个标签：<!doctype html> 表示当前 HTML 版本。
2. HTML 语法
- 标签和属性不区分大小写，推荐小写
- 空标签（即标签内不放内容的标签）可以不闭合，比如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如required（因为 required="required" 属性名和属性值相同）、 readonly
HTML 标签
- 标题：h1~h6
- 列表：ul li 无序列表； ol li 有序列表（默认1、2、3）；dl dt dd 描述列表
- 超链接：a 其中
target="_blank"设置新窗口打开此链接 - 多媒体：img、audio、video 其中
alt="图片不存在则显示此文本" - 表单：textarea；input 其中
type="text | range | number | date | password 等"；select option 下拉框； - 文本标签：blockquote 块级引用； cite 短引用（作品名）；q 短引用（作品内容）；code 代码；pre code 多行代码；strong 强调（重要，紧急）；em 强调（语气）；
- 内容划分：header（页头）；nav（导航）；main（主体）；多个 article（文章）；aside（侧栏）；footer（页尾）；
3. 语义化标签
- HTML 中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写 HTML
谁在使用我们写的 HTML？
- 开发者 - 修改、维护页面
- 浏览器 - 展示页面
- 搜索引擎 - 提取关键词、排序
- 屏幕阅读器 - 给盲人读页面内容
语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
传达内容，而不是样式。
如：<p style="font-size:32px">我的笔记</p> 推荐用 <h1>我的笔记</h1>代替。
如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
