HTML標記與屬性

阿新 • • 發佈：2019-01-15

說到HTML標記就得先說說HTML元素

HTML文件是由HTML元素組成的，而HTML文件就是我們平常所見到的網頁，我們看到的網頁上的表格、圖片、列表，都是網頁上的元素

可以說網頁就像是拼圖一般，而元素就是一塊一塊的圖，用一個一個的元素將我們的網頁拼接完整

當然，單單是使用HTML來書寫網頁的話可能還不能達到我們所預期的要求，那麼那時我們就需要加入CSS（層疊樣式表）來進行樣式的佈置，這個我們在CSS板塊去講如何將我們的網頁做得漂亮

現在元素的概念應該是有了，那元素和標記又有什麼關係呢？

可以說，我們的元素是由我們的標記構成的

當然我們的標記可以分為兩種：1、單標記；2、雙標記。當然網上也有其它的說法，這僅僅是說法的不一樣，如果覺得網上的說法好，這個也沒有什麼

現在先講一個標記規則，標記是由成對出現的<>來書寫的，所有的標記都必須按<標記符號>這種方式書寫，比如<p>段落標記

那既然分為單標記和雙標記，怎麼去構成元素呢？

單標記：元素=<img>

雙標記：元素=<p>內容文字</p> <p>起始標記 </p>結束標記

這樣舉例子，大家應該看得懂吧，單標記是沒有內容文字的，所以沒有</img>這個部分，不過個人建議開始學習HTML的同學在寫單標記時這樣書寫<img />，在>前加上一個“/”，這樣的話可以很清楚的看見自己的這個元素的結束

這裡有個提醒大家注意的問題，就是雙標記一定記得是成對出現的，並且在後面使用嵌入標記時一定要按照規定書寫

嵌入標記：就是在一個標記中一個標記，典型的例子就是我們的html文件的<html><head></head><body></body></html>，嵌入時一定不要將結束標記寫錯位置

還是不能明白的話

比如後面我們要學習到的<p>標記和<span>標記，嵌入時正確的書寫形式：<p><span></span></p>，錯誤的書寫形式：<p><span></p></span>

一定要注意，雖然是個小問題，但初學者很容易在書寫雙標記時沒有成對出現，順序會出錯

講了一些很簡單的細節的東西，接下來我們講講標記的屬性

什麼是標記的屬性呢？

比如：<img src="hellow.gif">這個元素中出現了src="hellow.gif"，這個src就是<img>標記的屬性，而=後面用""包裹起來的是屬性的值，其作用是告訴我們瀏覽器，在遇到這個標記時需要載入後面src值的hellow.gif圖片

當然我們標記的屬性還有很多很多，在之後程式碼的練習中遇到了可以通過W3Cschool網站進行意思查詢，這裡只需要知道什麼是屬性就可以了

現在講講我們的一些標記

<!doctype html>告訴瀏覽器HTML的版本(這種格式為HTML5版本)，後面html是指明該文件的根元素，什麼是根元素呢，就是說本文件的根部，也是最大的元素，其中包含了所有的其它元素<html lang="en"></html>標記，中間包含網頁的內容,lang="en"表示搜尋引擎搜尋時，告知搜尋引擎該網頁時中文網頁還是英文網頁，中文網頁為zh-CN，當然現在的lang規定中對這種網頁分類又做了改變，可以在網上查查最新的分類

<head></head>網頁的頭部分，其中有<meta 標記，一般的html5網頁會預設有charset="UTF-8">這個是告訴網頁我的網頁編碼集是UTF-8，這個和網頁亂碼有關係

其中還有<title></title>標記是書寫視窗名

<body></body>網頁的身體部分，所有導航欄以下的網頁內容都寫在該標記中

在<body></body>中常見的標記有：

<h1>~<h6> 標題標記（heading），也就是正文的標題，分為6檔，字型會自動加粗，h1到h6表示重要性，這個和之後瀏覽器的索引有關係，切記：不要簡單認為只是按字型大小來區分，是按照其重要性來進行排列，詳細可自行去檢視W3C上的註解預設：塊級元素

<p></p> 段落標記(paragraph) 預設：塊級元素

<blockquote></blockquote> 引用文字（blockquote）和<p>區別在於預設縮排塊級元素

列表ol、ul、dl 列表標記單獨存在是沒有什麼意義的塊級元素

有序列表(orderd list) ol，需要和li標記進行聯合使用做出有序的列表，字型前面預設為數字，從1、2、3....連續

無序列表(unorderd list) ul，需要和li標記進行聯合使用，和有序列表的區別在於前面部分預設是點

自定義列表(defined list) di，自定義列表，和前面兩個列表有較大的區別，在書寫自定義列表前先得書寫dt自定義標題，然後在標題下面寫dd自定義內容，並且每個標題內容寫完後接著書寫dt，然後加上dd：<dl><dt>人稱</dt><dd>你</dd><dd>我</dd><dt>姓氏</dt><dd>趙</dd><dd>錢</dd></dl>

預排版<pre> 將我們書寫的文字的原本格式保持下來，除了該標記的內容可以有回車換行以外，其它的標記內容換行都不起作用，並且該標記中的內容中出現幾個空格就會寫出來，其餘標記的內容的空格都會被省略為一個，換行也會變為一個空格塊級元素

分割槽塊<div> 本身沒有什麼意義，可以看做是一個盒子，一般將一些元素放入，可以起到一個分割槽的效果，但現在HTML5中已不建議全篇使用div進行分割槽，HTML5中一個重要思想就是語義化，出現了一系列具有意義的類似div的標記代替div的使用，在網頁製作的學習前期可以使用div進行簡單的分割槽，在CSS使用中，有重要的作用塊級元素

跨越多個字元<span> 和<p>標記是很類似的，不過因為它是內嵌元素，那這個地方就要提一提什麼是內嵌什麼是塊級元素了

塊級和內嵌元素，簡單用一句話概括就是塊級元素獨佔一行，後面的內容會換行，內嵌元素則不會使後面的內容換行後面的內容會跟在其內嵌元素後面；

這樣的話應該知道<span>和<p>標記的區別了，當然塊級元素和內嵌元素在之後學習了CSS內容後就可以進行改變，所以要對塊級和內嵌有一個深刻的印象，在之後學習CSS時再深入瞭解和探究

特殊字元，其實就是一些標準鍵盤上沒有的符號，通過特殊字元可以在網頁上實現這些字元的輸入，當然最常用的是在網頁上書寫HTML網頁，其中在使用<、>時會遇到這個問題，當然，也不需要死記硬背那些特殊字元，在一般的編輯器中輸入&就可以進行查詢，實在找不到就去百度查查即可，以&開始";"結束也可以認為是內嵌元素雖然沒有被<>包裹

超連結<a> 是網頁上很常見的一個標記，其中它最重要的是有一個href的屬性，通過這個屬性可以達到連結網頁，下載，做描點等功能內嵌元素

影象<img src="" alt="" title=""> 在網頁上顯示圖片，src的值是圖片的路徑，alt是當圖片載入失敗時顯示的文字，title是當滑鼠放在圖片上時顯示出來的文字，現在僅支援部分格式的圖片，如：GIF,JPG,PNG 內嵌元素

多媒體資訊<object> 插入一個多媒體資訊，不過現在已經被HTML5使用其實元素替換<video>視訊<audio>音訊替換內嵌元素

表格<table> 國內在2008年前的網頁佈局普遍是使用表格來進行佈局的，不過現在主要運用於通過JS和AJAX來進行區域性資料重新整理塊級元素

其中包含兩個元素

<thead></thead> 表格的頭部，書寫標題的位置，其中使用<tr></tr>來表示一行資料，<th></th>表示一列資料

<tbody></tbody> 表格的身體，書寫表格中的資料，使用<tr></tr>表示一行資料，<td></td>表示一列資料

<td></td>與<th></th>的區別，th在td的基礎上字型加粗，並且進行了居中

<table>中有兩個屬性：cellspacing設定每個格子之間的間隔，border設定邊框的大小

插入其它網頁<iframe> 在其它頁面中加入網頁，目前已經很少使用，使用src屬性來插入指定的內容塊級元素

還有一個更為常用的標記——表單，在下面會單獨進行介紹，本內容一定要了解每個標記的意思和用處，並且區分它是塊級還是內嵌元素，多進行練習，這些知識並不難理解

HTML標記與屬性

HTML標記與屬性

Html元素與屬性

HTML標籤與屬性集合

HTML標記【p標記與align屬性及pre的使用】！

保留多行文本框的換行與空格樣式，並轉義HTML標記的尖括號

html基本標簽與屬性

html格式標記與文字標記

保留多行文字框的換行與空格樣式，並轉義HTML標記的尖括號

HTML meta標籤總結與屬性使用介紹

Jsoup學習筆記2：Jsoup解析HTML程式碼標籤與屬性

HTML常用標籤與屬性

html —— 檢視元素屬性與 js 全域性屬性

html5中表單新增元素與屬性

Java成員變量與屬性的區別，簡單最易懂的解釋！！！

HTML的事件屬性

HTML標記的語法是什麽？

Html標記語言學習一2017年6月12日

前端HTML基礎與css

HTML 全局屬性

全棧JavaScript之路（二十）HTML5 插入 html標記（二）insertAdjacentHTML

HTML標記與屬性

相關推薦