第一部分：前端

知识点一：什么是前端？

解决GUI人机交互问题：
跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR 等
Web技术栈
总结：前端工程师就是使用web技术栈解决多端图形用户交互界面的工程师

知识点二：前端最基础的技术栈有哪些？

HTML（内容）
CSS（样式）
JavaScript（行为）
HTTP、TCP/IP等的网路协议

知识点三：前端应该关注哪些方面？

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

第二部分：HTML

知识点一：HTML是什么？

HyperText（图片、标题、链接、表格）
Markup Language（标签） <h1>标题</h1>、<img src="photo.jpg"/>等
在<img src="photo.jpg"/>中，src为属性名，photo.jpg为属性值

知识点二：DOM树

mindmap
      document
          html
              head
                  meta
                  title "Page Title"
              body
                  h1 "Heading"
                  p "Page Content"

知识点三：HTML语法

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

定义列表（dl）：dt（标题）、dd（具体描述）

跳转链接（a）：<a href="https://www.bytedance.com/" target="_blank">
添加了target="_blank"属性后表示在新的界面打开网页。

图片（img）、音频（audio）、视频（video）：alt=”加载失败时提示词”、controls（音频、视频控制属性）

块级引用（blockquote）:<blockquote cite="http://t.cn/RfjKO0F">cite属性值为引用来源

短引用（cite、q）：当引用了别人的名字或章节时使用使用<cite>，当引用具体致之前出现过的内容时用<q>

代码引用（code、pre）：在界面出现代码时引用，当出现多行代码时需要在<code>标签外套一层<pre>标签

页面划分：常见的页面划分含有:

页头<header> :可以存放logo以及导航栏<nav>等
主体部分<main>:一般一个页面只有一个main元素，其中可包含文字内容<article>
侧边<aside>:可存放与主题部分无关的内容，如广告等
页脚<footer>:放置参考链接，备案等内容

知识点四：语义化是什么？

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

知识点五：谁在使用我们写的HTML？

开发者 - 修改、维护界面
浏览器 - 展示界面
搜索引擎 - 提前关键词、排序
屏幕阅读器 - 给盲人读页面内容

知识点六：语义化的好处

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

知识点七：如何做到语义化？

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

个人总结

在HTML的开发和编写中的语义化是必不可少的，本节课程向我们讲述了多个帮助我们达到语义化的标签，如<blockquote>、<cite>、<main>等的引用和划分元素标签，相较于直接使用常见标签，语义化的开发提升了我们的代码可读性和可维护性。

如何写好Js | 青训营