下面是自己學html+div+css+js時的學習筆記，給大家分享以下，互相學習。大二時候寒假在家無聊的時候想做點事，總結了一下web前端基礎的東西，下面的每個字都是自己手敲的。
1、<html>和</html> 标簽限定了文檔的開始和結束點。
屬性：
(1) dir: 文本的顯示方向，預設是從左向右
(2) lang: 表示整個文檔中所使用的語言，en--英文，zh--中文
(3) version：定義創作文檔的html的标準版本
2、<head></head>用于封裝位于文檔頭部的其他标簽
(1) dir:文本的顯示方向
(2) lang:語言資訊
(3) profile:提供了與目前檔案相關聯的文檔資料的url
可放在<head>标簽中的标簽為
(1) <base>:标注目前文檔的url的全稱
屬性：
href：指定文檔的基礎url位址（<body>中的相對位址都是以此基位址為基礎）
target：定義打開頁面的視窗
屬性值：
_parent:在上一級視窗中打開
_blank:在新一視窗中打開
_self:在本視窗中打開
_top:在浏覽器的整個視窗中打開
(2) <basefont>：設定基準的字型，字号和顔色
face:設定字型（如黑體，楷體等）
size:設定大小（屬性值從1——7，從小到大）
color;字型顔色（值為十六進制顔色）
(3) <title>：設定顯示在浏覽器左上方的标題内容
dir:文本的顯示方向
lang:語言資訊
(4) <meta>：有關文檔本身的元素資訊
http-equiv: 生成http标題域，取值與content的屬性值相同
屬性值：
refresh 為自動重新整理，在content裡設定重新整理時間，content裡也可以跟上重新整理的url，實作頁面跳轉；
content-type 在content裡用charset設定内碼語系 如charset=gb2312;
expires 定義網頁有效期，在content裡的格式為星期，日 月 年 時 分 秒 gmt，用英文和數字
page-enter 進入網頁時的效果
page-exit 退出網頁時的效果
在content中對應的值為：
0：盒狀收縮 1：盒狀展開 2：圓形收縮 3：圓形展開
4：向上擦除 5：向下擦除 6：向左擦除 7：向右擦除
8：垂直百葉窗 9：水準百葉窗 10：橫向棋盤式 11：縱向棋盤式
12：溶解 13：左右向中部收縮 14：中部向左右展開 15：上下向總中部收縮
16：中部向上下展開 17：梯狀左下展開 18：梯狀左上展開 19：梯狀右下展開
20：梯狀右上展開 21：随機水準線 22：随機垂直線 23：随機
name：如果中繼資料是以關鍵字/取值出現的話，那麼name的值就是其關鍵字
屬性值：
keywords 在content裡定義關鍵字；
discription 為定意描述，在content裡定義描述内容；
author 在content裡描述作者；
content: 關鍵字/取值的内容
(5) <style>：設定有關css層疊樣式表的内容
(6) <link>：設定外部檔案的連結
(7) <script>：設定檔案腳本的内容
3、<body></body>界定了文檔的主題
(1)、text: 頁面文字的顔色
(2)、bgcolor: 頁面背景的顔色（用十六進制的顔色表示）
(3)、background: 頁面的背景圖像（所需的是圖檔的url）
(4)、bgproperties: 頁面的背景圖檔是否固定(其隻有一個值fixed，設為fixed後圖像不會随着滾動條的滾動而動)
(5)、link: 頁面預設的連結顔色
(6)、alink: 滑鼠正在單擊時的連結顔色
(7)、vlink: 通路過後的連結顔色
上面三個控制的是标簽<a></a>中的顔色
(8)、topmargin: 頁面的上邊距
(9)、leftmargin: 頁面的左邊距
4、&nbsp;定義空格 <!--被注釋掉的内容-->
5、文字标記
(1)、<hn>（n=1~6）标記标題字
dir：文字方向
lang：語言資訊
align：對齊方式
left:左對齊（預設）
right：右對齊
center：居中
class：用一個名稱來标記标題，标記名稱指向在外部定義的樣式表
id：為段落設定一個标記，将來可以在一個超連結中明确的引用這個标記，以便作為樣式表的選擇器
style：建立标題内容的内聯樣式
title：給标題加上一個說明性的文字
(2)、<font>标記普通字
face:字型 size: 字号 color:顔色
(3)、<b>或<strong> 粗體
(4)、<i>,<em>,<cite> 斜體
(5)、<sup> 上标
(6)、<sub> 下标
(7)、<big> 大字号
(8)、<small> 小字号
(9)、<u> 下劃線
(10)、<s> 删除線
(11)、<address> 顯示位址如email
6、段落标記
(1)、<p> 表示一個段落的開始
屬性：dir lang align class id style title
(2)、<br> 換行 <nobr>
屬性：class id style title
(3)、<div>分塊文字
屬性：dir lang align class id style title nowrap（強制不換行）
(4)、<span> 行内樣式定義
屬性： dir lang align class id style title
(5)、<center> 水準居中顯示
屬性： dir lang class id style title
(6)、<blockquote> 塊引用
屬性： dir lang class id style title
7、下劃線
<hr> 插入水準分割線
屬性：dir lang class id style align size noshade width color
8、清單
(1)、 <ul>無序清單,用<li>來羅列項目
屬性：dir lang class id style title compact（緊湊無需清單）type(項目符号類型)
type的屬性值：disc：實心原點 circle：空心原點 square：實心方形
(2)、<ol>定義一個有序清單
屬性：dir lang class id style title compact start(數字起始值)
type的屬性值：1，a，a，i，|
(3)、目錄清單<dir>,無序清單的一種特殊形式
(4)、定義清單<dl>
基本用法： <dl>
<dt>名詞</dt> <dd>解釋</dd>
</dl>
屬性：dir lang class id style title compact
(5)、菜單清單<menu>,用于表示簡短的清單
屬性：dir lang class id style title
9、插入圖檔
<img> 插入圖檔标簽
src：圖像的源檔案路徑 alt：文字提示（圖像不顯示時） width、hight：寬度、高度 border：邊框
vspace：垂直間距 hspace：水準間距 dynsrc:設定avi檔案的播放 loop：設定avi播放次數
loopdelay:設定avi播放延遲 start：設定avi檔案的播放方 lowsrc：設定低分辨率圖檔 usemap：映像地圖
dir lang class id align style title
align的屬性值極其說明：
top：文字的中線在圖檔的上方 middle：文字的中線位于圖檔的中部
bottom：文字的中線位于圖檔的底部 left：圖檔在文字左側
right:圖檔在文字的右側 absbottom:文字的底線位于圖檔的底部
absmiddle：文字的底線位于圖檔的中部 baseline：英文文字基準線對齊
texttop：英文文字上邊線對齊
10、插入超連結
(1)、标簽<a></a>為超連結标簽
href：指定連結位址 name:給連結命名 target:指定連結打開視窗 accesskey：連結熱鍵
dir lang align class id style title charset rel：指定從原文檔到目标文檔的關系
rev:指定從目标文檔到源文檔的關系 type tabindex:對新視窗中的對象重新排序
url格式：
gopher://通路gopher伺服器 mailto://啟動郵件（href=”mailto://[email protected]? subject=給我來信”）
(2)、書簽連結，試用于頁面太長時，避免翻頁，格式如下
<a name=”name”> 文字 </a> <a href=”#name”> 文字連結 </a>
(3)、空連結： <a href=”#”> 連結 </a>
(4)、腳本連結：<a href = “javascript：.....”> 文字連結 </a>
(5)、制作圖像映射：在同一圖像上嵌入不同的連結，建立圖像映射的方式是通過<img>标簽的usemap屬性再結合<map> 以及<area>标簽來實作的，<a> 或<area>标簽包含在<map>标簽内
<map>的屬性：
name 給連結命名 dir lang id class style title
<area>的屬性:
href alt accesskey target dir lang id class style title tabindex
shape(圖像映射區域的形狀) coords(圖像對光标敏感區域的坐标)
shape的屬性值：
rect 矩形區域 circle 橢圓形區域 poly 多邊形區域
11、插入多媒體
(1)、插入聲音标簽<bgsound>
屬性： src (聲音檔案路徑) loop 循環次數
(2)、<embed>标簽可以在網頁中加入mp3音樂，電影，swf動畫等多媒體檔案
屬性: src loop autostart width hight hidden(是否隐藏内嵌播放器) dir lang class id
style align title type(嵌入多媒體類型) hidden 和 autostart 的屬性值有true和no
當嵌入flash動畫時還有以下屬性：
quality 動畫的播放品質 puginspage 播放插件所在位置 wmode 動畫播放時的視窗模式
(3)、制作滾動字幕标簽<marquee></marquee>
屬性： align behavior(滾動方式) bgcolor class direction(滾動方向) width hight hspace vspace
style loop scrollamount(滾動速度) scrolldelay（滾動延遲）
direction的屬性值：up down left right
behavior 的屬性值: scroll（循環往複《預設》） slide（隻走一次滾動） alternate（交替進行滾動）
scrollamount後跟數字越小越慢，scrolldelay後跟毫秒，vspace和hspace 定義字幕與周圍文字的距離
12、其他嵌入
(1)、<object>标簽用于往文檔中嵌入對象
屬性：classid（指定包含對象的位置） archive（url清單） border codebase（提供一個可選的插件url）hight
width data(指定需要對象處理的資料檔案) hspace vspace name type tabindex dir lang align
class id style title
(2)、<applet>标簽用來插入applet小程式
屬性: code (指定浏覽器運作的java類小程式的名稱) codebase hight width hspace
vspace name type class alt id title style align
(3)、<param>标簽為把包含他的<object>或<applet>提供參數
屬性：type name id value
13、表單：
表單由一個或多個文本輸入框、可單擊的按鈕、多選框、下拉菜單和圖像按鈕等組成，所有的這些都放在<form>中
(1)、<form>
屬性： dir lang align class id style title name
method(定義表單結果從浏覽器傳輸到伺服器的方法一般有post 和get 兩種方法)
action(用來定義表單處理程式（asp,cgi等）的位置（相對或絕對）)
enctype（設定表單編碼方式） target(表單傳回顯示方式)
enctype的屬性值： text/plain(以純文字形式傳送)
application/x-www-urlencoded(預設編碼方式)
multipart/form-data 使用mine 編碼
(2)、表單輸入标簽<input>
屬性: dir lang class id alt name align style title type
accesskey value size src accept（檔案上傳的mime表列） checked（已選中）
disabled（禁止某個元素輸入）maxlength(最大字元數)
type的屬性值：text 文字域 password密碼域 file 檔案域 checkbox複選框 radio單選框 button 普通按鈕
submit 送出按鈕 reset 重置按鈕 hidden隐藏域 image 圖像送出按鈕
(3)、多行文字域<textarea>
屬性：dir lang class id style title name accesskey disabled tabindex rows（行數）
cols（列數） wrap（多行文字域的換行） wrap的屬性值：virtual 虛拟換行 physical 實體換行 off 不換行
(4)、<select>下拉菜單和下拉清單标簽，把标記條目放在<option>标簽中
屬性：dir lang class id style title name
disabled（禁用某個清單） size tabindex multiple（清單中的多選項目）
14、表格
(1)、定義表格<table>
屬性：dir lang class id style title name bgcolor background bordercolor
bordercolorlight bordercolordark border height width cellpadding(單元格邊距) cellspacing(單元格間距)
nowrap frame(表格邊框的可見方式) rules(行列之間邊的可見方式) summary(整個表格的概要描述)
frame的屬性值：
above 顯示上邊框 below顯示下邊框 border 邊框全顯示 hside顯示上下邊框
vside顯示左右邊框 lhs顯示右邊框 rhs顯示左邊框 void 顯示
rules的屬性值：
all 顯示所有内部邊框 cols僅顯示列邊框 groups顯示位于行列間的邊框 none不顯示内部邊框 rows僅顯示行邊框
(2)、定義行<tr>
屬性：dir lang class id style title bgcolor background bordercolorlight
bordercolordark valign(表格行的垂直對齊方式)
(3)、定義列<td>，<th>為定義表頭
屬性：dir lang class id style title bgcolor background bordercolorlight
bordercolordark valign width height abbr（單元格的縮寫）
axis（用逗号分割目錄名清單） rowspan（單元格跨行個數）
colspan（單元格跨列個數） headers（标題單元格的清單） nowrap（禁止換行） scope（指定單元格提供資訊）
(4)、表格标題内容<caption>
屬性:dir lang class align id style title valign
15、架構主要分為兩部分：一個是架構集，另一個是架構
(1)、<frameset>架構集，僅是一個架構的集合
屬性：class id style title rows cols
bordercolor frameborder framespacing(架構集間距)
(2)、定義架構<frame>
屬性：class id style title bordercolor frameborder name noresize(禁止調整邊框大小)
src(架構源檔案) marginwidth(架構邊緣寬度) marginheight(架構邊緣高度)
frameborder的屬性值：yes 出現邊框 no 不出現邊框
(3)、<iframe>定義内聯架構，在文檔中定義一個獨立的矩形區域，有獨立的滾動條和邊框
屬性：class id style title frameborder name src
marginwidth marginheight align height width scrolling（是否允許出現滾動條）
scrolling的屬性值：yes 出現 no不出現 auto自動出現滾動條
16、樣式表
(1)、内聯樣式表：隻需在标簽内含一個上style屬性，style屬性後在跟一系列屬性和屬性值即可。
事例：<标簽 style = “屬性：屬性值”>
(2)、文檔樣式表用<style>标簽表示
屬性：dir lang title media(文檔要使用的媒介類型) type（樣式類型）
級聯樣式表type的屬性值都是text/css，javascript使用的樣式表都是text/javascript
media的屬性值：
screen 計算機顯示屏（預設） tv（電視） projection 劇場 handheld（pda和手提電話）
print 列印 all所有媒體
(3)、外部樣式表：用<link>标簽來實作
屬性：dir title lang target type class id style
charset href media rel rev
(4)/樣式表文法
（a）、html重新定義标簽樣式表文法：
exp: td｛color：red;font-size:8pt｝
（b）、類樣式表：能夠在文檔樣式表或外部樣式表中為同一個元素建立不同的樣式，在文檔後面通過設定class屬性來選擇特定的樣式。
例子： .bg ｛background-image: url（路徑）；｝
<body class = ”bg”>
17、樣式表的屬性
(1)、字型屬性： font-family 用一個指定的字型名 font-size 字型顯示的大小 font-style 字型顯示的樣式 font-weight 定義字型的粗細 font-variant 設定英文大小寫轉換 font 組合設定字型屬性
font-style的屬性值：normal 正常值 italic 斜體 oblique 扁斜體
font-weight的屬性值： normal 正常值 bold 粗體 bolder 在加粗
lighter 變細 100—900 共有100到900個級别數越大越粗
font-variant的屬性值：normal 正常 small-caps 将小寫轉換為大寫
font組合時的順序：樣式，粗細，大小
(2)、顔色和背景屬性：
color 顔色 background-color 背景顔色 background-image 背景圖檔 background-repeat 背景圖檔如何重複
background-position 設定背景圖檔水準和垂直的位置 background 組合設定背景屬性
background-repeat：repeat 平鋪 repeat-x x方向上平鋪 repeat-y y方向上平鋪 no-repeat不平鋪
background-position： value 以百分比(x%.y%)或絕對值的形式(x.y)來确定背景圖像的位置 top 居頂
center 居中 bottom居底 left 居左 right居右
background可以任意組合以上的屬性值
(3)、文本屬性：
letter-spacing 定義一個附加在字元間的間隔數量 word-spacing單詞間的間隔數量 text-index文字的首行縮進
text-align 文本對齊方式 line-height行高間隔 text-transform控制英文文字大小寫 text-decoration文字修飾
letter-spacing: normal 正常值 長度機關 如2em
word-spacing ： normal 正常值 長度機關
text-decoration：underline 加下劃線 overline 加上劃線 line-through 加删除線
blink閃爍文字，隻使用于netscape浏覽器 none預設值
text-align：left 左對齊 right右對齊 center居中 justify兩端對齊
text-index:後跟長度機關如2em
text-transform: capitalize将每個單詞首字母大寫 uppercase 将每個都轉換為大寫 lowercase 轉換為小寫 none
(4)、邊框屬性：
border-color 邊框顔色 border-style 邊框樣式 border-width邊框寬度 border-top-color 上邊框顔色
border-left-color 左邊框顔色 border-right-color 右邊框顔色 border-bottom-color 底邊框顔色 border-top-style border-left-style border-right-style border-bottom-style border-top-width border-left-width
border-right-width border-bottom-width border 組合設定 border-top(right/left/right/bottom)
border-style：none 無邊框 dotted 邊框由點組成 dash 邊框由短線組成 solid邊框是視線 double雙線
groove 立體溝槽 ridge 邊框成脊形 inset 邊框内嵌一個立體邊框 outset邊框外嵌一個立體邊框
(5)、方框屬性：
float 讓文字環繞在元素四周 clear指定在某一進制素的某一邊是否允許有環繞的文字和對象 clip限定隻顯示裁切 出來的區域 width設定對象的寬度 height設定對象的高度 padding設定邊框和内容間的距離 margin 元素裡 浏覽器的距離 overflow 當本層内容容納不下時的處理方式 position 設定對象位置 z-index決定層的先後順序和覆寫關系
float: none left right
overflow: visible無論層的大小，内容都會顯示出來 hidden 隐藏超出層的内容 scroll 不管是否超出都會添加滾動條
auto隻有超出時才會有滾動條
(6)、清單屬性:
list-style-type 設定引導清單的項目類型 list-style-image 選擇圖像作為項目的引導符号
list-style-position 決定清單項目所縮進的程度
list-style-type: disc 在文本行前加實心圓 circle 加空心圓 square 加實心方塊 decimal 加阿拉伯數字
lower-roman 小寫羅馬數字 upper-roman 大寫羅馬數字 lower-alpha 小寫字母
upper-alpha 大寫字母 none 不顯示任何符号
list-style-image:的屬性值為url(圖檔路徑)
list-style-position: outside 清單貼近左側邊框 inside 清單縮進
(7)、濾鏡屬性：基本文法 filter: 濾鏡 （參數）
alpha 透明的層次效果 blur 快速移動的模糊效果 chroma 特定顔色的透明效果 dropshadow陰影效果
fliph 水準翻轉效果 flipv 垂直翻轉效果 glow 邊緣光暈效果 gray灰階效果 invert 顔色亮度值翻轉
mask遮罩效果 shadow漸變陰影效果 wave波浪效果 xray x射線效果
(8)、滑鼠濾鏡：用法---------cursor: value
value的值： hand 手型 crosshair 交叉十字 text 文本選擇符号 wait沙漏裝 default 預設形狀 help 問号
n(w、s、e)-resize 向北（西、南、東）的箭頭
18、在頁面中加入javascript腳本
(1)、用标簽<script>實作
屬性： charset編碼腳本程式的字元集 language 腳本語言 src 包含腳本程式的url type腳本類型
(2)、js内在事件：onblur光标離開文本框時 onchange 當文本框的内容給被改變是時 onclick單擊時 onload載 入時
onmouseover滑鼠經過時 onmouseout滑鼠移開時 onreset 複位表單時 onsubmit送出表單時
onslecte 文本域被選中時 onunload退出載入時 onfocus當光标落在文本框時
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)