这是我参与「第五届青训营 」伴学笔记创作活动的第1天
本堂课程重点：
- 前端工作的定义
- 前端技术栈拆解与分析
- HTML 作用解析
- HTML 语义化
什么是前端？
- 解决GUI人机交互问题
- 跨终端
- PD/移动浏览器
- 客户端小程序
- AVR/AR等
- web技术栈
前端技术栈：
HTML定义内容，CSS定义样式，JavaScript定义行为。通过网络协议与服务器端进行交互
前端应该关注哪些方面
美观、功能、无障碍、安全、性能、兼容性等
HTML是什么？
Hyper Text Markup Language 超文本标记语言
整个网页是从这里开始的，然后到结束。
<!doctype html>
浏览器会根据这行代码去确定渲染模式，如果不写的话浏览器会用一种比较怪异的模式去渲染
<html>这里放代码内容</html>
DOM树 html中的代码最终会形成一颗DOM树，每个节点会形成DOM节点 HTML语法：
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如required、readonly
常用的HTML标签:
p标签、h1~h6标签、div标签、ol/ul>li标签、input标签、img等
建议p标签和h1——h6标签只放文字
- p标签
<p>我是内容</p>
- h1-h6标签
<h1>一级标题</h1>
<h2>一级标题</h2>
<h3>一级标题</h3>
<h4>一级标题</h4>
<h5>一级标题</h5>
<h6>一级标题</h6>
注意：h1-h6发生了变化的是字体大小。且在一个HTML文档里面只能有一个h1标签。
标签语义化是什么？
- HTML中的元素、属性及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
- 有序列表用ol;无序列表用ul
- lang 属性表示内容所使用的语言
标签语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
谁在使用我们写的HTML
- 开发者-修改、维护页面
- 浏览器-展示页面
- 搜索引擎-提取关键词、排序
- 屏幕阅读器-给盲人读页面内容
课后个人总结：
本节课主要是强调标签语义化的重要性，补足了之前在学习html的时候所遗漏的一点知识点，课程下方还有对应的MDN文档，也方便查询，也对前端工作有了一个更清晰的认知，比如GUI人机交互等
