这是我参与「第五届青训营」伴学笔记创作活动的第 1 天
一、本堂课重点内容：
本堂课解释了前端工作的定义，讲解了前端技术栈的构成，HTML的基础知识和语义化知识。
二、详细知识点介绍：
前端是什么
使用web技术栈解决多端图形用户界面下人机交互问题。
前端的技术栈
HTML（内容）：页面结构和内容 CSS（样式）：决定元素大小、颜色、位置等样式 JavaScript（行为）：用户和页面交互行为 HTML、CSS、JavaScript都运行在浏览器中，浏览器通过网络协议和服务器进行通信，拿到前端代码进行渲染，渲染成页面。同样的，浏览器也可以通过网络协议将用户提交的信息或交互行为信息发送到服务器端。
HTML基础知识
是什么
HTML即HyperText Markup Language，HyperText代表超文本（图片、标题、链接、表格），Markup Language代表标记语言，在HTML中例如<h1>标记语言</h1>就是标记语言的表示。
<! doctype html >的作用
标记了当前我们使用的是什么html的版本，来告诉浏览器应该使用的渲染模式是什么。若没有写，浏览器会使用自己默认的渲染模式。
html标签
<html></html>是文档的根标签，所有的标签都写在这个标签里。
DOM树
DOM树是把HTML解析为一个树形结构，里面的每个节点都被称为DOM节点。的根节点为html标签，而在根节点下还有两个节点：head和body，head一般放置不在页面显示出来的标签，例如title、meta，而body放置的标签就是我们所看见的内容，例如p、h1标签等。
HTML基础知识
HTML的基础语法，标签属性不区分大小写；空标签可不闭合；某些属性可以省略。 一些基本常见的标签的时候，例如标题h1~h6、链接a、输入input等。
语义化
语义化有利于开发者修改维护页面，浏览器展示页面，搜索引擎更方便提取关键字和排序，也更有利于无障碍化阅读。多了解每个标签和属性含义，思考标签适合描述的内容，不适用可视化工具生成代码都有利于语义化。
三、实践练习例子：
标签使用实践 标题：
<h1>noni</h1>
<h2>noni</h2>
<h3>noni</h3>
<h4>noni</h4>
<h5>noni</h5>
<h6>noni</h6>
链接a：
<a href="#">文字链接</a>
<a href="#"><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2786de0d820a4bb6bd8f0c1d1337afcb~tplv-k3u1fbpfcp-zoom-in-crop-mark:3024:0:0:0.awebp?"/></a>
输入input:
<input>
<input type="button" value="按钮"/>
<input type="date"/>
<input type="color"/>
效果展示：
四、课后个人总结：
在本次的前端与HTML主题的学习中，我更加深入理解了一些前端的概念和HTML的原理，也了解了语义化的重要性。虽然说对于标签使用的掌握没有太大的问题，但是如果仔细探究下去会发现自己也有很多知识盲区，比如说不清楚开头!doctype html的作用等基础的知识。一个工具不能只是会用，要用熟的话就要清楚他每个部分的含义，深入了解原理，才能说是掌握了。在平时写HTML的时候也经常不注意语义化的问题，经常就是写个盒子然后通过改样式来表示元素，如果不注意语义化的问题会导致代码别人不好看懂，所以以后要尽量语义化地写html。
