Web_Design 板


LINE

HTML主要結構語法:<!DOCTYPE html>、<html>、<head> 、<body>、註解等 網誌圖文版: https://www.b88104069.com/archives/4620 本文介紹HTML網頁文件主要結構,從宣告版本<!DOCTYPE html>、<html></html>、 <head> </head>、到<body></body>,同時說明如何添加註解,以<pre></pre>標籤及<br> 顯示原始排版,最後補充顯示空格特殊符號&nbsp;。 一、HTML文件 這是HTML標準也是主要結構,各標籤用法如下: <!DOCTYPE html>: 因為有約定成俗統一的文法,我們才能使用同一個語言溝通,不同瀏覽器在顯示眾多網頁 時也是如此。HTML便是一套規定瀏覽器如何展現解析網頁內容的標準,雖然最新版本是 2014的HTML 5,但是在網頁技術發展的過程中,在這之前還有HTML 2、HTML 3、HTML 4等 許多版本,可以想見會有很多網頁是在新版本發佈之前設計好的,它們不可能根據HTML 5 編寫,所以每一份HTML文件都應該在開頭第一行寫明所適用的HTML版本,這樣瀏覽器才能 依照原始設計者的預期,正確解析網頁內容。所謂的「DOCTYPE」是Document Type文件型 態的意思,「<!DOCTYPE html>」便是告訴瀏覽器我的網頁是依照HTML 5標準設計的。 輔充說明,HTML標準是由國際共同承認的W3C組織發佈,英文全名為World Wide Web Consortium,之後會介紹到的CSS也是由W3C制定。 <html></html>:這個標籤的開始和結束代表整個HTML文件本身,等於是告訴瀏覽器什麼 時候開始,什麼時候結束。 <head> </head>:HTML文件的頭部或者是封面,它並不是瀏覽器要顯示出來的內容,是有 關於這份文件的基本資訊,例如這裡很典型的網頁標題,瀏覽器會把<Title>贊贊小屋 </Title>中的「贊贊小屋」顯示在索引標籤上。 <body></body>:HTML文件中真正要瀏覽器顯示在網頁上的內容。 二、分行及縮排 通常整個HTML文件會有分行及縮排的佈局,這樣閱讀比較容易,程式設計時也方便修改。 圖片上可以清楚看出原始HTML文件及瀏覽器顯示網頁。 三、HTML註解 程式為了方便閱讀都有標示註解的設置,HTML是以「<!--」和「-->」的中間部份保留為 註解。 這裡用了兩種形式: A.多行註解: <!-- Document Type HTML5標準 一定要寫在第一行 --> B.單行註解: <!-- Html文件開始 --> 四、網頁原始碼 Chrome瀏覽器滑鼠右鍵,點選「檢視網頁原始碼」,可以看到雖然網頁上只有「贊贊小屋 」,原始的HTML文件有很多其他內容,正是這些符合統一規範的其他內容,瀏覽器得以一 致性的翻譯無數網頁。所以一般所謂的網頁原始碼,其實就是網頁設計者的HTML原始文件 。 五、空格及空行 HTML呈現網頁時有個特性,即使有再多的連續空格或空行,瀏覽器會視為單一空格,所以 截圖所示的「這是第一行」和「這是第二行」在網頁上是在同一行,前後差了一個空格, 「這裡面有三個 空格」也會在網頁上顯示為只有一個空格。 六、<pre></pre>標籤 真的有需要在網頁上顯示兩個以上空格或空行時,可以使用<pre></pre>標籤( preformatted text),它意思是HTML文件設計者已經預計排好版面了,希望瀏覽器以原 始排版方式呈現。 七、換行<br>及空格&nbsp; 除了<pre></pre>標籤,HTML有一個專門指示換行的<br>標籤,取自英文break line。先 前所介紹的HTML標籤都是<></>成雙成對,標籤中間是想要表達的內容,<br>是比較特別 的單標籤,不用結束,其實也是因為它沒有要表達的內容,不用開始跟結束,另一個常見 的單標籤為顯示一條水平線的<hr>。 另外針對像是在內文中需要兩個以上空格的情形,HTML有提供一系列的特殊符號輸入法, 正式名稱為字元實體(Character entities),它作用類似編碼對照表,輸入「&amp;」 是「&」,「&nbsp;」是空格,輸入「&lt;」是「<」,輸入「&gt;」是「>」。 這些特殊符號輸入在特定場合是非常關鍵而且必須的,各位讀者可以想見,贊贊小屋在寫 這一篇網頁文章,想要顯示<br>不能直接在鍵盤上打字,必須乖乖使用神奇代碼。 HTML版本、單標籤、XHTML 本文提到HTML版本和單標籤,其實是個很好的案例可以大致瞭解HTML的發展歷史。除了正 統的HTML系列,W3C曾經嘗試導入更為嚴謹的XHTML(Xtensible HyperText Markup Language),主要是因為W3C覺得HTML過於鬆散,以<br>為例,HTML中<br>和<BR>都可以 ,給它加個結束記號<br />也沒有問題,但是在一絲不茍的XHTML中,只能小寫,一定要 加結束記號。從W3C標準制定者的角度而言,這樣才是規範,可是在這之前,已經有千千 萬萬的網頁是以HTML鬆散規範設計好的,況且網頁設計師自由習慣了,所以大部份使用者 和瀏覽器開發商根本無視於W3C苦口婆心的XHTML,W3C只好默默放棄XHTML計劃。後來2014 年W3C發佈了最新一代HTML 5標準,算是回歸了HTML路線,並且向下兼容。 從這個發展角度來看,網頁設計最大的好處是直接第HTML文件第一行宣告<!DOCTYPE html>即可,因為是最新版本有兼容性。讀者有興趣可以參考較早HTML版本的宣告語句, 落落長又很難理解。不過話說回來,語言和標準的東西本來不一定有道理,約定成俗和遵 守就是了。 延伸閱讀: Windows記事本也能設計網頁,寫下第一行HTML程式碼 https://www.b88104069.com/archives/4606 -- 周末,我們繼續Excel:=>21.心得=>5.其他=>3.office 會計人的Excel小教室: https://www.facebook.com/acctexcel --



※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 60.250.152.209 (臺灣)
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1600249045.A.0D6.html
1F:推 a321b321ab: 基礎概念推 09/17 12:29
2F:→ loeiia: 感謝推 11/06 03:05







like.gif 您可能會有興趣的文章
icon.png[問題/行為] 貓晚上進房間會不會有憋尿問題
icon.pngRe: [閒聊] 選了錯誤的女孩成為魔法少女 XDDDDDDDDDD
icon.png[正妹] 瑞典 一張
icon.png[心得] EMS高領長版毛衣.墨小樓MC1002
icon.png[分享] 丹龍隔熱紙GE55+33+22
icon.png[問題] 清洗洗衣機
icon.png[尋物] 窗台下的空間
icon.png[閒聊] 双極の女神1 木魔爵
icon.png[售車] 新竹 1997 march 1297cc 白色 四門
icon.png[討論] 能從照片感受到攝影者心情嗎
icon.png[狂賀] 賀賀賀賀 賀!島村卯月!總選舉NO.1
icon.png[難過] 羨慕白皮膚的女生
icon.png閱讀文章
icon.png[黑特]
icon.png[問題] SBK S1安裝於安全帽位置
icon.png[分享] 舊woo100絕版開箱!!
icon.pngRe: [無言] 關於小包衛生紙
icon.png[開箱] E5-2683V3 RX480Strix 快睿C1 簡單測試
icon.png[心得] 蒼の海賊龍 地獄 執行者16PT
icon.png[售車] 1999年Virage iO 1.8EXi
icon.png[心得] 挑戰33 LV10 獅子座pt solo
icon.png[閒聊] 手把手教你不被桶之新手主購教學
icon.png[分享] Civic Type R 量產版官方照無預警流出
icon.png[售車] Golf 4 2.0 銀色 自排
icon.png[出售] Graco提籃汽座(有底座)2000元誠可議
icon.png[問題] 請問補牙材質掉了還能再補嗎?(台中半年內
icon.png[問題] 44th 單曲 生寫竟然都給重複的啊啊!
icon.png[心得] 華南紅卡/icash 核卡
icon.png[問題] 拔牙矯正這樣正常嗎
icon.png[贈送] 老莫高業 初業 102年版
icon.png[情報] 三大行動支付 本季掀戰火
icon.png[寶寶] 博客來Amos水蠟筆5/1特價五折
icon.pngRe: [心得] 新鮮人一些面試分享
icon.png[心得] 蒼の海賊龍 地獄 麒麟25PT
icon.pngRe: [閒聊] (君の名は。雷慎入) 君名二創漫畫翻譯
icon.pngRe: [閒聊] OGN中場影片:失蹤人口局 (英文字幕)
icon.png[問題] 台灣大哥大4G訊號差
icon.png[出售] [全國]全新千尋侘草LED燈, 水草

請輸入看板名稱,例如:e-shopping站內搜尋

TOP