我们在生活中使用过各种形形色色的APP，其实它的页面布局并没有想象中的难，这里开一个页面的系列，总结前端的基本知识体系，最后利用总结的体系做一个纯CSS的QQ音乐仿制APP。
本篇内容：html的常见元素
01.超链接：
<a href="http://www.baidu.com">baidu</a>超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
结构：<a href="url">链接文本</a>
target属性：默认网页为本页刷新，若是想在新页打开，需要使用target属性。
<a href="http://www.baidu.com" target="_blank">baidu</a>注：同目录下的网页跳转直接写url，不是同目录下的跳转需要写明路径（向上../）。
02.超链接锚点：
定位到上次阅读位置（可以应用于网页小说，微信联系人等）：
这里举一个小说的例子:
<a href="#a1">小说第一章 ... 孙悟空大闹天宫</a><br>
假装这里有很多字<br>
假装这里有很多字<br>
假装这里有很多字<br>
假装这里有很多字<br>
假装这里有很多字<br>
假装这里有很多字<br>
假装这里有很多字<br>
假装这里有很多字<br>
<a name="a1">假装这里有很多字 : 哈哈</a><br>
假装这里有很多字<br>
假装这里有很多字<br>
假装这里有很多字<br>
假装这里有很多字<br>
假装这里有很多字<br>
假装这里有很多字<br>
假装这里有很多字<br>
假装这里有很多字<br>
假装这里有很多字<br>
假装这里有很多字<br>
假装这里有很多字<br>
假装这里有很多字<br>
例如上次读到了“哈哈”那一条，锚点就是打个标记，格式如代码块中所写，定义name，再在链接处#name，就可以实现锚点的功能。
03.标题：
就是字号的大小，有1`6 ，字号越大，字体越大
用法如下：
...
<body>
<h1>java</h1>
<h2>java</h2>
<h3>java</h3>
<h4>java</h4>
<h5>java</h5>
<h6>java</h6>
<body>
...04.列表：
一般用于菜单的制作，分为有序列表（ul）和无序列表（ol）:
<ul>
<li>Java</li>
<li>c++</li>
<li>spark</li>
<li>scala</li>
<li>node.js</li>
</ul>
<hr> //华丽的分割线
<ol>
<li>java</li>
<li>oracle</li>
<li>python</li>
<li>javascript</li>
</ol>05.图片：
在 HTML 中，图像由< img> 标签定义。
< img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址.。
1>HTML图像的Alt属性：
alt 属性用来为图像定义一串预备的可替换的文本。
替换文本属性的值是用户定义的。
在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
<img src="mf.gif" alt="text">2>HTML图像的高宽设置：
height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。
属性值默认单位为像素:
这里注意最好只设置其中一个，以防图片变形。
<img src="mf.gif" alt="text" height="npx">3>HTML图像title属性：
<img src="mf.gif" alt="text" height="npx" title="魔方">title一般数据库动态获取，当鼠标悬停在图片是显示对应的title内容。
06.表格：
行：tr
列（行内位置）：td
cellspacing：格与格之间的边距（外边距）
cellpadd：内边距
border：边线，轮廓线
<table border="1" cellspacing="10px" cellpadding="10px">
<tr>
<td>A1</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B1</td>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>C1</td>
<td>C2</td>
<td>C3</td>
</tr>跨行跨列（用于制作简历等）：
横向跨行使用：colspan
纵向跨列使用：rowspan
<tr>
<td>A1</td>
<td rowspan="2" colspan="2">A2</td>
</tr>
<tr>
<td rowspan="2">B1</td>
</tr>二者可以一起使用，合并时删掉多余的部分即可。
07.表单元素：
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
表单使用表单标签 < form> 来设置:
<form>
.
input 元素
.
</form>1>输入元素：用到的表单标签是输入标签（< input>），输入类型是由类型属性（type）定义的。
2>文本域：文本域通过< input type=”text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。
底层悬浮提示语：placeholder
title也同样可以使用；
autocomplete=”off” :自动完成功能关闭；
<form>
First name: <input type="text" placeholder="请输入原姓名" name="firstname"><br>
Last name: <input type="text" placeholder="请输入新姓名"name="lastname">
</form>3> 密码字段：密码字段通过标签< input type=”password”> 来定义:
<form>
Password: <input type="password" name="pwd">
</form>4>单选按钮（Radio Buttons）:< input type=”radio”> 标签定义了表单单选框选项:
label标签：扩大选项点击面积
<form>
<label><input type="radio" name="sex" value="male">Male<label><br>
<label><input type="radio" name="sex" value="female">Female<label>
</form>5>复选框（Checkboxes）：< input type=”checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项：
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>6>提交按钮(Submit Button)
定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form action ="http//:www.baidu.com/s"> //处理地址
<input name="wd"><br> //输入框名字
<input type="submit" value="百度多下">
</form>
7>下拉选框：
使用select标签进行下拉选框操作。
<select>
<option value="">java</option>
<option value="">c++</option>
<option value="">vr</option>
<option value="">ridus</option>
</select>参考文献：菜鸟教程