这是我参与「第四届青训营 」笔记创作活动的的第1天
什么是前端
- 解决GUI人机交互问题：前端工程师——使用web技术栈解决多端人机交互的工程师
- HTML->内容，CSS->样式，JS->行为
- 服务端与前端通过网络协议交互
- 关注的问题：功能、美观、性能、兼容、无障碍、安全、用户体验
- 前端的边界：不止网页：nodeJS（服务端），ELECTRON、react Native（客户端应用开发），webRTC（p2p传输），webGL（类似three.js），webassembly
- 入门简单（VSCode神中神）：一个编辑器+一个浏览器就可以
HTML（超文本标记语言）
形如
HTML结构
课程中ppt里给出的基本上是HTML中的模板，这里简单说明一下
关于""它并非一个html标签， 它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。关于这个标签内容比较复杂，大部分和前端历史有关，有兴趣自己百度（笔者以前做题被它坑过），尤其看一下html5和html4.01中二者的区别。
html标签是根标签，就是给所有标签一个容器
head标签：这个标签也是面试可能出现的一个题目，因为里边的标签决定网站的整体行为，下面做个简单介绍
title：网站标题
base：利用href指定网站包含的所有相对 URL 的根 URL。
meta：元数据，这个标签种类繁多，设计网络、移动端设配等内容
script、link：脚本、样式等资源
style：定义在内部的样式
noscript： 如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则在 HTML 元素中定义脚本未被执行时的替代内容。
body：呈现给用户的内容，
浏览器拿到文档会把这些结构内容解析为DOM树。
HTML语法：
- 不区分大小写，推荐小写
- 空标签可以不闭合
- 属性值建议双引号引起来
简单介绍一下HTML标签
这个东西本来就很玄乎，你能记住的基本上就够用，记不住以后也不大会用上。
| 标签 | 作用 |
|---|---|
| div | 典型的块级标签 |
| h? | 标题 |
| hr | 水平线 |
| ol\ul\li\dl\dt\dd | 列表 |
| table\tr\td\th\tfoot\thead\tbody | 表格 |
| form\input\fieldset\datalist\select\option | 表单相关组件 |
| iframe | “文档中的文档” |
| code\cite\dfn\em\i\mark\pre | 格式化标签 |
（笔者整理的一个基本包含了HTML所有标签的页面）
关于嵌套：
- a不能嵌套a。
- 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素：h1~h6、p、dt
- 内联不要嵌套块元素。
语义化
笔者理解的语义化就是利用合适的标签书写页面以便于代码阅读和搜索引擎搜索。
语义化的用处（并非原创，内容摘自牛客的题目）：
1、有利于SEO，有利于搜索引擎爬虫更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
2、在没有CSS的时候能够清晰的看出网页的结构，增强可读性。
3、便于团队开发和维护，语义化的HTML可以让开发者更容易的看明白，从而提高团队的效率和协调能力。
4、支持多终端设备的浏览器渲染。
如何实现：多用语义化标签（html5提出了不少语义化标签header、nav、main等）、理解标签的作用、不用可视化工具生成代码（也算是可视化工具的一种劣势吧）。
补充：SEO： 搜索引擎优化 、爬虫： 一种搜索引擎用于自动抓取网页资源的程序或者说叫机器人 。
我的感想
前端的未来
我是从大一下学期开始接触前端的，以前试过游戏开发和桌面应用开发（基本上都是所见即所学，和前端挺像的）。一开始以为前端就是做网站的，着力于网站的“好看”，然而随着对Vue、React等框架的学习，我发现前端早已经不止如此，在我的理解里，前端更加偏向于对数据的展示和处理，类似与服务器和用户的中间人。
当今low-code平台盛行，拖拽式的前端开发屡见不鲜，虽说是讨论前端的未来，但笔者更希望讨论开发者的未来，有人说计算机就是下一个土木。可我认为，即没有探寻过底层的深海，也没有见识过架构的深空的计算机开发者，也只是在赛博搬砖罢了。 低代码不会成为前端本身，而是成为前端开发者的工具。
