网页前端开发笔记

Posted on Edited on In

PART 1: HTML

——佳佳

Hyper Text Markup Language超文本标记语言

HTML框架

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>	
<html long="en">
		<head>
			<title>TAG</title>
			<meta charset="UTF-8">
		</head>
		<body>
		</body>
	</html>

常用标签

基础标签

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>	
<html long="zh">
		<head>
			<title>网页标题</title>
			<meta charset="UTF-8">
		</head>
		<body>
            <h1>内容标题</h1><hr><!--此处添加水平线-->
            <p>
                此处为<br>段落内容
            </p>
		</body>
	</html>
标签 功能 应用
<DOCTYPE> 定义文档类型 <!DOCTYPE html>
<html> 定义一个HTML文档 <html long="zh">内容</html>
<title> 为文档定义一个标题 <title>标题</title>
<body> 文档的主体 <body>主体</body>
<h1>to<h6> HTML标题 <h1>标题</h1>
<p> 一个段落 <p>内容</p>
<br> 换行 <br/>
<hr> 水平线 <hr>
<!----> 注释 <!--需要注释的内容-->

格式标签

标签 功能 应用
<abbr> 定义一个缩写 <abbr title="蹲坑">dk</abbr>
<address> 定义文档作者/所有者的联系信息 <address>地址联系信息</address>
<b> 加粗(无语义) <b>文本</b>
<bdi> 设置一段文本，使其脱离其父元素的文本方向设置 <bdi>文本</bdi>
<bdo> 定义文本方向（rtl&ltr） <bdo dir="rtl">文本</bdo>
<blockquote> 块引用(cite) <blockquote cite="url">引用内容</blockquote>
<cite> 定义作品的标题（书籍、歌曲、电影等） <cite>作品标题</cite>
<code> 定义计算机代码文本 <code>代码</code>
<del> 删除线 <del>要删除的文本</del>
<dfn> 定义项目 <dfn>项目名</dfn>
<em> 倾斜字体（语义较强） <em>字体</em>
<i> 倾斜字体（无语义） <i>需倾斜文本</i>
<ins> 定义删除后新插入的文本 <del>red</del><ins>blue</ins>
<mark> 高亮文本 <mark>文本</mark>
<meter> 已知最大最小值的度量
value(必须)：规定当前值
max:规定最大值；min:规定最小值
high:规定最高值；low:规定最低值
optimum:规定最优值		 <meter value="2" min="0" max="10">2 out of 10</meter>
<meter value="0.6">60%</meter>
<progress> 定义运行任务进度 <progress value="22" max="100"></progress>
<q> 定义短的引用 <q>引用内容</q>
<rp> 定义不支持 ruby 元素的浏览器所显示的内容 <ruby><br/>汉 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt><br/></ruby>
<rt> 定义字符（中文注音或字符）的解释或发音 <ruby><br/>汉 <rt> ㄏㄢˋ </rt><br/></ruby>
<ruby> 定义ruby注释（中文注音或字符） <ruby><br/>汉 <rt> ㄏㄢˋ </rt><br/></ruby>
<s> 删除线 <s>文本</s>
<strong> 加粗（语义较强） <strong>文本</strong>
<sub> 下标文本 <sub>文本</sub>
<sup> 上标文本 <sup>文本</sup>
<time> 定义公历时间（24）或日期 The concert starts at <time>20:00</time>
The concert took place on
<u> 下划线 <u>文本</u>

表单标签

标签 功能
<form> 定义一个表单域
<input> 定义一个输入控件
type:
button:定义一个按钮。
file:选择文件
submit:提交按钮(点击后会向后台提交所选表单域中的信息)
search:搜索框
password:密码框
date:选择时间框(年-月-日)
text:单行文本
datetime-local:选择年月日时分
tel:电话号码
radio:单选按钮(需要给相同的name)
checkbox:复选按钮
color:选择颜色
email:邮箱
number:输入数字
reset:重新输入
week:多少年的第几周
<textarea> 多行文本输入框<textarea>自定义内容</textarea>
<select> 下拉选择列表<select>option*N</select>
size:规定下拉菜单中可见的选项数目
required="required":必须要选一个
multiple="true":可选多个选项
<optgroup> 选择列表中相关选项的组合{option*N}N
<option> 选择列表中的选项
<label> input元素的标注(不点击控件，点链接到的文字也可以定位到控件)
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
<fieldset> 围绕表单中元素的边框
<legend> 定义fieldset元素的标题
<datalist> 规定input元素可能的选项列表
<keygen> 用于表单的秘钥对生成器字段
<output> 定义计算的结果

多媒体标签

图像标签

<img>

作用：向网页中嵌入一张图片

应用：<img src="url" alt="图片加载不出来时的代替文本" title="鼠标放到图片上的介绍文本">

Note:绝对路径用“”;相对路径用“/”

视频标签

音频标签

超链接标签

<a>

作用：超链接

应用：<a href="链接地址" target="_blank">连接描述</a>（内部、外部链接）

​ <a href="#">链接描述</a>（空链接）

​ <a href="文件地址、压缩包地址">下载文件</a>（文本、图片、视频、音频等均可以为超链接）

​ <a href="#age">年龄</a>

​ <h3 id="age">年龄详情</h3>(锚点链接)

Note:

  • 默认为_self(当前窗口打开)
  • _blank(新窗口中打开)
  • ​ _top(整个窗口中打开)

列表标签

标签 功能 应用
<ul> 定义一个无序列表 <ul><li><li></li></li><</ul>
<ol> 定义一个有序列表 <ol><li><li></li></li></ol>
<li> 定义列表项 <ol><li><li></li></li></ol>
<dl> 定义一个定义列表 <dl><dt>电脑</dt><dd>电脑的解释</dd></dl>
<dt> 定义列表中的项目 <dl><dt>电脑</dt><dd>电脑的解释</dd></dl>
<dd> 定义列表中的项目描述 <dl><dt>电脑</dt><dd>电脑的解释</dd></dl>

Note:

  • <ul><ol>里面只能放<li>标签，<li>标签里面可以放弃他标签

  • <dd>中的内容是<dt>中内容的说明或是包含于<dd>内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <!DOCTYPE html>
    <html long="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>列表</title>
    	</head>
    	<body>
    		<div>
    			<ul>
    				<li>洗衣机</li>
    				<li>冰箱</li>
    				<li>空调</li>
    			</ul>
    			<ol>
    				<li>太阳</li>
    				<li>地球</li>
    				<li>西安</li>
    			</ol>
    			<dl>
    				<dt>跨栏</dt>
                    <dd>是一项运动</dd>
                    <dd>奥运会项目</dd>
                    <dd>刘翔是冠军</dd>
    			</dl>
    		</div>
    	</body>
    </html>

表格标签

标签 功能
<table> 定义一个表格
border="num"定义边框宽度
<tr> 定义行
<td> 定义单元格
colspan:规定单元格可横跨的列数
rowspan:规定单元格可横跨的行数
<th> 定义表头单元格(使内容居中加粗)
<thead> 定义表头整行
<tbody> 定义表格主题内容
<tfoor> 定义表注（脚注）

Note:

  • 合并单元格时，选定操作目标单元格后，需要删掉被合并单元格的代码。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格</title>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                     <th>序号</th>
                     <th>姓名</th>
                    <td>年龄</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张佳佳</td>
                    <td>24</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>张亮亮</td>
                    <td>33</td>
                </tr>
                <tr>
                    <td rowspan="2">3</td>
                    <td>张盼盼</td>
                    <td>22</td>
                </tr>
                <tr>
                    <td>张志荣</td>
                    <td>63</td>
                </tr>  
                <tr>
                    <td>4</td>
                    <td colspan="2"></td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>

高级HTML知识

网站图标设置

favicon

<link rel="shortcut icon" href="favicon.ico">

头部标签设置

TDK三大标签及SEO优化

TDK三大标签即title、description、keyword；SEO即Search Engine Optimization，即搜索引擎优化。

Title

<title>blablabla...</title>

Description

<meta name="description" content="blablablabla..." />

Keyword

<meta name="keyword" content="blablabla...">

PART 2: CSS

——佳佳、铭锐、吉财

WebKit浏览器：

基于WebKit Core的浏览器。

WebKit是一种用来让网页浏览器绘制网页的排版引擎。它被用于Apple Safari。其分支Blink被用于基于Chromium的网页浏览器，如Opera与Google Chrome。

Webkit亦使用于Apple iOS、BlackBerry Tablet OS、Tizen及Amazon Kindle的默认浏览器。WebKit的C++应用程序接口提供了一系列的Class以在视窗上显示网页内容，并且实现了一些浏览器的特色，如用户链接点击、管理前后页面列表及近期历史页面等等。

WebKit的HTML及JavaScript代码源自KDE的KHTML及KJS库的一个分支[3]，现已由KDE、Apple、Google、Nokia、Bitstream、BlackBerry及Igalia等独立开发[4]。OS X、Windows、GNU/Linux以及其他类Unix系统操作系统，皆支持这个项目[5]。2013年4月3日，Google宣布它创建了WebKit中WebCore组件的分支——Blink，Blink用于新版Google Chrome与Opera[6][7]。

WebKit的WebCore及JavaScriptCore组件使用GNU宽通用公共许可证，其他组件则采用BSD许可证[8]。

截至2013年3月7日，Webkit商标已被苹果公司在美国专利及商标局注册为其商标。[9]

——Wikipedia

CSS是层叠样式表（Cascading Style Sheets）标记语言，主要用来设置文本的内容（大小、字体、对齐方式等）、图片的外形等等。

CSS语法规范：由 选择器 以及 一条或多条声明 两个主要的部分构成。

书写方式： 选择器: { 属性值; }

CSS基础知识

1. CSS 类命名规则

公共命名规则

CSS样式命名 说明
wrapper 页面外围控制整体布局宽度
container或content 容器,用于最外层
layout 布局
head, header 页头部分
foot, footer 页脚部分
nav 主导航
subnav 二级导航
menu 菜单
submenu 子菜单
sideBar 侧栏
sidebar_a, sidebar_b 左边栏或右边栏
main 页面主体
tag 标签
msg message 提示信息
tips 小技巧
vote 投票
friendlink 友情连接
title 标题
summary 摘要
loginbar 登录条
searchInput 搜索输入框
hot 热门热点
search 搜索
search_output 搜索输出和搜索结果相似
searchBar 搜索条
search_results 搜索结果
copyright 版权信息
branding 商标
logo 网站LOGO标志
siteinfo 网站信息
siteinfoLegal 法律声明
siteinfoCredits 信誉
joinus 加入我们
partner 合作伙伴
service 服务
regsiter 注册
arr/arrow 箭头
guild 指南
sitemap 网站地图
list 列表
homepage 首页
subpage 二级页面子页面
tool, toolbar 工具条
drop 下拉
dorpmenu 下拉菜单
status 状态
scroll 滚动
.tab 标签页
.left .right .center 居左、中、右
.news 新闻
.download 下载
.banner 广告条(顶部广告条)

其他DIV命名规则

　　登录条:loginBar

　　标志:logo

　　侧栏:sideBar

　　广告:banner

　　导航:nav

　　子导航:subNav

　　菜单:menu

　　子菜单:subMenu

　　搜索:search

　　滚动:scroll

　　页面主体:main

　　内容:content

　　标签页:tab

　　文章列表:list

　　提示信息:msg

　　小技巧:tips

　　栏目标题:title

　　友情链接:friendLink

　　页脚:footer

　　加入:joinus

　　指南:guild

　　服务:service

　　热点:hot

　　新闻:news

　　下载:download

　　注册:regsiter

　　状态:status

　　按钮:btn

　　投票:vote

　　合作伙伴:partner

　　版权:copyRight

2. 选择器

基础选择器

选择器按作用大小（从小到大）分为 ID选择器(使用井字符做特殊标注：#) 、类选择器（使用英文点号做特殊标注：.） 、 标签选择器 及 通配符选择器（使用英文星号做特殊标注：*）。

CCS 选择器的作用：选择器是为了选定标签，声明对象设置具体样式

选择器类型 选择器特性 style书写方式 style应用方式
ID选择器 1. 与其他选择器类型一致，特殊之处是大部分情况作JavaScript调用
2. 需要编写唯一id不可重复使用		 #DivStyle { color: red; } id="DivStyle"
类选择器 1. 作用于使用class属性的一类标签，同面向对象的其他语言特性一致
2. 单个标签可以使用多个类，中间以空格隔开		 .ClassStyle { color: black;} Class="ClassStyle ....."
标签选择器 作用于所有使用本标签的标签 div { color: blue; } /
通配符选择器 作用于所有标签 * { clolor: pink; } /

复合选择器

复合选择器类型 选择器特性 style书写方式
后代选择器 1. 可以选择某个父标签下的某个全部子标签，不管其是否在同一个层级
2. 当标签发生嵌套时，内层标签就称为外层标签的后代
3. 浏览器按照标签层级的关系进行查找，并对最内层标签进行修改，因此可以定义多重标签选择，如可以使用基础选择器（类选择器及ID选择器）进行组合使用
4. 内外层选择器之间 以空格隔开		 外层标签 内层标签 {属性}
ol li { color: #000; }
ol li a { color: #777; }
.nav li a { color: pruple;}
子代选择器 1. 即与后代选择器不同，仅对父级标签下的某一类选择器进行操作，不会作用于其他子代的同类标签
2. 使用符号 > 进行操作		 .nav>a {color: pink;}
集选择器（相邻选择器） 1. 在两个没有从属关系（子代或后代）和相同特点（如同类标签）的同级不同类标签中，定义一个相同的样式
2. 多个标签进行选择时使用英文逗号 , 进行并列选择
3. 并集选择器内可使用 简单选择器 和 复合选择器（如 后代选择器 和 子代选择器），竖向书写选择器		 div, p {color: pink; }
伪类选择器 1. 用于给某些选择器添加特殊效果（如给链接添加特殊效果），或者选择某个元素
2. 结构伪类、链接伪类、表单伪类
3. 伪类选择器其实更像是一个行为选择器（或状态选择器），它定义了一个/类标签在不同状态下的样式，书写形式如：标签: 状态/行为 {属性}		 .OnlineTitle:link {
color: #222222;
text-decoration: none;
}
属性选择器（高级） 元素名[属性（及关键搜索项）]
E[att] 选择具有att属性的E元素
E[att="val"] 选择ett=val的E元素
E[att^="val"] 选择att属性开头为val的E元素
E[att$="val"] 选择att属性结尾为val的E元素
E[att*="val"] 选择att属性中包含"val"字符的E元素
结构伪类选择器（高级） 根据文档结构来选择元素，常用于父级元素里的子元素
E:first-child 匹配父元素中的第一个子元素E
E:last-child 匹父元素中的最后一个元素E
E:nth-child(n) 匹配父级元素中的第n个子元素E
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n)指定类型E的第n个		 n可以是正数、关键字（even偶数、odd奇数）和公式
可以配合其他复合选择器进行选择，如子代选择器、后代选择器等。
在使用nth-child(n)后，未指定特殊数字时，将从0开始计数，直到所有子代结束，即等同于全选所有该类子代。
伪元素选择器（高级） ::before 在元素内部的前面插入东西
::after 在元素内部的后面插入东西
 所创建的元素为行内元素；
必须有content属性；

并集选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE HTML>
<!--
如要求将下方熊大、熊二及佩奇一家都改为粉色，则按照<style>中的方式进行书写
-->
<html>
    <head>
        <style>
            //在两个没有从属关系（子代或后代）和相同特点（如同类标签）的同级不同类标签中，定义一个相同的样式
            div,
            p,
            .pig li {                //类选择器
                color: pink;
            }
        </style>
    </head>
    <body>
        <div>熊大</div>
        <p>熊二</p>
        <span>关头强</span>
        <ul class="pig">
            <li>PIG 1</li>
            <li>PIG 2</li>
            <li>PIG 3</li>
        </ul>
    </body>
</html>

链接伪类选择器

四个使用方式: link / visited / hover / active

  1. 为了确保生效，应按照LVHA的顺序进行声明。
  2. <a> 链接在浏览器中具有默认样式，不会因为在<body>中而随之改变，实际工作中需要给链接单独指定样式。
  3. 使用时，加上冒号 : 与 四种状态之一 即可

举例：

1
2
3
4
a:hover
{ 
	background-color:yellow;
}

当鼠标经过父级元素时，显示子元素的遮罩层：

1
2
3
.tudou:hover .mask {
	display: block;      /* 显示遮罩层 */
}

最小盒子：即只能存放文字了，不能再存放其他标签/元素，如 <p>、<h1>等文字块级标签；

结构伪类选择器

nth-child()在执行时会先把所有子元素都进行排序，先看nth-child()括号中的数字，再匹配前方的标签是否与实际标签一致，如果不一致则不执行。

nth-of-type()在执行时会先把指定类型的子元素都进行排序，先看nth-of-type()括号中的数字，再匹配查找到具体的标签。

CSS中使用伪类选择器，根据结构顺序精确选择标签：

1
2
3
4
5
6
7
8
9
ul li:first-child {
  color: white;
}
ul li:last-child {
  color: green;
}
ul li:nth-chile(3) {
  color: yellow;
}

HTML结构如下：

1
2
3
4
5
6
7
8
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

自增长序列，n是从0开始的，按照公式从0开始计算，所得结果为选择器选择的行数。

公式 取值
2n 偶数
2n+1 奇数
5n 5、10、15...
n+5 从第5个开始（包含第5个）直到最后
-n+5 前5个（包含第5个）

元素显示模式

是指在页面上的元素以 块状模式 、 行内模式 或 行内块模式 进行显示。元素按显示模式可以分为 块状（级）元素 及 行内元素（内联元素） 及 行内块元素 三种类型。

元素类型 典型标签 特点 注意点
块状元素 <h1>~<h6> 、 <p>、 <div>、<ul>、<ol>、<li>...... 1. 即使设置标签宽度，也是独占一行
2. 高、宽、外边距及内边距可调节
3. 默认宽度是父级宽度的100%
4. 是一个容器及盒子，可以放任何标签		 文字类的标签内不可以存放块元素
行内元素（内联元素） <a>、 <strong>、<b>、 <em>、<i> ...... 1. 相邻行内元素在一行上，一行可以显示多个
2. 直接设置宽高无效，可以间接设置
3. 默认宽度就是其内容宽度
4. 行内元素只能容纳文本及其他行内元素		 1. 链接中不允许再放其他链接
2. <a>中可以放置块元素，但是转换成块级元素最安全
行内块元素 <input>、 <image>、<td>...... 1. 同时具有块元素及行内元素的特定
2. 和相邻行内元素（行内块）在一行上，但是有空白缝隙，可以一行显示多个
3. 默认宽度即内容宽度
4. 高度、行高、外边距及内边距可控制

元素显示模式的转换

即一个模式的元素需要另一个模式的特性，可以通过在CSS的标签样式属性中添加display语句进行转换。

转换为块级元素： display: block;

转换为行内元素： display: inline;

转换为行内块元素： display: inline-block;

选择器特性

层叠性、继承性、优先性

层叠性

样式冲突，就近原则

继承性

子标签会继承父标签的某些样式

子元素可以继承父元素的样式（text-，font-，line-这些元素开头的可以继承，以及color属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
    body{
        color:pink;
        font:25px/1.5 'Microsoft YaHei';
    }
    div{
        font:14px;
    }
/*此时div会继承body中1.5倍的行高，此时div中的行高就是14*1.5=21px*/
    行高可以跟单位也可以不跟单位
    如果子元素没有设置行高，则会继承父元素行高为1.5
    此时子元素的行高是：当前子元素的文字大小*1.5
    body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
</style>

优先性（权重）

选择器类型 权重
继承 无
通配符选择器、子代选择器、相邻选择器（并集选择器） 0,0,0,0
元素选择器（标签选择器）、伪元素选择器 0,0,0,1
类选择器、伪类选择器、属性选择器 0,0,1,0
ID选择器 0,1,0,0
内联选择器 1,0,0,0
!IMPORTANT 无限

选择器的加权结果并非二进制，而是在各个数位上进行单独相加，例如元素选择器与类选择器的加权结果为 0,0,1,1，左侧数位的数值越大，权重越高。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
	<style>
		div {
			color: red;
		}
		.colour {
			color: green;
		}
		#demo {
			color: burlywood;
		}
		p {
			color: #008000;
		}
	</style>
<body>
	<div class="colour" id="demo" style="color: #4682B4;">
		不爱绿色爱蓝色
		<p>
			继承的权重为0
		</p>
/*此时p是继承不到父级的设定* 所以看标签到底执行哪个样式，就先看这个标签有没有直接被选出来/
	</div>
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

3. List

list-style CSS 属性是一个简写对属性集合，包括list-style-type, list-style-image, 和 list-style-position。

list-style: none | circle | square inside ;表示<ul> 下 <li> 前的小点样式，如“无、圆圈、实心方形”。

例如：

1
2
3
4
5
6
7
8
9
10
11
<ul class="one">
  <li>List Item1</li>
  <li>List Item2</li>
  <li>List Item3</li>
</ul>
List 2
<ul class="two">
  <li>List Item A</li>
  <li>List Item B</li>
  <li>List Item C</li>
</ul>

及

1
2
3
4
5
6
7
.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}

4. Background

background-color 可以设置为 transparent，即透明的，不可视的。

background-image 可以设置为 none，也可以跟上一个 url() 链接。如：background-image: url(http://xxxxxx.com/123.jpg)

background-repeat: repeat | no-repea | repeat-x | repeat-y ，分别是指 重复（平铺）、不平铺、在x轴上平铺 及 在y轴上平铺 。

background-position: top | bottom | left | right | center; 除了可以使用类似于左侧的方位词定位，还可以使用坐标轴数值定位。

background: [image] [repeat] [position]; 是复合写法，repeat 和 position 可省略，image 不可省略。

5. Font

FONT-FAMILY 字体族

通用属性之一，用于设置网页显示字体，font-family的使用方式为 font-family=" " ，双引号内可以书写多个字体，引擎会按顺序搜索本地字体并使用，如果都没有则使用本地字体。

注意：建议使用字体的全英文进行书写，如 微软雅黑 全英文为 Microsoft YaHei，英文书写时有空格的应用单引号‘’ 进行包裹。

FONT-SIZE 字体大小

通常用于对body标签内所有正文字体大小的设置，对标题（如h3）大小的设置仍需另起样式。

复合写法

font: font-style font-weight font-size/line-height font-family;

font-size 和 font-family 不可缺省

6. Text

文本属性

属性 书写方式 注意
color
颜色		 1. 常见英文表示法，直接书写该颜色英文即可，如 pink  red  blue  purple
2. 16进制表示法，用#号进行书写，如#FF00FF
3. RGB表示法，如rgb(0,0,255)		 16进制简写为#fff
实际开发中用16进制
text-align
文本对齐		 仅有左、中、右三种表示方式，用英文 left  center  right 进行书写
text-indent
文本缩进		 缩进可以用2种方式表示：
1. 精准缩进：即直接使用 px 单位进行书写，表示缩进多少像素点，缺点是容易出现问题
2. 字符单位缩进：即按照字符大小，自适应缩进字符距离，单位是em，如 2em，可以缩进2个字符
text-decoration
文本修饰		 常见的修饰类型有四种：无（none）、上划线（overline）、下划线（underline）、删除线（line-through）
line-height 行高=上行距+下行距+字高，且上行距=下行距

7. Box Module

盒子模型主要分三部分：border（边框）、padding（内边距）及 margin（外边距）。

Border

边框主要有一下三种参数：粗细、颜色及样式

  • 粗细(border-width: 5px;)
  • 颜色(boder-color: #555) （注意：如果这个值没有设置，它的默认值是元素的 color属性值（是文字颜色而非背景色）），可以定义为transparent（透明的）
  • 样式(boder-style: none | hidden | dotted | dashed | solid | double(双层线) | groove(内雕刻) | ridge(外浮雕) | inset(内凹陷) | outset(外凹陷) ;)

border属性之可以在中间添加上、下、左、右四个方位词和三参数之一，如 border-top-color | border-bottom-style ....

边框使用时会影响盒子大小，需要注意调整。

复合写法

border: [border-width ||border-style ||border-color |inherit] ;

如：border: 10px solid transparent;

Padding

内边距涉及到的参数包括 上下左右四边的边距。

在未设置内盒子的width时，设置padding对内盒子实际显示大小不起影响，一旦设置width，则会让盒子的width在显示时超过设置参数的大小。

Margin

外边距同内边距。

在标准流下，设置块级盒子width参数后，设置margin左右为auto，可以让盒子实现居中效果。（以下三种写法，推荐第一个，第一个参数表示上下，第二个参数表示左右）

margin: 0 auto;

margin: auto;

margin-left: auto; margin-right: auto;

Q/A

盒子塌陷的解决方案

以下为两个盒子嵌套，同时设置上边距导致塌陷问题的解决方案：

  • 可以为父元素定义上边框/上内边距
  • 可以为父元素添加 overflow: hidden;
  • 利用浮动、固定、绝对定位解决

8. Float

浮动最初的开发目的是让图片和文字产生环绕效果的，浮动可以让多个块级元素在一行内显示。

float: none | left | right;

注意：两个行内块元素中间会有空白间隙存在，如果父级元素设定了宽度，会让元素存放不下。需要给此类行内块元素设定浮动

浮动特性：

  • 脱标

  • 顶端对齐

  • 具有行内块元素特性

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

在标准流中嵌套一个带有外边距的浮动框，不会让他们产生外边距合并。

9. Clean Float

清除浮动也叫闭合浮动，是指在未指定父级元素高度而子级元素为浮动时，会对父级元素同级的标准流造成影响，因而需要清除该类浮动造成的弊端的情况。

清除浮动的四种方式：

方法 说明 写法 备注
额外标签 [w3c推荐]也称隔墙法，指在浮动的块（行内块）级元素后面新增一个带有clear: both;属性的额外标签（要求是块级元素）来屏蔽浮动的影响。 clear: both; 弊端是增加了额外标签，对H5结构造成负担；
要求新增的标签不能是行内元素
父级添加overflow 仅给父级元素添加overflow，添加hidden、auto、scroll皆可。 overflow: hidden | auto | scroll 优点是代码简洁，缺点是无法显示溢出的部分
:after伪元素 额外标签法的升级版，利用CSS样式添加额外标签
仅给父级元素添加		 见下方 没有增加额外标签，样式写法较为复杂；
双伪元素 在子级前后各添加一个伪元素 见下方 代码简洁，照顾低版本。

:after伪元素代码示例：

1
2
3
4
5
6
7
8
9
10
11
.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {       /* IE6、7专有 */
	*zoom: 1;
}

双伪元素代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
.clearfix:before, .clearfix:after{
	content: "";
	display: table;
}

.clearfix:after{
	clear: both;
}

.clearfix{
	*zoom: 1;
}

10. Position

定位的意义

让盒子自由地在某个盒子中移动或固定在屏幕中的某个位置，并且可以压住其他盒子。

注意：对于标准流和浮动，不可以使用定位。

定位模式

position: static | relative | absolute | fixed ;

定位分类 脱标 使用情况 参考系 其他特点
静态定位 static 否，不能使用边偏移 很少 无，不设置边偏移 按照标准流特性摆放位置
相对定位 relative 否，占用标准流的位置 常用 自身原来的位置 相对于自身原来的位置来移动
设置相对定位后，后面的标准流不会脱标，不会让身后的标准流往前挤或往后挤；
通常是给绝对定位当父级元素的属性
绝对定位 absolute 是，不占用标准流的位置 常用 最近一级父级以上带有定位的盒子（子绝父相） 如果没有已定位的父级元素，则以浏览器进行绝对定位
固定定位 fixed 是，不占用标准流的位置 常用 浏览器的可视窗口 与父级元素无关，不随窗口滚动条滚动
粘性定位 sticky 否，占用标准流的位置 很少 浏览器的可视窗口 相对定位和固定定位的混合体，具有两者的某些特点
必须添加至少一个边偏移参数
需与滚动搭配使用，对IE兼容性差，类似粘性定位的做法通常用JavaScript来做

边偏移

相对于父级盒子（或者有定位的祖辈盒子）的边线偏移量（偏移量可以为负值）。

需要在设置好定位模式后边偏移才能生效。

四种偏移：top、bottom、right、left；

例：top: 10px; right: 20px;

如何将内容固定到版心右侧？

使用固定定位至左侧的50%，在调整margin-left值至版心宽度的一般（直接书写数值px）。

如何让内容固定到屏幕正中心？

使用固定定位至左侧和顶部的50%，再使用margin-left和margin-right的负值来抵消自身宽高的一半。

定位显示优先级

定位显示优先级，即定位叠放顺序，是指 具有定位属性的盒子（类似于PS图层）在Z轴上的显示优先级，数值越大则优先级越高。

如果设置为auto，则按照H5结构书写顺序以“后来居上”的原则显示。

如果设置为数值，则比auto优先级更高，但是不能写单位。

z-index: (number) | auto;

定位的特殊性质

  • 给行内元素添加绝对或者固定定位后，可以设置宽度和高度（不等同于与块级元素互换特性？）
  • 给块级元素添加绝对或者固定宽度后，不设置宽高也可以则应用内容的大小

11. 显示与隐藏

显示与隐藏的三种方式：display（显示隐藏）、visibility（显示隐藏）、overflow （溢出显示隐藏）

方式 用法 特性
display（显示隐藏） 该属性本来是设置元素如何显示的；
display: none; 用于隐藏对象；
display: block; 除了用于转换成块级元素，还可以用于显示元素；		 隐藏元素后，不再占有其原位置；
应用广泛，搭配js做网页特效用；
visibility（显示隐藏） 用于设置元素的可见性；
visibility: visible | hidden | inherit | collapse ;		 隐藏元素后，仍占有其原位置；
overflow （溢出显示隐藏） 仅针对溢出元素框的部分进行显示或隐藏；
overflow: visible; 设置时clip属性设置将失效；
overflow: hidden; 不显示超过对象尺寸的内容；
overflow: scroll; 以滚动条形式显示，不管是否内容是否溢出；
overflow: auto; 自动判断内容长度，按需添加滚动条；		 如果带有定位属性，应慎用 overflow: hidden; ，会隐藏多余的部分

12. 布局

常见的布局形式

传统布局方式：普通流（文档流、标准流）、浮动、定位。

通栏：是指和浏览器一样宽。

布局设计准则：

  • 纵向块级元素用标准流，横向块级元素用浮动。

  • 先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，复合网页布局第一准则。

  • 浮动的盒子只会影响浮动盒子后方的标准流，不影响前方的标准流。

  • 应首先采用“一浮全浮”设计原则。

  • 在产品列表数量众多、文字数量众多等不能明确盒子高度的情况下不应指定父级盒子的高度， 否则会出现父级盒子因高度限制而出现子元素无法显示的情况，应让子元素撑开父元素。

  • 当给父元素设置标准流却未设置高度，而子元素为浮动时，父元素会高度塌陷。因浮动的子元素不占有高度，因此子元素浮动会会导致无高度的标准流父级元素高度塌陷，影响后续布局。

CSS属性书写建议

  1. 布局定位属性：display / position / float / clear / visibility / overflow (建议display第一个写)
  2. 自身属性：width / height / margin / padding / border / background
  3. 文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word
  4. 其他属性：content / cursor / border-radius / box-shadow / text-shadow / background:liner-gradient ....

页面布局的整体思路

  1. 确定版心，即可视区
  2. 分析行、块 以及 块中的列模块
  3. 列模块经常浮动布局，确定列大小后确定列的位置
  4. 先结构，后样式

关于导航栏

实际开发中，不会直接只用<a>来制作导航栏，而是用<li>包含链接的<li>+<a>来制作。

<li>+<a>语义更加清晰，更为有条理的列表型内容。如果直接用<a>，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字存在被搜索引擎降权的风险），从而影响网站排名。

13. 特殊符号

小于号 < &lt;

大于号 > &gt;

CSS高级知识

目标：

  • 能够使用精灵图

  • 能够使用字体图标

  • 能够写出CSS三角

  • 能够写出常见的CSS用户界面样式

  • 能够说出常见的布局技巧

CSS Sprites

CSS精灵技术的目的：减少客户端向服务器的请求次数，减小服务器的压力，提高网页的加载速度。

使用专用的位置测量工具，如Firework、photoshop或者其他专业工具，可以精确测量精灵图中的小图坐标，设定好盒子大小，使用专业工具测量的图片位置取负值进行平移定位。

建议使用position复合写法进行书写，如 position: url(images/abc.jpg) no-repeat -150px 120px; 。

缺点：

  1. 图片文件较大
  2. 放大或缩小导致失真
  3. 制作完毕后更换图片复杂

Icon Font

优点：

  1. 轻量级：字体加载时，字体图标就会马上渲染出来，减少了服务器的请求。
  2. 灵活性：本质是文字，具有font相关的所有特性。
  3. 兼容性：几乎支持所有浏览器。

适用场景：结构和样式较为简单的图标。

缺点：不能胜任复杂的结构和样式。

字体图标下载网站：

  1. icomoon字库
  2. 阿里iconfont

四种字体文件格式：

字体格式 兼容性 特性
.ttf 最高 win及mac最常见字体格式
.woff 一般
.eot 低 IE专用字体，支持IE4+
.svg 较低

使用教程：

  1. 字体文件下载完毕之后，会有四种格式的字体文件（请勿删除任一文件）。
  2. 所有的图标字体复制粘贴到资源管理器下即可。
  3. 在效果预览中复制该图标字体，并粘贴至H5文件中。
  4. 在 <style>中添加 font-face 相关的属性（下载的文件包中会有相关代码可供复制粘贴）。

示例

字体声明：

1
2
3
4
5
6
7
8
9
10
11
/* Logo 字体 */
@font-face {
  font-family: "iconfont logo";
  src: url('fonts/demofont.eot?t=1545807318834');
  src: url('fonts/demofonteot?t=1545807318834#iefix') format('embedded-opentype'),
    url('fonts/demofont.woff?t=1545807318834') format('woff'),
    url('fonts/demofont.ttf?t=1545807318834') format('truetype'),
    url('fonts/demofont.svg?t=1545807318834#iconfont') format('svg');
  font-weight: normal;
  font-style: normal;
}

使用时需要在标签中引用font-family属性：

1
2
3
span {
	font-family: 'iconfont logo';
}

字体追加：

从网站上下载文件时，自带.json文件，里面记录了所有已选择的字体的信息，只要在网站中导入该文件，即可包含过往所选择的所有图标信息，避免选择新图标后旧图标消失。

Triangle

三角形，其实是在一个长宽皆为0的盒子中，利用一条border显示，其余三条boders皆透明来制作的。

1
2
3
4
5
6
7
8
.triangle {
	width: 0px;
	height: 0px;
  inline-height: 0;     /*兼容性*/
  font-size: 0;         /*兼容性*/
	border: 10px solid transparent;
	border-right-color: rgb(0,0,0);
}

在实际应用中，常与另一个盒子共同包裹在一个大盒子中，使用 position: absolute; 和 位移属性 来制作气泡窗口。

User Interface Style

Cursor

cursor: default | pointer | move | text | not-allowed ;

分别是 箭头、手指、十字架、文本、禁止 样式。

Outline

outline: 0; 或者 outline: none;可取消表单轮廓线。

Resize

resize: none; 可以设置让 <textarea> 不能随意拖动。

Vertical-align

vertical-align: baseline | top | middle | bottom;

分别可以实现 父元素基线对齐、（与最高元素的）顶端对齐、父元素中部对齐、（与最低元素的）的顶端对齐。

注意：本属性针对行内元素或行内块元素，可以使其水平对齐，对块级元素无效。

四种线类型从高往底分别是：top line / middle line / base line / bottom line，默认情况下图片与文字是 baseline align 样式。

行内块元素与（父级）块元素的底部缝隙消除？

当在<div>中装入<img>时，<img>标签会与<div>标签的基线对齐，留下小缝隙，此时需要添加除了baseline以外的属性来消除缝隙。

也可以将行内块元素或行内元素转换为块级元素来实现，但是会有导致其他问题。

Text-overflow

单行文本省略显示

1
2
3
4
5
6
7
8
9
div {
	width: 150px;
	height: 20px;
	background-color: white;
	margin: 100px auto;
	white-space: nowrap;       /* 1. 强制一行显示 */
	overflow: hidden;          /* 2. 隐藏溢出内容 */
	text-overflow: ellipsis;   /* 3. 省略号代替溢出部分 */
}

多行文本显示省略号

需要WebKit内核的支持，在最新的浏览器及移动端浏览器上较为兼容，IE不支持。

1
2
3
4
5
6
7
8
9
10
11
div {
	width: 150px;
	height: 40px;
	background-color: white;
	margin: 100px auto;
	overflow: hidden;               /* 1. 隐藏溢出内容 */
	text-overflow: ellipsis;        /* 2. 省略号代替溢出部分 */
  display: -webkit-box;           /* 3. 转换为弹性伸缩的盒子 */      
  -webkit-line-clamp: 2;          /* 4. 设置需要显示的行数 */
  -webkit-box-orient: vertical;   /* 5. 设置排列方式 */
}

Highlight

鼠标滑过<div>时高亮显示，可以使用 position: relative; 或者 z-index: 1; 搭配其他特效 来让盒子图层置顶高亮显示。

单个盒子内文字围绕图片效果

  • 可以在一个父级只装了文字的盒子内，放置一个浮动模块，产生文字围绕图片的效果。
  • 此时文字和盒子的间距为0，显得不美观，可以为图片添加一个 padding属性。

页面导航制作

使用行内块可以制作不需要添加 margin 属性，却有 margin 效果的页码导航部分。 所有行内块元素可以在同一列显示，且使用 text-align: center; 即可让所有元素居中对齐。

梯形制作

梯形是由矩形+直角三角形获得，直角三角形获得方式如下：

1
2
3
4
5
6
7
8
.box {
  width: 0;
  height: 0;
  border-top: 100px solid transparent;     /* 其中一边设置为长边，且设置为透明色 */
  border-right: 50px solid skyblue;
  border-bottom: 0 solid blue;
  border-left: 0 solid green;
}

或如下：

1
2
3
4
5
6
7
.box {
  width: 0;
  height: 0;
  border-color: transparent red transparent transparent;
  border-style: solid;
  border-width: 22px 8px 0 0;
}

CSS初始化样式

<link rel="stylesheet" href="css/base.css">

最简单的初始化方法就是： * {padding: 0; margin: 0;}。虽然通配符* 在编写代码的时候非常方便快捷，但如果网站和CSS样式表文件都很大，书写通配符*会把所有的标签都初始化一遍，加大了网站渲染的负担，延后网页加载时间。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/* CSS 初始化 */
/* 标签选择器 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, 
form, fieldset, legend, img { margin:0; padding:0; } 
fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; }
ul, ol { list-style:none; }
input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";}
select, input { vertical-align:middle; }
select, input, textarea { font-size:12px; margin:0; }
textarea { resize:none; }
img {border:0;    vertical-align:middle;}
table { border-collapse:collapse; }
body {
    font:12px/150% Arial,Verdana,"\5b8b\4f53";
    color:#666;
    background:#fff
}
.clearfix:before,.clearfix:after{ 
    content:""; 
    display:table; 
} 
.clearfix:after{clear:both;} 
.clearfix{ 
    *zoom:1;/*IE/7/6*/ 
} 
a{color:#666; text-decoration:none; }
a:hover{color:#C81623;}
h1,h2,h3,h4,h5,h6{text-decoration:none;font-weight:normal;}
s,i,em{font-style:normal;text-decoration:none;}
.col-red{color: #C81623!important;}

/* 公共类选择器 */
.w{
    width: 1210px;margin:0 auto;
}
.fl {
    float:left
}
.fr {
    float:right
}
.al {
    text-align:left
}
.ac {
    text-align:center
}
.ar {
    text-align:right
}
.hide {
    display:none
}

CSS公共样式

<link rel="stylesheet" href="css/common.css">

CSS3函数支持

滤镜函数

filter属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。

CSS标准里包含了一些已实现预定义效果的函数。

设置一种函数，方法如下：

1
filter: <filter-function> [<filter-function>]* | none

filter中所有的滤镜函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* URL to SVG filter */
filter: url("filters.svg#filter-id");

/* <filter-function> values */
filter: blur(5px);                           /*设置高斯模糊*/
filter: brightness(0.4);                     /*设置明亮度*/
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);    /**/
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* 多种滤镜复合使用 */
filter: contrast(175%) brightness(3%);

/* 全局变量 */
filter: inherit;
filter: initial;
filter: unset;

计算函数

calc() 函数可以在任何定义数值大小的地方进行使用，不同于代码的严格输入要求，CSS支持混合类型输入，即百分比和精确数值混合使用，如 width: calc(100% - 3px); 运算符号支持 + | - | * | / 四则。

CSS3动画效果

过渡

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。

transition CSS属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

transition-property 可设置的参数如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* 关键值 */
transition-property: none;
transition-property: all;
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

transition-property: test1;
transition-property: test1, animation4;
transition-property: all, height, all;
transition-property: all, -moz-specific, sliding;

/* 全局变量 */
transition-property: inherit;
transition-property: initial;
transition-property: unset;

PART 3: JavaScript

——吉财

基础知识

简介

优缺点

优点 缺点
1. 减少服务器交互-数据发送到服务器前验证输入，减少流量及计算量
2. 立即反馈给服务者-不必等待页面重载而立即判断输入是否遗漏
3. 交互性增强-各种悬停交互或键盘交互
4. 更丰富的界面-拖放组件或滑块组件使界面更丰富		 1. 客户端的JavaScript不允许读取或写入文件，出于安全考虑
2. 不能用于网络应用，不支持此功能
3. 没有任何多线程或多处理器能力

语法

注释

  • // 及随后的文本
  • /* 及 */之间的文本
  • <!-- （HTML注释开始序列）被视为与 // 一致的单行注释
  • HTML注释结束序列 --> 无法被识别为注释

非JavaScript浏览器警告

可以使用<noscript>标记向用户显示缺少JavaScript功能警告。

1
2
3
4
5
6
7
8
9
<script language="javascript" type="text/javascript">
	<!--
	JavaScript
	-->
</script>

<noscript>
	Sorry... JavaScript is needed to go ahead.
</noscript>

变量

JavaScript支持三种原始数据类型：Numbers | Strings | Boolean ; 及两种简单数据类型：Null | Undefined

循环

for...in循环

类似于C# / Java中的用法

事件

onclick事件

可以通过在HTML的标签中设置onclick属性，结合JavaScript定义函数来构成 鼠标单击事件。

1
2
3
4
5
6
7
8
9
10
11
12
<html>
  <head>
    <script type="text/javascript">
    	function sayHello(){
        alert("Hello, World!");
      }
    </script>
  </head>
  <body>
    <input type="button" onclick="sayHello()" value="say Hello" />
  </body>
</html>

进阶知识

PART 4: 网站及框架

——吉财

框架是整个或部分系统的可重用设计，表现为一组抽象构件及构件实例间交互的方法。另一种定义认为，框架是可被应用开发者定制的应用骨架。前者是从应用方面而后者是从目的方面给出的定义。

可以说，一个框架是一个可复用的设计构件，它规定了应用的体系结构，阐明了整个设计、协作构件之间的依赖关系、责任分配和控制流程，表现为一组抽象类以及其实例之间协作的方法，它为构件复用提供了上下文(Context)关系。因此构件库的大规模重用也需要框架。

构件领域框架方法在很大程度上借鉴了硬件技术发展的成就，它是 构件技术 、 软件体系结构研究 和 应用软件开发 三者发展结合的产物。在很多情况下，框架通常以 构件库 的形式出现，但构件库只是框架的一个重要部分。框架的关键还在于框架内对象间的 交互模式 和 控制流模式 。

框架比构件可定制性强。在某种程度上，将构件和框架看成两个不同但彼此协作的技术或许更好。框架为构件提供重用的环境，为构件处理错误、交换数据及激活操作提供了标准的方法。

应用框架

应用框架并不是包含构件应用程序的小片程序，而是实现了某应用领域通用完备功能（除去特殊应用的部分）的底层服务。使用这种框架的编程人员可以在一个通用功能已经实现的基础上开始具体的系统开发。框架提供了所有应用期望的默认行为的类集合。具体的应用通过重写子类(该子类属于框架的默认行为)或组装对象来支持应用专用的行为。应用框架强调的是软件的设计重用性和系统的可扩充性,以缩短大型应用软件系统的开发周期，提高开发质量。与传统的基于类库的面向对象重用技术比较，应用框架更注重于面向专业领域的软件重用。应用框架具有领域相关性，构件根据框架进行复合而生成可运行的系统。框架的粒度越大，其中包含的领域知识就更加完整。

“框架其实是某种应用的半成品，就是一组组件，供你选用完成你自己的系统。简单说就是使用别人搭好的舞台，你来做表演。而且，框架一般是成熟的，不断升级的软件。 ”

框架的概念最早起源于Smalltalk环境，其中最著名的框架是Smalltalk 80的用户界面框架MVC(Model-View-Controller)。随着用户界面框架Interviews 【Linton 89】和ET++ 【Weinand 89】 的开发和发布，框架研究越来越受到研究人员的重视。虽然框架研究最初起源于用户界面领域，但它还被成功地应用到其他领域中，如操作系统、火警系统 等。Taligent公司于1992年成立后，框架研究受到了广泛的重视。该公司计划基于框架来开发一个完整的面向对象操作系统。另外，该公司还发布了一套支持快速应用开发的工具集CommonPoint，其中包括了上百个面向对象框架 【Andert 94,Cotter 95】。框架还没有统一的定义，其中Ralph Johnson所给出的定义基本上为大多数研究人员所接受：

一个框架是一个可复用设计，它是由一组抽象类及其实例间协作关系来表达的。

这个定义是从框架内涵的角度来定义框架的，当然也可以从框架用途的角度来给出框架的定义：

一个框架是在一个给定的问题领域内，一个应用程序的一部分设计与实现。

从以上两个定义可以看出，框架是对特定应用领域中的应用系统的部分设计和实现的整体结构。框架将应用系统划分为类和对象，定义类和对象的责任，类和对象如何互相协作，以及对象之间的控制线程。这些共有的设计因素由框架预先定义，应用开发人员只须关注于特定的应用系统特有部分。框架刻画了其应用领域所共有的设计决策，所以说框架着重于设计复用，尽管框架中可能包含用某种程序设计语言实现的具体类。

一个基于框架开发的应用系统包含一个或多个框架，与框架相关的构件类，以及与应用系统相关的功能扩展。与应用系统相关的扩展包括与应用系统相关的类和对象。应用系统可能仅仅复用了面向对象框架的一部分，或者说，它可能需要对框架进行一些适应性修改，以满足系统需求。

面向对象的框架作为一种可复用的软件，在基于框架的软件开发过程中会涉及到框架的开发和利用两个方面的工作。框架的开发阶段在于产生领域中可复用的设计。该阶段的主要结果是框架以及与框架相关的构件类。该阶段的一个重要活动是框架的演变和维护。象所有软件一样，框架也易于变化。产生变化的原因很多，如应用出错，业务领域变化，等等。

不论是哪一种技术，最终都是为业务发展而服务的。从业务的角度来讲。首先，框架的是为了企业的业务发展和战略规划而服务的，他服从于企业的愿景；其次，框架最重要的目标是提高企业的竞争能力，包括降低成本、提高质量、改善客户满意程度，控制进度等方面。最后，框架实现这一目标的方式是进行有效的知识积累。软件开发是一种知识活动，因此知识的聚集和积累是至关重要的。框架能够采用一种结构化的方式对某个特定的业务领域进行描述，也就是将这个领域相关的技术以代码、文档、模型等方式固化下来。

MVC 框架

即 Model-View-Control 三层框架。

MVVM 框架

即 Model-View-ViewModel，一个软件架构设计模式。由微软 WPF 和 Silverlight 的架构师 Ken Cooper 和 Ted Peters 开发，是一种简化用户界面的事件驱动编程方式。由 John Gossman（同样也是 WPF 和 Silverlight 的架构师）于2005年在他的博客上发表。

MVVM 源自于经典的 Model–View–Controller（MVC）模式（期间还演化出了 Model-View-Presenter（MVP）模式，可忽略不计）。

MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。如下图所示：

20210219-02

MVVM框架详解

20210219-01

View Level

View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建，为了更方便地展现 ViewModel 或者 Model 层的数据，已经产生了各种各样的前后端模板语言，比如 FreeMarker、Marko、Pug、Jinja2等等，各大 MVVM 框架如 KnockoutJS，Vue，Angular 等也都有自己用来构建用户界面的内置模板语言。

Model Level

Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。

ViewModel Level

ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。

注意：

  • ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的（比如页面的这一块展示什么，那一块展示什么这些都属于视图状态（展示），而页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互）），视图状态和行为都封装在了 ViewModel 里。

  • 这样的封装使得 ViewModel 可以完整地去描述 View 层。由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新，真正实现数据驱动开发。

  • View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

意义：

MVVM用接口实现了前后端数据的通信，这样可以使前后端之间的业务逻辑没有什么关系，促进了 GUI 前端开发与后端业务逻辑的分离， 极大地提高了前端开发效率

MVVM框架编程实例

Vue 的 View 模板：

1
2
3
4
5
<div id="app">
    <p>{{message}}</p>
    <button v-on:click="showMessage()">Click me</button>
</div>

Vue 的 ViewModel 层（下面是伪代码）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var app = new Vue({
    el: '#app',
    data: {     // 用于描述视图状态（有基于 Model 层数据定义的，也有纯前端定义）
        message: 'Hello Vue!',  // 纯前端定义
        server: {}, // 存放基于 Model 层数据的二次封装数据
    },
    methods: {  // 用于描述视图行为（完全前端定义）
        showMessage(){
            let vm = this;
            alert(vm.message);
        }
    },
    created(){
        let vm = this;

        // Ajax 获取 Model 层的数据
        ajax({
            url: '/your/server/data/api',
            success(res){
                // TODO 对获取到的 Model 数据进行转换处理，做二次封装
                vm.server = res;
            }
        });
    }
})

服务端的 Model 层（省略业务逻辑处理，只描述对外接口）：

1
2
3
4
5
6
7
8
{
    "url": "/your/server/data/api",
    "res": {
        "success": true,
        "name": "IoveC",
        "domain": "www.cnblogs.com"
    }
}

名词解释

渐进式

指VUE.JS并未强制开发者一定要使用哪种方式进行开发，更不必严格按照规矩来开发（较Angular、React），适用于开发水平不尽相同的团队，其只是提供了视图层（View Level），对于底层的开发方式还是提供了很多选择。

“资料非常多，规则非常多，你要用它开发，你就必须使用它的开发规则，像模块机制、依赖注入及组件的定义，你都得按它的来，不然开发过程中就会有很多坑等着你。”

——对Angular的评价

“你必须要有优秀的函数式编程思想，能把业务很好的映射到函数式编程的理念，……，对于刚接触这个框架的新人来说，如果在没有人或者架构师去详细跟他们讲解公司里react项目框架细节情况的前提下，直接拿着公司项目框架来进行业务模型、逻辑组件开发或者是快速开发，结果可能是非常糟糕的。”

——对React的评价

响应式

此概念于2010年5月由国外著名网页设计师Ethan Marcotte所提出。

响应式网站设计(Responsive Web design)的理念是：

页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。

响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。 [1]

响应式网站设计是一种网络页面设计布局，其理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境进行相对应的布局。

目前流行的9大前端框架

1.Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.React

React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

3.Angular

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

4.QucikUI

QucikUI 4.0是一套完整的企业级web前端开发解决方案，由基础框架、UI组件库、皮肤包、示例工程和文档等组成。底层基于jquery构建。使用QucikUI 开发者可以极大地减少工作量，提高开发效率，快速构建功能强大、美观、兼容的web应用系统。

5.Layui

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

6.Avalon

avalon2是一款基于虚拟DOM与属性劫持的 迷你、 易用、 高性能 的 前端MVVM框架， 拥有超优秀的兼容性, 支持移动开发, 后端渲染, WEB Component式组件开发, 无需编译, 开箱即用。

7.Dojo

Dojo致力于实现最大的互操作性。Web组件提供了一种机制，可以在Dojo应用程序中利用非Dojo组件，并在非Dojo应用程序中轻松使用基于Dojo的小部件。Dojo为Web组件提供一流的支持。您今天做出的决定不应该将您锁定在未来的决策中。

8.Ember

Ember.js可能是最固执己见的主流框架，这也是其最大的优势。它有创建Ember.js应用程序的正确方法，通常只有一种方法来创建应用程序。Ember.js更类似于一个产品或平台，在那里你会到一个供应商的长期支持和维护。Ember.js提供了对其平台的全面版本管理，升级工具以及对API升级的强大指导和工具。成熟，是对Ember.js的一个很好的总结。

9.Aurelia Aurelia是一个令人惊叹的框架，它在不牺牲功能的情况下采用简单而干净的代码。在本教程中，我们将通过构建“Todo”应用程序向您介绍Aurelia的简单性。您将看到应用程序代码的简洁程度，您将学习Aurelia的几个基本概念和功能。

Web前端js框架有哪些

MobX

MobX 支持单向数据流，也就是动作改变状态，而状态的改变会更新所有受影响的视图。

当状态改变时，所有衍生都会进行原子级的自动更新。因此永远不可能观察到中间值。

Ractive.js

active最初是在The Guardian http://theguardian.com上创建的，用于制作新闻应用程序。典型的新闻应用是高度互动的，结合了HTML和SVG，并且是在极端的最后期限压力下开发的。它必须跨浏览器可靠地工作，即使在移动设备上也能很好地运行。

WebRx

WebRx是一个基于浏览器的MVVM-Framework，它将功能反应编程与声明性数据绑定，模板和客户端路由相结合。

该框架构建于ReactiveX for Javascript（RxJs）之上，它是一组功能强大的库，用于处理和查询异步数据流，这些数据流可以来自不同的来源，如Http-Requests，Input-Events，Timers等等。

Deku

Deku是一个使用纯函数和虚拟DOM渲染接口的库。

Deku只使用函数并将所有状态管理和副作用的责任推送到像Redux这样的工具，而不是使用类和本地状态。它还旨在仅支持现代浏览器以保持简单。

Roit.js

Riot为所有现代浏览器带来了自定义组件。它旨在为您提供Web组件API所需的所有本机。

Mithril

用于构建单页应用程序的现代客户端Javascript框架。它很小（9.55 KB gzip），速度快，提供开箱即用的路由和XHR实用程序。

jQuery

Query是一个快速，小巧，功能丰富的JavaScript库。它通过易于使用的API在大量浏览器中运行，使得HTML文档遍历和操作，事件处理，动画和Ajax变得更加简单。通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。

React

React 组件使用一个名为 render() 的方法，接收输入的数据并返回需要展示的内容。在示例中这种类似 XML 的写法被称为 JSX。被传入的数据可在组件中通过 this.props 在 render() 访问。

Polymer

Polymer 库提供用于创建自定义元素的一组功能。这些功能的设计，使其更容易、更快地创建像标准的 DOM 元素一样工作的自定义元素。

Node.js

Node.js®是基于Chrome的V8 JavaScript引擎构建的JavaScript运行时。

Meteor

Meteor是一个用于构建现代Web应用程序的超简单环境。

D3.js

D3.js是一个用于根据数据操作文档的JavaScript库。D3可帮助您使用HTML，SVG和CSS将数据变为现实。D3对Web标准的强调为您提供了现代浏览器的全部功能，而无需将自己与专有框架联系起来，将强大的可视化组件和数据驱动方法结合到DOM操作中。

Ember

Ember.js是一个JavaScript框架，可以大大减少构建任何Web应用程序所需的时间，精力和资源。它致力于通过执行大多数Web开发项目中涉及的所有常见，重复但必不可少的任务，使您（开发人员）尽可能高效地工作。

Aurelia

Aurelia是一个现代的前端JavaScript框架，用于构建浏览器，移动和桌面应用程序。它侧重于与Web平台规范紧密结合，使用约定优于配置，并具有最小的框架入侵。

Knockout

Knockout是一个JavaScript MVVM（MVC的现代变体）库，可以更轻松地使用JavaScript和HTML创建丰富的，类似桌面的用户界面。它使用观察器使您的UI自动与底层数据模型保持同步，以及一组功能强大且可扩展的声明性绑定，以实现高效的开发。

Keystore

KeystoneJS是一个功能强大的Node.js内容管理系统和基于Express Web框架和Mongoose ODM构建的Web应用程序框架。Keystone可以轻松创建复杂的网站和应用程序，并附带一个漂亮的自动生成的管理UI。

Backbone

Backbone.js的提供给结构的Web应用程序的模型与键值绑定和自定义事件， 收集与枚举功能丰富的API， 观点与陈述事件处理，而这一切在一个RESTful JSON接口连接到现有的API。

Zepto

Zepto是一个用于现代浏览器的极简主义JavaScript库，具有与jQuery兼容的API。

网站相关知识

静态网站与动态网站

静态网站

特性
  1. 静态网站是最初的建站方式，浏览者所看到的每个页面是建站者上传到服务器上的一个 html （ htm ）文件，这种网站每增加、删除、修改一个页面，都必须重新对服务器的文件进行一次下载上传。网页内容一经发布到网站服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，每个网页都是一个独立的文件；
  2. 静态网页的内容相对稳定，因此容易被搜索引擎检索；
  3. 静态网页没有数据库的支持，在网站制作和维护方面工作量较大，因此当网站信息量很大时完全依靠静态网页制作方式比较困难；
  4. 静态网页的交互性较差，在功能方面有较大的限制。

动态网站

  1. 交互性：网页会根据用户的要求和选择而动态地改变和响应，浏览器作为客户端，成为一个动态交流的桥梁，动态网页的交互性也是今后 Web 发展的潮流。

  2. 自动更新：即无须手动更新 HTML 文档，便会自动生成新页面，可以大大节省工作量。

  3. 因时因人而变：即当不同时间、不同用户访问同一网址时会出现不同页面。

动态网站在页面里嵌套了程序，这种网站对一些框架相同，更新较快的信息页面进行内容与形式的分离，将信息内容以记录的形式存入了网站的数据库中，以便于网 站各处的调用。这样，我们看到的一个页面，可能在服务器上不一一对应某个 html 的文件了，网页框架里套了很多数据库里的记录中的内容。此外动态网页是与静态网页相对应的，也就是说，网页 URL 的后缀不是 .htm 、 .html 、 .shtml 、 .xml 等静态网页的常见形式，而是以 .asp 、 .jsp 、 .php 、.perl 、 .cgi 等形式为后缀。

这里说的动态网页，与网页上的各种动画、滚动字幕等视觉上的 “ 动态效果 ” 没有直接关系，动态网页也可以是纯文字内容的，也可以是包含各种动画的内容，这些只是网页具体内容的表现形式，无论网页是否具有动态效果，采用动态网站技术生成的网页都称为动态网页。

静态或动态的选择

对于一个业务稳定，页面变化频率不大的公司来说，静态网站是一个很好的选择。因为不用开发后台程序，报 价会便宜很多。对于一个公司规模比较大的公司来说，可能经常会有动态信息要发布给浏览者，可以考虑用动态网站的后台来管理网站信息。

服务器端运行状态区别

静态服务器

动态服务器-没有数据库

动态服务器-有数据库

动态服务器-多个数据库

动态服务器-负载均衡

网站制作流程

  1. 网站功能书编写
  2. 网站原型图设计
  3. 网站效果图制作
  4. 网站搭建（前后端同步）

Vue.js

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Reference

  1. 官方网站：http://cn.vuejs.org/

  2. 视频教程：https://learning.dcloud.io/#/