这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
前端与HTML | 青训营笔记
- 第一节课 简单讲了前端与HTML
- 什么是前端
- 前端技术栈有那些
- 前端应该关注那些方面
- 前端各框架的总结
- 开发环境
- html语义化与一下简单的标签
什么是前端
前端即网站前台部分，运行在pc端，移动端等浏览器上展示给用户
前端工程师使用Web技术栈，解决多端图像与界面交互形问题。
如：
- PC/移动浏览器
- 客户端/小程序
- VR/AR等
前端技术栈有那些
前端技术栈所需要的技术分为三层：
- HTML（完成内容/结构）
- CSS（完成页面的样式）
- JavaScript（完成页面中的动态交互效果） 这三种都是运行在浏览器上面的，将前三个代码写好放在服务端然后浏览器通过HTTP协议来渲染到浏览器上展现给用户，也可以将前端通过HTTP协议提交到服务端。从而实现前后端交互效果。
前端应该关注那些方面？
应该关注： 美观 安全 功能 性能 无障碍 兼容性
前端各框架总结
- node.js（开发服务端应用）
- ELECTRON（开发客户端应用）
- WEBRTC（p2p在线传输）
- WebGL（开发3D游戏）
开发环境
前端开发也是比较简单一个编辑器+一个浏览器即可 浏览器： IE/Edge Chrome Firefox Safari 编辑器：VSCde Vim WebStorm
HTML
HyperText Markup Language（超文本标记语言）简称 HTML
<img src="photo.jpg"/> src：属性名 photo.jpg(双引号内)：属性值
HTML语法
html语法分为以下几种：
- 标签和属性不区分大小写，建议统一小写
- 空标签可以不闭合，如： input， meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，如：required， readonly 标题 h1~h6 （从大向小）
列表 ul>li（无序列表） ol>li（有序列表） dl>dt>dd 呈父子关系使用
链接 如：<a href=“想要跳转的地址”>链接</a>
多媒体 img （图片） audio（音频） video（视频）
输入 <input type="各个属性值代表不同的输入框"> textarea（书写板）
文本 p（段落标签）
语义化
html中的元素，属性及属性值都拥有某些含义开发这应该遵循语言来编写html
如：
- 有序列表用ol; 无序列表用ul
- lang属性表示内容所使用的语言
- img用来引用图片
有些html标签意思只是大概简单记录了一下，自我感觉节省了许多繁琐的字。
