这是我参与「第五届青训营 」笔记创作活动的第1天📝
⭐️本堂课重点
- 什么是前端
- 前端技术栈
- 前端应该关注的方面
- 前端的边界及开发环境
- HTML
⭐️知识点&实践例子
什么是前端
前端工程师➡️使用Web技术栈解决多端图形用户界面交互问题的工程师
前端3个要点➡️解决GUI人机交互问题、跨终端（PC/移动浏览器、客户端/小程序、VR/AR等）、Web技术栈
前端技术栈
- HTML：负责页面、结构、内容
- CSS：设置页面样式（位置、大小、颜色）
- JavaScript：定义网页的行为（用户点击按钮后浏览器如何响应）
HTML、CSS、JavaScript➡️运行在浏览器中
浏览器通过HTTP协议和服务器进行通信
前端应该关注的方面
- 功能：满足用户需求
- 美观：界面观感
- 无障碍：适用于所有人/各类场景
- 安全：用户数据安全等
- 性能：速度、用户体验等
- 兼容性：在各种设备适用
前端的边界及开发环境
HTML
什么是HTML（HyperText Markup Language）
- HyperText：超文本。（图片、标题、链接、表格等）
- Markup Language：标记语言。
可以在标签上设置属性
🌰例子分析：
<!doctype html>标记了当前使用的html文件属于哪个html版本,浏览器会据此决定使用何种渲染模式。
<html> </html>根标签。
<head> </head>页面所需但无需呈现给用户的部分。如所用编码及页面标题。
<body> </body>呈现给用户的内容。如文字、标题、图片等。
浏览器将html代码解析为DOM树：
HTML语法
- 标签和属性不区分大小写
- 空标签可以不闭合，如 input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以忽略，如 required、readonly
几种常用标签
-
标题 h1～h6
-
列表标签（有序、无序）
dl：定义列表（definition list） dt：title 、dd：description （多对多）
-
链接
target="blank"表示点击后在新窗口打开，而非替换原有页面. -
多媒体（图片、音频、视频）
alt：替代性文本。 controls：默认显示控件。
-
输入
-
文本类
引用：块级引用（blockquote）、短引用（cite）、q 区分：
<em> </em>和<strong> </strong> -
页面内容划分
HTML语义化
用语义化写html的原因
语义化的好处：代码可读性、可维护性、搜索引擎优化、提升无障碍性。
⭐️个人总结
通过第一天的学习对前端和HTML有了一个框架认识。学习了什么是前端、前端技术栈、前端应该关注的方面、前端的边界及开发环境以及HTML、一些常用的标签。同时通过对课上所学的内容的实践，进一步掌握了相关知识。
