这是我参与「第五届青训营 」伴学笔记创作活动的第1天
一、本堂课重点内容：
- 前端的定义、技术栈、应该关注的方面、边界、开发环境等概念。
- HTML是什么、HTML的语法、语义化。
二、详细知识点介绍：
（1）关于前端
1.什么是前端？
- 解决GUI人机交互问题
- 跨终端（PC/移动浏览器、客户端/小程序、VR/AR等）
- Web技术栈
2.前端技术栈？
- HTML（内容）
- CSS（样式）
- Javascript（行为）
- http协议
浏览器通过http协议和服务器端通信，把前端的代码通过http协议从服务器上拿到，渲染成页面。浏览器可以把用户的行为通过http协议提交到服务器端。
3.前端应该关注哪些方面？
功能 美观 无障碍 安全 性能 兼容 体验
4.前端的边界
开发服务器端、开发客户端应用、p2p在线传输、3D游戏、编译其他语言的代码使其在浏览器可以运行……
5.开发环境 浏览器+编辑器（vscode、vim、webstorm……）
（2）关于HTML
1.HTML是什么？
HyperText Markup Language 超文本标记语言
2.DOM树
把html代码转换为树形的结构，每一个html节点就是一个dom节点。
3.HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合
- 属性值推荐用双引号包裹
- 某些属性值可以忽略，如：required、readonly
标题：h1~h6
列表：ol,li / ul,li / dl,dt,dd(多对多关系）
链接：
<a href="Http://xxxxx" target="XXX"></a>/<img src="XXX" alt="XXX"/>/<audio src="XXX" controls></audio>/<video src="XXX" controls></video>输入：
<input>(placeholder type=range\number\date)/<textarea></textarea>选择：
<input>(type=checkbox\radia)/<select><option></option></select>引用：
<blockquote cite=" "></blockquote>/<cite></cite>/<q></q>代码：
<pre><code></code></pre>强调：
<strong></strong>/<em></em>
4.内容划分
- head 页头
- nav 主要内容
- aside 和内容相关，但不直接属于内容
- main
- article
- footer 页尾
5.语义化是什么
- html中元素、属性、属性值都拥有某些含义
- 开发者应遵循语义来编写HTML
6.语义化的好处
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
总之：传达内容，而不是样式
7.如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
三、实践练习例子：
- 一个完整的html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>一级标题</h1>
<p>段落内容</p>
</body>
</html>
四、课后个人总结：
- 前端的应用范围已不仅限于网页，随着前端边界的拓宽，已经包括了客户端、在线传输、游戏、编译等方面。
- 编写HTML代码要遵守语义化，可以给自己和他人、开发者和使用者都带来很多好处。
五、引用参考：
- 笔记内容来自课程视频，无引用其他文档内容。
