什么是前端
前端即网站前台部分，也叫前端开发，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。
前端技术栈
HTML（内容）CSS（样式）JavaScript（行为）与网络协议构成了前端最基础的技术栈。
浏览器通过网络协议与服务器进行通信。浏览器把前端代码通过网络协议从服务器拿到后渲染成页面。浏览器通过网络协议把用户填写的内容或行为动作传给服务器端。
前端开发的关注点
1.功能
前端的功能应该有很多，我这里就总结一部分了。
1.http请求
前端必备的技能之一，也是使用最多的功能。例如：axios，fetch，XMLHttpRequest等等。
2.图片懒加载
3.监听滚动到底部
4.格式化日期
等等，还有许多因为所需技术并不掌握就不一 一列举了。
2.性能
在用户角度而言：性能优化能够让页面加载的更快，想要更及时，能给用用户提供良好的体验。
1.图片优化
我们有许多种解决方案，比如：
1.雪碧图
小图片我们可以合并到一个图片上我们称为“雪碧图”（iconFont）。
2.图片懒加载
只加载屏幕可视区
3.webp
是一种图片格式可以进行其他格式的替换效果更好
4.图片压缩
2.封装函数
把我们一个项目当中经常（重复）使用的部分代码块进行封装，使加载速度更快。
3.css优化
1.css写在头部
2.移除空置的css规则
3.避免行内样式
4.把JavaScript和CSS都放到外部文件种进行引入
5.避免重定向
3.兼容性
干前端的应该都被兼容性这个问题搞过，但是因为时代在发展这种事应该都很少发生，但还是有些时候需要考虑这些事情，例如：银行，学习等等这些地方（一部分）的电脑浏览器内核版本还很低会出现这类问题。
最常见的浏览器内核有四种：Trident，Gecko，Blink，Webkit
现在说说目前流行浏览器的内核把
IE浏览器：Trident内核
Chrome浏览器：Webkit内核，现在是Blink内核
Firefox浏览器：Gecko内核，俗称Firefox内核
百度浏览器：IE内核
360浏览器：IE+Chrome双内核
猎豹浏览器：IE+Chrome双内核
HTML
HTML的概念
HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。
HTML元素：HTML由一系列的元素组成，这些元素可以用来包围或标记不同部分的内容，使其以某种方式呈现或者工作。由开始标签、内容、结束标签三部分组成一个整体。
开发环境
浏览器:Edge/Chrome/Firefox/Safari
编辑器:VSCode/Vim/WebStorm
推荐使用 Visual Studio Code（简称 VS Code）是一个由微软开发，同时支持 Windows 、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，编辑器中内置了扩展程序管理的功能。
demo
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
-
声明为 HTML5 文档
-
元素是 HTML 页面的根元素
-
元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
-
元素描述了文档的标题
-
元素包含了可见的页面内容
-
元素定义一个大标题
-
元素定义一个段落
常用标签
| 标签 | 描述 |
|---|---|
| h1 | 定义 HTML 标题 |
| p | 段落 |
| br | 换行 |
| hr | 水平线 |
| a | 超链接 |
| ul | 无序列表 |
| ol | 有序列表 |
| li | 列表项 |
| dl | 定义列表 |
| dt | 定义列表中的项目 |
| dd | 定义列表中项目的描述 |
语义化
- 了解标签和属性及属性值的含义
- 思考标签适合描述的内容
补充学习
-
MDN 上的 HTML 参考，包含每个标签和属性的详细说明
developer.mozilla.org/en-US/docs/… -
最新版的 W3C HTML5 规范
html.spec.whatwg.org/multipage/
