西西軟件下載最安全的下載網(wǎng)站、值得信賴的軟件下載站!

首頁西西教程其它教程 → 編寫html頁面代碼需要了解的--綜合編

編寫html頁面代碼需要了解的--綜合編

相關軟件相關文章發(fā)表評論 來源:西西整理時間:2012/12/28 22:48:21字體大小:A-A+

作者:西西點擊:4次評論:0次標簽: html

  • 類型:編程輔助大。83KB語言:中文 評分:5.0
  • 標簽:
立即下載

在很多企業(yè)面試的時候,尤其是在面試UI(界面層)的面試當中,很多時候要求我們手寫html。當然,這里要求的是比如跟JavaScript或者是跟CSS結合著去寫。像登錄的界面,或者是寫個表單,表格。諸如此類的面試,主要考查的就是我們對這些基礎的東西,大家熟悉不熟悉。所以,當我們面試程序員或者是美工的時候,這些都是我們需要注意的地方。當然,只要我們靜下心,多敲幾遍,甚至是在紙上多寫幾遍,這樣的面試、筆試還是很容易通過的。

好下面我們先介紹下瀏覽器:

五大瀏覽器:IE【IE6及以下版本(IE7及以上)】、FF(firefox)、Chrome、Opera、Safari(Apple)

搜狗、騰訊TT、遨游(Maxthon) 、360瀏覽器、……(不是一個級別)

瀏覽器就是解釋和執(zhí)行HTML源碼的工具。

同樣的一個ie瀏覽器,不同的版本也會展現(xiàn)出不同的效果,那么在同一臺電腦上是不讓裝多個IE版本的。我們怎么辦呢?

         

一、IETester

htm、html都是靜態(tài)頁面,asp、aspx、jsp、php等都是動態(tài)頁面。

二、注意的地方

開發(fā)工具:

記事本、高級記事本(Editplus、Notepad++、UltraEdit)(推薦)

其他工具:Dreamweaver、Expression Web(FrontPage的改頭換面版) 等快速開發(fā)工具,這些工具是給頁面美工用的。開發(fā)人員用VisualStudio寫html就夠了。

三、基本通用標簽

注釋使用的是:

四、注意/title

五、運行時的快捷鍵

接下來介紹下顏色體系的內(nèi)容:

六、背景顏色

自己搭配顏色:

七、自己調(diào)背景色

八、取色

接下來我們說下HTML和XML的聯(lián)系、區(qū)別

html與xml相同點:

都是標記語言、注釋都是:

都可以通過dom編程方式來訪問

都可以通過CSS來改變外觀

html與xml的不同點:

xml比html語法要求更嚴格。

有開始標簽必須有結束標簽、大小寫一致、屬性用雙引號等。

xml側重于數(shù)據(jù)存儲,html側重于數(shù)據(jù)展示。趨勢:數(shù)據(jù)存儲與數(shù)據(jù)表現(xiàn)相分離(html中只有要顯示的頁面內(nèi)容,樣式都有CSS來控制,html頁面中不再有等標簽,控制樣式都用CSS)。

xhtml:可擴展超文本置標語言(eXtensible HyperText Markup Language,XHTML),更符合xml語法規(guī)范的html。xhtml的出現(xiàn)主要是為了向xml過度,通過xml+css也能實現(xiàn)很好的頁面。【xhtml要求:全部小寫、有開始結束標簽、屬性用雙引號】

dhtml: Dynamic HTML的簡稱,就是動態(tài)的html。 HTML、樣式表和JavaScript 的組合(現(xiàn)在都是dhtml)

接下來我們再來說下html常用標簽:

h標簽(標題),HTML定義了

六個h標簽,分別表示不同大小的字體。h1最大,h6最小。

當搜索引擎搜索的時候,用h標簽搜索的概率大于用css方法修飾標題的文章。


只是回車,

是分段。

前后會有比較大的空白,而
則沒有。

建議大家把開始結束寫全

 

川川是狗狗
居中顯示.

a粗體,推薦。b斜體。c帶下劃線。強調(diào),斜體

當搜索引擎搜索的時候,它會認為放在strong里面的內(nèi)容更重要。

2下標,如:H2O

2上標,如:102

字體標簽,紅色。color(設置顏色)  size(1-7)  face(設置字體,設置字體是注意用戶計算機中必須有該字體才能正常顯示)


  color  size(厚度)  width(長度)  align=left/center/right (默認為劇中顯示)

 預格式化  保持本色 (還記得牛逼的三個人么?呵呵。)

九、讓分割線立起來

前面我們文章當中用過一些個水平線,但是很多時候我們用CSS來實現(xiàn)。

十、當當網(wǎng)中的事例

   下面我們看下:html編碼(特殊字符)

十一、轉(zhuǎn)譯符

十二、搜狗拼音輸入法

©  ©

®  ®

²  ²

¥  ¥

³ ³

Html編碼查詢:

http://www.htmlhelp.com/reference/charset/

十三、查字符集

請看下面一道題目:

十四、轉(zhuǎn)譯符2

接下來我們看下:超鏈接URL的相關內(nèi)容。

蜘蛛爬蟲就是根據(jù)超鏈接爬的,

URL:URL表示資源在網(wǎng)絡中的地址,比如 http://127.0.0.1:80/html/pages/a.htm、ftp://192.168.88.128/b.zip。還有URI的概念,比URL大,有的類中使用URI這種說法,可以暫時看成和URL一樣就行。

超級鏈接:XXX 。

URL:統(tǒng)一資源定位符

URI:統(tǒng)一資源標識符。

十五、target

在新的選項卡中打開,需要設置:

十六、在新選項卡中打開

a標簽的一些常用屬性:href、title、target、name(錨記時用)

十七、title

中還可以嵌套圖片,這樣就是點擊圖片打開連接

十八、點擊圖像到鏈接

十九、去掉邊框

現(xiàn)在要是鏈到內(nèi)部自己的網(wǎng)站我該怎么寫呢?

只要在同一個目錄下,可以直接寫文件名。

在a文件夾下的話就寫a文件夾下的文件名,如果要是在它父目錄下的話,就寫..文件名。

相對URL:相對URL表示相對于當前文檔的資源,“/”表示網(wǎng)站根目錄,“../”表示父目錄,“http://www.cnblogs.com/”表示父目錄的父目錄,“./”或者不寫任何斜線表示相對于當前路徑的目錄。站內(nèi)引用最好用相對URL,這樣域名改變了、目錄改變了都不受影響。

接下來我們再說下錨這個作用:

第一步寫個錨:

第二步寫鏈接到錨:

二十、錨的使用

 

二十一、錨的使用演示

接著我們說說:圖片

在我們?yōu)g覽網(wǎng)頁的時候,會看到很多的圖片:

二十二、圖片存儲的位置

二十三、圖片當中的兩個重要的屬性

還可以設置圖片的寬和高:

二十四、設置寬和高

那么,設不設寬和高呢?當我們打開一個頁面的時候,圖片比較的大,一開始是一個小點,后面突然變大了。這種情況就是沒有設置高和寬。

當我們學習了JavaScript,操作圖片的時候,如果不設置圖片的高和寬。那么,只有當頁面都下載完畢以后,才可以通過客戶端寫代碼的方式來獲取圖片的高和寬。而如果一開始就設置了圖片的高和寬,則圖片還沒有下載完畢,圖片還沒有下載完畢也可以獲取圖片的高和寬。

下面我們說下:縮略圖

二十五、改變圖片的大小

當我們改變圖片的大小的時候,光該后綴名不行,必須在畫圖這樣的軟件里面去改。

二十六、制作縮略圖

關于不同的圖片有什么區(qū)別,請大家看下下面的鏈接:圖片格式

以后我們寫程序的時候,自動生成縮略圖,自動加水印,都是真正的把圖片改了。

px (Pixel)單位名稱為像素,相對長度單位,像素(px)是相對于顯示器屏幕分辨率而言的(隨著屏幕分辨率而變化),國內(nèi)推薦; QQ截圖也是使用PX作為長度寬度單位。

em單位名稱為相對長度單位。相對于當前對象內(nèi)文本的字體尺寸,國外使用比較多;如當前對行內(nèi)文本的字體尺寸未被人為設置,則相對于瀏覽器的默認字體尺寸。

接下來我們再看下列表和表格:

dl→definition list(定義列表),見備注1。

一般可用于名詞解釋之類。

ul→unordered list(無序列表),注意多個ul嵌套時的寫法。見備注2

大家去一些個網(wǎng)站,找個有二級菜單的網(wǎng)站,用ul和li來實現(xiàn)的.通過CSS來控制。

                   

二十七、具有二級菜單的網(wǎng)站

ol→ordered list(有序列表),見備注3。

用嵌套ul或ol來模擬二級菜單。見備注4。

      都有一個type屬性,用來設置序列的顯示樣式。type的取值可以是:A、a、1、i、I、disc、circle、square。(可用CSS控制ul、ol的type樣式)

插入備注位置:

 1 
 2 
 3  
10 
11  
12 
13 
14 
15
河北 16
石家莊 17
秦皇島 18
山西 19
太原 20
大同 21
22 23 24 25 30 31 32 33
    34
  1. 北京 35
  2. 上海 36
  3. 廣州 37
38 39 40 41 65 66 67 68

下面我們再說下表格,很久以前我們在網(wǎng)頁上面布局都是使用的表格,但是現(xiàn)在使用的越來越少了。

二十八、tr與td

表格:

為表格,在內(nèi)部通過創(chuàng)建行,內(nèi)部通過創(chuàng)建單元格?梢詫able的border屬性設為0來隱藏表格線。演示常規(guī)表格。

填充、間距cellpadding內(nèi)容和表格邊線之間的距離 cellspacing單元格之間的間距。見備注1.

的屬性:align,水平對齊,可選值left、right、center;valign,垂直對齊,可選值top、middle、bottom。

也有align和valign。tom20男:子標簽默認繼承父標簽的屬性,如果自己單獨指定了屬性,則會覆蓋父標簽的屬性。

還可以使用rowspan(合并行)、colspan(和并列)進行單元格的合并。rowspan、colspan是td的屬性。

一個完整的表格。table、caption、thead、tbody、tfoot、tr、th、td。見備注2. (查找vs2008msdn(目錄-web開發(fā)-))

二十九、如何干掉EditPlus3備份文件

看下下面的練習:

三十、練習1,2

插入練習1,2代碼位置:

 1 
 2     
 3         
 4     
 5     
 6         
    7
  1. 愛 8
  2. 水煮魚 9
10 11 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
姓名性別工資
張三9000
張三9000
張三9000
張三9000
44 45 46

三十一、練習3

練習3插入代碼位置:

 1 
 2     
 3         
 4     
 5     
 6         7             8                 9             10             11                 12                 13                 14             15             16                 17                 18                 19             20         
學生成績表
英語數(shù)學語文
100100100
21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
學生基本情況
姓名性別專業(yè)
劉備計算機
孫尚香
諸葛亮
45 46 47 48

三十二、表格當中的其它元素

三十三、控制顯示哪兒部分

三十四、網(wǎng)頁當中的具體的應用

三十五、tfoot標簽

下面我們講解下表單:

網(wǎng)站表單與填表。

標簽為表單標簽。如果要把數(shù)據(jù)提交到服務器,則需要將

是主要的表單元素,type的可選值:submit(提交按鈕)、button(普通按鈕)、checkbox(復選框)、file(文件選擇框)、hidden(隱藏字段)、image(圖片按鈕)、password(密碼框)、radio(單選按鈕)、reset(重置按鈕)、text(文本框)。

下面我們寫個小的表單

三十六、自己寫個小的表單

三十七、只讀

三十八、讓按鈕變灰

三十九、單選按鈕

四十、下拉菜單當中的屬性

那么,我們后面在JS中講解在客戶端寫省市聯(lián)動。

四十一、給下拉菜單分組

分組的大標題,只能看,不能選。

現(xiàn)在很多的網(wǎng)站都自己模擬做下拉菜單,原因就是select應用CSS的時候特別的不友好。但是,在后臺系統(tǒng)并不要求美觀的地方用它還是非常的方便的。

四十二、興趣愛好

四十三、頭像,協(xié)議功能

四十四、常用的提交功能

四十五、把常用的興趣愛好圈起來

在選擇性別的時候,點擊男或女周圍的地方也可以選中。

四十六、點擊其它的位置也能選中

四十七、marquee

08-31外媒測試Flash在移動設備上的表現(xiàn)遠不及HTML5
08-26jsoup 1.3.1HTML解析開源工具包發(fā)布
08-12DeviantArt 非主流出品的Muro是一個基于HTML5 繪圖程序
06-30與HTML5視頻相比 YouTube的重點為基于Flash的視頻
06-20微軟的HTML 5兼容性測試結果遭Google、Mozilla和Opera質(zhì)疑
06-13營銷部門從開發(fā)人員手中搶走了“HTML5”
06-12Adobe的AIR 2:將在HTML運行的更快,更好
06-08運用正則表達式在Asp中過濾Html標簽代碼的四種不同方法
03-09關于 HTML5,開發(fā)者可以期待什么
02-22Google Gears正式融合HTML5,瀏覽器完全支持

相關評論

閱讀本文后您有什么感想? 已有人給出評價!

熱門評論

最新評論

發(fā)表評論 查看所有評論(0)

昵稱:
表情: 高興 可 汗 我不要 害羞 好 下下下 送花 屎 親親
字數(shù): 0/500 (您的評論需要經(jīng)過審核才能顯示)
推薦文章

VMware Workstation 12永久密鑰問題?VMware Workstation 12下載注冊問題? 怎樣登錄國泰君安大智慧?國泰君安大智慧軟件怎么下載及安裝?

相關下載

名稱大小下載

最新文章