这是我参与「第五届青训营 」笔记创作活动的第1天
前言
HTML语言作为“前端三剑客”之一，是所有前端开发者必须掌握的技能之一。本次青训营的第一堂课就为我们介绍了前端与HTML语言，本篇文章的内容将介绍HTML常见的标签以及语义化的问题。
HTML常见标签
超文本标记语言（Hyper Text Markup Language）是一个标记语言，它包括一系列的标签，这些标记标签通常被称为HTML标签，HTML标签是HTML语言中的最基本的组成单位，我们将常用的HTML标签大致分为两大类型：展示类与交互类。
展示类标签
div（块级标签）
div在添加到页面当中会撑满父元素的宽度，在不改变样式的情况下，在下一次添加元素标签时，会自动跳到下一行。div是最常用的标记元素，所有基本的样式都可以使用div进行模仿，达到预期的效果，下面我们使用一个最简单的demo来查看div的样式特性。
我们设置一个宽度为200px的父元素，在当中添加三个具有背景色的div，设置margin为10px便于分辨不同的div
<style>
.first_div {
margin: 10px;
background-color: aqua;
}
.father {
width: 200px;
border: 1px solid red;
}
</style>
<div class="father">
<div class = "first_div">这是我的div</div>
<div class = "first_div">这是我的div</div>
<div class = "first_div">这是我的div</div>
</div>
效果如下：
span（行内标签）
span与div并不相同，span不会占用一行的资源，span为行内元素，使用的时候会在一行内按左到右进行排列，下面同样用一个demo来查看span的特性
我们在一个长度为300px的div内设置三个span标签
<style>
.father {
width: 300px;
border: 1px solid red;
}
span {
margin: 10px;
background-color: salmon;
}
</style>
<div class="father">
<span>这是span</span>
<span>这是span</span>
<span>这是span</span>
</div>
效果如下：
交互类标签
img（图像嵌入元素）
可以将图像元素嵌入HTML页面当中，可以使用src将图像的位置导入进来，可以有两个可设置的属性值:1.src 表示图片的路径； 2.alt 包含一条对图像的文本描述，这不是强制性的;
<img
src="Picture path"
alt="Text description"
/>
button（按钮）
这是一个可以点击的按钮，可以通过传入点击事件与按钮绑定；在点击按钮的时候执行某个事件，可以给按钮绑定onclick事件完成，
<button>标签上存在许多的属性值，最常使用的有： 1.type 表示<button>的类型，有submit和reset等可选值； 2.name 表示<button>的名称；3. value 表示<button>初始值，与表单数据相关联；除此之外还有许多可选的属性值
<button name="button">Click me</button>
input（输入元素）
<input>元素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据;<input>元素上有一个重要的属性是type属性，<input>的工作方式取决于type的值，不同的type值会在各自的参考页中进行参考。如果未指定此属性，则默认的类型为 text。
具体的type属性的分类可以参考MDN中的有关input属性的文档
<!-- 一个简易的输入框 -->
<input type="text" id="name" name="name">
select（下拉栏）
表示一个提供选项菜单的控件，使用
<option>标签提供可选的选项，每一个<option>标签都应该有一个value属性，这表示提交到服务器中的数据值
<select name="number" id="nums-select">
<option value="">--Please choose an option--</option>
<option value="1">1</option>
<option value="3">3</option>
<option value="6">6</option>
</select>
效果如下：
小结
HTML中的标签种类非常丰富，如何在正确的位置使用正确的标签才是每一个开发者应该思考的问题，除了上文所例举的标签外，还有一些HTML5中新增的标签例如:<video>视频标签和<audio>语音标签等，尽可能多的掌握HTML不同种类的标签就是为前端武器库中添加弹药。
前端语义化
语义化是什么
HTML语义化（按照 W3C 规范正确地使用标签元素和其属性,简称“语义化”，HTML 指 HTML5）被很多文章提到，但内容大多是先宣传语义化的必要性，然后劝说读者在开发中多使用语义化标签。
为什么要语义化
人可以通过视觉的划分判断内容的语义,搜索引擎看到的只是代码。搜索引擎只能通过标签来判断内容的语义。因为页面的很大一部分流量是来自搜索引擎的，要使页面尽可能地对搜索引擎友好，所以就要尽可能地使标签语义化。
语义化的优点
- 代码可读性提升。（重点）
- 利于SEO。
- 关爱视觉障碍用户
语义化最大的收益就是可以清楚的识别不同位置的内容，不仅仅是对开发者友好，对浏览器的引擎的工作也是友好的。
总结
HTML对一个网站而言就好比是人的“骨架”，CSS就是人的皮肤，样貌，JavaScript就是人的动作，任何一个完美的人都离不开骨架的支撑，如此看来，HTML部分在前端的重要性不言而喻，掌握好HTML才是真正为学习前端知识奠定好基石。
