前言
1 什么是前端
-
任何和用户直接进行交互的操作界面都可以称之为是一个前端 例如：
-
电脑显示界面
-
手机界面
-
Ipad
-
-
web服务的本质
浏览器窗口输入一个网址回车后发生的事件：
-
朝着指定的服务端发送请求
-
服务端收到相应的请求，并解析
-
服务端返回相应的响应
-
浏览器接收响应，按照特定的规则渲染页面，从而展示给用户
-
2 HTTP协议（超文本传输协议）
规定了浏览器与服务器之间数据传输的格式
2、1 HTTP的四大特性
-
基于请求响应
-
一次请求对应一次的响应。
-
-
基于TCP/IP作用于应用层之上的协议
-
无状态
-
服务端不保留客户端的状态，每次请求都是和第一次请求一样
-
这样就产生了 cookie 、session、token等概念
-
-
无链接
-
无链接的意思就是服务端和客户端每次请求后就会断开数据交互的通道，不会保留（注意：这并不是服务端和客户端断开链接）
-
有无连接产生的一个长链接的概念（其类似于http协议的大补丁，一般用于写聊天时没相关的功能）
-
2、2 http协议的数据格式
-
请求格式
请求首行（内容：请求方式，版本协议等）
请求头（一堆一k:v键值对来表示的数据）
空格
请求体（也就是携带的数据，但有可能是没有的）
-
响应格式
响应首行（内容：响应状态码）
响应头（一堆一k:v键值对来表示的数据）
空格
响应体（浏览器展示的数据）
-
响应状态码
用数字来表示响应的提示信息
-
1XX:服务端已经成功接收到客户端的数据，数据正在处理中，可以继续提交数据；
-
2XX:请求成功。服务端已经返回你想要的数据，（200）；
-
3XX:重定向（服务器内部自动给你的访问转到另一个链接上）；
-
4XX:请求的资源不存在，(例403：你当前的不具备访问该数据的条件）
-
5XX:服务器内部错误。
注意：公司内部也可以自己定制自己的响应状态
-
补充：
请求方式：
-
get请求：
-
向服务端要资源（例如我们直接在浏览器输入一个网址，获取网站首页）
-
-
post请求：
-
向服务器提交数据（例如登录注册功能）
-
一、HTML的介绍
1、1 HTML的本质
-
HTML（超文本标记语言Hypertext Markup Language)是一种用于创建网页的标记语言。
-
本质其实就是浏览器可识别的规则。（浏览器可以识别的语言很少，一般是HTML/XML、CSS、JS）
-
网页文件的后缀名：html或者htm
-
注意：HTML是标记语言，但不是编程语言。它是使用标签来描述网页
1、2 HTML的文档结构
注意：对于中文的网页需要声明<meta charset="UTF-8">编码，否则会出现乱码.而有的浏览器默认的编码格式是“GBK"，则需要声明<meta charset="gbk">。
1、3 HTML的注释
注释就是上节中我写的<!--注释内容-->
通常在写页面时，用下面的方式来认为划分代码区域
<!--顶部导航条样式开始-->
代码块
<!--顶部导航条样式结束-->
<!--左侧菜单栏样式开始-->
代码块
<!--左侧菜单栏样式结束-->
1、4 HTML的标签格式
-
如何表示HTML标签
-
HTML标签是由尖括号包围关键字组成的（例如<html>、<div>等）
-
标签中我们可以写属性，也可以不写属性
-
-
标签的语法
-
<标签名 属性1=”属性值1“ 属性2=”属性值2“....>内容部分</标签名>
-
<标签名 属性1=”属性值1“ 属性2=”属性值2“..../>
-
-
标签重要的几个属性
-
id :定义标签的唯一ID，在一个HTML文件中唯一
-
class:为HTML元素定义一个或者多个类名（classname)(css样式类名)
-
style:规定元素的行内样式（css样式）
-
二、HTML的常用标签
2、1 标签的分类
-
第一种分类：
-
双标签：如：<body></body>
-
自闭和标签：如：
-
-
第二种分类
-
块儿级标签：可以说是独占一行的标签（如：h1~h6、p、br、hr、div）
注意：
-
块儿级标签可以嵌套任意的块儿级标签和行内标签
-
特别注意：p虽然是块儿级标签，蛋挞内部只能嵌套行内标签，不能嵌套行内标签
-
-
行内标签：自己文本多大就占多大（如 u、s、i 、b、span)
注意：
-
行内标签牛能嵌套块儿级标签和行内标签
-
-
2、2 head的常用标签
-
<title></title>:定义网页的标题
-
<style></style>:定义内部样式表
-
<link/>:引入外部样式表文件或者网站图标
-
<script></script>:定义JS代码或引入外部JS文件
meta：定义网页原信息
name属性:
1. keywords
2.description
2、3 body的常用标签
2、3、1 基本标签
-
h1~h6：标题标签
-
s：删除线标签
-
b：加粗
-
u：下划线
-
i：斜体
-
p：独占一行
-
br：换行
-
hr：水平线
2、3、2 特殊字符
-
：空格
-
> ：大于号
-
< ：小于号
-
¥ ：人民币符号
-
© ：版权标识
-
® ：注册商标
2、3、3 常用标签
-
<div></div>和<span></span>:本身没有任何特殊的意义,是用来做页面布局的。
-
<img/>:图片标签
<img src="" alt="">
src属性：
1、可以写一个网站的图片地址
2、还可以写本地的图片地址
3、url:自动朝该url发送get请求要数据
alt属性：
当图片加载不出来的时候，默认展示的提示信息
title属性：
当鼠标悬浮在图片上的时候，展示的提示信息
width,height属性：
图片的宽度和高度（修改一个另一个就会等比例修改，但如果两个都修改，可能会失真）
2、3、4 链接标签
-
<a></a>:超链接标签（超链接就是从一个网页指向里一个目标的链接关系，这个目标可以是一个网页，也可以是相同网页的不同位置，甚至是图片，电子邮件地址，文件，程序等都可以）
<a href="" target=""></a>
href属性指向的地址：
绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
相对URL - 指当前站点中确切的路径（href="index.htm"）
锚URL - 指向页面中的锚（href="#top"）
target属性：
_blank表示在新标签页中打开目标网页
_self表示在当前标签页中打开目标网页
标签应该具备的属性
1.id属性:类似于身份证号，用来唯一标识当前html页面中的某一个标签，在同一个html页面中，id值不能重复
2.class属性:类似于面向对象的继承，直接引用别的类的样式
2、3、5 列表标签
-
无序列表：只要页面上出现了比较有规则排列的文本，基本都可以用无序排列。
<ul type="">
<li>第一个</li>
<li>第二个</li>
</ul>type属性：
-
disc (实心圆点，默认值)
-
circle (空心圆圈)
-
square (实心方块)
-
none (无样式)
-
-
有序列表：
<ol type="" start="">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ol>type属性：
-
1 数字列表，默认值
-
A 大写字母
-
a 小写字母
-
Ⅰ大写罗马
-
ⅰ小写罗马
-
-
标题列表：
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dd>内容2</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
2、3、5 表格标签(table)
展示网站数据的时候一般用表格标签
<table>
<thead>#表头元素
<tr> #代表一行
<th>学号</th>#一个单元格，且加粗
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>#表的主体元素
<tr>
<td>1</td>
<td>hanyi</td>
<td>看小说</td>
</tr>
<tr>
<td>2</td>
<td>yudatou</td>
<td>打球</td>
</tr>
</tbody>
</table>
属性：
-
border: 表格边框.
-
cellpadding: 内边距
-
cellspacing: 外边距.
-
像素 百分比.（最好通过css来设置长宽）
-
rowspan: 单元格竖跨多少行
-
colspan: 单元格横跨多少列（即合并单元格）
2、3、6 表单标签
2、3、6、1 form标签
功能：
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
表单属性
| 属性 | 描述 |
|---|---|
| accept-charset | 规定在被提交表单中使用的字符集（默认：页面字符集）。 |
| action | 规定向何处提交表单的地址（URL）（提交页面）。 |
| autocomplete | 规定浏览器应该自动完成表单（默认：开启）。 |
| enctype | 规定被提交数据的编码（默认：url-encoded）。 |
| method | 规定在提交表单时所用的 HTTP 方法（默认：GET）。 |
| name | 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 |
| novalidate | 规定浏览器不验证表单。 |
| target | 规定 action 属性中地址的目标（默认：_self）。 |
表单元素
基本概念： HTML表单是HTML元素中较为复杂的部分，表单往往和脚本、动态页面、数据处理等功能相结合，因此它是制作动态网站很重要的内容。 表单一般用来收集用户的输入信息 表单工作原理： 访问者在浏览有表单的网页时，可填写必需的信息，然后按某个按钮提交。这些信息通过Internet传送到服务器上。 服务器上专门的程序对这些数据进行处理，如果有错误会返回错误信息，并要求纠正错误。当数据完整无误后，服务器反馈一个输入完成的信息。
2、3、6、2 input标签
<input> 元素会根据不同的 type 属性，变化为多种形态。
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | <input type="password" /> |
| date | 日期输入框 | <input type="date" /> |
| checkbox | 复选框 | <input type="checkbox" checked="checked" /> |
| radio | 单选框 | <input type="radio" /> |
| submit | 提交按钮 | <input type="submit" value="提交" /> |
| reset | 重置按钮 | <input type="reset" value="重置" /> |
| button | 普通按钮 | <input type="button" value="普通按钮" /> |
| hidden | 隐藏输入框 | <input type="hidden" /> |
| file | 文本选择框 | <input type="file" /> |
属性说明:
-
name：表单提交时的“键”，注意和id的区别
-
value：表单提交时对应项的值
-
type="button", "reset", "submit"时，为按钮上显示的文本年内容
-
type="text","password","hidden"时，为输入框的初始值
-
type="checkbox", "radio", "file"，为输入相关联的值
-
-
checked：radio和checkbox默认被选中的项
-
readonly：text和password设置只读
-
disabled：所有input均适用
2、3、6、3 select 标签
option标签属性说明：
-
multiple：布尔属性，设置后为多选，否则默认单选
-
disabled：禁用
-
selected：默认选中该项
-
value：定义提交时的选项值
2、3、6、4 textarea标签
属性说明：
-
name：名称
-
rows：行数
-
cols：列数
-
disabled：禁用
2、3、6、5 label 标签
定义：<label> 标签为 input 元素定义标注（标记）。 说明：
-
label 元素不会向用户呈现任何特殊效果。
-
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action="">
<p><label for="">用户名： <input type="text" name="username"></label></p>
<p><label for="">密码： <input type="password" name="password"></label></p>
<p><label for="">生日： <input type="date" ></label></p>
<p>性别：
男<input type="radio" checked name="gender">
女<input type="radio" name="gender">
</p>
<p>爱好：
篮球<input type="checkbox" name="hobby">
看小说<input type="checkbox" name="hobby">
音乐<input type="checkbox" name="hobby">
</p>
<p>出生地：
<select name="province" id="">
<option value="">安徽</option>
<option value="">山西</option>
<option value="">浙江</option>
</select>
</p>
<p>就读过的学校：
<select name="" id="" multiple>
<option value="">金河小学</option>
<option value="">牌楼初中</option>
<option value="">黄铺高中</option>
</select>
</p>
<p>个人简介：
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<p>个人荣誉证明：
<input type='file'>
</p>
</form>