一文了解前端三劍客（HTML5+CSS+JS）

紹

他們是由W3C推薦的前端三件套，并且互相之間可以很好地配合

HTML:Hyper Text Markup Language超文本標記語言，|框架
CSS:Cascading Style Sheets層疊樣式表，Cascading Style Sheets顯示樣式
JS:JavaScript腳本|監聽時間，執行函數

學習

W3C
菜鳥教程

常用軟件，語言文件相關格式 .html文件/文件夾

HBuilder X

.html文件格式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 關于網頁的一些屬性 -->
		<!-- css樣式 -->
	</head>
	<body>
		<!-- 主體內容 -->
	</body>
</html>

文件夾

剛學半年web，只是寫個作業可以這么用吧(●’?’●)
前為名字，后為文件格式

項目名 文件夾
	images 文件夾
	css 文件夾
    	網站名1.css
    	...
    html 文件夾 也可以直接把每個網站卸載更外面一層
    	網站名1.thml
    	...

標簽

html的內容由一個個標簽嵌套或并列組成
標簽用 <標簽名>內容</標簽名> 或者 <標簽名/>

文字可以直接輸入，標簽只不過是用來控制他們的位置和顯示效果的

通用的標簽主要
前者較為普遍；后者教為特殊

結構相關

主要用來定一個區域來劃分更小的區域或者直接寫入內容。
使用時用前者。

通用的結構標簽有div和span
div更普遍一些
span一般用在剛開始不需要顯示的內容上，但可以被div替代

有許多特殊的標簽，他們沒有特別之處，只是特別拎出來以方便理解文件的整個結構
如

英文	通常的內容
header	頁眉
nav	導航欄
main	主要內容
article	與上下文無關的獨立內容
section	其中一個區域
aside	側欄或邊欄
footer	頁腳
detail	某個細節的描述
summary	detail的標題

最后兩個detail和summary通常是相互配合的。

上面這些都是有著特殊用處的標題，可以用下面的這些替代，但使用時相對復雜一些

內容相關

主要用來直接寫入內容。
使用時前后使用方法的皆有
空行之前的表示重要
用前者的有

英文	含義
h1	標題，字體最大的標題
中間部分	字體依次減小的標題
h6	標題，字體最小的標題
p	段落
br	換行
-	-
hr	水平線
sub	下標文本
sup	上標文本
ins	插入文本
del	刪除文本
wbr	此處適合換行
pre	預格式文本
address	表示地址
bdo	文字方向
blockauote	長的引用語
q	短的引用語
mark	定義有記號的文本

table te td th是相互配合組成一個表格的,table>tr>td

表格
table	表格
tr	行標簽
td	列標簽
th	標題列

li必須在ol或ul內。通常用ul li

列表
ol	有序列表
ul	無序列表
li	列表項

表單可以用作問卷等
input屬性typr value

表單
form	表單
label	點擊時自動定位到里面的input
input	輸入

select	多選
option	多選的一個選項

用后者的有

英文	含義
br	換行
img	引入圖片
video	引入視頻
audio	引入

abbr	此處適合換行

img video audio使用時需要更多的屬性，比如URL路徑等
以video為例：<video src="路徑" autoplay="autoplay" controls="controls"/>
依次表示 URL路徑自動播放顯示播放器控件
他們有各自的屬性
都必須有src屬性以表示路徑，img只需要src即可顯示
各自可以在屬性里選擇width和height以顯示寬度和高度（這兩個在css 屬性里介紹）
video和audio（他們有一樣的可選屬性）的其他可選屬性在下面顯示,一般一個只有一個可選擇的值，那個值就是名字自己(言下之意就是，只寫自己需要的屬性)

英文	作用
autoplay	自動播放
controls	顯示控件
loop	循環播放
poster	定義視頻下載時需要的圖像，值用路徑表示
preload	autoplay時無效，定義文件預加載的時機，有3個值，具體在下面介紹
muted	靜音

preload的值
auto：默認值，直接加載音頻/視頻
metadata：僅加載音頻/視頻元數據
none：不加載音頻/視頻

class/id

用于標簽的定義
class表示類，可以用于很多類似的標簽，以方便使用一樣的css樣式
id是唯一的，可以為獨特的標簽單獨使用樣式

css樣式

css一共有3段：選擇器{屬性:值;…}
樣式有3種添加的方法

直接在標簽后面寫，如<div style="具體樣式">這時候選擇器不需要寫了
寫在head的style標簽內<style>寫如css</style>，可以在style同時寫入多個不同的樣式
寫在單獨的css格式文件中，在head中添加<link href="文件路徑" type="text/css" rel="stylesheet"/>引入css外部樣式

選擇器

常見的偽選擇器/元素	表示方法
通用選擇器	*
標簽選擇器	標簽名
類選擇器	.類名前面是一個下點
ID選擇器	#ID號
-	以下選擇器用于分隔不同的選擇器
后代選擇器	一個空格，其實這不是個選擇器（但很像），可以選擇出所有的后代
分組選擇器	, 逗號
子元素選擇器	>
-	以下選擇器均需緊跟在最上面的選擇器后
相鄰兄弟選擇器	+
不相鄰兄弟選擇器	~
屬性選擇器	[屬性值] 詳細介紹
偽類選擇器	:單詞詳細介紹
偽屬性	::單詞詳細介紹
后一個選擇器不一定是前一個的子元素，也可以通過一些符號進行兄弟之間的變化

子元素選擇器

div>p
選中選中div中的p子元素（沒有中間層的關系）

相鄰兄弟選擇器

div+p
選中跟在div后的p

不相鄰兄弟選擇器

div~p
選中前面有相同父元素的div 的p

屬性選擇器

偽類選擇器

這類選擇器全部按前面（一部分）選擇器的介紹，緊跟在后面，以":"(冒號)為標識符（即以它開頭，可以看成選擇器的一部分）
以下均不寫冒號

偽類選擇器	介紹
-	下面定義的是應用于超鏈接文本a的4種(鼠標在該元素的)狀態，一起出現(分開使用)時，順序不可顛倒，否則會使本應在上面的選擇器失效也可以用到其他元素(非a)身上，即當鼠標移過/在上面/移出時的活動狀態
link	正常狀態（未訪問）
visited	被訪問之后
hover	經過時
active	單機被激活時
偽類選擇器也有一些分類，見下
結構偽類選擇器	介紹
–	–
first-child	第一個子元素
lastchild	最后一個子元素
-	注意以下4個帶()的，()內可以是一個算式或數字，選中符合結果的(可以是多個) 若()內是一個確定的數字，數字超出范圍，選擇器將無效；算式里可以有一個字母n，n會自增直到超出父類的子類數量。 n=0等最前面的幾個值超出范圍問題不大盡量簡單有效，比如(2n+1)選中所有奇數行 ()里面也可以是 odd，選中奇數行；even，選中偶數行
nth-child()	正數第()個子元素
nth-last-child()	倒數第()個子元素
nth-of-type()	父元素的第()個同類子元素
nth-last-of-type()	父元素的倒數第()個同類子元素
first-of-type	父元素的第一個同類子元素
last-of-type	父元素的倒數第一個同類子元素
only-child	父元素的唯一的子元素，(當然，)可能有很多子元素是唯一的
only-of-type	父元素的唯一一個相同類型的子元素
empty	沒有任何內容的子元素

狀態偽類選擇器	介紹，UI元素一般指包含在form元素內的表單元素
enabled	范圍內的所有可用UI元素
disabled	范圍內的所有不可用UI元素
checked	范圍內的所有可用UI元素

否定偽類選擇器
not()	不匹配該元素的選擇器，()里是一個選擇器的屬性，將選取不符合該選擇器的元素

目標偽類選擇器
target	前面的匹配元素被相關URL指向，樣式效果才生效，是動態選擇器

偽元素

用法：緊跟在后面，用兩個":“作為標識符（也可以只用一個，但兩個更好）。css樣式里需包含content屬性，值為帶引號的字符（當然也可以什么都不寫）
如：div:after{content=”";}

偽元素	介紹
before	在前面插入一段文字
after	在后面插入一段文字

屬性及含義

先講一些主要的值

長度

用途：廣泛
用法：有數字和單位組成：200px

當數字為0時，單位可有可無

使用頻率：px最常用，其次em
單位有絕對和相對之分

相對單位	單位長度的含義
px	像素(Pixel)
em	相對于父元素字體大小的倍數
ex	相對于字符x的高度，通常為字體高度的一半
ch	相對于數字0的寬度
rem	相對于根元素(html)字體大小的倍數。若未被設置，則相對于瀏覽器的默認字體尺寸（一般為16px）
vw	相對于視口的寬度（視口被均分為100vw）
vh	相對于視口的高度（視口被均分為100vw）
xmin	相對于視口的高度或寬度中較小的那個（小的被均分為100vmin）
vmax	相對于視口的高度或寬度中較大的那個（大的被均分為100vmax）
–	–
絕對單位	單位長度的含義
pt	點(point)
pc	派卡(pica)，=我國新四號鉛字的尺寸
in	英寸(inch)
cm	厘米(centimeter)
mm	mm(millimeter)

時間

用途：屬性transition(變化時間)
用法：數字+單位：200ms
使用頻率：都常用

單位	含義
s	秒
ms	毫秒

角度

用途：
用法：數字+單位：120deg
使用頻率：第一個deg最常用

單位
deg	角度(degrees) ，一個圓 360°
grad	梯度(gradians)，一個圓 400梯度
rad	弧度(radians)，一個圓 PI
turn	轉、圈(turns)

顏色

用途：color，background(-color)
用法：值
使用頻率：2和-1最為常用，-1代表最后一個

值	描述
white	白色
具體英文單詞↑	代表這個單詞指代的顏色
rgb(r,g,b)	RGB值，rgb分別代表紅綠藍，[0,255]
rgba(r,g,b,a)	見上↑.a代表透明度 [0,1]
rgb(r%,g%,b%)	RGB值(255*x%)，三個值[0,100] ,最后即為0%-100%
#rrggbb	RGB值，每個值用兩位 16進制數表示（大小寫不敏感），最后值在0-255
hsl(h,s,l)	hsl分別代表色相(hue,[0,360])/飽和度(saturation,[0%,100%])/亮度(lightness,[0%,100%])
hsla(h,s,l,a)	↑ a代表透明度

字符串

只在屬性font-family中用到，定義字體類型

{font-family="微軟雅黑"}

也可以不用雙引號

{font-family=微軟雅黑}

屬性概要

長度表示一欄：

1：值完全用長度表示，下面不再具體介紹
其他值的類型：值不能用長度表示，能用其他的較規范的表示表示
0：值不能用長度表示，也無法用其他規范的值表示
＞1：有多個值，都用長度表示（同時出現多個值：長度可變）

屬性	含義	長度表示
width	寬度	1
height	高度	1
position	定位方式	字符
display	顯示方式	字符
float	浮動方式	字符
clear	清除部分浮動	字符
margin	外邊距	1-4
border	邊框	1-4
padding	內邊距	1-4
text-align	字體左右的對齊方式	字符
text-indent	文字之前空多少長	1
background	背景，包括背景圖，背景色，是否重復	0
line-heignt	行高	1
font-family	字體	字符
font-size	字的大小	1
font-weight	字的粗細	1
color	字的顏色	顏色
opacity	透明度0-1	0
z-index	離屏幕遠近，越大越顯示在上面	0
transition	狀態變化的時間	時間
animation	動畫	0
overflow	溢出	字符

position 定位

值	含義
absolute	絕對定位，相對于最近的定位過的父元素偏移
relative	相對定位，在文件流中，相對自生原本在的位置偏移
fixed	絕對定位，相對視口偏移
這里提到了偏移，它相對于定位的位置進行偏移
relative在文件流中的意思是，在這個頁面中單獨占據一塊空間，原始位置不會與在文件流中的同級元素重疊

display 顯示

block，none，grid較為常用

值	含義
block	塊狀元素
none	不顯示
flex	flex布局
grid	grid布局
inline	行內元素
inline-block	行內塊元素

grid和flex可以去網上找資料學習

grid布局

著重介紹一下grid布局
含義：可以方便地進行網格狀的布局，而后可以隨意組合，分配給子元素
有許多屬性和它配合使用（前提：display:grid，至少與前3個一起使用，前4個可以更美觀地表示）

屬性	含義	用法與解釋
grid-template	融合了下面上半部分的所有項	較為復雜，不講
grid-template-rows	每行的寬度（單獨設置）	多個長度/auto/xfr 表示，有幾行寫幾個(空格分開) 可以用repeat(s,值)代替s個連續的重復值 fr代表比例，會將剩下的長度按比例分配
grid-template-colums	每列的寬度（單獨設置）	↑ 有幾列寫幾個
grid-template-areas	給每個格子命名，名字一樣則合并	每行一對雙引號，（適當使用回車）單個雙引號內每列分別有一個代表這個區域的名字。 “aa b” “aa b” “c c”，代表3行2列： aa占據上面兩行的最左邊一列； b占據上面兩行的最右邊一列； c占據最后一行的兩列
grid-gap	行間距和列間距（統一設置）	行間距列間距
grid-row-gap	行間距（統一設置）	長度
grid-colum-gap	列間距（統一設置）	長度
place-items	內容的左右和上下位置情況	↓ start/end/center/stretch
align-items	內容的左右位置情況	↑ 開頭/末尾/中間/拉伸以盛滿
justify-items	內容的上下位置情況	↑ 對align來說，左是開頭，右是末尾
place-content	整個表格左右和上下位置情況	↑ 對juestify來說，上是開頭，下是末尾
align-content	整個表格的左右位置情況	↑有兩個值的(place)，用空格分開
justify-content	整個表格的上下位置情況	↑
–	–	以下都是子元素獲得父元素分配的某個空間的語句
grid-template-area	用指定的名字獲取父類給這個名字的空間	字符串
–	–	以下用起始/末尾的(間隔,即gap) 行/列獲得空間有多個值的用/分隔第1個間隔行在整個表格的最上方，列：左即，有n行內容行，就有n+1行間隔行默認名為從1開始的數字，行列的下標分開計算或使用上面areas里定義的名字+start/end 如 aa-start 表示區域a的起始行上：起始行左：起始列下：末尾行右：末尾列
grid-area	起始/末尾的行/列	起始行/起始列/末尾行/末尾列
grid-row	起始/末尾的行	起始行/末尾行
grid-row-start	起始行	起始行
grid-row-end	末尾行	末尾列
grid-column	起始/末尾的列	起始列/末尾列
grid-column-start	起始列	起始列
grid-column-end	末尾列	末尾列

flex布局

著重介紹一下flex布局
含義：可以方便地進行彈性布局，尤其是垂直對齊的問題
有許多屬性和它配合使用（前提：display:flex）
| 屬性 | 含義
|–|–|–|
|flex-direction| 決定主軸的方向
| justify-content | 子元素在主軸方向上的分布方式
| align-items | 子元素在副軸方向上的分布方式

flex-direction的值	含義
row	從上到下
row-reserve	從下到上
column	從左到右
column-reserve	從右到左

justify-content的值	含義
flex-start	主軸起始除處
flex-end	主軸末尾處
center	主軸中間
space-around	元素兩邊留空隙，每個元素各占一份，不會像magin一樣重合
space-between	元素之間留空隙，這意味著最邊上沒有空隙

align-items的值	含義
flex-start	副軸起始除處
flex-end	副軸末尾處
center	副軸中間
stretch	全部占滿

inline-block布局

overflow 溢出處理

不設置這個屬性，它可能會在區域之外顯示

值	含義
auto	超出長度時，可滾動
hidden	隱藏
其他	-

margin/border/padding 外邊距/邊框/內邊距

分別代表外邊距/邊框/內邊距
他們都可以用4個長度值表示，分別代表上右下左的長度

也可以有auto值，即自動，它會使兩邊相等
如 margin:0 auto;
它的左右兩邊是相等的

后面的值可以省略，但至少有第一個值

第4個值（左）省略，則=第2個值（右）
第3個值（下）省略，則=第1個值（上）
第2個值（右）省略，則=第1個值（上）

他們的四個值可以單獨設置，以margin為例子
margin-top，margin-right，margin-bottom，margin-left

float/text-align 浮動/左右對齊

值	含義（浮動方向/對齊方向）
left	左
center	中
right	右

clear 清除浮動

先清除上一個區域來的浮動（float），而后可以設置自己的浮動

值	清除浮動
left	左
right	右
both	左右

background 背景

屬性自由書寫,其中的屬性可以缺少一些或調換順序

下面是兩個較頻繁使用的格式

背景色: background: background-color
背景圖片: background: url(“”) background-repeat background-position;

有多個子屬性

子屬性	含義	值
background-image	圖片鏈接	url(“路徑”)
background-repeat	是否重復	repeat/no-repeat
background-position	背景圖的起始位置
background-position-x	離左邊距離	長度/x%
background-position-y	離上邊距離	長度/y%
background-color	背景色	顏色
background-size	背景大小	長度長度
background-attachment	是否隨著滾動而滾動	scroll(默認)/fixed(不會)/local(會)

javascript

<script type="text/javascript">
	變量及賦值
	計算語句
	函數
	事件
</script>

一定有事件，因為沒有事件，js就沒有什么意義

變量

所有類型的變量都用 var 變量名 = 值; 來定義

數據類型

數據類型	含義	值
Undefined	定義但未賦值	undefined
Null	未定義，由Undefined衍生而來，值==undef	null
Boolean	布爾類型	true false
Number	數字，正數，浮點數等，可以用純數字，科學計數法、進制數等表示	數字
String	字符串，用單引號或雙引號都可	字符串
Object	項目，上面有屬性，如{name:“myname”,age:18}
Array	數組可以混雜其他類型，如[1,“myname”]
DOM對象	一個具體的標簽，如window, document,element

可用數據類型	數據類型相關函數	目的類型	含義與用法
Boolean Number	toString()	String	變換成字符串 str=from.toString() Number的()可以放十進制表示的進制數
-	下面兩個 String轉Number 的函數出現異常則返回前面的正常的值	-	下面的都把源操作數放()里
String	praseInt()	整數(Number)	字符串變整數
String	praseFloat()	浮點數(Number)	字符串變浮點數
-	下面的是三種強制類型轉換	-
所有	Boolean()	Boolean	空字符串 0 undefined null 值為false，其他的true
所有	Number()	Number	匹配整個數，fasle null為0，true為1 undefined為NaN（非數，not a number）
所有	String()	String	強制類型轉換，變成字符串
	isNaN	判斷是不是數

賦值及計算語句

運算符

賦值符	含義
=	右邊賦給左邊
–	–
運算符
+	加
-	減
*	乘
/	除
%	余
++	自增，放在數的前/后不一樣
? :	三目運算符
( )	提高優先級，左括號，右括號
-	-
判斷符
>	大于
>=	大于等于
<	小于
<=	小于等于
==	值相等
!=	值不相等
===	值和類型都相等
!==	值和類型都不相等
-	-
運算賦值符	左邊的值加上右邊的值，再賦值給左邊 a+=b相當于a=a+b
+=
-=
*=
\=
%=

基本計算語句

語句	使用
定義及賦值	var i=3;也可以單獨定義/賦值，定義統一用var
選擇(分支)	if-else或switch–case-default-break
循環	for或while或do-while
跳出	break或continue
返回	return

事件

一個事件只能綁定一個函數，如果一個事件要做多件事情，都放到一個函數里
表達形式：(被觸發)對象.事件屬性=…

不只是a有事件屬性，其他的標簽都有事件屬性
事件屬性有很多，根據可以觸發者（比如鼠標，鍵盤，窗口）的不同分類
只列舉常用的
鼠標觸發：onclick（點擊），onmouseover（鼠標再其上，和選擇器hover有點像，但有不同）
窗口觸發（被觸發對象必須是window）：onload（窗口完成后）

動態綁定
寫在js樣式里，被包含在其他的事件的函數中綁定
對象需要給出
參照函數的三種綁定方式
靜態綁定
直接在標簽里綁定，這時候對象就是自己這個標簽
參照函數的第2種
比如 <p onclick="函數名(參數)">

函數(function)

函數里的組成與js的組成成分一致

變量及賦值
計算語句
函數
事件

函數定義的3種方式

function 函數名(參數){函數體}
var 函數名=function (參數){函數體}
function (){函數體}

參數可以有多個，定義時不需要聲明類型，只需要參數名即可

第2種定義方式可以讓定義在標簽內的事件連結到這個函數

事件綁定

前兩種定義方式

無參：事件=函數名;

不需要 (參數)

有參：事件=function(){ 函數名(參數); }

需要用到匿名函數
直接用事件=函數名(參數); 的結果
是直接觸發事件

第3種定義方式一般直接賦給內部的事件，即事件=function (){函數體}

JavaScript中，函數調用和上下文是理解語言核心機制的關鍵。本文將深入探討函數調用、this關鍵字以及apply方法的使用。

首先，讓我們回顧一下函數調用的基礎。在JavaScript中，函數可以通過多種方式調用，包括常見的函數調用、方法調用和構造函數調用。例如，定義了一個簡單的函數foo：

function foo(a, b, c) {

console.log("foo功能...");

console.log(a, b, c);

return 123;

}

接下來，我們使用對象字面量創建了一個對象p1，其中包含了屬性name和age，以及兩個方法eat和run：

var p1 = { name: "yuan",

age: 22,

eat: function () {

console.log(this.name + " is eating");

run: foo, // 這里將函數foo作為方法賦值給run屬性

};

在這個例子中，p1對象的run屬性指向了之前定義的foo函數。然后，我們調用了eat和run方法：

p1.eat();

p1.run(1, 2, 3);

這時，我們深入研究了函數內部的this關鍵字。在對象方法中，this通常指向調用該方法的對象。但是，在JavaScript中，我們可以使用apply方法動態設置函數執行時的上下文。

var _foo = foo;

foo = function () {

console.log("截斷開始...");

_foo.apply(this, arguments);

console.log("截斷結束...");

};

在這個例子中，foo函數被重新定義，使用apply方法在函數執行前后輸出信息。此時，this在_foo.apply(this, arguments)中指向了foo函數本身。

最后，我們遇到了一個關于eval函數的問題。在JavaScript中，eval允許執行傳入的字符串作為JavaScript代碼。然而，eval的使用需要謹慎，因為它可能引起安全性和性能方面的問題。

eval('console.log("hello")');

var _eval = eval;

eval = function (src) {

console.log("eval截斷開始...");

_eval(src);

console.log("eval截斷結束...");

};

eval("console.log('hello....')");

在這個例子中，我們重新定義了eval函數，通過截斷的方式在函數執行前后輸出信息。

通過這一系列例子，我們深入了解了JavaScript中函數調用、上下文和一些關鍵字的使用。函數是JavaScript中的核心概念之一，理解函數的調用方式和上下文有助于更有效地使用這門語言。

大有學問#

所謂APA格式是指美國心理學會 (American Psychological Association) 所出版的出版手冊 (PublicationManual) 中，有關投稿該協會旗下所屬二十九種期刊時必須遵守的規定而言。學術界通稱為APA格式。APA引證格式由兩部分組成：論文中的文獻引用與論文后面的參考文獻。必須注意的是，參考文獻部份與文獻引用部份息息相關，引用過的文獻必須出現在參考文獻中，而且參考文獻中的每一項文獻都被引用過，兩者的作者姓氏以及發表年代也必須完全一致。

一、文獻引用（Citation in Text）

文獻引用的目的，一方面是幫助讀者進一步直接查閱有關文獻的內容，另一方面是尊重與保障他人的知識產權。文獻引用的方式主要有兩種，一種是在行文當中直接引用作者姓氏，如：Widdowson (1978)has claimed that native speakers can better understand ungrammatical utteranceswith accurate vocabulary than those with accurate grammar and inaccuratevocabulary. 另一種是直接引用研究的結果或論點，如：Communicative methods have the common goalsof bringing language learners into closer contact with the target language(Stern, 1981). APA文獻引用的格式主要有下列幾種，分述如下：

(一)作者為一個人時

例1：Stahl(1983) has demonstrated that an improvement in reading comprehension can beattributed to an increase in vocabulary knowledge. [注：若行文中提到作者姓氏，用此例所示格式引用]

例2：Duringthe period of Grammar Translation methodology, bilingual dictionaries becamecommon as reference tools (Kelly, 1969). [注：行文中未提到作者姓氏，用此例所示格式引用；句子本身的標點符號位于括號的后面。]

例3：…,the ability to use etymology was respected as “one way of discovering truth”(Kelly, 1969, p. 30). [注：若行文中有直接引語，須標明引語在原文中的頁碼。如果直接引語跨越兩頁（或以上），需用“pp.”；如“(Kelly, 1969, pp. 30-31)”]

如果直接引語超過40個詞，所引用的材料須單列一段，左右兩邊內縮三到五個字符，不用雙引號；用來標注引證的圓括號位于引證材料本身的標點符號后面。

例4：Itfollows, then, that vocabulary, as a bearer of meaning, is considered by theNatural Approach to be very important to the language acquisition process:

Acquisitiondepends crucially on the input being comprehensible. And comprehensibility isdependent directly on the ability to recognize the meaning of key elements inthe utterance. Thus, acquisition will not take place without comprehension ofvocabulary. (Krashen & Terrell, 1983, p.155) [注：此例的前兩行是論文作者的敘述，其余是直接引語。因超過40個詞，用此格式。]

(二)作者為兩人或兩人以上時

1.作者為兩人時，兩人的姓氏全列。

例5：Ulijin andStrother (1990) claim that “while a complete conceptual and lexical analysismay be necessary for reading comprehension, a thorough syntactic analysis isnot” (p. 38). [注：頁碼標記在直接引語的后面。請比較此例與例3的不同。此次論文寫作不采納：Ulijin and Strother (1990, p.38) claim that “while …”的引證格式。]

例6：Readerstend to disregard information that seems unimportant, add information that‘should’ be there, and focus their attention on what, in their opinion, isessential (Steffensen & Joag-Dev, 1984). [注：行文中兩人的姓氏用“and”連接（例5），在圓括號內用“&” 連接（此例）。]

2.作者為三至五人時，第一次所有作者均列出，第二次以后只寫出第一位作者，并加“etal.”。

例7：Accordingto Ostny, Vandecasteele, Deville, and Kelly (1987), indispensable conditionsfor reading in L2 are understanding the text’s words and the knowledge of itssubject matter. [注：行文中提到作者，按此例引證。]

例8：Indispensableconditions for reading in L2 are understanding the text’s words and theknowledge of its subject matter (Ostny, Vandecasteele, Deville, & Kelly,1987). [注：行文中沒有提到作者，按此例引證。]

例9：Accordingto Ostny et al. (1987), indispensable conditions for reading in L2 areunderstanding the text’s words and the knowledge of its subject matter. [注：第二次引證同一著作，按此例格式引證。]

3.作者為六人以上時，僅列第一位作者并加“et al.”，但在參考文獻中要列出所有姓名。

(三)作者為組織、團體、或單位時

1.易產生混淆的單位、每次均用全名。

2.在不產生誤會的情況下，第二次以后可用縮寫，但在參考文獻中一律要寫出全名。

例10：Proficiencylevel is based on the ACTEF scale developed by the American Council on theTeaching of Foreign Languages (1980). [注：此例中的“the American Council on the Teaching ofForeign Languages”為一團體。]

(四)未標明作者（如法令、報紙社論）時

1.未標明作者的著作，使用著作名的前二、三個詞匯（忽略冠詞）作為引證標注。每個詞匯都需大寫，且用斜體。

例11： Thereare certain exceptions in the case of comprehension tests, including the Edinburgh Reading Tests (1973). [注：在此例中，書名“Edinburgh ReadingTests”作為引證標注。]

2、未標明作者的文章，把引用文章的篇名或章名當作作者并加雙引號。

例12：on free care (“Study Finds,” 1982) [注：在此例中，章名“Study Finds”作為作者用做引證標注。]

二、參考文獻（References）

參考文獻中的條目先英文后中文；英文部分按作者姓氏的英文字母順序排列；中文部分按作者姓氏的拼音順序排列。參考文獻中不要用“1、2、3 ...”一類的序號標記。下面是學術論文中各種常用的參考文獻的撰寫格式。

（一）書籍

1．未標明作者或編者時

Merriam-Webster’s collegiatedictionary(10th ed.). (1993). Springfield, MA: Merriam Webster. [注：書名用斜體，只有第一個詞的首字母大寫，其它（專有名詞除外）均為小寫；下同。“Springfield, MA”為出版地點，Merriam Webster為出版商。]

2．作者為一人時

Baddeley, A. D. (1999). Essentialsof human memory. Hove, England: Psychology Press. [注：作者的姓與名須倒置，即：姓在前，名在后。]

3．作者為兩人時

Beck, C. A. J., & Sales, B. D. (2001). Family mediation: Facts, myths, and future prospects. Washington,DC: American Psychological Association. [注：兩個作者的姓與名都倒置，二個作者用“&”連接。書名中冒號后的第一個詞“Facts”首字母大寫，這是因為副標題的第一個詞的首字母須大寫。如果條目跨行，第一行頂格，第二行內縮三至五個字符，如此例所示。]

4．作者為一團體或組織

Australian Bureau of Statistics. (1991). Estimated resident population by age and sex in statistical localareas, New South Wales, June 1990

(No. 3209.1). Canberra,Australian Capital Territory: Author.

（二）文集

Gibbs, J. T., & Huang, L. N. (Eds.). (1991). Children of color: Psychologicalinterventions with minority youth. San Francisco: Jossey-Bass. [注：在文集編者姓名后加“(Eds.)”。]

文集中的文章

Massaro, D. (1992). Broadening the domain of the fuzzy logical modelof perception. In H. L. Pick Jr., P. van den Broek, & D. C. Knill (Eds.), Cognition: Conceptual and methodologicalissues (pp. 51-84). Washington, DC: American Psychological Association. [注；文章名為正體，文集名用斜體；在 “In”后面，編者姓與名不倒置；須標明文章在文集中的起止頁碼。]

（三）百科全書或辭書

1．百科全書或詞典

Sadie, S.

(Eds.). (1980). The new Grove dictionary of music andmusicians (6th ed., Vols. 1-20). London: Macmillan.

2．百科全書中的文章

Bergman,

P. G. (1993). Relativity. In The new encyclopedia Britannica (Vol.26, pp. 501- 508). Chicago: Encyclopedia Britannica. [注；文章名為正體，百科全書名用斜體，只有第一個詞匯的首字母大寫，其它小寫；“Britannica”是專有名詞，所以仍然大寫。注意 “In”的使用。]

（四）期刊、雜志、新聞文獻

1．作者為一人的期刊文章

Mellers, B. A. (2000). Choice and the relative pleasure ofconsequences. Psychological Bulletin, 126,910-924. [注；文章名為正體。期刊名為斜體，且所有詞匯的首字母均為大寫。須標明文章在期刊中的起止頁碼。]

2．作者為兩人的期刊文章

Klimoski, R., & Palmer, S. (1993). TheADA and the hiring process in organizations. Consulting

Psychology Journal: Practice and Research, 45(2), 10-36.

3．作者為兩人以上的期刊文章

Saywitz, K. J., Mannarion, A. P., Berliner,L., & Cohen, J. A. (2000). Treatment for sexually abused children andadolescents. American Psychologist,

55, 1040-1049.

4．雜志上的文章

Kandel, E. R., & Squire, L. R. (2000, November 10).Neuroscience: Breaking down scientific barriers to the study of brain and mind.Science, 290,

1113-1120.

5．無標明作者的報刊上的文章

New drug appears to sharply cut risk of

death from heart failure.(1993, July 15). The Washington Post,p. A12.[注；文章名為正體；報刊名為斜體，且所有詞匯的首字母均為大寫（如果不是第一個詞，冠詞、介詞可小寫）。“A12”中的“A”表示版別。]

6．作者為一人的報刊上的文章

Schwartz, J. (1993, September 30).

Obesity affects economic,social status. The Washington Post,pp. A1, A4.

（五）電子媒體資料

1．紙質期刊、雜志、新聞報刊上的文章的電子版本

VandenBos, G., Knapp, S.,

& Doe, J. (2001). Role ofreference elements in the selection of resources by psychology undergraduates[Electronic version]. Journal ofBibliographic Research, 5, 117-123. [注意“[Electronic version]”的使用。]

2．網頁上的文章

Fredrickson, B. L. (2000, March 7). Cultivating positive emotions tooptimize health and well-being. Prevention& Treatment, 3, Article 0001a. Retrieved November 20, 2005, fromhttp://journals.apa.org/prevention/volume3/pre0030001a.html [注意“Retrieved”的使用。]

3．在線百科全書上的文章

Bergman, P. G. & Editors of Encyclopedia Britannica Online.(1994-1999). Relativity. EncyclopediaBritannica Online. Retrieved August 4, 1999, from Encyclopedia BritannicaOnline on the World Wide Web:http://search.eb.com/bol/topic?eu=117376&sctn=1

4．專業網站

American Psychological Association. (1999, June 1). Electronicpreference formats recommended by the American Psychological Association.Retrieved July 18, 1999, from the World Wide Web:http://www.apa.org/journals/webref.html

（六）視聽媒體資料

1．電影

Scorsese, M. (Producer), & Lonergan, K. (Writer/Director).(2000). You can count on me [MotionPicture]. United States: Paramount Pictures.

2．電視節目

Crystal, L. (Executive Producer). (1993, October 11). The MacNeil/Lehrer news hour [Televisionbroadcast]. New York and Washington, DC: Public Broadcasting Service.

■ 中文文獻的引用方法與格式

建議參考《外語教學與研究》格式

一、文獻引用（Citation in Text）

1、在用英文撰寫的畢業論文中，對中文資料的引用可視具體情況套用 APA格式。下列四種引證方法都是正確的：

（1）Yu(1988) did an experiment in China and found that there was no relationshipbetween the improvement of speed reading ability and the students’ sexes orages. [注：行文中提到作者姓，須用拼音。]

（2）Anexperiment conducted in China shows that no relationship exists between theimprovement of speed reading ability and the students’ sexes or ages (Yu,1988). [注：圓括號內的作者姓可用拼音。]

（3）Anexperiment conducted in China shows that no relationship exists between theimprovement of speed reading ability and the students’ sexes or ages(喻,1988). [注：圓括號內的作者姓可用中文。]

（4）Anexperiment conducted in China shows that no relationship exists between theimprovement of speed reading ability and the s students’ sexes or ages (喻愛菊, 1988). [注：圓括號內可用作者的中文全名。]

以上四例的引證與參考文獻中的倒二條對應。

2、在用中文撰寫的開題報告中，下面的引證方法都是正確的。如有其它問題，可查閱《外語教學與研究》。

（1）用Halliday &Hasan（1989）的話說，這些句子不能粘合在一起。

（2） Leather（1983：204）認為“音段音位層面的遷移是受本身制約的，而超音音位層面的遷移具有聚集性，因此更嚴重”。

（3）研究表明，可控因素通常包括動機、觀念和策略（Wen 1993；文秋芳、王海嘯1996）。

二、參考文獻（References）

中文參考文獻的撰寫采用《外語教學與研究》所使用的格式。

劉辰誕，1999，《教學篇章語言學》[M]。上海：上海外語教育出版社。

[注：此例為一個作者的專著格式。“[M]”為專著標號。]

黃甫全、王本陸，1998，《現代教學論機艙教程》[M]。北京：教育科學出版社。

[注：此例為兩個作者的專著格式。]

王初明（編著），1990，《應用心理語言學——外語學習心理研究》[M]。長沙：湖南教育出版社。

[注：此例為文集格式。]

方琰，1998，語境、語域、語類[A]，載余渭深等編《語言的功能——系統、語用和認知》[C]，第17-26頁，重慶大學出版社。

[注：此例為論文集內文章的格式。“[C]”為專著標號；“[A]”為論文集內文章的標號。如果條目跨行，第一行頂格，第二行內縮二個詞，如此例所示。]

夏延等，1988，《英漢信息技術綜合詞典》[M]。北京：中國經濟出版社。

[注：此例為多名作者編寫的詞典格式。]

亞里士多德，《修辭學》[M]，羅念生譯。北京：三聯書店。

[注：此例為翻譯作品的格式。]

尹世超，1988，標題語言的語義特點[R]，1998現代漢語語法學國際學術會議論文。

[注：此例為學術會議論文的格式。]

喻愛菊，1988，英語快速閱讀試驗報告[J]，《外語教學與研究》第3期。

[注：此例為期刊論文的格式。]

何曉煒，1999，雙賓語結構和與格結構的關系分析[J],《外國語》第2期。