前端开发，入门简单，有一台可以运行多款浏览器的电脑，能联网查询资料即可。深入的部分，需要更多的理论知识、肯钻研的精神。 前端开发，需要入门了解的屈指可数，主要就是如下几个大方面：
背景知识
软件安装
文本编辑器
- vscode(推荐使用，功能强大)
- Sublime Text
- NodePad++
浏览器
Firefox, Chrome, Opera, Safari, Internet Explorer and Microsoft Edge
版本控制
构建工具
Web standards
Web standards，主要定义浏览器端，功能接口标准的，标准的具体实现，由不同的浏览器厂商完成。
当下使用的web技术
主流浏览器
Firefox, Chrome, Opera, Safari, Internet Explorer and Microsoft Edge
协议
协议，主要用于通信。前后端不是独立的，彼此通过协议，互换信息，web系统才能运行正常
- http
- https
- socket
HTML, CSS, and JavaScript
开发工具
- 各浏览的DevTool,便于调试
- Linters插件
- Minify工具
- CDN等
- 测试工具
- js库和前端框架（站点构建的更快、更高效）
服务端语言
Python, NodeJS, Deno, Go, Rust
面临的挑战
浏览器兼容
Web standards，各实现厂商不同，支持力度不同，浏览器兼容问题自然存在
响应式设计
厂商的不同，展示场景的不同，意味着不能全篇一律敲定，需要动态变化展示内容
性能
天下站点，只有快，才能留住用户
易用性
站点的访问人群不同，要具备普适性， 都能轻松使用。
国际化
国际语言众多，需要尽可能的多支持
安全性
用户隐私数据保护
HTML
html基础概念
html元素
当然，也有例外，不是这种格式的
# Empty elements， or (void elements.)
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
html元素嵌套
<p>My cat is <strong>very</strong> grumpy.</p>
块元素和行内元素
块元素，独占一行；行内元素，按先后顺序，排列 这些与css的display不同，不影响元素能包含哪些元素，能被哪些元素包含
元素属性
其中，也存在一种特殊的属性：Boolean attributes
<input type="text" disabled>
# 等效于
<input type="text" disabled="disabled">
另外，也会存在一些特殊的写法。推荐都是key="value"形式
<a href=https://www.mozilla.org/>favorite website</a>
html文档结构
不管多少连续的空白，浏览器都会解析会一个空格
<!DOCTYPE html> # 定义解析格式
<html> # 文档的root
<head> #定义源数据地方
<meta charset="utf-8">
<title>My test page</title>
</head>
<body> # 文档的可见内容部分
<p>This is my page</p>
</body>
</html>
html特殊字符
<, >,",' and &, 这是html自身使用的，如果用户需要展示，那么需要转义
(不好展示，&添加了 空格,其实是没有的)
| 特殊字符 | 转义字符 |
|---|---|
| < | & lt; |
| & gt; | |
| " | & quot; |
| ' | & apos; |
| & | & amp; |
html注释
<!--
<p>I am!</p>
-->
html 多媒体
image
- 普通的图片
alt描述图片
# 推荐添加alt,而不是text子元素节点添加
<img src="images/dinosaur.jpg"
alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth">
caption添加标题
<figure>
<img src="images/dinosaur.jpg"
alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth"
width="400"
height="341">
<figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>
- 响应式图片
根据展示设备尺寸的不同，加载不同的图片
<img srcset="elva-fairy-480w.jpg 480w,
elva-fairy-800w.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="elva-fairy-800w.jpg"
alt="Elva dressed as a fairy">
设备尺寸相同，但是分辨率不同
<img srcset="elva-fairy-320w.jpg,
elva-fairy-480w.jpg 1.5x,
elva-fairy-640w.jpg 2x"
src="elva-fairy-640w.jpg"
alt="Elva dressed as a fairy">
利用picture，不同设选择加载不同的图片
<picture>
<source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
<source media="(min-width: 800px)" srcset="elva-800w.jpg">
<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
<picture>
<source type="image/svg+xml" srcset="pyramid.svg">
<source type="image/webp" srcset="pyramid.webp">
<img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>
audio
单一url 浏览器厂商，针对音频的支持格式不是不同的，譬如： MP3, MP4 and WebM
<video src="rabbit320.webm" controls>
<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
</video>
浏览器适配问题
<audio controls>
<source src="viper.mp3" type="audio/mp3">
<source src="viper.ogg" type="audio/ogg">
<p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>
video
单一url 浏览器厂商，针对视频的支持格式不是不同的
<video src="rabbit320.webm" controls>
<p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p>
</video>
浏览器适配问题
<video controls width="400" height="400"
autoplay loop muted preload="auto"
poster="poster.png">
<source src="rabbit320.mp4" type="video/mp4">
<source src="rabbit320.webm" type="video/webm">
<p>Your browser doesn't support HTML video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>
svg
image引用svg
<img
src="equilateral.svg"
alt="triangle with all three sides equal"
height="87"
width="100" />
html引用svg
<svg width="300" height="200">
<rect width="100%" height="100%" fill="green" />
</svg>
iframe等中引用svg
<iframe src="triangle.svg" width="500" height="500" sandbox>
<img src="triangle.png" alt="Triangle with three unequal sides" />
</iframe>
canvas
canvas与svg不同，canvas基于像素,svg基于矢量图
#html
<canvas id="my-canvas" width="600" height="400"></canvas>
嵌入元素
iframe, embed and object
<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
width="100%" height="500" frameborder="0"
allowfullscreen sandbox>
<p>
<a href="https://developer.mozilla.org/en-US/docs/Glossary">
Fallback link for browsers that don't support iframes
</a>
</p>
</iframe>
html table
样式指定
<table>
<tr>
<th>Data 1</th>
<th style="background-color: yellow">Data 2</th>
</tr>
<tr>
<td>Calcutta</td>
<td style="background-color: yellow">Orange</td>
</tr>
<tr>
<td>Robots</td>
<td style="background-color: yellow">Jazz</td>
</tr>
</table>
更好的样式指定
col 一次指定即可
<table>
<colgroup>
<col> # 定义在colgroup中，与th个数对应
<col style="background-color: yellow">
</colgroup>
<tr>
<th>Data 1</th>
<th>Data 2</th>
</tr>
<tr>
<td>Calcutta</td>
<td>Orange</td>
</tr>
<tr>
<td>Robots</td>
<td>Jazz</td>
</tr>
</table>
全部设置
<colgroup>
<col style="background-color: yellow" span="2">
</colgroup>
