前端与html|青训营笔记

这是我参与[第五届青训营]笔记创作活动的第1天

$\color{#4dd0e1}{课堂笔记}$

$\color{#4dd0e1}{本堂课重点内容：}$

前端工程师是使用web技术栈解决多端图形界面人机交互问题的工程师

前端的技术栈
前端的边界
HTML常用标签

$\color{#4dd0e1}{具体内容：}$

$\color{#4dd0e1}{前端技术栈：}$

前端主要的技术分为三层：html、css、JavaScript；也就是我们常说的三剑客。其中最基础的是html，负责页面、结构还有内容，页面中可以使用css来设置样式（位置、大小、颜色等信息），用JavaScript来定义页面的行为。三剑客都是运行在浏览器里，而浏览器利用http协议和服务器进行通信。

###### $\color{#4dd0e1}{前端应该关注的一些方面：}$ 前端要解决的根本问题是图形界面下的人机交互问题，所以我们不单单要了解技术方面的问题，还要考虑其他方面。而做产品最核心的就是它有什么功能，需要解决什么问题，有什么需求，其次就是美观、无障碍、安全、性能、兼容性、体验。
- [x] 美观：页面是否好看； - [x] 无障碍：比如站在色盲症用户角度考虑等； - [x] 安全：产品能不能保护用户数据的安全，有没有漏洞； - [x] 性能：是否足够流畅，用户体验是否足够好； - [x] 兼容性：能否在各种各样的设备上正常使用。 - [x] 体验：用户对产品的最直观的感受取决于前端对用户体验的考虑。 ###### $\color{#4dd0e1}{前端的边界：}$ 随着技术的不断发展，前端能做的产品已经远远超出了页面的范畴。比如利用node.js开发服务器端应用，利用ELECTRON开发客户端应用，利用React Native实现在线传输等。

$\color{#4dd0e1}{关于HTML}$

<!doctype html>是用来声明文档类型的，标记我们当前使用的html文件是什么样的版本，浏览器会根据这个来决定使用哪一种渲染模式。如果不写，浏览器会以一种比较老旧的方式去渲染，可能造成渲染出来的效果与实际效果不一样。

html的标签和属性不区分大小写；
空标签可以不闭合；
属性值推荐使用双引号包裹；
某些属性可以省略，比如required、readonly；

$\color{#4dd0e1}{常用标签：}$

$\color{#4dd0e1}{[标题h1~h6]}$

$\color{#4dd0e1}{[列表]：}$ 有序（ol）、无序（ul）、定义（dl）；

无序列表用于标记列表项目顺序无关紧要的列表，每份无序的清单从 <ul>元素开始，然后用 <li>元素把每个列出的项目单独包裹起来。
有序列表需要按照项目的顺序列出来，这个标记的结构和无序列表一样，除了需要用<ol>元素将所有项目包裹，而不是<ul>。
定义列表的目的是标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等，描述列表使用与其他列表类型不同的闭合标签——<dl>；此外，每一项都用 <dt>元素闭合。每个描述都用 <dd>元素闭合。