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

HTML课堂笔记

本堂课的重点内容：

1. 什么是前端
2. 前端的技术栈
3. 前端的边界
4. 前端的关注点
5. 常用标签
6. HTML语义化

什么是前端

• 解决GUI人机交互问题
• 跨终端
• Web技术栈

前端的技术栈

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

前端的边界

• 后端：可以使用node.js去开发
• 客户端：可以使用react、vue去开发
• 3D游戏：WebRTC

前端的关注点

• 美观
• 功能
• 安全
• 无障碍
• 性能

常用标签

• 块级元素块级元素在页面中以块的形式展现 —— 相对于其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现

• 内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间，例如超链接元素 <a> 或者强调元素：<em> 和 <strong>。（MDN文档）

• 常用块级标签:div、ul、ol、li、dl、dt、dd、p、table、tbody、thead、th、tr、form、address、caption（标题）、h1-h6、hr（水平线)

• 常用行内标签:input、img、em、strong、br、a

HTML语义化

语义化是什么？

• HTML中的元素、属性及属性值都拥有某些含义
• 开发者应该遵循语言编写HTML

语义化作用

• 有利于开发者修改和维护页面
• 有利于浏览器识别，更好地展示页面
• 有利于搜索引擎优化，也就是SEO，能够更好提取关键词、排序
• 屏幕阅读器-给盲人读页面内容

如何做到语义化

• 了解每个标签和属性的含义
• 思考什么标签最符合描述这个内容
• 不使用可视化工具生成代码

补充

!DOCTYPE html

声明文档类型，声明用何种HTML解析的方法去解析，如果不声明会导致浏览器以一种古老的解析方式去解析，以至于页面混乱