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.<!DOCTYPE>声明
<!DOCTYPE>是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前
<!DOCTYPE> 声明不是 HTML 标签,它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型
<!DOCTYPE>声明是不区分大小写的
HTML5标准下的<!DOCTYPE>声明写法为<!DOCTYPE html>
2.中文编码
目前在大部分浏览器中,中文编码会出现乱码的情况,这时候我们需要在头部将字符声明为UTF-8
写法为<meta charset="UTF-8”>。
3.HTML 标题
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
4.HTML 段落
HTML 段落是通过标签p 来定义的.
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
5.HTML 链接
HTML 链接是通过<a> 标签进行定义的。
1.绝对路径：http://www.baidu.com
2.相对路径：...
3.物理路径：file开头
<a href="http://www.baidu.com">这是一个链接</a>
6.HTML 图像
HTML 图像是通过标签 <img> 来定义的
<img src="images/abc.png" width=“300" height="120" />
7.HTML 水平线
<hr> 标签在 HTML 页面中创建水平线
8.HTML 注释
可以将注释插入 HTML
代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
9.HTML列表
无序列表
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
有序列表
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
10.HTML <div>和<span>
<div> 标签定义HTML 文档中的一个分隔区块或者一个区域部分。
<div>标签常用于组合块级元素，以便通过CSS 来对这些元素进行格式化。
<span>
用于对文档中的行内元素进行组合。
<span>
标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 <span> 应用样式，那么 <span>
元素中的文本与其他文本不会任何视觉上的差异。
<span>
标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。
11.HTML 表格
表格由 <table>
标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td
指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
表格的表头使用 <th> 标签进行定义。
<tableborder="1">
<tr>
<td width="100px"align="center">姓名</td>
<td align="center">学号</td>
<td align="center">成绩</td>
</tr>
<tr>
<td align="center">张三</td>
<td>9527</td>
<td>99</td>
</tr>
<tr>
<td align="center">李四</td>
<td>9528</td>
<td>90</td>
</tr>
</table>
12.HTML 表单和输入
用于搜集不同类型的用户输入。
<form
method="get"action="two.html">
<input
type="tel"name="phone"/><br/>
<input
type="email"name="email"placeholder="请输入邮箱地址"/><br/>
<input
type="checkbox">男
<input
type="checkbox"/>女<br/>
生日：<input
type="date"name="bday"><br/>
<input
type="datetime-local"name="dateTime"/><br/>
<input
type="color"><br/>
<input
type="submit"/><br/>
</form>
提示1：不要忘记结束标签
即使忘记了使用结束标签，大多数浏览器也会正确地显示
HTML，因为关闭标签是可选的。但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。
提示2：使用小写标签
HTML
标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 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属性中书写
<body style="color: red;">
例子
<!--行内样式-->
<formmethod="get" action="two.html">
<input type="text" name="username" style="background:red;color:yellow
;font-weight:bold"/><br/>
<input type="datetime-local"name="brithDay"><br/>
<input type="password"name="password"/><br/>
</form>
页内样式：在本网页head标签中的style标签中书写
<style>
body { color:red;}
</style>
例子
<!--页内样式-->
<style>
Input {
color:blue;
font:20px;
font-size:larger;
background:green;
}
</style>
<!--页内样式-->
<formmethod="get" action="two.html">
<input
type="text" name="username"/><br/>
<input
type="datetime-local"name="brithDay"><br/>
<input
type="password"name="password"/><br/>
</form>
外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用
<link rel="stylesheet"
href="index.css">
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.美化表格
<tableborder="1">
<tr>
<th>姓名</th>
<th>学号</th>
<th>成绩</th>
</tr>
<tr>
<td>张三</td>
<td>9527</td>
<td>99</td>
</tr>
<tr>
<td>李四</td>
<td>9528</td>
<td>90</td>
</tr>
</table>
CSS代码
<styletype="text/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;
}
</style>
3.布局网页界面
<!--网页常见布局-->
<divid="header">header</div>
<divid="container">
<divid="nav">nav</div>
<divid="content">content</div>
</div>
<divid="footer">footer</div>
<styletype="text/css">
#header{
width:100%;
height:200px;
color:black;
text-align:center;
background:red;
}
#nav{
width:20%;
height:500px;
background:yellow;
float:left;
}
#content{
width:80%;
height:500px;
float:right;
background:green;
}
#footer{
width:100%;
background:orange;
height:100px;
clear:right;
}
</style>
网友评论