web前端基本開發手冊

時間 2019-11-10

標籤 web 前端基本開發手冊欄目 HTML 简体版

原文原文鏈接

---------------------------------css

一．概況html

1.1 WEB 標準web

二．實現WEB標準api

2.1 XHTML、CSS介紹瀏覽器

2.2 XHTML書寫規範框架

2.2.1 XHTML結構ide

2.2.2 標籤規範工具

2.3 XHTML經常使用標籤介紹佈局

2.4 CSS書寫規範字體

2.4.1 表命名參考

2.4.2 類/ID命名規範

2.4.3 樣式調用

2.4.4 樣式簡寫

2.5 CSS經常使用屬性介紹

2.6 圖片規範

2.7 註釋規範

2.8 瀏覽器兼容

一．概況

1.1 WEB 標準

WEB 標準不是一個標準，而是一系列標準的集合。網頁主要由三部分組成：結構、表現和行爲。對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括 CSS，行爲標準主要包括對象模型（如 W3C DOM）、ECMAScript 等。這些標準大部分由W3C起草和發佈，也有一些是其餘標準組織制訂的標準，好比ECMA（European Computer Manufacturers Association）的 ECMAScript 標準。

2、實現WEB標準

2.1 XHTML、CSS介紹

可擴展超文本置標語言（eXtensible HyperText Markup Language，XHTML），是一種置標語言，表現方式與超文本置標語言（HTML）相似，不過語法上更加嚴格。從繼承關係上講，HTML是一種基於標準通用置標語言（SGML）的應用，是一種很是靈活的置標語言，而XHTML則基於可擴展置標語言（XML），XML是SGML的一個子集。XHTML 1.0在2000年1月26日成爲W3C的推薦標準。

級聯樣式表（Cascading Style Sheet）簡稱「CSS」，一般又稱爲「風格樣式表（Style Sheet）」，它是用來進行網頁風格設計的。好比，若是想讓連接字未點擊時是藍色的，當鼠標移上去後字變成紅色的且有下劃線，這就是一種風格。經過設立樣式表，能夠統一地控制HTML中各標誌的顯示屬性。級聯樣式表可使人更能有效地控制網頁外觀。使用級聯樣式表，能夠擴充精確指定網頁元素位置，外觀以及建立特殊效果的能力。

2.2 XHTML書寫規範

2.2.1 XHTML結構

文檔分爲head 和body兩個部分。
html文檔中在head關標籤後面必定會跟着body的開標籤。html的開標籤下面必定跟着head的開標籤，body的關標籤下面必定是html的關標籤，這中間都是不能插入任何東西的。head和body在一個html中有且僅有一個。

在head裏面放置的內容是不會再頁面裏顯示的。在頁面中顯示的內容放在body裏。

以下：
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

樣式地址、JS地址、樣式等

</head>

<body>

瀏覽器能看到的內容部分

</body>
</html>

2.2.2 標籤規範

標籤能夠分爲成對標籤，或者是單標籤。

成對標籤好比 div span ol ul li select option table tr th td dl dt dd em var span等等，而單標籤就比較少了好比 input img br iframe 等。

完整的成對標籤以下：<div>這是一個快標籤</div> 或者

<ol>

</ol>；
能夠看到每個標籤都有開標前和關標籤組成，內容放在開和關標籤之間。

而單標籤的標籤應該這麼寫：

<br/>

<input type="button" value="按鈕"/> ;

像這樣的單標籤，是不可能再嵌套任何內容的。而咱們把斜線(/）放在標籤的後尖括號前面，表示標籤結束。這點跟成對標籤有很大區別。

全部標籤必須合理嵌套

正確的嵌套

<div>

<span>

</span>

</div>

就像一個一個大盒子套了一個小盒子又套了一個小盒子，固然還能夠繼續嵌套，看起來十分對稱。

不正確的嵌套

<div>

<span>

</div>

</span>

這裏的標籤是不對稱的。你無法一層一層的拆開盒子，這就是錯誤的。

2.3 XHTML經常使用標籤介紹

一、div標籤：塊元素。能夠將文檔分爲不一樣的部分。可使用class和id屬性進一步控制頁面表現。div是css佈局中使用最多的元素。

二、p標籤：塊元素，表示一個文本段落，通常用於換行。

三、標題標籤：塊元素，用來定義文本中的各類標題。從h1至h6有着嚴格的層級關係。而且每一個XHTML上h1元素有且只能使用一次。其中包括一系列的元素：h1，h2，h3，h4 ，h5，h6,其中每一個元素都對應有默認的字體樣式其代碼以下：

四、ul和li標籤：塊元素，無序列表，詳見：http://www.w3school.com.cn/tags/tag_ul.asp

五、ol和li標籤：塊元素，有序列表，詳見：http://www.w3school.com.cn/tags/tag_ol.asp

六、dl、dt、dd標籤：塊元素，經常使用於生成類表格別表，dt、dd位於dl內部。

詳見：http://bbs.blueidea.com/thread-3023757-1-1.html

七、strong標籤：內聯元素，使文本以粗體顯示。

八、a標籤：內聯元素，用於超連接(herf屬性)和設置內部文檔書籤(ID或Name屬性)。

九、em標籤：內聯元素，顯示效果爲文本斜體。

十、span標籤：內聯元素，用來區分文本中的一個部分。

十一、br標籤：使文本換行。

十二、img標籤：內聯元素，用來插入圖像文件，當使用img元素時候，其alt屬性必須加上，屬性內容將在圖片不能加載的時候顯示。

1三、label標籤：觸發鼠標事件，當鼠標事件做用於該元素時，也做用於相對應的input標籤。

1四、input標籤：根據不一樣的 type 屬性值，能夠是文本字段、複選框、掩碼後的文本控件、單選按鈕、按鈕等等。用於獲取提交的數據。當input標籤爲單選按鈕和複選框時，瀏覽器的兼容性比較差，須要細心調整。

1五、select和option標籤：下拉列表，option位於select內部。

1六、textarea標籤：文本區域，用於輸入多行文本文字。

1七、table，tr，th，td標籤：表格，不推薦使用。

2.4 CSS書寫規範

2.4.1 表命名參考

駝峯命名法例：myName

全局樣式：global.css

框架佈局：layout.css

字體樣式：font.css

連接樣式：link.css

打印樣式：print.css

2.4.2 類/ID命名規範

Container div #container 容器

Layout #layout 佈局

Header or banner div #head, #header 頁頭部分

Footer div #foot, #footer 頁腳部分

Navigation list #nav 主導航

Sub-navigation list #subNav 二級導航

Menu #menu 菜單

Sub Menu #submenu 子菜單

Left or right side columns #sidebar_a, #sidebar_b 左邊欄或右邊欄

Main div #main 頁面主體

Tag #tag 標籤

Message #msg #message 提示信息

Tips #tips 小技巧

Vote #vote 投票

Friend Link #friendlink 友情鏈接

Title #title 標題

Summary #summary 摘要

Search input #searchInput 搜索輸入框

Search output #search_output 搜索輸出和搜索結果類似

Search #search 搜索

Search bar #searchBar 搜索條

Search results #search_results 搜索結果

brand #branding 商標

branding-logo #logo LOGO

Site information #siteinfo 網站信息

Designer or other credits #siteinfoCredits 信譽

Join us #joinus 加入咱們

Partnership opportunities #partner 合做夥伴

Services #service 服務

Regsiter #regsiter 註冊

Arrow arr/arrow 箭頭

Little #little 標題

Website map #sitemap 網站地圖

List #list 列表

Home page #homepage 首頁

Sub page subpage 二級頁面子頁面

Toolbar #tool, #toolbar 工具條

Next pulls #drop 下拉

Next pulls menu #dorpmenu 下拉菜單

Status #status 狀態

經常使用類的命名應儘可能以常見英文單詞爲準，作到通俗易懂，並在適當的地方加以註釋。對於二級類/ID命名，則採用組合書寫的模式，後一個單詞的首字母應大寫：諸如「搜索框」則應命名爲「searchInput」、「搜索圖標」命名這「searchIcon」、「搜索按鈕」命名爲「searchBtn」

2.4.3 樣式調用

頁面內嵌法：就是將樣式表直接寫在頁面代碼的head區。

body{background:white; color:black;}

</style>

外部樣式表調用：將樣式表寫在一個獨立的.css文件中，而後在頁面head區用相似如下代碼調用。

在符合web標準的設計中，推薦使用外部調用法，能夠不修改頁面只修改.css文件而改變頁面的樣式。若是全部頁面都調用同一個樣式表文件，那麼改一個樣式表文件，能夠改變全部文件的樣式。

2.4.4 樣式簡寫

公共樣式的縮寫：

當兩個或多個類有想通的屬性值時，能夠對屬性值進行縮寫。如：

.search{

padding-left:30px;

height: 35px;

color:#fff;

}

.foot{

padding-left:30px;

height: 15px;

color:#fff;

}

縮寫爲：

.search,.foot{

padding-left:30px;

color:fff;

}

.search{height:35px;}

.foot{height:15px;}

同一屬性根據它的屬性值也能夠進行簡寫，如：

.search {

background-image:url(../images/icon.gif);

background-repeat: no-repeat;

background-position:left;

}

縮寫爲：

.search {

background:#333 url(../images/icon.gif) no-repeat left

}

顏色值的縮寫：

當RGB三個顏色值數值相同時，可縮寫顏色值代碼。如：

.menu { color:#ff3333;}

可縮寫爲:

.menu {color:#f33;}

在CSS中關於內外側邊框的距離是按照上、右、下、左的順序來排列的，當這四個屬性值不一樣時也可直接縮寫，如：

.btn {

margin-top:10px;

margin-right:8px;

margin-bottom:12px;

margin-left:5px;

padding-top:10px;

padding-right:8px;

padding-bottom:12px;

padding-left:8px;

}

則可縮寫爲：

.btn {

Margin:10px 8px 12px 5px;

Padding:10px 8px 12px 5px;

}

而若是當上邊與下邊、左邊與右邊的邊框屬性值相同時，則屬性值能夠直接縮寫爲兩個，如：

.btn {

margin-top:10px;

margin-right:5px;

margin-bottom:10px;

margin-left:5px;

}

縮寫爲：

.btn {margin:10px 5px;}

而當上下左右四個邊框的屬性值都相同時，則能夠直接縮寫成一個，如：

.btn {

margin-top:10px;

margin-right:10px;

margin-bottom:10px;

margin-left:10px;

}

縮寫爲：

.btn{margin:10px;}

一段完整的Css屬性編寫的順序爲：浮動、寬度、高度（行高）、內邊距、外邊距、字體、背景色、背景圖、其餘屬性。如：

.head{

float:left;

width:136px;

height:16px;

padding:10px;

margin:10px;

font:normal 18px/24px "微軟雅黑";

background:#333 url(../images/icon.gif) no-repeat left

display:block;

}

2.5 CSS經常使用屬性介紹

字體屬性：(font)
大小 font-size:只要用數值就能夠，單位：PX

樣式 font-style: normal;(正常)

行高 line-height:單位：PX

粗細 font-weight: bold;(粗體) normal;(正常)

大小寫 text-transform: capitalize;(首字母大寫) uppercase;(大寫)none;(無)

修飾 text-decoration: underline;(下劃線) none;(無)

經常使用字體： (font-family)通常用Tahoma(英文和數字更好看)、宋體、微軟雅黑

背景屬性： (background)

色彩

圖片background-image: url(圖片地址);

重複background-repeat: no-repeat;

滾動background-attachment: fixed;(固定) scroll;(滾動) 不多用

位置background-position: left(水平) top(垂直);

簡寫方法 background:#000 url(..) repeat fixed left top;

區塊屬性： (Block)

字間距letter-spacing: normal; 數值

對齊text-align: left;(左對齊) right;(右對齊) center;(居中)

縮進text-indent: 數值em;通常一段話前面縮進爲2em,表現形式爲縮進兩個漢字

垂直對齊vertical-align: baseline;(基線) sub;(下標) super;(下標) top; text-top;

middle; bottom; text-bottom;

顯示display:block;(塊) inline;(內嵌) 當兩個屬性同時用着的時候能夠用

display:inline-block解決。

方框屬性： (Box)

浮動float：left左浮 right右浮 none 清除浮動

寬度width:數值

高度height:數值

內邊距:padding 上右下左

外邊據：margin 上右下左

邊框屬性： (Border)
border-style: dotted;(點線) dashed;(虛線) solid(實線);

border-width:; 邊框寬度

border-color:#;

簡寫方法border：width style color;

列表屬性： (List-style)

類型list-style 用值none格式化li

定位屬性： (Position)

Position: absolute; relative;

overflow 用其hidden屬性與 height:數值能夠防止溢出；用其hidden屬性與height:auto、

zoom:1(兼容IE6必需要用這個屬性)設置自適應高度

2.6 圖片規範

圖片的命名規範：

名稱分爲頭尾兩兩部分，用下劃線隔開。

頭部分表示此圖片的大類性質。例如：放置在頁面頂部的廣告、裝飾圖案等長方形的圖片咱們取名：banner ；標誌性的圖片咱們取名爲：logo ；在頁面上位置不固定而且帶有連接的小圖片咱們取名爲button ；在頁面上某一個位置連續出現，性質相同的連接欄目的圖片咱們取名：menu ；裝飾用的照片咱們取名：pic ；不帶連接表示標題的圖片咱們取名：title 依照此原則類推。

尾部分用來表示圖片的具體含義，用英文字母表示。例如：banner_sohu.gif

有onmouse或hover效果的圖片，兩張分別在原有文件名後加"_on"和"_off"命名。如：

banner_sohu_on.gif

圖片質量：

圖片質量與圖片格式有很大的關係，儘可能用gif圖，而且在製做效果圖時就應少用陰影、半透明效果圖，這樣能夠減小圖片數量。PNG圖片儘可能不要用，IE6下對PNG的支持很是很差，兼容性調整的時候又要分背景PNG和插入圖片PNG，很麻煩。

圖片尺寸：

不一樣頁面，相同欄目的圖片尺寸應按相同比例設計，尺寸不一樣，比例相同的同一張圖片在瀏覽器裏不會變形和失真太嚴重。

插入圖片：

插入圖片在XHTML表現爲：

寬度、高度和alt屬性必須給出。

當插入圖片有超級連接時，會默認有藍色邊框，因此咱們在頁面最開始就應該格式化圖片

img{border:0;}