我为什么想到学习前端的知识呢？其实呢，我的内心也没有准确的答案。可能是因为年轻，什么都想学一学试一试的缘故。不想蹉跎了青春时光。但是这个部分并不是我学习的重点，只是我在学习嵌入式之外的补充，所以可能较为浅显，还望各位大佬批评指正。
html/css/javascript是前端三宝（学习嵌入式也就是玩玩C语言和汇编，另外由于个人能力的问题，也就只能说自己学过C语言，这里上来就三样，真心羡慕啊）。没学习之前，也是搞不懂这三样的关系，前端为什么需要三种语言？
1. HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2. CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3. JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
http://www.stcmcu.com/ 大家可以看看这个网站，第一次进我甚至以为我进错了网站。由此可见，前端的重要意义。
好了，闲话就说到这里，现在开始进入正题。
1.初识标签
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>学习HTML -xiangxi</title>
<style>
span{
color:blue; <!--也可以为其他; color可以理解为一种样式-->
}
</style>
</head>
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<p>正文<em>斜体</em><strong>加粗</strong><span>自定义</span></p>
<q>短文本引用</q> <!--自动加引号的那种-->
<blockqoute>文本块引用</blockqoute> <!--首行缩进的那种-->
<br /> <!--换行的那种-->
<!--空格-->
<hr /> <!--水平线-->
<address>地址</address> <!--自动换行，斜体，段前段后空余-->
<code>代码</code> <!--代码,小一号的那种，另外配合  <br />效果更佳-->
<pre>大段代码</pre> <!--代码,小一号的那种，另外配合  <br />效果更佳-->
<ul>新闻信息列</ul> <!--新闻信息列，类似于Office里的 项目符号 -->
<ol>有序列表</ol> <!--有序列表，类似于Office里的 编号 -->
<div id="user define">分板块</div> <!--在一个分类版块里的是一起的,类似于 类，id有助于后续操作-->
<table summary="摘要"> <!--表格-->
<caption>表格标题</caption> <!--表格标题-->
<tbody>
<tr> <!--行-->
<th>表格表头1</th>
<th>表格表头2</th> <!--表格表头单元格-->
</tr>
<tr>
<td>表格内容</td> <!--表格单元格-->
<td>表格内容</td>
</tr>
</tbody> <!--每一个tbody便于加载迅速，不是整体加载-->
<tbody>
<tr> <!--行-->
<th>表格表头1</th>
<th>表格表头2</th> <!--表格表头单元格-->
</tr>
<tr>
<td>表格内容</td>
<td>表格内容</td> <!--表格单元格-->
</tr>
</tbody>
</table>
<a href="http://www.baidu.com" target="_blank" title="float 鼠标提示">点击</a> <!--参数分为三部分,target是为了新建一个页面-->
<a href="mailto:[email protected];[email protected]?subject="主题"&body="内容"">发送</a> <!--也可以发送邮件，我测试了，我的电脑有点小问题-->
<img src="地址" title="float 鼠标提示"/> <!--建议是相对路径或者网址-->
</body>
</html>
2.表单标签
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表单标签</title>
</head>
<body>
<form method="post" action="save.php"> <!--表单一定要在from控件内-->
<!--method:post方式或者是get方式 action 表示推送或请求位置,都有点想学后端了-->
<label for="username">用户名:</label> <!--for关键字的添加，为了后面的数据处理,lable标签和下面的id要一致-->
<input type="text" name="username" id="username" value="" /> <!--text格式，文本框-->
<label for="pass">密码:</label>
<input type="password" name="pass" id="pass" value="" /> <!--password格式，密码框，数据隐藏 -->
<input type="submit" value="确定" name="submit" /> <!--submit格式，只有submit才能够提交。value的值是显示的-->
<input type="reset" value="重置" name="reset" /> <!--reset格式，清空之前填得数据。value的值是显示的-->
专业： <!--单选框-->
<input type="radio" value="1" name="gender" />通信工程
<input type="radio" value="2" name="gender"/>物联网
选修选取： <!--复选框-->
<input type="checkbox" value="1" name="checkbox0" checked="checked">HTML <!--check="checked"表示默认选取-->
<input type="checkbox" value="2" name="checkbox1" checked="checked">CSS
<input type="checkbox" value="3" name="checkbox2" >JavaScript
<input type="checkbox" value="4" name="checkbox3" >Linux
<label>爱好:</label> <!--下拉列表-->
<select>
<option value="看书">看书</option>
<option value="旅游" selected="selected">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
</form>
</body>
</html>