前端基础有三大部分构成：html（结构）、css（样式）、JS（逻辑表现）
（1）HTML定义了网页的内容
（2）CSS规定了网页的布局、内容如何显示
（3）JS处理网页逻辑，编辑网页行为
一、HTML主要分为三种类型的元素：块级元素、行内元素、空元素
A.块级元素——大多为结构性标记,可以理解为容器标签
常用的：div、p、ul/ol、li、form、table、h1-h6、hr等
特点：
- 独占一行，从上往下排列
- 可控制宽度和高度，以及四个方向的内边距和外边距
- 可容纳块级元素、行内元素、文本
- 默认情况下宽度与父容器宽度一样，与内容无关
B.行内元素——大多为描述性标记，可以理解为内容标签
常用的：a、span、i、u、sub、sup、label、input、img、select等
特点：
- 与其他元素位于同一行，从左往右排列
- 不可控制宽度和高度，以及垂直方向的内外边距，只能设置水平方向的内外边距
- 可容纳文本和行内元素
- 默认情况下宽度与内容相关
C.空元素——没有内容的元素，一般单标签闭合
常用的：img、input、br、hr等
// 空元素大多为行内元素比如img、input等，但是也可能是块级元素如hr等
重点：
1.块级元素和行内元素的区别
a.块级元素独占一行，行内元素从左往右排列
b.块级元素可以容纳块级元素、文本和行内元素,行内元素只能容纳文本和行内元素
c.块级元素可以设置宽高和四个方向的内外边距，行内元素只能设置水平方向内外边距
2.行内元素和块级元素之间的转换
(1)设置display样式
块级元素默认为display:block
行内元素默认为display:inline
行内块元素默认为display:inline-block
// 行内块是一种特殊元素，拥有块级元素的样式，但是按照行内元素从左往右排列
(2)设置float样式
当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。
(3)设置position样式
当为行内元素进行定位时，position:absolute 与 position:fixed 都会使得原先的行内元素变为块级元素。
// 我们最常用的就是将块级元素转化为行内块，其中用的最多的方式就是设置display样式。
二、HTML元素的属性
元素属性是为了提供元素更多有关信息，比如id给元素加上特定的标识，class给元素加上特定的类别等，属性总是以名称/值对的形式出现，比如：id="one"。
元素通用属性：id、class、style、title、name等
下面总结一下最常用的元素及其属性：
1.div和p标签
(1)div主要用于结构框架布局，p主要用于文章段落布局。
(2)p自带有一定上下外边距，也就是两个p之间有一定间距，而div没有。
(3)p标签不能嵌套块级元素，否则浏览器会自动将p标签一分为二
2.a标签 ——超链接
我们通过使用 <a> 标签在 HTML 中创建链接，点击可以跳转到新的文档或者当前文档中的某个部分。
（1）通过使用 href 属性 - 创建指向另一个文档的链接
<a href="http://www.baidu.com" target="_blank">点击跳转到百度</a>href 属性：链接指向的页面的路径，可以是相对路径也可以是绝对路径，还可以是#表示在当前窗口
target 属性：定义被链接的文档在何处显示，最常用的_blank表示在新窗口中打开，_self表示在当前窗口中跳转
（2）通过使用 name 属性 - 创建文档内的书签
首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：
<a name="tips">基本的注意事项</a>然后，我们在同一个文档中创建指向该锚的链接：
<a href="#tips">跳到注意事项</a>也可以在其他页面中创建指向该锚的链接：
<a href="http://www.w3school.com.cn#tips">跳转到某个网页的注意事项</a>3.img标签——图片
<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
<img src="boat.gif" alt="Big Boat">src属性指向图片的 URL 地址
alt 属性用来为图片预备的可替换的文本，当图片加载失败时显示
title属性用来为图片命名，鼠标移上去时显示
4.ul/ol标签——列表
（1）ul定义无序列表，li定义每个列表项
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>浏览器显示如下：
- Coffee
- Milk
// 想要去掉小圆点就给li标签设置 list-style：none，了解除小圆点外其他样式可以自行百度list-style
（2）ol定义有序列表，li定义每个列表项
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>浏览器显示如下：
- Coffee
- Milk
5.table——表格
table元素定义 HTML 表格，th 元素定义表头，tr 元素定义表格行，td 元素定义表格单元。
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>浏览器显示如下*（忽略样式）：
Month | Savings |
January | $100 |
更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。
表格文本对齐
text-align 属性设置水平对齐方式，比如左对齐left、右对齐right或者居中center
vertical-align 属性设置垂直对齐方式，比如顶部对齐top、底部对齐bottom或居中对齐middle
6.form——表单
form 元素定义 HTML 表单，表单用于收集用户输入。
表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。
A.<input> 元素——输入框
输入类型是由类型属性（type）定义的
name属性规定输入字段的名称，便于分类
value 属性规定输入字段的初始值
readonly 属性规定输入字段为只读（不能修改）
disabled 属性规定输入字段是禁用的，置灰且不可修改的
maxlength 属性规定输入字段允许的最大长度：
autocomplete 属性规定浏览器会基于用户之前的输入值自动填写，可以设置在form元素上，也可以设置在表单元素上
(1).单行输入字段
type="text" name="user" maxlength="10" readonly>
// name属性给输入框命名，见名知意
(2).输入密码
type="password"
(3).单选框
<input type="radio" name="sex" value="male">男 //name属性给单选框分类，男女单选框都归属于sex类
<input type="radio" name="sex" value="female">女(4)复选框
<input type="checkbox" name="habit" value="read">看书 //name属性给复选框分类，周一周二都归属于habit类
<input type="checkbox" name="habit" value="sing">唱歌(5)提交按钮
<input type="submit"> 当用户单击确认按钮时，表单的内容会被提交
(6)多行文本域
<input type="textarea"> 多行输入框，多用于填写备注信息等
B.<select> 元素——下拉列表
<select name="cars"> // name属性给下拉列表命名cars，表示当前下拉列表是汽车
option value="volvo" selected>Volvo</option> // selected 属性来定义预定义选项。
option value="Audi">Audi</option>
</select>
select元素定义下拉列表，option元素定义待选择的选项
C.<textarea> 元素——多行文本域
<textarea name="message" rows="5" cols="10">
// name属性给多行文本域命名，rows定义行数，cols定义列数
D.<button> 元素——按钮
button元素定义可点击的按钮
<button type="button" οnclick="alert('Hello World!')">Click Me!</button>
// type属性还可以设置submit用于提交表单，效果与type属性为submit的input元素一样ps:本文只总结比较常用的知识，还有很多扩展的内容需要自行补充~
