这是我参与「第五届青训营 」笔记创作活动的第1天
什么是前端？
前端要解决一下三个问题
- 解决 GUI 人机交互问题
- 解决 跨终端 问题
- PC/移动端浏览器
- 客户端/小程序
- VR/AR 等
- Web 技术栈
前端工程师是使用 Web 技术栈解决多端图形用户界面交互的工程师。
前端技术栈
前端应该关注哪些方面？
前端的边界
开发环境
HTML 是什么
一些标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
DOM 树
HTML 语法
- 标签和属性不区分大小写，推荐
小写 - 空标签可以不闭合，比如 input、meta
- 属性值推荐用
双引号包裹 - 某些属性值可以省略，比如 required、readonly
标题 h1 ~ h6
链接
媒体
输入
引用
blockquote: 块级引用，一般引用比较长的内容，直接引用别人的话。cite: 短引用：较短的，行内引用（具体的名字或章节）q: 之前讲过了，再拿出来讲（内容）code标签：代码pre + code: 多行代码（等宽字体显示）em: 语气上的比较重要（重音在哪个词）strong: 事件比较重要，紧急（含义）
内容划分
什么是语义化
- HTML 中的
元素、属性及属性值都拥有某些含义 - 开发者应该遵循
语义来编写 HTML- 有序列表用
ol; 无序列表用ul lang属性表示内容所使用的语言
- 有序列表用
谁在使用我们写的 HTML
- 开发者 - 修改、维护页面
- 浏览器 - 展示页面
- 搜索引擎 - 提取关键字、排序
- 屏幕阅读器 - 给盲人读页面
内容
语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
如何做到语义化？
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
个人思考
- 代码是写给人看的，不是写给机器的，所以要遵循行业的规范，才能写出来易维护的代码！
- 记得规范缩进，写出优雅的代码
