这是我参与「第五届青训营 」笔记创作活动的第1天。
本节课我们将明确作为一名前端开发者首先需要知道的事----什么是前端，它有什么用。然后开始学习前端入门的第一部分知识----HTML。
本节重点：
- 常见的HTML标签及其应用
- 标签语义化
前端
什么是前端？
前端涉及的因素如下：
一句话总结：前端是使用Web技术来解决多端图形人机交互问题。
HTML
HTML语法
- 标签和属性不区分大小写，推荐小写。（一般原生标签用小写，自定义标签大写）
- 空标签可以不闭合，比如input、meta。（空标签：内部不会再放其他标签）
- 属性值推荐用双引号包裹
常用的HTML标签
标题标签h1~h6
列表标签
- 有序列表<ol>
ol即order list。
- 无序列表<ul>
ul即unorder list。
以上两个列表内部需要放置<li>标签配合使用。<li>标签表示每一条列表项。
- 定义列表<dl>
<dl>标签用于结合<dt>（定义列表中的项目）和<dd>（描述列表中的项目）
这三个列表标签的使用例子如下：
链接标签<a>
target属性：规定在何处打开目标 URL。仅在 href 属性存在时使用。
- _blank：新窗口打开。
- _parent：在父窗口中打开链接。
- _self：默认，当前页面跳转。
- _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。
多媒体标签<img>、<audio>、<video>
alt属性：如果无法显示图像，浏览器将显示替代文本。有时候图片加载失败，用这个属性可以提升用户体验。
controls属性：使用该属性将使用浏览器的默认控件。
输入框标签
<input>
type属性：规定输入框的输入内容。
- text：输入文字
- range：输入框变成进度条
- number：输入数字，可以规定最大值最小值
- date：输入日期
<textarea>文本框
文字标签
<blockquote>块引用
<cite> 短引用
<q>短引用
页面布局标签
header、main、aside、footer
语义化
为什么要语义化？
易开发性、易维护性、利于搜索、无障碍性
如何做到语义化？
本节总结
学习前端需要了解前端能解决问题有哪些，现在的技术和局势发展迅速，前端已经不只用于解决页面开发。作为一名优秀的前端开发者，需要了解前端在各个领域的作用，以及在各个领域都发展出了什么样的技术和解决方案。
学习HTML不仅要熟悉常用的HTML标签，掌握他们的使用场景，还要思考HTML标签的开发思想，思考为什么HTML标签是这样设计的，这其中很重要的一点就是标签语义化，理解了语义化，我们才能更好的理解HTML标签。
本节课我们完成了HTML部分的学习，下节课我们将开始学习CSS的入门知识。
