1 课程内容概括

本节课主要介绍了前端是什么、前端的技术栈、前端的关注点、前端的边界，前端的开发环境，这些内容是了解内容，本笔记不具体体现。本节课还介绍了HTML，HTML是前端三大基础之一，本笔记重点介绍HTML。

2 HTML简介

HTML：超文本标记语言（HyperText Markup Language），超文本包括图片、标题、文件、表格等。

3 DOM树

把HTML代码转换成树的结构，其中每一个节点称之为DOM节点。可以通过F12开发者工具看到树形结构并查看到DOM节点。

4 HTML语法

标签、属性不区分大小写，推荐使用小写。

空标签是可以不闭合的。

属性值推荐用双引号包裹。

部分属性值是可以省略的。

5 常用HTML标签

<!doctype html>: 表示文档是HTML文档。

<html>：HTML文档的根标签。

<head>：放置HTML元数据，标题，编码等。

<body>：放置HTML展现的内容。

<h1> ~ <h6> 1~6级标题。

<ol>：有序列表。

<ul>：无序列表。

<dl>：定义列表。<dt>定义列表的项目，<dd>描述列表中的项目。

<a>：超链接。

<img>：图片。

<audio>：音频。

<video>：视频。

<input>：文本输入框。

<textarea>：多行内容区域。

<p>：段落。

<select>：选择。

<option>：选项。

<blockquote>：块级引用。

<cite>：文本对某个参考文献的引用，以斜体显示。

<q>：简短的行内引用。

<code>：表示代码。

<strong>：表示重要性的强调。加粗显示。

<em>：语气上强调。斜体显示。

6 HTML语义化

HTML的元素、属性和属性值是有含义的，这些词或者缩写是由对应的英语单词或词组，有具体的语义，所以开发者应该使用语义来编写HTML。

作为开发者，一个团队的开发者会维护一部分共同的代码，需要修改、维护页面。增强代码的可读性和可维护性。有利于开发者阅读代码。

作为浏览器，需要解析HTML展示页面。

作为搜索引擎，robots需要从HTML中提取关键词、建立索引、排序。语义化有利于SEO。

作为屏幕阅读器，可以为视觉障碍者阅读屏幕内容，所以语义化也有利于无障碍。

要做到语义化，需要了解标签、属性的含义，思考最适合描述该内容的标签。应该避免用可视化工具生成代码，因为其标签不受控制。

7 总结与思考

本节课首先对前端的基础概念做了介绍，并针对常见的HTML标签做了介绍。针对HTML标签，HTML相关知识，课程中并不能涵盖全部的HTML标签，可以通过MDN等文档系统学习。学习时应该注意边学边用，以巩固知识，降低遗忘概率，达到更好的学习效果。HTML是传达内容的，而样式更多的要以接下来的CSS来控制。

前端与HTML | 青训营笔记