前端简介

前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，最新的高级版本HTML5、CSS3，以及SVG等。

前端与后端的区分

1.前端：
	直接与用户打交道的操作界面
2.后端：
	不直接与用户打交道的界面，用户是看不到的
1
2
3
4

前端开发的三大核心

HTML,CSS,JavaScript

这三个是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时， HTML将元素进行定义，CSS对展示的元素进行定位，再通过JavaScript实现相应的效果和交互。

详细讲解

• HTML

  指的是超文本标记语言 (Hyper Text Markup Language)，这个也是我们网页最常用普通的语言了；简单来说，网页就是用HTML语言制作的。HTML是一门描述性语言，是一门非常容易入门的语言。相当于是网页的骨架。

• CSS

  级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。以后我们在别的地方看到“层叠样式表”、“CSS样式”，指的就是CSS。相当于是网页的样式。

• JavaScript

  Js是一门脚本编程语言；是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，提供了数据验证的基本功能。相当于是网页的动态。

HTTP协议

简介

超文本传输协议（Hyper Text Transfer Protocol，HTTP）是一个简单的请求-响应协议，它通常运行在TCP之上。它指定了客户端可能发送给服务器什么样的消息以及得到什么样的响应。请求和响应消息的头以ASCII形式给出；而 [9] 消息内容则具有一个类似MIME的格式。

四大特征

1. 基于请求响应

   服务端永远不会主动给客户端发消息 必须是客户端先请求服务端被动响应

2. 基于TCP/IP之上作用于应用层的协议

   工作层是应用层，架构在TCP协议之上
   应用层协议：HTTP协议，FTP协议，HTTPS协议…

3. 无状态

   服务端不保存客户端状态(纵使见她千百遍 我都当她如初见)

4. 无/短连接

   不保持客户端与服务端之间的链接导通

数据格式

1. 请求数据格式：(客户端给服务端发送消息应该遵循的数据格式)

   • 请求首行(请求方式，协议版本)
   • 请求头(一大堆K:v键值对)
   • 换行(不能省略)
   • 请求体(携带一些敏感的数据，不是所有的请求都有请求体)

2. 响应格式：(服务端给客户端发送消息应该遵循的数据格式)

   • 响应首行(响应状态码)
   • 响应头(一大堆K:V键值对)
   • 换行(不能省略)
   • 响应体(浏览器要展示给用户看的数据)

响应状态码

状态代码为3个数字，分为5类

1xx:保留
2xx:成功，表示处理成功，并正常响应
3xx:重定向，表示处理成功，但是需要浏览器进一步请求
4xx:客户端错误，表示客户端请求错误导致服务端无法处理
5xx:服务端错误，表示服务端处理请求过程出现了错误

在工作中还会自定义状态码(因为默认的不够)，自定义状态码一般都是从10000开始

工作原理

HTTP是基于客户/服务器模式，且面向连接的。典型的HTTP事务处理有如下的过程：

• 客户与服务器建立连接
• 客户与服务器提出请求
• 服务器接收请求，并且根据请求返回相应的文件作为响应
• 客户与服务端关闭连接

客户与服务器之间的HTTP连接是一种一次性连接，它限制每次连接只处理一个请求，当服务器返回本次请求的应答后便立即关闭连接，下次请求再重新建立连接。这种一次性连接主要考虑到WWW服务器面向的是Internet中成千上万个用户，且只能提供有限个连接，故服务器不会让一个连接处于等待状态，及时地释放连接可以大大提高服务器的执行效率。

HTML简介

什么是HTML？

• 超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言

• 本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）

• 网页文件的扩展名：.html或.htm

HTML是一种标记语言（markup language），它不是一种编程语言。

HTML注释语法

(1)
	< !-- 单行注释-->
(2)
	< !--
	多行注释
	-->
1
2
3
4
5
6

HTML标签的分类

1.单标签
	  一般有特殊功能
2.双标签
	内容	内容
1
2
3
4

HTML的文件结构

一个HTML有自己固定的结构，结构如下：

  所有的代码都必须写在html标签内部
	  head内的数据一般都不是给用户看的
	  body内的数据就是浏览器展示给用户看的

1
2
3
4

代码讲解：

• < html>< /html>称为根标签，所有的网页标签都在< html>< /html>中。

• < head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有< title>、< script>、 < style>、< link>、 < meta>等标签，头部标签在之后会详细介绍。

• 在< body>和< /body>标签之间的内容是网页的主要内容，如< h1>、< p>、< a>、< img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。

head内常见标签

• title标签
  控制网页小标题
• style标签
  内部支持编写css代码
• link标签
  引入外部css文件
• script标签
  内部支持编写js代码 也可以通过src属性引入外部js文件
• meta标签
  功能非常多

body内标签

加油

加油
加油
加油
1
2
3
4
5

• HTML 段落标签
  如果想在网页上显示文章，这时就需要< p>标签了，把文章的段落放到< p>标签中。

  段落 
  标签的默认样式，段前段后都会有空白。
  1
  2

• HTML 换行标签
  如果希望在不产生一个新段落的情况下进行换行（新行），请使用 < br /> 标签：

  This is< br/>a para< br/>graph with line breaks
  1

• HTML标题
  标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。< h1>是最高的等级。
  < hx>标题文本< /hx> (x为1-6)

  题标签的样式都会加粗，h1标签字号最大，h2标签字号相对h1要小，以此类推h6标签的字号最小。一个标题标签要独占一整行。

• HTML 水平线
  < hr /> 标签在 HTML 页面中创建水平线,可用于分隔内容。

  This is a paragraph
  
  This is a paragraph
  
  This is a paragraph
  1
  2
  3
  4
  5

块级标签和行内标签

1.块儿级标签	h1~h6 p hr br
	一个标签独占一行
2.行内标签	u i s b
	内部文本多大自身就占多大
1
2
3
4

body内基本符号

 		空格
>		大于号
<		小于号
&		&
¥		¥
®		注册
©		版权
1
2
3
4
5
6
7

body内布局标签

div
	块儿级标签
span
	行内标签
1
2
3
4

注意：

1. 块儿级标签是可以通过CSS调整为不独占一行
2. 标签之间很多时候可以嵌套
3. 块儿级可以嵌套任何类型的标签
4. p标签虽然是块儿级标签 但是不能块儿级标签
5. 行内标签只能嵌套行内标签

body内常见标签

HTML超链接

使用< a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。

语法结构：

链接显示的文本
1

当我们点击链接显示的文本的时候，会自动跳转到目标页面

< a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。

如下代码：

点击文本
1

HTML图片

在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用标签来插入图片。

语法结构：

1

标签讲解：

1、src：标识图像的位置；

2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；

3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；

4、图像可以是GIF，PNG，JPEG格式的图像文件。

HTML表格

有时候我们需要在网页上展示一些数据，如某公司想在网页上展示公司的库存清单。如下表：
想在网页上展示上述表格效果可以使用以下代码：

创建表格的四个元素：(table,tr,td,th)

    

        

            
学号
            
姓名
            
年龄
        
    
    

        

            
1
            
jason
            
18
        
        

            
2
            
kevin
            
19
        
    

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

HTML列表标签

• 无序列表

  在浏览网页时，你会发现网页上有很多信息的列表，如新闻列表、图片列表这些列表就可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

  语法结构：

  
  ...
  ... 
  ......
  
  1
  2
  3
  4
  5

  页面上有规则排列的横向或者竖向的多个元素几乎使用的都是无序列表

• 有序列表

  如果想在网页中展示有前后顺序的信息列表，怎么办呢？如，当当网上的书籍热卖排行榜，如下图所示。这类信息展示就可以使用< ol>标签来制作有序列表来展示。

  语法结构：

  
    
  信息
    
  信息
    ......
  
  1
  2
  3
  4
  5

• 标题列表

  语法结构：

  
  标题1
    
  内容1
  标题2
    
  内容1
    
  内容2
  
  1
  2
  3
  4
  5
  6
  7

表单标签(form表单)

• 简介

  form表单是一个包含表单元素的区域，允许用户在表单中(比如:文本域、下拉列表、单选框、复选框等等)输入信息的元素。是前后端交互的重要标签。

实现语法：

 
1

常用属性：

• name：规定表单的名称。
• action：规定当提交表单时，向何处发送表单数据。默认为当前页面
• method：规定如何发送表单数据（即提交方式，常用get或post），默认get

input标签

1. text：文本输入框，常用属性如下
2. password：密码输入框，属性和text一样，主要区别是，会自动隐藏输入的内容
3. button：普通按钮，通常用来触发脚本代码，常用属性value，表示按钮的提示文字
4. submit：提交按钮，用来将表单数据提交到后台。常用属性同普通按钮
5. radio：单选按钮
6. checkbox：复选按钮，基本和单选按钮一样，只是多选按钮中相同name的不会再互斥，但相同name的还是作为同一组
7. file：文件上传按钮，可以通过添加multiple属性控制获取单个还是多个文件
8. image：图片按钮，作用同提交按钮一样，只是用属性src替换了value，表示图片地址
9. reset：重置按钮，将表单所有组件输入的内容全部还原为初始状态。常用属性同普通按钮
10. email ：邮箱格式数据
11. submit：提交按钮，不同的浏览器可能默认的命名不一致，我们可以自己设定
12. reset：重置按钮
13. button：普通按钮，看似无用，实则很有用

select标签

下拉选择框，其选项写在子标签option中，常见属性如下：

• multiple：多选，布尔属性
• size：显示的选项数
• option标签的value属性表示选项对应的值

<select name="province" id="">
	<option value="BJ">北京</option>
	<option value="SH">上海</option>
	<option value="SZ">深圳</option>
</select>
1
2
3
4
5

一个个的下拉选项是一个个option标签，默认是单选 也可以添加multiple变成多选