对于前端知识的学习大体可以分为三个部分：HTML、CSS 以及 JavaScript的学习
HTML：超文本标记语言 定义页面结构
CSS：层叠样式表 页面显示的样式
JS：JavaScript 页面交互（动态交互）
其中JavaScript 是一个独立的语言。
在html学习的过程中一定要会的一个操作：审查元素
在Chrome浏览器中，点击右键 -> 检查（Ctrl + Shift + I）会弹出一个界面，我们可以查看该浏览器页面上每个元素对应的代码，
标签介绍
标题 h1、h2……h6
<!-- 标题：headline -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
效果：
段落p
<!-- 段落：paragraph -->
<p>非常高兴看到国内创业公司推出HBuilder,代表了新一代开放服务的方向,基于持续更新的云知识库的高效开放工具,</p>
<p>王老师是数学老师，刘老师是英语老师</p>
效果：
图片img
<img src="img/keli.png" width="300px" height="180px"/>
注意：src中设置图片的路径，可以手动设置页面上图片显示的宽高
效果：
换行标签
<br />
超链接a
<a href="http://www.baidu.com">跳转到Baidu</a>
<!-- target可以设置在新窗口中打开 -->
<a href="http://www.baidu.com" target="_blank">跳转到Baidu</a>
效果：
无序列表ul 和有序列表 ol
<!-- 无序列表 ul: unordered list
li: list item -->
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
<li>广州</li>
</ul>
<ol>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
<li>广州</li>
</ol>
效果：
区域的分隔 div
<!-- 居中: align="center" -->
<div align="center">
<div>
<img src="img/keli.png" width="300px" height="180px"/>
</div>
<div style="color: red; width: 62.5rem;">
<p>
这是一个可莉
</p>
<p>
这还是一个可莉
</p>
</div>
<div style="color: cyan; width: 62.5rem;">
这仍然是一个可莉
</div>
</div>
div 标签可以把分隔页面的区域，每个div标签下还可以放另外的div标签，给div标签设置align属性还让页面居中。
效果：
另一种区域标签span（与div不同的是，它不会自动换行）以及下划线u标签，斜体i标签，加粗b标签
<span style="font-size: 3.125rem;">
<span>
<u>
aaa
</u>
<i>
bbb
</i>
</span>
<span style="color: red;">
ccc
</span>
<span>
<b>
ddd
</b>
</span>
</span>
效果：
在页面上设置水平线hr
<hr />
效果：
一些特殊符号
锄禾日当 午<br />
汗滴禾下 土<br />
谁知盘中 餐<br />
粒粒皆辛 苦<br />
<!-- <(less than) 输出左尖括号 < 相当于小于
>(greater than) 输出右尖括号 > 相当于大于 -->
<h1><br />
<!-- 版权标志 -->
©
首先我们要注意，如果要在页面上显示出 < > 以及打出多个空格（因为空格折叠现象，输入多个空格指只会显示出一个），都要使用对应的语句。
效果：
form表单与table表格
<!-- 提交到的后台的地址 -->
<form action="http://www.baidu.com" method="get">
<table border="1" cellspacing="0">
<!-- tr标签设置表格的一行的内容 -->
<tr>
<!-- td标签可以设置一列的内容 -->
<td>用户名：</td>
<td>
<!-- input 标签不是独占一行 -->
<!-- 设置input标签的type不同，可以实现不同的功能 -->
<!-- type="text"是文本框 -->
<input type="text" value="zhangsan"/>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<!-- type="password"是密码，会隐藏 -->
<input type="password"/>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<!-- type="radio"是按钮单选 -->
<!-- 设置name可以把它们放到一个组里面，这样来实现单选 -->
<input type="radio" name="gender"/>男
<!-- checked="true"设置默认值 -->
<input type="radio" name="gender" checked="true"/>女
<input type="radio" name="gender"/>未知
</td>
</tr>
<tr>
<td>城市</td>
<td>
<!-- 下拉框单选 -->
<select>
<!-- 每一个选项 -->
<option>---请选择---</option>
<option>青岛</option>
<option>济南</option>
<option>烟台</option>
</select>
</td>
</tr>
<tr>
<td>兴趣爱好</td>
<td>
<!-- type="checkbox"是多选 -->
<input type="checkbox"/>音乐<br>
<input type="checkbox"/>看书<br>
<input type="checkbox"/>爬山<br>
</td>
</tr>
<tr>
<td>自我介绍：</td>
<td>
<!-- 多行文本，可以滚动 -->
<textarea>123333333332222222222222222222222222222222222222222222222222</textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="checkbox"/>同意该协议
</td>
</tr>
<tr>
<td>
<!-- type="submit"是提交，跟按钮差不多，但功能不一样 -->
<input type="submit" value="提交"/>
</td>
<td>
<!-- type="reset"是重置，跟按钮差不多，但功能不一样 -->
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
效果：
