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

一、本堂课重点内容：

• 前端是什么
• 前端技术栈的构成
• HTML基础语法和基本功能

二、详细知识点介绍：

前端

什么是前端

使用Web技术栈解决图形化界面的人机交互问题

前端最基础的技术栈

构成

• HTML(最基础的部分) - 负责页面，结构，内容
• CSS - 改变页面的样式
• JavaScript - 定义网页的行为

HTML, CSS, JavaScript最后都是跑在浏览器上的

与浏览器进行通信

• 通过HTTP协议，从服务器端获取到相应的代码，在本地渲染出页面
• 通过HTTP协议，通过表单将一些信息传输到服务器

前端需要关注的问题

• 功能 --- 需要能达到相应的需求
• 美观 --- 看美的东西，能让人身心健康
• 无障碍 --- 页面是否要考虑到特殊用户群体的体验
• 安全 --- 例如是否有被xss攻击的风险
• 性能 --- 动画是否流畅，加载速度快不快
• 兼容性 --- 是否能兼容不同的浏览器
• 体验 --- 是否有反人类的设计
• ......

前端还可以做什么

前端不只可以做页面,还可以做其他的事情

• 用Nodejs做后端开发
• 用Electron或React Native做客户端应用
• 用WebRTC做实时传输
• 用WebGl做3D游戏
• 用WebASSEMBLY把一些其他语言的代码编译成直接能在服务器上运行的代码
• ...

HTML

HTML是什么

• Hyper Text(超文本) --- 表示一些其他的非纯文本的格式
• Markup Languafe(标记语言) --- 用不同的标签来表示不同格式的内容

通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体，再通过浏览器解析就可以呈现出页面

HTML语法

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

HTML最常见的内容划分

一些编写HTML的规范

• 需要符合语义化(HTML中的元素、属性及属性值都拥有某些含义)
  • 字体大小通过css样式修改，而不是简单选择<h1>，<h2>等标签来达到字体变大或变小的效果
  • 有序列表用ol，无序列表用ul
  • lang属性表示内容所使用的语言
• 传达内容，而不是样式
  • 不要混用css和html，html只负责页面、结构和内容，css负责样式

三、 课后个人总结

通过今天的学习了解到了前端需要解决的问题，前端不只是做页面，也可以做一些其他的很酷的东西，还学习了一些HTML的语法和规范。