HTML基礎知識標簽和屬性的語義化

時間：2023-02-23 12:27:01 | 來源：營銷百科

時間：2023-02-23 12:27:01 來源：營銷百科

HTML基礎知識標簽和屬性的語義化：分離結構與表現的另一個重要方面是使用語義化的標記來構造文檔內容。一個 XHTML 元素的存在就意味被標記內容的那部分有相應的結構化的意義，沒有理由使用其他的標記。換句話說，不要讓 CSS 使一個 HTML 元素看起來就像另一個 HTML 元素，比如用div來代替p標記標題。
　　首先是關于語義（Semantics）和默認樣式的區(qū)別，默認樣式是瀏覽器設定的一些常用tag的表現形式，個人認為他的主要目的就是讓大家直觀的認識標簽(markup)和屬性(attribute)的用途和作用，很明顯Hx系列看起來很像標題，因為擁有粗體和較大的字號。strong,em用來區(qū)別于其他文字，起到了強調的作用。至于列表和表格很明顯的告訴你他們是做什么的。
　　其次，語義化的網頁的好處，最主要的就是對搜索引擎友好，又了良好的結構和語義你的網頁內容自然容易被搜索引擎抓取，你網站的推廣便可以省下不少的功夫。
　　具體的語義和用途在，XHTML1.0 TAG 參考中都已經說明，這里將一些容易遺忘或者混淆的TAGS和屬性予以補充。
　　Hx
　　h1、h2、h3、h4、h5、h6,作為標題使用，并且依據重要性遞減。h1是最高的等級。
　　例如:
　　h1文檔標題/h1
　　h2次級標題/h2
　　而不要使用
　　div class='title'文檔標題/div，或者span class='title'文檔標題/span.很明顯搜索引擎對于后者是不會認為他是標題的。
　　p
　　段落標記，知道了p作為段落，你就不會再使用br/來換行了，而且不需要br/br/來區(qū)分段落與段落。p/p中的文字會自動換行，而且換行的效果優(yōu)于br。段落與段落之間的空隙也可以利用CSS來控制，很容易而且清晰的區(qū)分出段落與段落。在利用行高(line-height)很容易的定義出行間距，再定義首字下沉等效果，那就挺完美了。
　　例如：
　　p在利用行高(line-height)很容易的定義出行間距，再定義首字下沉等效果，那就挺完美了。/p
　　ul、ol、li
　　ul無序列表，很常見的到了大家廣泛的使用，ol有序列表也挺常用。在web標準化過程中，ul還被更多的用于導航條，本來導航條就是個列表，這樣做是完全正確的，而且當你的瀏覽器不支持CSS的時候，導航鏈接仍然很好使，就是美觀方面差了一點。
　　例如:
　　ul
　　li項目一/li
　　li項目二/li
　　li項目三/li
　　/ul
　　ol
　　li第一章/li
　　li第二章/li
　　li第三章/li
　　/ol
　　dl、dt、dd
　　dl就是'定義列表'。比如說詞典里面的詞的解釋、定義就可以用這種列表。
　　例如：
　　dl
　　dtDog/dt
　　ddA carnivorous mammal of the family Canidae./dd
　　/dl
　　dl
　　dt上海灘/dt
　　dd這部拍攝于1980年的《上海灘》堪稱是香港電視史上最成功、最經典的劇集。
　　當年在香港播出以后，產生了巨大的轟動效應。/dd
　　dt周潤發(fā)/dt
　　dd和所有偉大的影星一樣，周潤發(fā)印證了一個時代，一個香港電影的黃金時代。
　　風衣墨鏡、冷血雙槍、陽光微笑，都封存膠片之中，當我們回首尋望的時候，發(fā)哥已被刻為一個時代的坐標。/dd
　　/dl
　　cite、cite 、q、 blockquote
　　論壇和blog經常會用到引用別人的話，用q來標記簡短的單行引用。Web瀏覽器會自動識別在q 之間的內容。不幸的是，IE不能識別，并且有些時候， q會引起一些可訪問性(Accessibility)的問題。正因為如此，一些人建議盡量不要使用 q,手動的插入引用標記。在一個包含適當的類的 span中加入單行的引用內容，那么就可以用CSS來給引用設計樣式了，但是這個沒有語義上的意義。CSS可以用來定義引用的樣式。注意，一段文章是不可以直接放在blockquote中的，引用的內容還必須包含在一個元素中，通常是p。屬性cite既可以與q 一起用，也可以與blockquote一起用，用來提供引用內容的來源地址。需要注意的是，如果你使用 span來代替 q標記引用內容,那么你就不能使用 cite屬性了。
　　例如:
　　citeDesigning with Web Standards/cite is an excellent book by Jeffrey Zeldman.
　　p cite孔子/cite曰：q學而不思則罔，思而不學則殆/q./p
　　pThe W3C says that q cite='http://www.w3.org/TR/REC-html40/
　　struct/text.html#h-9.2.1'The presentation of phrase elements
　　depends on the user agent./q./p
　　blockquote cite='http://www.w3cn.org/'
　　p'我們大部分人都有深刻體驗，每當主流瀏覽器版本的升級，我們剛建立的網站就可能變得過時，
　　我們就需要升級或者重新建造一遍網站。例如1996-1999年典型的'瀏覽器大戰(zhàn)'，
　　為了兼容 Netscape 和 IE，網站不得不為這兩種瀏覽器寫不同的代碼。同樣的，
　　每當新的網絡技術和交互設備的出現，我們也需要制作一個新版本來支持這種新技術或新設備，
　　例如支持手機上網的 WAP 技術。類似的問題舉不勝舉：網站代碼臃腫、繁雜浪費了我們大量的帶寬；
　　針對某種瀏覽器的 DHTML 特效，屏蔽了部分潛在的客戶；不易用的代碼，殘障人士無法瀏覽網站等等。
　　這是一種惡性循環(huán)，是一種巨大的浪費。'/p
　　/blockquote
　　em、 strong
　　em 是用作強調的，strong是用作重點強調的。 大部分瀏覽器用斜體顯示強調的內容，用粗體來顯示重點強調的內容，然而，這是沒有必要的，如果是為了確定強調內容的顯示方式，最好的方法就是使用CSS來定義他們的表現。當你想要的只是視覺上的效果時，就不要使用強調了。而且如果你想要強調但是還覺得粗體或者斜體不視覺效果沒那么好，特別是斜體對于中文來說，那么你完全可以定義一些其他的比較醒目的樣式達到強調的效果。
　　例如:
　　pem強調/em 的文本通常用斜體顯示，
　　然而， strong特別強調/strong 的文本通常以粗體顯示。/p
　　table、td、th、 caption 、 summary
　　XHTML中的表格不應用來布局。然而如果是為了標記列表的數據，就應該使用表格了。th為表格標題，屬性summar為摘要，caption標簽為首部說明，thead標簽為表格頭部，tbody標簽為表格主體內容，tfoot標簽為表格尾部。
　　其中還可以使用scope 可用于取代headers屬性，標記含有表頭信息的單元格，其中各數值的內容如下：
　　row 指示當前單元格，為包含當前單元格的行提供相關的表頭信息。
　　col 指示當前單元格，為根據當前單元格指定的列提供相應的表頭信息。
　　rowgroup 指示當前單元格，為包含當前單元格的其余行組提供相關的表頭信息。
　　colgroup 指示當前單元格，為根據當前單元格指定的其余列組提供相應的表頭信息。
　　abbr 用于定義表頭單元格中的縮寫名，如果沒有定義該屬性，則將默認單元格內容為節(jié)略形式。
　　例如:
　　table id='mytable' cellspacing='0' summary='The technical specifications of the Apple PowerMac G5 series'
　　captionTable 1: Power Mac G5 tech specs /captio
　　tr
　　th scope='col' abbr='Configurations' class='nobg'Configurations/th
　　th scope='col' abbr='Dual 1.8'Dual 1.8GHz/th
　　th scope='col' abbr='Dual 2'Dual 2GHz/th
　　th scope='col' abbr='Dual 2.5'Dual 2.5GHz/th
　　/tr
　　tr
　　th scope='row' abbr='Model' class='spec'Model/th
　　tdM9454LL/A/td
　　tdM9455LL/A/td
　　tdM9457LL/A/td
　　/tr
　　tr
　　th scope='row' abbr='G5 Processor' class='specalt'G5 Processor/th
　　td class='alt'Dual 1.8GHz PowerPC G5/td
　　td class='alt'Dual 2GHz PowerPC G5/td
　　td class='alt'Dual 2.5GHz PowerPC G5/td
　　/tr
　　tr
　　th scope='row' abbr='Frontside bus' class='spec'Frontside bus/th
　　td900MHz per processor/td
　　td1GHz per processor/td
　　td1.25GHz per processor/td
　　/tr
　　tr
　　th scope='row' abbr='L2 Cache' class='specalt'Level2 Cache/th
　　td class='alt'512K per processor/td
　　td class='alt'512K per processor/td
　　td class='alt'512K per processor/td
　　/tr
　　/table
　　dfn
　　pdfn title='Microsoft web browser'Internet Explorer/dfn is the most popular browser used underwater./p
　　ins, del
　　知道del，就不要再用s做刪除線了，用del顯然更具有語義化。而且del還帶有cite和datetime來表明刪除的原因以及刪除的時間。ins是表示插入，也有這樣的屬性。
　　例如：
　　pIt really was ins cite='rarara.html' datetime='20031024'very/ins good./p
　　code
　　表示是計算機代碼。而默認樣式為打字體。技術論壇和blog中經常遇到。
　　例如：
　　codep{margin:2px 0;}/code
　　abbr、acronym
　　abbr標簽是表示web頁面上的簡稱，acronym標簽為取首字母縮寫。（注：這里把簡稱和縮寫分開而論，簡稱范圍比縮寫大，取首字母的縮寫用acronym標簽）Windows的IE6.0以下的瀏覽器暫不支持abbr標簽。 在IE里，你可以應用CSS給acronym但是不能應用給abbr標簽，IE會為acronym標簽的title屬性顯示提示，但是會忽略abbr標簽。
　　例如:
　　abbr title='Cascading Style Sheets'CSS/abbr
　　acronym title='Cascading Style Sheets'CSS/acronym