前端知识点总结
前端知识点比较杂碎，但是不要死记硬背，多学会运用。
接下来分几部分进行总结。
HTML：网页的骨架，用来书写网页的。结构层（好比人的骨骼/身体）
Css：美化网页的。表现层（好比人的穿衣打扮）
javaScript：网页的灵魂，用来交互前端页面和后台服务器之间的数据的。行为层（好比一个人能歌善舞）。没有js，那么html+css就是一个静态页面，不会和后台服务器进行数据的交互。开发中也就没有什么意义了。
HTML
介绍
HTML：超文本标记语言（HyperText Markup Language）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A33F5Ri7-1601696686318)(C:\Users\Ali\AppData\Roaming\Typora\typora-user-images\1601689925634.png)]
HTML可以做什么？
HTML用于编写网页。平时上网通过浏览器我们看到的大部分页面都是由html编写的。在浏览器访问网页时，可以通过“右键/查看网页源代码”看到具体的html代码。
HTML标签的语法格式
<标签名 属性名1="属性值" 属性名2="属性值" ...></标签名>
基本结构
<html>根标签（只能有一个）
<head>
<title>这是标题
</title>
</head>
<body>
<font size="5" color="red">这是正文
</font>
</body>
</html>
说明：
在idea中添加注释快捷键：ctrl+/
在idea中创建方法
1.创建静态工程Static Web
2.创建HTML文件，选择html5的版本
3.编写HTML
4.点右上角一排浏览器按钮运行，idea会使用内置的服务器在指定的浏览器上运行
标签介绍
<h1></h1> 标题标签
<hr />水平线标签
<font>字体标签
<b></b>加粗标签
<i></i>斜体标签
<p></p>段落标签
<br />换行标签
<img src="图片的路径地址" />图片标签
<ul> 、<ol>列表标签
<a>超链接标签
<table>表格标签
<form>表单标签（重要,下面有详细讲解）
其它标签div & span(掌握)
标题标签：<h1></h1>
HTML提供<hn>系列标签，用于修饰标题，包含：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。
其中：<h1> 定义最大的标题。<h6> 定义最小的标题。
<hn>标题标签</hn> n的取值1-6
水平线标签：<hr />
<hr size="5" noshade="noshade" />
size属性：水平线的高度，单位像素：px
noshade属性：没有阴影，取值：noshade，表示显示纯色
字体标签：<font>
<font size="2" color="red" face="微软雅黑">字体的内容</font>
size属性：设置字体的大小。可能的值：从 1 到 7 的数字。浏览器默认值是 3。
说明：如果字体设置超过7，都是按照7进行显示。
color属性： 设置字体的颜色。
face 属性： 设置文字的字体。
格式化标签：<b><i>
<b>要加粗的字体</b>
<i>要倾斜的字体</i>
段落标签：<p><br/>
<p>段落内容</p><!-- 每个段落之间有留白 -->
<br /> <!-- 换行标签，只是换行，不会有留白 -->
图片标签：<img> 在html页面中引用一张图片。
<img src="img/mm.jpg" width="400" height="300" title="我头发很茂盛" alt="图片加载失败" border="1">
src：图片的路径地址
width：宽度
height：高度
title：提示文本
alt：替换文本
border：边框
列表标签：<ul>、<ol>
无序列表<ul>
<ul type="disc">
<li>内容一</li>
<li>内容二</li>
</ul>
说明：对于无序列表标签ul单独使用没有任何意义，我们一般都会结合ul的子标签li一起使用。
type="circle"空心圆type="disc"默认值，实心黑色圆type="square"实心黑色正方形
有序列表<ol>
<ol type="1">
<li>内容一</li>
<li>内容二</li>
</ol>
type="1"默认值，1、2、3...type="a"小写的英文字母，a、b、c...type="A"大写的英文字母，A、B、C...type="i"小写的罗马数字，i、ii、iii...type="I"大写的罗马数字，I、II、III...
超链接标签：<a>
<a href="跳转的路径地址"></a>
href用于确定需要显示页面的路径（URL）必写属性target确定以何种方式打开href所设置的页面_blank：新窗口打开 _self：在自己的页面中打开，将原来页面覆盖。默认打开方式
表格标签：<table>、<tr>、<td>
<table>表格标签，是父标签，相当于整个表格的容器。
border：表格边框的宽度。width：表格的宽度。height：表格的高度。cellpadding：单元格边沿与其内容之间的空白。cellspacing：单元格之间的空白。bgcolor:background color：表格的背景颜色
<tr>表格中的行标签
<td>表格中一行中的列标签
示例：
<table border="1px" width="400px" height="300px">
<tr>
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr>
<td>1</td>
<td>小泽</td>
<td>18</td>
<td>男</td>
</tr>
</table>
表单标签：<form>
<input type="text" name="age" value="18" />
<form> 表单标签的主要功能：它是把表单中的数据提交给远端的服务器。
action属性：在这个属性中书写请求服务器的路径，确定表单提交到服务器的地址（路径）。没有地址可以写一个#，代表当前页，或者不写
method属性：请求方式。常用的取值：GET、POST。 =========================================================================
输入域标签：<input>
<input> 标签用于获得用户输入信息，type属性值不同，搜集方式不同。
type属性：
text：文本框，单行的输入字段，用户可在其中输入文本。如果在input标签中不写type，那么默认就是text。
password：密码框，密码字段。该字段中的字符以黑圆显示。
radio：单选按钮，表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的 。
checkbox： 复选框,从若干给定的选择中选取一个或者若干个选项。主要让用户选择数据。一般网站让用户选择爱好时，使用。
file：文件上传组件,提供"浏览"按下可以选择需要上传文件.
hidden：页面上的隐藏域，隐藏字段. 数据会发送给服务器，但浏览器不进行显示。页面看不见，一般在开发中向后台服务器传递id时使用。
reset：重置按钮。将表单恢复到默认值。重置页面上的所有输入项，恢复默认状态。
image：图形提交按钮，通过src给按钮设置图片。它是在页面上嵌入一个图片。
button：普通按钮，显示一个按钮，但点击没有任何效果 ，常用于与JavaScript结合使用。按钮上的内容需要使用value属性书写。
submit：提交按钮。提交按钮把当前form标签中的所有输入项中的数据提交给服务器。一般不写name属性，否则将value的值提交到服务器。
name属性：如果需要表单数据提交到服务器，必须提供name属性值，服务器通过name属性值获得提交的数据。
value属性：设置input标签的默认值。submit、reset和button为按钮显示数据
checked属性：单选框或复选框被选中。使用方式：<input type="checkbox" checked="checked"/>
readonly：是否只读 <input type="text" readonly="readonly" value="哈哈哈"/>
由于这里添加了 readonly="readonly"属性，所以文本框只能读，不能修改
disabled：是否可用
<input type="checkbox" name="hobby" checked="checked" disabled="disabled"/>足球
由于给上述标签添加了disabled="disabled" 所以文本框不能被操作了。
=========================================================================
下拉列表标签：<select>
<select> 下拉列表。可以进行单选或多选。需要使用子标签<option>指定列表项
<option> 子标签：下拉列表中的一个选项（一个条目）。
a:selected ：勾选当前列表项
b:value ： 发送给服务器的选项值。
<select name="city">
<option value="">-请选择-</option>
<option value="sh">上海</option>
<option value="bj" selected="selected">北京</option>
</select>
========================================================================= <textarea> 文本域。多行的文本输入控件。
1）cols属性：文本域的列数。
2）rows属性：文本域的行数。
<textarea cols=”50” rows=”3”></textarea>
=========================================================================label标签<label>
说明：lable标签是我们之前没有接触到的标签，我们简单介绍下这个标签。
<label for="属性值">文本值</label>
label 标签不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果在 label 标签内点击文本，就会触发此控件。就是说，当用户 选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素如：input的 id 属性相同。这样就可以实现自动将焦点转到和input标签相关的表单控件上.
<form>
<label for="male">男</label>
<input type="radio" name="sex" id="male" /> <br />
<label for="female">女</label>
<input type="radio" name="sex" id="female" />
</form>
其它标签div & span
<body>
<!--div:属于块级标签，用来作为区域划分的。本身没有实际意义.特点：独占一行-->
我是div
<div>我是div1</div>
<div>我是div2</div>
<!--span标签：用来对数据即字体进行美化的，本身没有任何意义.特点：可以共处一行-->
我是span
<span>我是span1</span>
<span>我是span2</span>
<!--
div标签和p标签有什么区别？
p标签属于段落标签，每个段落之间含有空白即留白
而div标签用来做区域划分的，没有留白
-->
我是p
<p>我是p1</p>
<p>我是p2</p>
</body>
说明：
1）div:属于块级标签，用来作为区域划分的。本身没有实际意义。特点：独占一行
2）span标签：用来对数据即字体进行美化的，本身没有任何意义。特点：可以共处一行
3）div标签和p标签有什么区别？
p标签属于段落标签，每个段落之间含有空白即留白。
而div标签用来做区域划分的，没有留白。
