初识HTML

对于前端知识的学习大体可以分为三个部分：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 />

效果：

一些特殊符号

		锄禾日当&nbsp;&nbsp;&nbsp;&nbsp;午<br />
		汗滴禾下&nbsp;&nbsp;&nbsp;&nbsp;土<br />
		谁知盘中&nbsp;&nbsp;&nbsp;&nbsp;餐<br />
		粒粒皆辛&nbsp;&nbsp;&nbsp;&nbsp;苦<br />
		<!-- &lt;(less than) 输出左尖括号 < 相当于小于
		     &gt;(greater than) 输出右尖括号 > 相当于大于 -->
		&lt;h1&gt;<br />
		<!-- 版权标志 -->
		&copy;

首先我们要注意，如果要在页面上显示出 < > 以及打出多个空格（因为空格折叠现象，输入多个空格指只会显示出一个），都要使用对应的语句。
效果：

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>

效果：