一、什么是前端
- 用于解决GUI人机交互问题
- 跨终端（PC/移动浏览器，客户端/小程序，VR/AR等）
- Web技术栈
前端工程师的工作 :使用Web技术栈解决多用户界面交互的工程师
二、前端技术栈
服务器通过HTML（内容）,CSS（样式）,JavaScript（行为）进行渲染，呈现给用户进行交互。用户也可以在前端页面进行响应和操作，通过网络协议（HTTP等）传回服务器端。
三、前端关注点
- 美观（不美观无人问津，影响感官）
- 安全（安全性向来重要）
- 兼容（兼容多种浏览器及环境，提升用户体验）
- 功能（重中之重。用于完成用户需求）
- 体验（注重用户体验感，改善印象提升可用性）
- 性能（提升性能，提升产品竞争力）
- 无障碍（对于特殊人士的需求进行考虑并实现）
四、开发环境
- 浏览器（IE/Edge,Chorme,FireFox,Safari）
- 编辑器（VSCode,Vim,WebStrorm）
五、什么是HTML
HyperText & Markup Language
HyperText:图片，标签，链接，表格
Markup Language:如<h1>文章标题</h1>
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以忽略，如
required、readonly
六、常见标签
- 有序列表
<ol>
<li>我是0</li>
<li>我是1</li>
</ol>
- 我是0
- 我是1
- 无序列表
<li>有0吗</li>
<li>有1吗</li>
</ul>
- 有0吗
- 有1吗
- 列表标签
<dl>大标题
<dt>小标题
<dd>小标题的值</dd>
</dt>
</dl>
- 大标题
- 小标题
- 小标题的值
- 超链接
href="链接"，路径推荐用相对路径。
target属性，常用值有_blank（在新标签页载入）、_self（显示在当前的窗口）
<a href="https://juejin.cn/" target="_blank">系兄弟就来点我</a>
- 图像影音链接
图片
<img src="路径"/>
音频 (controls属性是规定浏览器应该为视频提供播放的控件)
<audio src="路径" controls><controls>
视频
<video src="路径" controls></video>
- 输入标签
placeholder是设置输入框里的默认值
<input placeholder="请输入用户名">
type=range是设置范围条
<input type="range">
type="number" min max设置输入数字的最小值和最大值
<input type="number" min="1" max="10">
type="date" min=""输入类型是日期，并设置最小日期
<input type="date" min="2018-02-10">
textarea可输入多行的文本域
<textarea>Hey</textarea>
- 单选框、复选框和下拉框选择
单选框checkbox
<input type="checkbox"/>单选
多选radio
<input type="radio">多选1
<input type="radio">多选2
下拉框<select><option>
<select>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
七、内容划分
- header:页面头部
- nav：可用于放导航栏等
- main:网页主体部分
- article:包含在main部分。网页正文写在此处
- aside：在main旁边的部分，不是正文部分但可以添加有用信息及链接
- footer：底部
八、语义化
1.什么是语义化？
(1)HTML中的元素、属性及属性值都拥有某些含义
（2）开发者应该遵循语义来编写HTML
2.如何做到语义化
（1）了解每个标签和属性的含义 （W3C,MDN文档）
（2）思考什么标签最适合描述这个内容 （熟能生巧，多看文档）
（3）不使用可视化工具生成代码 （没法控制生成的标签是怎样的）
3.语义化的好处
（1）代码可读性（代码整洁，可读性强，便于开发协作）
（2）可维护性（修护、维护页面。让网页可维护，提升用户使用体验）
（3）搜索引擎优化（提取关键词，排序。让用户更快更准确搜索到答案）
（4）提升无障碍性（方便特殊人士使用）
