HTML語言的基礎(chǔ)理論知識.doc

HTML語言的基礎(chǔ)理論知識HTML簡述：整個html是一個文檔，他由成對和不成對的標(biāo)簽組成，標(biāo)簽里還有相應(yīng)的屬性。打個比方：一個圖書館就相當(dāng)于一個網(wǎng)站，圖書館里有很多圖書組成的，而網(wǎng)站是由很多的網(wǎng)頁組成的，每個圖書的基本單位是家庭，而每個網(wǎng)頁則是由元素構(gòu)成的，家庭中有爸媽，就像文檔中有成對的標(biāo)簽一樣，爸媽的下面有許多的孩子，就像標(biāo)簽下面也包含了許多的屬性一樣圖書館圖書章節(jié)內(nèi)容網(wǎng)站網(wǎng)頁元素標(biāo)簽HTML框架：這是一個NLP網(wǎng)站舉例() 一、HTML注釋在html中注釋的語法：，他不顯示在頁面中，在源代碼中以注釋標(biāo)簽的方式出現(xiàn)，瀏覽器不予閱讀，但自己可以添加注釋標(biāo)簽，以方便之后對代碼的閱讀和修改例子：這里介紹NLP的相關(guān)內(nèi)容二、HTML標(biāo)簽HTML為于文檔的最前面，在的前面，主要作用是向瀏覽器說明該HTML文檔使用的文檔類型，是沒有閉合標(biāo)簽的三、HTML 標(biāo)題 HTML標(biāo)題是用.這六個成對的標(biāo)簽表示的，顯示的標(biāo)題最大，以此往下，顯示出的標(biāo)題最小例子：中國中國四、HTML 元素HTML元素是指從開始標(biāo)簽到結(jié)束標(biāo)簽中的所有代碼，一個html文檔中包含許多的元素，比如:這是一個鏈接，請點擊，此句“這是一個鏈接，請點擊”就是一個元素，這樣的很多元素就組成了html文檔，除此之外還有沒有內(nèi)容的元素，就是空的 HTML 元素，在HTML的標(biāo)簽中沒有內(nèi)容，稱作空元素，空元素通常在開始標(biāo)簽中加“/”，就是關(guān)閉空元素的正確方法，如（換行）、（水平線），在HTML、XML中所有的元素都要關(guān)閉例子：看完漂亮的圖片后，可點擊此圖片，還有更大的驚喜等著你哦 5、 html文本格式化 Html可以定義很多經(jīng)過格式化輸出的元素，比如加粗，斜體等（具體標(biāo)簽見html輔資料1、2、3點）例子：addWWW在某些瀏覽器中，當(dāng)您把鼠標(biāo)移至縮略詞語上時，title 可用于展示表達(dá)的完整版本。六、HTML 屬性 HTML標(biāo)簽可以含有屬性，屬性為標(biāo)簽提供了很多的信息，屬性是由屬性名和屬性值組成，屬性是在開始標(biāo)簽中定義的，屬性值要始終被英文下的雙引號包圍，如中國，這個元素中定義的屬性意思就是“中國”這個標(biāo)題的位置在頁面的右邊顯示例子：這是頭標(biāo)題這是中標(biāo)題這是尾標(biāo)題七、HTML標(biāo)簽 HTML段落是用成對標(biāo)簽定義的，文字位于標(biāo)簽的中間，顯示在頁面中，用以表示文字或是圖片是否在同一個段落，用以分段的例子：這是第一段這是第二段段落元素是由P標(biāo)簽定義八、HTML 標(biāo)簽 HTML標(biāo)簽定義的是鏈接，他是通過成對標(biāo)簽 進(jìn)行定義的，href屬性值是鏈接的URL（uniform resource lac），句型：顯示出鏈接的文字或是圖片例子：這是中國NLP培訓(xùn)網(wǎng)網(wǎng)站可以點擊此圖片，你將得到不一樣的驚喜啊九、HTML水平線 在HTML頁面中的作用是插入水平線，可實現(xiàn)內(nèi)容的分隔，不是成對出現(xiàn)的標(biāo)簽，位于內(nèi)容的最后例子： 看完漂亮的圖片后，可點擊此圖片，還有更大的驚喜等著你哦 十、HTML標(biāo)簽 在網(wǎng)頁中插入圖片時圖片的路徑應(yīng)該是一級跟著一級往下寫（從頭到尾 巴），如：(這種情況是圖片就在某一個盤下，沒有往下的文件夾)； (這種情況是圖片在某一個盤下，并且其圖片上面還有很多相應(yīng)的文件夾)例子： 這是一幅美麗的圖片，請欣賞 這是一幅美麗的圖片，請欣賞 十一、HTML 標(biāo)簽中alt屬性：Alt屬性是位于img中的一個屬性，他的作用是當(dāng)你想要顯示的圖片因為網(wǎng)速不好、路徑不對等多種原因無法顯示你的圖片時，可顯示該圖片的名稱，以便讀者可以知道自己看不到的圖片是什么例子：這是一幅美麗的圖片，請欣賞十二、HTML頁面中添加背景圖片： 在HTML里添加背景圖片時的語句跟插入圖片的語句不一樣，插入圖片的語句是，而添加背景圖片的語句是例子：這是一幅美麗的圖片背景，請欣賞十三、頁面背景顏色 ；【bgcolor屬性值可以是RGB值rgb:(0,0,0)、十六進(jìn)制數(shù)#000000、顏色名black】例子：bkjdehfkdsh十四、HTML中文字和圖片的排列方式 在HTML中文字位于圖片的上方 在HTML中文字位于圖片的中間 在HTML中文字位于圖片的下方 Bottom是默認(rèn)的對齊方式，即是下方例子：（效果見HTML學(xué)習(xí)中的DIY）這是一幅漂亮的圖片十五、HTML中圖片浮動在段落的左邊或是右邊 圖片位于段落的右邊 一段文字 圖片位于段落的左邊 一段文字例子：（效果見HTML學(xué)習(xí)中的DIY）這是一幅漂亮的圖片這是一幅漂亮的圖片這是一幅漂亮的圖片這是一幅漂亮的圖片這是一幅漂亮的圖片這是一幅漂亮的圖片【還有文字可設(shè)置在圖片的top、middle、bottom顯示】十六、HTML鏈接的target屬性 在HTML中鏈接語句中target屬性作用是指打開的鏈接文檔將在何處顯示，命名target語法：NLP培訓(xùn)，其中的文字或是圖片是被作為超級鏈接來顯示的，_blank的意思是鏈接的方向?qū)⑹且孕碌拇翱谛问斤@示,沒有此屬性的鏈接打開時顯示在當(dāng)前的瀏覽器的窗口，有此屬性的鏈接打開是以新的窗口出現(xiàn)，之前的窗口仍然可以看見例子：中國NLP培訓(xùn)網(wǎng)論壇張翔NLP十七、HTML鏈接的name屬性（內(nèi)容足夠多才能現(xiàn)在在最上端） 在html的鏈接中還有一個name屬性，他的書寫語法：文本等，他的作用是命名了一個錨，錨的作用就是相當(dāng)于一本書的書簽，當(dāng)一個網(wǎng)頁有很多內(nèi)容的時候，你想趕快尋找你想了解的內(nèi)容時，此時的錨就起到把你帶到你想趕快知道的那個地方去，錨的名稱是由自己取的，根據(jù)自己的喜好，光有錨的名稱是不行的，還要有鏈接錨的鏈接才能真正實現(xiàn)錨的作用，這就是鏈接錨的鏈接語法：文本等，錨的鏈接在文檔的上部定義例子：創(chuàng)建指向本網(wǎng)頁的錨所能看到空間111kkkkkffffffffff111ffffffffffsafdefdgfdgfdhgdfshgdfbdvgdrtgerffffffffffkkkkkffffffffff十八、HTML的電子郵箱鏈接 在網(wǎng)頁中創(chuàng)建電子郵箱的鏈接，前提是機(jī)子有安裝郵箱客戶端程序軟件才可以，他的語法跟鏈接的基本語法一樣，不一樣的地方是鏈接要填寫的內(nèi)容，其中用%20表示空格例子：此處是郵箱鏈接處：郵箱鏈接十九、HTML表格、邊框、表頭、空表格的相關(guān)屬性 在HTML中，用這樣的一對標(biāo)簽來定義表格，用來定義表格的行，用來定義表格單元，表格的內(nèi)容可以使文本、圖片、表格、水平線、段落、表單、列表；邊框的大小仍然由border屬性定義，在表格的開始標(biāo)簽中定義；表格的表頭由一對標(biāo)簽定義；空的單元格如果沒有內(nèi)容顯示，則單元格的邊框不顯示，為了顯示沒有內(nèi)容的單元格的邊框，可在空的單元格里添加空格占位符“ ”此處的分號是英文下的格式。例子：名稱格式小小鳥小小鳥1,21,2 二十、HTML表格相連標(biāo)簽、屬性 在HTML的表格中，還有很多有關(guān)表格的詳細(xì)操作，比如跨行、跨列、表格的標(biāo)題等；1 html的表格中跨行和跨列的屬性用rowspan和colspan定義，即是合并幾行或是幾列顯示一個信息（合并單元格），跨行和跨列的語法可以在標(biāo)簽里添加，也可以在標(biāo)簽里添加，記得不能在標(biāo)簽里添加，標(biāo)簽里添加可實現(xiàn)居中，如果想在也實現(xiàn)的話，可輸入align屬性即可；同時跨行或是跨列可在很多單元格里實現(xiàn)操作，注意的是如果想是跨行的操作，rowspan屬性要寫在實現(xiàn)跨行的第一個標(biāo)簽里2 在html的表格中cellpadding屬性意思是：表格的邊框與內(nèi)容的距離，即是文字離邊框的邊距，文字所占據(jù)的大小沒變，變的是表格大小；cellspacing屬性意思的是：單元格與單元格之間的間距3 在html的表格中還有表格的標(biāo)題標(biāo)簽，這樣的一對標(biāo)簽即是，位于開始標(biāo)簽的下面4 在html的表格中frame屬性的意思是如何顯示邊框，屬性值有：box（顯示所有的邊框）、above(顯示上邊框)、below(顯示下邊框)、hsides(顯示上下邊框)、vsides(顯示左右邊框)例子：表格的標(biāo)題123456123456287980123456987287980123456555h354324654二十一、HTML標(biāo)簽 在HTML表格中，有一個標(biāo)簽的作用是實現(xiàn)整列整列單元格的各種格式的變化，不需要對一個一個單元格進(jìn)行操作了，這個標(biāo)簽就是,這個標(biāo)簽只有在table元素中使用，其中span是定義跨多少列的屬性例子：ISBNTitlePricedsfdrewewgvwe4324dsfdrewewgvwe4324二十二、HTML有序列表、無序列表 HTML列表是一些項目的列表，這些項目的列表可以是有序的，也可以是無序的，因此有序的項目列表用成對標(biāo)簽定義，項目的前面是數(shù)字進(jìn)行標(biāo)記，無序的項目列表用定義，項目用的是小黑點標(biāo)記，其中的項目用進(jìn)行定義，同時項目不僅可以使文本，也可以是段落、圖片、換行符、鏈接、列表等等例子1（有序列表）：咖啡巧克力面包例子2（無序列表）：咖啡巧克力面包二十三、HTML自定義列表 HTML列表中還有可以自己定義的列表，一對標(biāo)簽就是定義自定義列表的標(biāo)簽，標(biāo)簽定義的是列表中的列項，標(biāo)簽是描述列表中的列項，而定義列表項的內(nèi)容形式也可以是很多類型的例子：一個自定義的列表：咖啡好喝的牛奶不好喝二十四、HTML不同類型的無序列表符號 屬性值disc定義的無序列表符號是圓；屬性值circle定義的無序列表符號是圓圈；屬性值square定義的無序列表符號是方塊例子：一個項目符號是圓的列表：4356745574一個項目符號是圓圈的列表：4245784245一個項目符號是方塊的列表：7857245245二十五、HTML不同類型的有序列表符號 屬性值A(chǔ)定義是大寫字母項目符號；屬性值a定義的是小寫字母項目符號；屬性值I定義的是羅馬字母項目符號；屬性值i定義的是小寫羅馬字母項目符號(在列表中可以實現(xiàn)項目符號不一樣，但順序是遞增的)例子：一個項目符號是數(shù)字的有序列表：4356745574一個項目符號是字母的有序列表：4245784245一個項目符號是小寫字母的有序列表：7857 245245一個項目符號是羅馬字母的有序列表：7857245245一個項目符號是小寫羅馬字母的有序列表：7857245245二十六、HTML嵌套列表例子：一個嵌套列表：咖啡茶紅茶綠茶中國綠茶非洲綠茶牛奶二十七、表單的各種類型 在HTML中用表單標(biāo)簽定義各種表單，語法為：【顯示內(nèi)容】，inptut屬性是表單屬性中常用的屬性，type定義了輸入的類型，輸入類型有：1 文本域（text fields,輸入可以有文本、數(shù)字等）2 單選按鈕（radio buttons）3 復(fù)選框（checkboxes）4 下拉列表框(每個選項的名稱)5 文本域（textarea，可以輸入多行的文本）6 創(chuàng)建按鈕7 為表單創(chuàng)建一個帶有標(biāo)題的框框例子：姓名：密碼：malefemale【創(chuàng)建單選框】咖啡茶【創(chuàng)建復(fù)選框】玫瑰花梔子花桂花【創(chuàng)建下拉列表框】【創(chuàng)建可以輸入很多行的文本域】【創(chuàng)建按鈕】健康信息身高：體重：【為表單的周圍建立一個帶有標(biāo)題的框框】二十八、HTML標(biāo)簽1 為html文檔定義樣式信息，type屬性也是style標(biāo)簽必須帶有的，他為style標(biāo)簽表達(dá)的意思是樣式以怎樣的類型呈現(xiàn)，通常賦予的是text/css屬性值，此樣式信息都在head中定義，比如：pcolor:red信息2 同時style有時也代替廢棄的一些屬性、標(biāo)簽來表達(dá)原有的信息舊的表達(dá)背景顏色的語法：新的表達(dá)背景顏色的語法：舊的表達(dá)字體排列的語法：新的表達(dá)字體排列的語法：表達(dá)字體系列的語法：二十九、HTML塊標(biāo)簽標(biāo)簽 division的中文意思是分割、區(qū)域、分組，他是將文檔中的內(nèi)容有意的放在一起，并做一定的樣式變化，而class和di屬性是使div標(biāo)簽中內(nèi)容套用一些樣式，樣式是在中style定義例子：.newsbackground-color:yellow;text-align:center;color:blackNEWS WEBSITEsome text. some text. some text.News headline 1劉文華文華大系統(tǒng)News headline 2some text. some text. some text.三十、Html的class屬性 class此屬性的意思“類”，他的屬性值是“類名”，可以為元素定義很多類，很多類之間用空格隔開即可，而此類名大多數(shù)是用于指向樣式表中的定義的類例子：.mcolor:blue.nbackground-color:red;text-align:center我是中國人我是中國人我是中國人三十一、Html的id屬性 id定義元素的唯一id，只能定義一個id，他的語法與class不一樣，且不能定義很多id，只能定義一個id例子：#mcolor:white;background-color:blue;text-align:center我是中國人三十二、HTML塊標(biāo)簽span標(biāo)簽 Html標(biāo)簽的作用是組合文檔中行內(nèi)的元素，可以對組合內(nèi)的元素進(jìn)行一些格式化，使用的屬性有class和id，但他的語法沒有固定的，可以在span標(biāo)簽中添加，也可以在他的父標(biāo)簽中添加屬性更改span組合內(nèi)元素的格式，最好的情況是在標(biāo)簽中定義class屬性值的時候，將span名帶上，然后在主體中直接在span的父元素中引用class即可：.【p.m span.】例子：（效果見html的DIY）.m background-color:red.n spancolor=green中國人中國人中國人中國人中國人中國人中國人中國人三十三、HTML布局 在html中可以通過使用div元素和table元素實現(xiàn)像報紙上那種格式化的分欄，將內(nèi)容放入很多的列中1 例子：中國人中國人民解放軍中國人民解放軍中國人民解放軍中國人民解放軍中國人民解放軍中國人民解放軍中國人民解放軍中國人民解放軍中國人民解放軍中國人民解放軍中國人民解放軍中國人民解放軍中國人民解放軍中國人民解放軍中國人民解放軍中國人民解放軍中國人民解放軍2 例子：(效果見DIY)div#containerwidth:500pxdiv#headerbackground-color:#aabbcc;div#menubackground-color:#dddddd; width:100px; height:200px; float:left;div#contentbackground-color:#aaaaaa; width:400px; height:200px; float:left;div#footerbackground-color:#aabaaa;h1margin-bottom:0;我是中國人我是中國人我是中國人我是中國人三十四、html框架 在Html中可以通過html代碼實現(xiàn)在一個頁面中劃分很多的頁面窗口，使用的標(biāo)簽是，表示的意思是框架集，屬性用cols和rows表示將要在瀏覽器的頁面中劃分的窗口大小，在劃分的窗口中，可看到顯示的邊框線，這個邊框線是可以通過手動改變各個窗口的大小的，但是這樣不好，可以用noresize屬性實現(xiàn)窗口中的邊框線不改變。還要注意的是標(biāo)簽和兩者是不能同時出現(xiàn)的，除了一些情況例子：(混合框架結(jié)構(gòu))三十五、HTML標(biāo)簽 在頁面中創(chuàng)建框架，使用的標(biāo)簽是,中間的路徑也可以是網(wǎng)頁地址例子：三十六、HTML字體 在以后的html中，字體標(biāo)簽即將被廢棄,取而代之的是使用樣式來設(shè)置文字的字體、文字的尺寸、文字的顏色，比如：文字的字體：times、verdana、courier文字的尺寸：50、50%文字顏色：red、#ff0000、rgb(255,0,0)三十七、HTML樣式(CSS層疊樣式表單)1 是當(dāng)很多網(wǎng)頁需要同一種樣式時，通過外部樣式表進(jìn)行插入將是一個理想的選擇，可以通過更改一個文件實現(xiàn)整個站點的外觀的更改。語句是在中插入，如： ；2 是當(dāng)只有單個網(wǎng)頁需要樣式的插入時，使用的是內(nèi)部樣式表，該語法是在中使用標(biāo)簽進(jìn)行定義內(nèi)部樣式表，語法是：body background-color:redp margin-left:20px；3 是當(dāng)一些特殊的樣式需要運用到個別的元素上時，使用的是內(nèi)聯(lián)樣式，采用的是style樣式屬性在元素中定義要插入的樣式，語法：我是中國人三十八、html標(biāo)簽1 標(biāo)定義的是文檔與外部資源的關(guān)系，他只在樣式表的鏈接上使用；2 標(biāo)簽是個空的標(biāo)簽，他只有一些屬性；3 只在部分中出現(xiàn)，且出現(xiàn)的次數(shù)不定；4 在html中沒有閉合標(biāo)簽，在xhtml中一定要加上閉合標(biāo)簽；語法：例子：三十九、HTML標(biāo)簽的rel屬性 rel屬性定義的是當(dāng)前的文檔與被鏈接的文檔之間的關(guān)系，他的語法是：link rel=value ，如rel=stylesheet的意思是表示被鏈接的文檔是個樣式表，除了stylesheet屬性值外被所有的瀏覽器支持，還有部分屬性值被瀏覽器支持，如：alternate 文檔的替代版本（比如打印頁、翻譯或鏡像）。 stylesheet 文檔的外部樣式表。 start 集合中的第一個文檔。 next 集合中的下一個文檔。 prev 集合中的上一個文檔。 contents 文檔的目錄。 index 文檔的索引。 glossary 在文檔中使用的詞匯的術(shù)語表（解釋）。 copyright 包含版權(quán)信息的文檔。 chapter 文檔的章。 section 文檔的節(jié)。 subsection 文檔的小節(jié)。 appendix 文檔的附錄。 help 幫助文檔。 bookmark 相關(guān)文檔。 四十、HTML標(biāo)簽 標(biāo)簽定義的是html文檔中元信息，是head標(biāo)簽的輔助標(biāo)簽，標(biāo)簽有兩個屬性，分別是http-equiv屬性和name屬性1. name屬性及參數(shù) Name屬性主要是描述網(wǎng)頁的一些信息，便于機(jī)器人進(jìn)行網(wǎng)頁內(nèi)容的查找和分類，與name屬性想對應(yīng)的是content屬性值，name屬性還有一些參數(shù)，他的語法格式：，下面是一些參數(shù)的介紹：1 Keywords（關(guān)鍵字）參數(shù):主要是讓搜索引擎知道你網(wǎng)頁的關(guān)鍵字是哪些 例子：2 Description（描述）參數(shù)：主要是讓搜索引擎知道你網(wǎng)頁主要內(nèi)容 例子：3 機(jī)器人向?qū)В褐饕亲屗阉饕嬷滥男╉撁嫘枰饕?，哪些頁面時不需要索引的,content參數(shù)有all,none,index,noindex,follow,nofollow；例子：4 作者，主要是標(biāo)記網(wǎng)頁的作者的，例子： 5 發(fā)電機(jī)，發(fā)生器，主要是標(biāo)記文檔編輯使用的軟件，例子6 經(jīng)過修訂的，主要是標(biāo)記文檔是怎么呈現(xiàn)的，例子2. http-equiv屬性http-equiv顧名思義，相當(dāng)于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網(wǎng)頁內(nèi)容，與之對應(yīng)的屬性值為content，content中的內(nèi)容其實就是各個參數(shù)的變量值。 meta標(biāo)簽的http-equiv屬性語法格式是： ；其中http-equiv屬性主要有以下幾種參數(shù)： 1 Expires(期限) 說明：可以用于設(shè)定網(wǎng)頁的到期時間。一旦網(wǎng)頁過期，必須到服務(wù)器上重新傳輸。 用法： 注意：必須使用GMT的時間格式。 2 Pragma(cache模式) 說明：禁止瀏覽器從本地計算機(jī)的緩存中訪問頁面內(nèi)容。 用法： 注意：這樣設(shè)定，訪問者將無法脫機(jī)瀏覽。 3 Refresh(刷新) 說明：自動刷新并指向新頁面。 用法：(注意后面的引號，分別在秒數(shù)的前面和網(wǎng)址的后面) 注意：其中的2是指停留2秒鐘后自動刷新到URL網(wǎng)址。例子： 對不起。我們已經(jīng)搬家了。您的 URL 是 4 Set-Cookie(cookie設(shè)定) 說明：如果網(wǎng)頁過期，那么存盤的cookie將被刪除。 用法： 注意：必須使用GMT的時間格式。 5 Window-target(顯示窗口的設(shè)定) 說明：強(qiáng)制頁面在當(dāng)前窗口以獨立頁面顯示。 用法： 注意：用來防止別人在框架里調(diào)用自己的頁面。 6 content-Type(顯示字符集的設(shè)定) 說明：設(shè)定頁面使用的字符集。 用法： G、content-Language（顯示語言的設(shè)定） 用法：四十一、HTML腳本 HTML腳本使得頁面更加的生動和具有交互性1 標(biāo)簽語法：. Type屬性值是腳本的編輯