这是我参与「第五届青训营 」伴学笔记创作活动的第2天，昨天主要学习的是前端的相关知识同时还详细了解了关于HTML的一些标签。下面来具体分析：

前端的相关知识

前端是什么？前端的主要技术？开发环境？

用课堂上老师的一句话来说，前端就是：技术人员使用Web技术栈解决多端图形用户界面下人机交互的问题。emm，我觉得应该可以理解为让网民能够更好的理解这个图形要表达的是什么（纯属个人yy，没有别的意思）。

前端的主要技术有：HTML(内容)，css（设置页面样式：大小，颜色等等），JavaScript（定义页面行为，例如：用户点击了一个按钮，页面如何去相应）。

其实从上面的三个主要技术就不难看出前端应该关注的是：美观，功能，无障碍（所有人可用），安全（保护用户数据安全），性能（用户体验），兼容（各种各样的设备都可以用）。

前端的开发环境

HTML标签详解

HTML中文名字叫作：超文本标记语言。全称是：HypperText Markup Language。

下面是HTML文件的基本形式：

其中<! doctype html>中的doctype是一个很重要的点它标记着当前使用的HTML文件是什么版本。如果没有它，那么这个文件的表现将会出现差错。

从图中还可以知道标签是要写在html内，head标签代表的是页面的头部可以表示logo， 标题等等。 body标签内的内容代表的是主要内容，就像是写信时信的内容的正文部分。上面这个图片的代码的表现形式是：

标题h1~h6

这六个标签都表示标题，需要注意的：是标题的大小。h1>h2>h3...以此类推。

有序列表ol 无序列表ul 定义列表dl

有序列表有排列顺序有前后关系，无序列表里面的东西是平等的关系，定义列表顾名思义就是下定义根据图片内容可以看出，其中dt标签就是dl里的标题，dd标签是对dt的具体描述。

超链接

图中有两个超链接标签 仔细看可以发现它们有所区别：第一个超链接是在目前的页面打开链接内容；而第二个超链接标签则是在新的页面打开链接内容。

img标签 audio标签 video标签（图片 音频 视频）

img标签可以省略结束标签即省略/img。里面的src表示的是图片（音频 视频）的地址，controls表示可以控制进度。

引用标签

引用标签有三个分别是blockquote（引用较长的内容），cite（引用较短的内容），q（引用以前讲过的内容放到现在再讲）

input输入标签

range代表的范围，number代表的是填入数字 min 最小值 max最大值，date日期。

HTML的语义化

在HTML中我们编写内容应该使用最符合编写内容的标签。那么问题来了，怎么去了解标签所代表的意思呢？为了帮助我们解决这个问题青训营的老师推荐我们去阅读MDN文档和W3C HTML5的规范。

小结

HTML中各种各样的标签对应不同的语义，需要我们去熟练掌握。谢谢大家