这是我参与「第四届青训营 」笔记创作活动的的第1天
1.重点内容
- 对前端开发的大致了解，包括对前端基本的情况的了解
- 前端前景的展望
- 前端开发第一部分HTML
2.重要的知识点
前端开发相关
- 前端开发是什么？
- 前端开发要解决的问题
- 前端开发要学习的内容
- 前端工程师要关注的内容
- 前端的前景
HTML相关
- HTML是什么？
- HTML的组成内容
- 常见的HTML标签
- 语义化的HTML标签
3.详尽的知识点
什么是前端开发？
前端开发是使用web技术栈创建web页面等前端界面呈现给用户的过程。
前端要解决的问题？
解决的是图形界面下人机交互问题
其中所谓的图形界面不仅仅局限于PC，app，而拓展到了更多更广的领域。
前端所用的技术栈？
- HTML
- CSS
- JavaScript
- HTTP
- 等等...
什么是前端工程师？
使用web技术栈解决多端下面的图形界面的交互的工程师
作为前端工程师应该关注什么？
- 人机交互
- 用户体验
- 功能是否满足需求
- 是否美观
- 是否有无障碍功能
- 是否安全
- 性能
- 兼容性
前端的前景
不仅仅局限于网页，也包括以下几个部分
- Node.js 开发服务器端应用
- Electron，React-Native 开发客户端的应用
- WebRTC 建立P2P的多人的视频会议
- WebGL 3D效果，开发游戏
- WebAssembly 和其他语言交互转化
HTML是什么？
是Hyper Text Markup Language的缩写，是一种超文本标记语言
HTML的组成内容
HTML文件由HTML标签组成
下面是一个标准的HTML标签
其中src是属性名，括号内的photo.jpg则是属性值
<img src="photo.jpg" />
下面是标准的HTML文件
<!doctype html>
<!--告诉浏览器用什么版本来解析这个文件-->
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>
一级标题
</h1>
<p>
段落内容
</p>
</body>
</html>
常见的HTML标签
多媒体输出的标签
<img> 用于输出图片
<audio> 用于输出音频
<video> 用于输出视频
输入的标签
<input> 可以指定不同的type来达成不同的输入效果
<textarea> 可以支持多行输入
选择标签
在<input>的基础上设置其type为checkbox或者是radio,可以满足用户的选择需求
<select>和<option>的组合使用也可以满足选择需求
通过给input标签的list属性添加属性值可以在允许用户输入的同时做到预制选项
<input list="aa" />
<datalist id="aa">
<option>A</option>
<option>B</option>
<option>C</option>
</datalist>
文字展示标签
引用标签
<blockquote> 长段的引用
<cite> 短句的引用
<q> 前文的引用
表示文本
<code> 表示代码的实现
突出重点
<strong> 突出某件事比较重要
<em> 某句话中突出表示的词
结构性内容
<header> 用于存放介绍性内容
<main> 用于存放网页的主体
<aside> 用于存放导航链接或者广告
<footer> 用于存放版权链接或者是参考
为什么需要这么多标签？
在真实的生产环境中所遇到的情况多，因此我们需要语义化标签，即对某个事情有直观的解释。比如说我们要用列表时，就应该会想到使用ul和ol标签。
作为前端工程师也应该在生产过程中尽量多使用语义化标签，这样对用户，对工程师自己，对浏览器，对搜索引擎都有较好的反馈。
要从内容出发选择标签，而不是通过修改CSS样式来达成要求。
如何做到语义化？
- 了解每一个标签和属性的作用和含义
- 多思考标签是否适合描述内容
- 尽量不要使用可视化的工具自动生成代码
4.课后总结
这是我第一次系统的了解前端，第一次课的内容给后续课程搭建好了框架，我相信在接下来的一段时间中，我能从这次青训营中学习到很多前端的前沿知识。为以后的团队协作打下坚实的基础。
