前端与 HTML ｜ 青训营笔记

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

什么是前端？

前端技术关注解决GUI人机交互问题，跨终端交互和web技术栈，总结来说就是前端开发者需要用web技术栈来解决一些多端图形用户界面交互问题。

前端技术栈

• HTML（内容）
• CSS（样式）
• JavaScript（行为）

HTML、CSS和JavaScript都运行在浏览器里，通过网络协议和服务器进行通信，完成客户端和服务端交互。

前端应该关注哪些方面？

• 美观
• 功能
• 无障碍
• 安全
• 性能
• 兼容性
• 用于体验

前端技术是一个更新发展很快的领域，需要不断学习来丰富自己的知识并紧跟时代。

什么是HTML？

HTML是HyperText Markup Language的缩写，意为超文本标记语言，可以表现多媒体形式的内容，通过标记语言的方式来表现。

HTML标签

HTML标签是由尖括号包围的关键词，他总是成对出现，前一个表示开始，后一个表示结束。

HTML元素

HTML文档由HTML元素定义。

HTML元素语法

以开始标签起始，以结束标签终止，元素的内容就是起止标签中间的内容。

HTML元素的一些举例

• 多级标题（h1-h6）
• 有序列表（ol）
• 无序列表（ul）
• 定义列表（dl）
• 链接（a）
• 输入（input）

HTML属性

属性是HTML元素提供的附加信息，属性一般描述于开始标签，属性常常以名称+值的方式成对出现。

HTML属性的一些举例

HTML链接由标签a定义，链接的地址在href中表示，例如
a href="http://www.juejin.cn"。

HTML的元素和属性对大小写不敏感，但是在推荐标准中推荐使用小写。

HTML的语义化

什么是语义化？

HTML中的元素、属性及属性值都具有某些含义。

为什么要语义化？

要理解为什么要语义化，首先要了解有哪些人会使用我们写的HTML代码，例如开发者（需要修改、维护页面）、浏览器（需要展示页面）、搜索引擎（根据关键词匹配、排序）、屏幕阅读器（例如给盲人阅读）等，通过语义化，可以提升代码的可读性、可维护性、针对搜索引擎的优化、提升阅读的无障碍性。

如何做到语义化？

• 了解每个标签的属性和含义
• 思考什么标签最适合表达某一内容
• 尽量不使用可视化工具来生成代码

通过今天的学习，我初步对前端开发和HTML语言有了一定的认识，希望可以在接下来的学习中再接再厉。