WEB前端的定义

1.WEB 前端的发展
Web 1.0（共享）
代表公司: 新浪、搜狐、网易、雅虎、网景（门户网站用于展示内容）
Web 2.0（交互）
代表产品: RSS、Wiki、Blog(以人为中心关系为王以网络为沟通渠道进行人与人沟通)
Web 3.0（聚合）
行业特征：聚合性、普适性、语义化（O2O人－网络－人注重线上与线下的沟通通过大数据知道用户的需求，智能匹配）
2.WEB 前端工程师
定义：需求 + 原型 + 交互 + 后端 + 实现 + 优化
基础前端：HTML（结构）、CSS（样式）、JavaScript（行为）
全栈前端：NodeJS、数据库管理系统（BDMS）、服务端编程语言、框架、模式
移动前端：jQuery Mobile、React Native、ionic、PhoneGap/Cordova
动画前端：Flash、ActionScript、Cocos2d
。

HTML工作原理

模式（B/S 架构）
浏览器：Browser
提交请求（GET / POST）
呈现内容（渲染引擎 / 内核）
执行脚本

通信协议：Protocol
HTTP：超文本传输协议 (是一个客户端和服务器端请求和应答的标准端口默认：80 或者8080)
HTTPS：简单讲是HTTP的安全版，即HTTP下加入SSL层，提供了身份验证与加密通讯方法。现在它被广泛用于万维网上安全敏感的通讯，例如交易支付方面。（默认端口443）
FTP：文件传输协议，用于Internet上的控制文件的双向传输（下载上传端口号20 21）
DNS:域名解析，把IP地址解析成主机名（端口：53）

服务器：Server
响应请求
执行程序（运行环境）
存储数据

开发工具

编辑器
1.Sublime Text 3
组册码

 —– BEGIN LICENSE —–  
  Michael Barnes  
  Single User License  
  EA7E-821385  
  8A353C41 872A0D5C DF9B2950 AFF6F667  
  C458EA6D 8EA3C286 98D1D650 131A97AB  
  AA919AEC EF20E143 B361B1E7 4C8B7F04  
  B085E65E 2F5F5360 8489D422 FB8FC1AA  
  93F6323C FD7F7544 3F39C318 D95E6480  
  FCCC7561 8A4A1741 68FA4223 ADCEDE07  
  200C25BE DBBC4855 C4CFB774 C5EC138C  
  0FEC1CEF D9DCECEC D3A5DAD1 01316C36  
  —— END LICENSE ——

2.WebStorm 2016
激活服务器地址：http://114.215.133.70:41017

语法基础

HTTP 协议
1.HTTP 定义超文本传输协议：HyperText Transfer Protocol

2.处理方式请求：Request
响应：Response

3.状态编码
200：请求成功
301：被请求的资源永久移动到新位置
403：权限不足
404：资源不存在
500：服务器内部错误

4.内容类型（MIME）text/plain 测试网址
text/html 测试网址
text/xml 测试网址
application/json 测试网址

标签结构

1.声明
是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档
声明必须是 HTML 文档的第一行，位于标签之前
声明不是 HTML 标签,它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
请始终向 HTML 文档添加声明，这样浏览器才能获知文档类型
声明是不区分大小写的
HTML5标准下的声明写法为

2.中文编码
目前在大部分浏览器中,中文编码会出现乱码的情况,这时候我们需要在头部将字符声明为UTF-8
写法为这是一个链接

6.HTML 图像

HTML 图像是通过标签来定义的

7.HTML 水平线

标签在 HTML 页面中创建水平线

8.HTML 注释

可以将注释插入 HTML
代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

9.HTML列表

无序列表



 
Coffee

 
Tea

 
Milk

有序列表



Coffee

Tea

Milk

10.HTML

和

 标签定义HTML 文档中的一个分隔区块或者一个区域部分。

标签常用于组合块级元素，以便通过CSS 来对这些元素进行格式化。



 用于对文档中的行内元素进行组合。


 标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对  应用样式，那么 
 元素中的文本与其他文本不会任何视觉上的差异。 


 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

11.HTML 表格

表格由

标签来定义。每个表格均有若干行（由标签定义），每行被分割为若干单元格（由

标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格的表头使用	标签进行定义。
姓名	学号	成绩
张三	9527	99
李四	9528	90

12.HTML 表单和输入

用于搜集不同类型的用户输入。









男

女


生日：

提示1：不要忘记结束标签

即使忘记了使用结束标签，大多数浏览器也会正确地显示
HTML，因为关闭标签是可选的。但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

提示2：使用小写标签

HTML
标签对大小写不敏感：

等同于

。许多网站都使用大写的 HTML 标签。

W3CSchool
使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

CSS

什么是CSS
CSS的全称是CascadingStyle Sheets，层叠样式表。
它用来控制HTML标签的样式，在美化网页中起到非常重要的作用。

CSS的编写格式是键值对形式的

color: red;

background-color: blue;

font-size: 20px;
冒号:左边的是属性名，冒号:右边的属性值

CSS有3种书写形式

行内样式：（内联样式）直接在标签的style属性中书写

例子

页内样式：在本网页head标签中的style标签中书写

例子



      
















 

外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用

CSS选择器

选择器的作用：选择对应的标签，为其添加样式

1.选择器的分类：

标签选择器    div { color:red; }

类选择器       .cls {color:blue; }

id选择器        #hi { color:orange; }

并列选择器    div, .cls { color: red ; }

复合选择器    div.cls {color:red;}

后代选择器    div  p {color:red;}

 直接后代选择器  div > p{color:red;}

2.美化表格





姓名

学号

成绩





张三

9527

99





李四

9528

90





 

CSS代码



table{

border-collapse:collapse;

width:400px;

height:150px;

}

tableth{

font-size:larger;

color:blue;

height:50px;

}

tabletd{

text-align:center;

color:black;

font-size:20px;

}

 

table,td,th{

border-width:5px;

border-color:red;

}

3.布局网页界面



header

nav

HTML基础