什么是前端?
- 解决GUI人机交互问题
- 跨终端
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
- Web技术栈
前端本质大家都很清楚，是在浏览器内页面编程，HTML 为骨架，CSS 为样式，JS 为动作，三者结合，呈现在浏览器中。前端做的好不好对用户的体验有紧密关系。
前端技术栈
三大框架
现在 React、Vue、Angular 各站一头。其实最初没有这些框架，都是原生。技术的发展之后，出现了jQuery这些库，然后最先出现的是 Angular，紧随其后的是 React，还有就是Vue。
AngularJS
Angular JS 是一个有Google维护的开源前端web应用程序框架。它最初由Brat Tech LLC的Misko Hevery于2009年开发出来。Angular JS是一个模型-视图-控制器（MVC）模式的框架，目的在于使HTML动态化。与其他框架相比，它可以快速生成代码，并且能非常轻松的测试程序独立的模块。最大的优势是在你修改代码后，它会立即刷新前端UI，能马上体现出来。
ReactJS
React JS 不像一个框架反而更像一个库，但绝对是值得一提。AngularJS是一个MVC模式的框架，但ReactJS是一个由Facebook开发的非MVC模式的框架。它允许你创建一个可复用的UI组件，Facebook和Instagram的用户界面就是用ReactJS开发的。
VueJS框架
Vue.js简介：Vue.js是一套构建数据驱动的 web 界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
前端应该关注哪些方面?
- 美观
- 安全
- 兼容
- 功能
- 体验
- 性能
- 无障碍
前端的边界
前端可以做很多不仅仅是web开发，还可以做客户端应用，当然还可以做后端，还有3D可视化等等。
开发环境
HTML
HTML是什么?
HTML（超文本标记语言——HyperText Markup Language）是构成 Web 世界的一砖一瓦。它定义了网页内容的含义和结构。除 HTML 以外的其它技术则通常用来描述一个网页的表现与展示效果（如 CSS），或功能与行为（如 JavaScript）。
DOM树
HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，
- 比如input、 meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如 required、readonly
标题（h1~h6）
HTML <h1>–<h6> 标题 (Heading) 元素呈现了六个不同的级别的标题，<h1> 级别最高，而 <h6> 级别最低。
链接（a）
链接也是每个网页不可或缺的一部分。您可以添加文本或图像的链接，使用户可以单击它们以便跳转到另一个文件或网页。 在HTML中，使用<a >标签定义链接。
<a href="mailto:m.bluth@example.com">Email</a> 复制代码
输入框（input）
有很多属性，不仅仅是输入文字这么简单。以下是截取了部分MDN的内容。
内容划分
语义化
语义化就是构成HTML结构的标签要有意义，比如有这样的标签：head表示页面头部，main表示页面主题，footer表示页面底部。那么这些标签构成的HTML结构就是有意义的，也是语义化的。如果说页面的头部、主体以及底部都用div来表示，那么他就不是一个语义化的HTML结构了。
谁在使用我们写的HTML
- 开发者-修改、维护页面
- 浏览器-展示页面
- 搜索引擎-提取关键词、排序
- 屏幕阅读器-给盲人读页面内容
语义化的好处
- 最主要的就是对 '搜索引擎' 友好, 有了良好的 结构和语义 的网页内容, 自然容易被搜索引擎取。
- 有利于 'SEO': 和搜索引擎建立良好沟通, 有助于爬虫抓取更多的有效信息 。
- 方便其他设备解析 (如屏幕阅读器, 盲人阅读器, 移动设备) 以语义化的方式来渲染网页 。
- 用户体验: 例如 title, alt 用于解释名词或解释图片信息的标签, 尽量填写有含义的词语, label 标签的活用 。
