入门前端

什么是前端

• 解决 GUI 人机交互问题

• 跨终端 PC 端 / 移动端 浏览器客户端 / 小程序 VR /AR 等

• Web 技术栈 HTML（内容）CSS（样式）Javascript（行为）

前端需要关注哪些方面

• 功能：要满足用户的需求

• 美观：好的 UI 能提升用户观感

• 无障碍：要适用所有人群（色盲症等）

• 安全：要确保数据、信息的安全

• 性能：提高流畅度、提升用户体验

• 兼容性：适配 PC 端和移动端等

HTML

HTML：HyperText Markup Language 超文本标记语言，用于创建网页的标准标记语言

HTML 语法

• 标签和属性不区分大小写

• 空标签可以不闭合

• 属性值推荐用双引号包裹

！！！传达的是内容，而不是样式

HTML 标签

• h1~h6 标题

• ol li 有序列表

• ul li 无序列表

• dl dt dd 定义列表

• blockquote cite q 引用

• textarea 多行文本框

• input 输入框

语义化

语义化 是前端开发里面的一个专用术语，其优点在于标签语义化有助于构架良好的 html 结构，有利于 搜索引擎 的建立索引、抓取；另外，亦有利于页面在不同的设备上显示尽可能相同；此外，亦有利于构建清晰的机构，有利于团队的开发、维护。

语义化好处

• 代码可读性

• 可维护性

• 搜索引擎优化

• 提升无障碍性

如何做到语义化

• 了解每个标签和属性的含义

• 思考 什么标签最适合描述这个内容

• 不使用可视化工具生成代码

谁在使用我们写的 HTML

• 开发者：修改、维护页面

• 浏览器：展示页面

• 搜索引擎：提取关键词、排序

• 屏幕阅读器：给盲人读页面内容

最后

这堂课我了解的什么是语义化，还有再写代码时应该注意些什么，比如要做到无障碍等。