01 什么是前端？
前端工程师使用web技术栈来解决多端用户界面的交互问题。无论设备是PC浏览器，移动浏览器，APP，小程序，甚至是一些VR设备，使用的技术栈都是HTML，CSS，JavaScript。
02 前端技术栈
HTML，CSS，JavaScript和网络协议构成了前端最基础的一个技术栈。
- HTML（内容）：最基础的部分，负责页面结构以及内容。
- CSS（样式）：在页面中可以使用CSS来设置页面的样式，如位置、大小、颜色等
- JavaScript（行为）：使用JavaScript来定义网页的行为。
- 网络协议：HTML，CSS，JavaScript都是在浏览器里面运行的，浏览器可以通过HTTP协议和服务器进行通信，把前端的代码通过HTTP协议从服务器中获取，获取后把它渲染成用户所看到的页面。浏览器还可以把用户所提供的信息或用户的一些行为通过HTTP协议提交到服务器端。
03 前端应该关注的方面
-
功能：做这个产品它有哪些功能，解决什么问题，有没有满足用户某些方面的一些需求。
-
美观：做出的界面的美观程度。
-
无障碍：无障碍呢也叫accessibility，网站是否对于所有人都可用。
-
安全：保证所有的用户数据的安全，考虑是否存在一些漏洞可能会被利用。
-
性能：网站是否速度足够快，动画是否流畅，用户体验是不是足够好。
-
兼容性：兼容性就是做出来的这个网页设置能够在各种各样的设备上正常去使用，比如说在电脑上可以使用，在手机上也可以使用。
04 什么是HTML
HTML的全称为超文本标记语言（HyperText Markup Language)，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
05 HTML语法
-
标签和属性不区分大小写，但是一般推荐用小写，因现在用框架比较多，把自定义的一些组件用大写去表示，原生的一些标签则用小写来表示。
-
空标签可以不闭合，比如input、beta。
-
属性值推荐用双引号包裹。
-
某些属性值可以省略，比如required、readonly。
06 语义化
- 什么是语义化
HTML中的元素、属性及属性值都拥有某些含义，开发者应使用HTML所提供的现有标签，利用其相应的含义去进行网页元素的排版，及遵循语义来编写HTML。
- HTML语义化的优点
- 使HTML结构清晰
- 代码可读性较好
- 无障碍阅读
- 搜索引擎可以根据标签的语言确定上下文和权重问题
- 移动设备能够更完美的展现网页（对css支持较弱的设备）
- 便于团队维护和开发
- 如何做到语义化
- 了解每个标签和属性的含义。
- 思考什么标签最适合描述这个内容。
- 不使用可视化工具来生成代码。
07 思考
前端发展迅猛，开发工具、开发环境不断进行更新换代。前端的学习入门相对简单，但是在技术不断更新的大环境下仍需持续不断地学习。而开发者在实际开发中，要注重实现标签的语义化，提高代码的可读性，以便于后续团队的维护和开发。
