本次笔记针对青训营第二节课的知识，对所学知识点进行归纳。
一、前端
前端技术栈
- 由HTML（内容）、css（样式）、JavaScript（行为）构成。
- HTML：网页的内容，如想要呈现的文字、图片等信息；
- CSS：网页的外观设计，如颜色、透明度、字体大小等的设定；
- JavaScript：网页的交互设计。
前端应该关注的内容
- 功能：网页应具备什么功能，如何实现，实现效果；
- 美观：吸引他人眼球的重要因素，可以通过配色、主题等入手；
- 无障碍：盲人、听障模式
- 性能：运行速度等
- 安全：防爬、防攻击等
- 兼容性：多种浏览器、编辑器的适用，多种用户端的适用情况
- 体验：用户体验是评估的重要标准
前端的开发环境
- 必须要有一个浏览器和一个编辑器才能开发
浏览器
IE/Edge（我的常用）、Chrome、Firefox、Safari
编辑器
VScode、Vim、WebStorm
二、HTML
HTML的概念
HTML（HyperText Markup Language）是超文本标记语言
- 超文本指图片、标题、链接、表格等形式
- 标记语言指HTML语言特定的语法形式,例如（点击Markup键查看）：
DOM树
- 从上图可以看出HTML文件的大致结构：一个HTML文件的html标签内分为head头部和body身体两个部分
- head部分是网页中不呈现的内容（除了title）
- title是网页的标题
- body部分是网页中呈现的内容，基础标签是h1~h6标题标签和p标签，也可以使用div盒子和table表格进行页面布局
基本语法
- 第三点双引号指的是style、src等属性内需要引用内容时用双引号包裹
标题
标题有h1~h6共六种，h1最大，h6最小
列表
如下图所示，共有三种列表形式
- 有序列表，按123进行描述
- 无序列表，按小点开头进行描述
- 定义列表，按缩进进行描述区分
- 注意：有序列表和无序列表都是用li标签表示列表内每一行的内容，定义列表是用dt和dd标签。
链接
链接一般用a标签，使用href属性添加链接，一般链接的两边要加上双引号。
图片链接采用img标签src属性
其中的alt属性可以在图片无法正常显示时替换成对应的文字。
输入
页面基本布局
- 网页的基本布局（如下图所示），一般用div盒子和table表格进行布局
- 最上方是头部，可以放置搜索框、导航栏、Logo等引人注目的内容；
- 中间是主要内容，可以放置商品简略图等网页重要内容；
- 右边是放一些不是很重要的内容，比如留言板、排行榜等；
- 页脚一般注明版权、联系方式、应用端下载链接等内容。
代码语义化
指的是代码看起来简洁易懂（大概）
语义化的好处
- 增强代码可读性，比较好看懂
- 增强可维护性
- 便于搜索引擎优化
- 提升无障碍性
如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 适不适合给网站运营、修改、升级、维护的人员看
- 不使用可视化工具生成代码
总结
以上是我对本次课程的笔记，这节课43分钟，内容也不少，对于HTML小白来讲还是有一定理解上的难度，但我对这部分知识比较熟悉了，学了一年多了，当复习了。也学习了一些新的知识，比如代码语义化的好处、img标签的alt用法等。欢迎同学们来找我交流合作。
