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

本节课程针对前端要解决的基本问题和什么是 HTML 来展开学习，虽然HTML看似简单，但是作为前端的骨架，还是要重点的去学习的，以及作为前端最为基础的技术 - HTML 基础语法和基本功能以及在开发中如何做到 HTML 语义化。

一.什么是前端

前端的作用

• 解决GUI人机交互问题

• 跨终端

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

• Web技术栈

前端技术栈

• HTML（内容） HyperText Markup Language 超文本标记语言，HTML是一门描述性语言

• CSS（样式）
  层叠样式表，是用来控制网页外观的一种技术

• JavaScript（行为）
  是一种嵌入到HTML页面中的语言，由浏览器一边解释一边执行
  HTML用来控制网页的结构，CSS用来控制网页的外观，JavaScript用来控制网页的行为

前端应该关注哪些问题

• 功能 满足用户需求
• 美观 界面美化
• 无障碍 对于所有人是否可用
• 安全 能否保证数据安全
• 性能 用户体验如何
• 兼容性 能否在各种设备上使用

二.HTML语法

• 标签和属性不区分大小写，推荐*****小写*
• 空标签可以不闭合，比如input、meta
• 属性值推荐用双引号包裹
• 某些属性值可以省略，比如required、rereadonly

三.语义化是什么

HTML语义化：用正确的标签做正确的事情
语义化例子：

• article:定义文章
• aside：定义文章的侧边栏
• footer:定义页脚
• header:定义页眉
• section:定义文档中的区段
• nav:定义导航栏

语义化的好处：

• 代码可读性高，便于理解
• 可维护性强
• 搜索引擎优化，利于SEO
• 提升无障碍性

四.总结

HTML虽然是前端三件套中最简单的，但是也要引起重视，尤其在开发中要注意使用语义化标签