- 網頁設計html學習心得 推薦度:
- 相關推薦
html學習心得
html學習心得【1】
通過近一個多月的對HTML的學習,我們已經能夠熟練得使用HTML中的一些常用的標簽以及頁面的布局,我們這一期的課程安排只是要我們能夠初步熟悉HTML。所以書本上的介紹也很詳細。
第一章主要介紹了HTML的主要結構,以及一些基本的標簽,這一章需要記的東西稍多一點,因為每個標簽都要記它的用法和單詞。我覺得這一章最好玩的標簽應該就算是“marquee”這個標簽了,因為它可以使文字或圖片動起來。
第二章整個章節都是在介紹表格的用法。表格在網頁設計中很重要,它可以算是整個頁面布局的半個靈魂(因為后面還有一個DIV)。這一章不光要了解表格的建立方式,還要了解表格中涉及到的一些屬性及其用法。另外我覺得學好這一章為我們以后借鑒別人的作品也很有幫助。
第三章主要介紹了兩個部分,一個是表單,在表單里涉及到了幾個控件,如:文本框,密碼框,單選按鈕,復選框,下拉列表框,多行文本,提交按鈕和重置按鈕。這些為我們以后什么登錄系統時很有幫助。這一章的另一個部分是框架,框架可以實現網頁局部的刷新。
第四章又是這一本書的另一個重點,就是CSS樣式表。網頁就是一個門面,做為門面當然要漂亮,而CSS樣式就是來裝扮門面的彩妝。樣式表可以實現網頁編碼和美工的分離這樣即方便了編碼人員的修改又方便了后來人員對代碼的閱讀,同時他還可以實現一些很炫的效果,例如鼠標停在某個超鏈接上時超鏈接的背景發生變化,設置文字有背景色,霧狀顯示圖片等。
第五章和第六章主要是介紹了一個設計工具-Dreamweave,它是一款可視化的編寫工具,并且提供一些控件,這就很大程度上方便了網頁的編碼量。當然在第四章中還介紹到了DIV層的使用,這個也是很重要的。上面說到表格是頁面布局的半個靈魂,現在表格+DIV就是頁面布局的整個靈魂。可見DIV的重要性,當頁面部局規則的話可以使用表格,當頁面部局不規則的話我們的DIV就要登場了。另外在第五章中還介紹了一些IIS的配置和網站發布的方法。
HTML可以說是許多門語言的基礎,因為和他同宗的就有很多,如:XML、SHTML……。甚至近幾年剛出現的ajax技術也是使用HTML進行編寫的。隨著B/S模式系統的發展,HTML也就成為了作為一個IT人必須要掌握的語言。
剛開始學這門語言的時候老師要我們在記事本里面寫,現在想起來確實是很必要的,因為有了那樣的一段經歷你才會記住那些以前看上去讓人眼花繚亂的標記,以前見過一些人打開記事本就寫代碼,讓人覺得有點高不可攀,現在想來也只能自嘲的笑笑罷了。
小事加小事要合理安排才能成大事,我把這一個多月里的每一天用表格和層進行了布局。
也許只做一塊感受很簡單,但如果是一整頁呢?結束時的項目實戰和網頁設計大賽還真讓我頭痛了一把,另外還總遇到些“奇怪”的問題,什么表格拖不了了,布局沒問題,瀏覽就出問題了……。原來要裁一件漂亮的“衣服”還真難呀!
這一個多月過得還是很有趣。總會遇到一些奇怪的小錯誤,然后一堆人去那兒抱頭苦思,最后發現原來少了一個尖括號,嚴密的邏輯思維和對思節的注意是對作為一個IT人的基本要求。我覺得編程很有趣,尤其是做出一個程序后會覺得很有成就感。所以我會努力。
html學習心得【2】
經過1天多的艱苦奮戰,終于把html(Hypertext markup language)的基礎教程給看完了。
這次為了xml而看了這“古老”的技術,還是有點收獲的。。總體來說,雖然不是很熟練,但是看懂一般的html網頁源文件已經不是問題了。閑來無事,就寫寫筆記吧,說說感受也好!
html給我的感覺是很標準,很有格式的。最主要的代碼特點就是標記成對的出現,雖然有些可以省略,但是建議除非太過煩瑣還是把前后都加上去吧!作為一個完整的html網頁,總是有頭部,主體和結尾3大部分,分別用head/head,body/body和/html表示。另外,一個重要特性就是可以自定義風格(CSS),這是非常方便的,類似于編程語言的類的功能吧!同時,還可以嵌入其他script來增強其交互功能。而對于相當重要的標記,也只是由頭部標識和屬性所組成。(標識 屬性1 屬性2 屬性3...)看來,學習html是學習其他網頁腳本語言的基礎吧,同時對于學習可視化網頁設計也是有幫助的(這么說應該不過分吧!)!,下面就讓我們一起來詳細分析各個部分的構成元素。
其實大多數html網頁的標記不多,就只有10幾個吧!(看到這里,好!)這里主要介紹一下常見的控制文件的外觀和布局的標記!
h:從h1到h6所標識的字體依次減小,一般來說,h1用來標記文件標題h2用來標記一章的標題h3用來標記章節的標題,h6則是來作為小字印刷,如版權信息等等。
p和br:基本類似于回車鍵的功能,而p可以插入空格,同時也可以附帶屬性,如p 效果p(缺省情況是左對齊,左對齊很多排列方式的缺省情況)
div:雖然類似于p,也可以使用align屬性,但是在使用風格表格時功能強大。(風格表格見后)
hr:可以產生一條水平線,對于組織格式是很有幫助的。
在這里應該說一說邏輯標記和物理標記的差別:物理標記表明信息的外觀,而邏輯標記表明信息的語義。從適用范圍來說,使用邏輯標記更值得推薦,因為邏輯標記表示的是本質特性,不隨瀏覽器的變化而變化!
邏輯標記:citedfnstrongcodeinsdel(注:大家可以自己測試一下,看看有什么效果,其中ins和del是很有用的標記,特別是在多人合作開發的時候,看字面應該知道這兩個是干嘛的吧!)
物理標記:itttbigsmallsubsupstrike(注:大家測試吧,動手最重要)
是超文本(Hypertext)格式的重要實現方式,而使用的就是錨(Anchor)(,所以縮寫也就是a),
一個典型的錨標記的定義:a href="目標頁面"激活熱區/a(注:href:hypertext reference,就是到哪里),現在分情況介紹:
1)外部
1。1非本地文件:a href="http://www.zsu.edu.cn"中山大學/a(這個很明顯,不用解釋了)
1。2其他形式的非本地資源:a href="ftp://ftp.zsu.edu.cn"中山大學/a(ftp資源)
a href="mailto:mc02cxj@zsu.edu.cn"我的email/a(email信息)
1。2本地文件:a href="另一個網頁.html"另一網頁?/a(同一文件夾的,當然也可以給出完整路徑咯)
a href="../另一個網頁.html"另一網頁?/a(上一級別文件夾的)
(注:../表示上一級文件夾,同樣../../就表示上上一級)
2)內部
什么是內部,就是在同一個網頁里邊的!這樣做是為了避免網頁太大而造成的瀏覽麻煩!
步驟:首先要定義一個引用目標錨,然后在另一處定義被錨引用的目標!看例子吧
a herf="#top"top/a(其中top定義了該錨)
a name="top"top/a(這里就引用了該錨)
使用圖像:img
1)對齊方式:缺省是左對齊,可以使用div align=..進行更改。
2)高度和寬度:img
3)四周區域和邊框:img
1)無序列表:無序,就是沒有特別的序號,也就是平等哦。。下面看個例子吧。
ulli內容1li內容2li內容3/ul(注:對于ul,可以添加屬性type,屬性值有disc,square,circle,這樣就可以改變序號了)
2)有序列表:這個當然就是前面有序號咯。
olli內容1li內容2li內容3/ol(注:對于ol,同樣可以添加type屬性,屬性值可以是1,a,A,i,I,呵呵,自己測試一下。)另外,對于ol,可以從喜歡的序號開始排序,用的屬性就是ol的start和li的value了,很明白吧:)
3)列表嵌套:嵌套,類似于樹狀菜單的東西。可以使用ulul/ul/ul類似的格式進行使用。
4)定義列表:主要有dl,dt,dd,分別代表定義標識,頭部和內容,使用方法:
dldt頭部dd定義的內容/dl(注:dt和dd不需要結束標記)
1)定義一個form:定義一個form標記,用于確定發送消息的類型和處理方式,其中必須的屬性就是action了。form action="http://zsu.edu.cn/..." method="post"(注:method用于說明傳送數據的方式,還有get方式,不過現在常用post)。類似的有,form action="mailto:mc02cxj@zsu.edu.cn" method="post"
2)大部分的form都是在input中處理的。如下面所示:
請輸入名字input type="text" name="username"p
【html學習心得】相關文章:
網頁設計html學習心得(通用20篇)03-01
html學習總結10-05
html網頁心得12-26
網頁html設計心得12-22
html學習方法10-05
html網頁心得13篇01-07
html實習心得(通用10篇)11-10
html開發設計個人簡歷10-09
html網頁心得體會02-24
html網頁心得(通用13篇)12-23