web前端基礎知識總結

時間 2019-11-15

標籤 web 前端基礎知識總結欄目 HTML 简体版

原文原文鏈接

上個寒假總結的web前端的一些知識點給你們分享一下javascript

一、<html>和</html> 標籤限定了文檔的開始和結束點。css

屬性：html

(1) dir: 文本的顯示方向，默認是從左向右前端

(2) lang: 表示整個文檔中所使用的語言，en--英文，zh--中文java

(3) version：定義創做文檔的HTML的標準版本web

二、<head></head>用於封裝位於文檔頭部的其餘標籤小程序

屬性：api

(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>：設定文件腳本的內容

三、<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: 頁面的左邊距

四、定義空格

五、文字標記

(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

六、段落標記

(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

七、下劃線

<hr> 插入水平分割線

屬性：dir lang class id style align size noshade width color

八、列表

(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>,無序列表的一種特殊形式

屬性： dir lang class id style title

(4)、定義列表<dl>

基本用法： <dl>

</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：英文文字上邊線對齊

十、插入超連接

(1)、標籤<a></a>爲超連接標籤

屬性：

Href：指定連接地址 name:給連接命名 target:指定連接打開窗口 accesskey：連接熱鍵

Dir lang align class id style title charset rel：指定從原文檔到目標文檔的關係

Rev:指定從目標文檔到源文檔的關係 type tabindex:對新窗口中的對象從新排序

URL格式：

http://進入萬維網站點 ftp://進入文件傳輸服務器 news://啓動新聞討論組 telnet://啓動telnet方式

Gopher://訪問gopher服務器 mailto://啓動郵件（href=」mailto://sdut@qq.com? Subject=給我來信」）

(2)、書籤連接，試用於頁面太長時，避免翻頁，格式以下

(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 多邊形區域

事例：

</map>

十一、插入多媒體

(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 定義字幕與周圍文字的距離

十二、其餘嵌入

(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

1三、表單：

表單由一個或多個文本輸入框、可單擊的按鈕、多選框、下拉菜單和圖像按鈕等組成，全部的這些都放在<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（列表中的多選項目）

1四、表格

(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

1五、框架主要分爲兩部分：一個是框架集，另外一個是框架

(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自動出現滾動條

1六、樣式表

(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（路徑）；｝

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 向北（西、南、東）的箭頭

1八、在頁面中加入Javascript腳本

(1)、用標籤<script>實現

屬性： charset編碼腳本程序的字符集 language 腳本語言 src 包含腳本程序的URL type腳本類型

(2)、js內在事件：onBlur光標離開文本框時 onChange 當文本框的內容給被改變是時 onClick單擊時 onLoad載入時 onMouseOver鼠標通過時 onMouseOut鼠標移開時 onReset 復位表單時 onSubmit提交表單時 onSlecte 文本域被選中時 onUnload退出載入時 onFocus當光標落在文本框時

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。