这是我参与「第五届青训营」伴学笔记创作活动的第 3 天，在学习了前三天的课程之后，我对前端开发有了深刻的认识，本篇文章将对第一天的课程《前端与HTML》进行总结。
一、前端技术栈
前端技术栈的核心部分由HTML，CSS，JS组成，这三种技术语言也是前端开发基础中的基础。其中，HTML的主要作用是构建前端页面的内容，相当于骨架，CSS主要用于制定页面的样式，相当于对内容进行渲染，使其具有美观，便捷等特点；JS主要构建页面的交互等功能，相当于页面的行为。前端开发将从这三个基础出发，进行进一步的扩展。
二、HTML语言简介
HTML语言可译为超文本标记语言（HyperText Markup Language），其中的超文本具有深刻的含义，意为除了文本以外，用HTML语言制作的页面还具有图片、标题、链接、表格等元素。“标记”说明了HTML的语法是使用各种标签来表示具体内容的。例如：
<h1>一级标题</h1>就表示一个一级标题，其中<h1></h1>就是一个标签，在用html制作的网页中标签并不会被显示出来
三、HTML标签
1.基本结构
HTML语言的基本结构是
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>标题</h1>
<p>内容</p>
</body>
</html>
可以看出一段HTML程序由多个标签包裹而成，其中<!DOCTYPE html>表示浏览器在执行时会用符合浏览器的最新的html版本来执行，而head语段中主要体现了一些html的默认设置，body语段则是要在浏览器上表现出来的具体内容。html的基本结构可以体现为以下的DOM树：
2.html标签
以下总结一些常见的html标签：
(1)标题标签：<h1></h1>表示一级标签，h后面的数字表示第几级标签，共6级。
(2)链接标签：<a href=" "></a>是链接标签的格式，这个标签在html语言中十分重要。
(3)输入标签：<input type=" ">是input标签的格式，通过这个标签，可以实现用户自主输入内容，自主进行选择的功能。
(4)段落标签：<p></p>是段落标签的格式，可以显示出网页的正文内容。
3.语义化
HTML中的元素、属性及属性值都拥有含义，开发者应遵循语义来编写HTML。
举例：有序列表用ol；无序列表用ul；lang属性表示内容所使用的语言；
语义化有增加代码可读性，可维护性，优化搜索引擎，提升无障碍性等优点；想要做到语义化，需要了解每个标签和属性的含义，思考什么标签最适合描述这个内容，并在不使用可视化工具的条件下生成这个代码。
语义化的目的是传达内容，而不是样式。
四、总结
通过本节课程的学习，我掌握了关于前端与HTML的知识点，在学习的过程中，理解语义化是一个重点，语义化不仅表示了HTML的直接作用，还概括了前端的一个基本功能。想要顺利进行前端开发，HTML是基础也是重要的一环。
