在很多企業(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
-
26
- 北京 27
- 上海 28
- 廣州 29
-
34
- 北京 35
- 上海 36
- 廣州 37
-
42
- aaaaaa 43
- bbbbbbb
44
-
45
- ol test 46
- ol test 47
- ol test 48
- ol test 49
- ol test 50
- ol test 51
- aaaaaa1 54
- bbbbbbb1
55
-
56
- ol test 57
- ol test 58
- ol test 59
- ol test 60
- ol test 61
- ol test 62
下面我們再說下表格,很久以前我們在網(wǎng)頁上面布局都是使用的表格,但是現(xiàn)在使用的越來越少了。
二十八、tr與td
表格:
填充、間距cellpadding內(nèi)容和表格邊線之間的距離 cellspacing單元格之間的間距。見備注1.
還可以使用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 67
10 11- 愛 8
- 水煮魚 9
-
12
- 愛 13
- 水煮魚 14
姓名 | 19性別 | 20工資 | 21
張三 | 24男 | 259000 | 26
張三 | 29男 | 309000 | 31
張三 | 34男 | 359000 | 36
張三 | 39男 | 409000 | 41
三十一、練習3
練習3插入代碼位置:
1 2 3 4 5 6
學生成績表 | 9||
英語 | 12數(shù)學 | 13語文 | 14
100 | 17100 | 18100 | 19
學生基本情況 | 25||
姓名 | 28性別 | 29專業(yè) | 30
劉備 | 33男 | 34計算機 | 35
孫尚香 | 38女 | 39|
諸葛亮 | 42男 | 43
三十二、表格當中的其它元素
三十三、控制顯示哪兒部分
三十四、網(wǎng)頁當中的具體的應用
三十五、tfoot標簽
下面我們講解下表單:
網(wǎng)站表單與填表。
是主要的表單元素,type的可選值:submit(提交按鈕)、button(普通按鈕)、checkbox(復選框)、file(文件選擇框)、hidden(隱藏字段)、image(圖片按鈕)、password(密碼框)、radio(單選按鈕)、reset(重置按鈕)、text(文本框)。
下面我們寫個小的表單
三十六、自己寫個小的表單
三十七、只讀
三十八、讓按鈕變灰
三十九、單選按鈕
四十、下拉菜單當中的屬性
那么,我們后面在JS中講解在客戶端寫省市聯(lián)動。
四十一、給下拉菜單分組
分組的大標題,只能看,不能選。
現(xiàn)在很多的網(wǎng)站都自己模擬做下拉菜單,原因就是select應用CSS的時候特別的不友好。但是,在后臺系統(tǒng)并不要求美觀的地方用它還是非常的方便的。
四十二、興趣愛好
四十三、頭像,協(xié)議功能
四十四、常用的提交功能
四十五、把常用的興趣愛好圈起來
在選擇性別的時候,點擊男或女周圍的地方也可以選中。
四十六、點擊其它的位置也能選中
四十七、marquee