这是我参与「第五届青训营 」笔记创作活动的第1天

本堂课重点内容：

• 介绍了什么是前端以及前端要解决的基本问题
• 前端基础的技术栈
• 简单介绍了HTML的以及HTML中常用的一些标签
• HTML语义化

什么是前端？

• 前端就是解决图形界面下的人机交互问题；而前端工程师要做的就是利用这些Web技术栈来解决多端图形界面交互问题的工程师。

前端基础技术栈：

• 基础技术有HTML、CSS和JavaScript，HTML定义了网页内容的含义和结构，CSS可以用来设置页面的样式，JavaScript是一种轻量级的编程语言，它可以用来定义网页的行为，比如用户点击了一个按钮之后，页面该如何相应。HTML、CSS和JavaScript都是运行在浏览器里面的，而浏览器可以通过HTTP协议和服务器进行通信。

常用的HTML标签

• img标签

img标签是引入图片的一种标签。

src是一个属性名，后面跟随的链接是图片地址，也就是属性值。

alt的属性值是图片未能加载出来时显示的信息

<img src="https://img.duoziwang.com/2018/17/05291132324516.jpg" />

• h1-h6标签

h1-h6标签包含的内容由大到小逐层递减

• p标签

p标签通常用于段落中。

<p>Hello World</p>

• 有序列表ol标签

• 无序列表ul标签

• 上述的一些只是一些较为常见的HTML标签，实际HTML5规范的标签还有很多，具体的其他标签可以参考w3school官网

语义化是什么？

• HTML中的元素、属性及属性值都拥有某些含义，在我们写这些标签的时候需要遵循语义来编写HTML，例如有序列表用ol，无序列表用ul，lang属性值表示内容所使用的语音等等。语义化可以提高我们的代码可读性和可维护性，还可以提升搜索引擎优化和无障碍性。

如何做到语义化？

• 了解每个标签和属性的含义
• 思考什么标签最适合描述这个内容
• 不使用可视化工具生成代码

本文若有不足之处，欢迎纠正！😊