網頁Web標準:使用有意義的HTML標記製作網頁

2020-12-16 站長之家
首頁

 > 

教程

 > 

關鍵詞

 > 

最新資訊

 > 

正文

網頁Web標準:使用有意義的HTML標記製作網頁

我們都知道建築物的重要部件就是根基的建立,如果沒有堅固良好的基礎。再華麗的外觀與裝飾都不復存在。我們建立符合Web標籤的網頁,大多數人更加關心CSS技術及其應用。但我們也需要明白,CSS不管怎麼強大也是作用於XHTML的。如果沒有結構良好的XHTML基礎,我們的布局實現起來就會顯得比較困難。或許我們的基礎非常牢固,但細節繁雜、結構不合理,也將成為我們開發的障礙。

在WEB早期的時候,HTML只是用來添加基本的形式與結構。隨著網際網路的發展,HTML被用來表現頁面。我們運用各種各樣的組合以達到我們想要的外觀效果,我們習慣如用B標籤來加粗文檔的標題,而我們並不是用標題h1~h6來顯示它們。更重要的是我們運行表格進行布局,在早期的時候表格只是用來顯示表格數據的,而不是用來進行布局與版面顯示的,隨著WEB的發展,很快我們就發現,一切都失去了本來的意義。字體設計,表格,加粗,等等等等,成了一鍋粥。變得難以理解。而且越來越複雜。

我們越來越傾向於藉助於Dreamweaver這類的所見即所得的工具軟體來處理網頁,但非常不幸,這類軟體並沒有改善這種混亂的現狀,反而更多的添加了它們自己的複雜標記。這樣的情況下,我們不能用手寫編輯代碼了,看真起來一切都糟透了。

CSS的出現,我們看到了曙光,建立符合Web標準的網頁讓我們見到的希望,人們越來越重視網站重構,讓表現與內容分離,新的時代已經開始了。我們可以去掉一些無意義的標籤,例如:font、b、i等等,我們把這些工作交給CSS完成,我們可以運用CSS進行布局而不是用表格來構建頁面了。

我們可以按照標籤本身的意義來建立文檔,瀏覽器默認的樣式我們可以通過CSS重新定義他們的外觀。標題、內容裡的段落或列表,我們可以通過CSS重新設置它們。標題不一定非要是大號字,粗體的難看的樣子,段落可以控制他們的行距及縮進,列表不一定非要縱向,我們也可以橫向的排列。等等。

有意義標籤的好處,讓我們更加容易理解代碼的內容,更加容易處理他們。例如我們需要修改頁面中所有的外鏈,我們如果為這些元素加上了合適的標記,我們很容易的就找到它們並進行修改。如果一切都混雜在一起,我們就無從下手了。

除了讓我們的開發變的容易之外,其它設備與程序對文檔也可以有更好的理解,最典型的要屬搜尋引擎的識別了,搜尋引擎可以非常方便的找到文章中的標題,副標題,文章內容。如果瀏覽者使用的是手持閱讀設備,可以依靠標題,內容等給予很好的導航與顯示比重。

最重要的是有意義的HTML標籤,將提供了將元素調整為你所想要的樣式的簡單的方法,這些有意義的標籤在文檔中創建了一個最基本的結構框架模型,我們不必添加其它的id或class其它標識,直接就可以進行表現的控制。

這些有意義的標籤主要有:

h1、h2...h6;
ul、ol、dl;
strong、em;
blockquote、cite;
abbr、acronym、code;
fieldset、legend、label;
caption、thead、tbody、tfoot等等。

在CSS頁面布局中,能使用它們的時候,就不要使用其它的東西了。儘量的使用具有意義的html標記。

相關焦點

  • 期末複習繼續:網頁設計與製作
    1.良好的視覺效果2.站點開發周期儘可能段,網頁發布的信息一定要準確3.維護更新要方便4.商業網頁製作應注意的其他幾個問題:A申請既有意義又容易技藝的域名,能令人過目不忘;B在固定位置放置公司標誌或站點標誌;C在網頁的底部使用腳註描述一些相關的信息,如站點網址、與作者或公司聯繫的E-mail地址、公司的版權聲明等,一般使用水平橫線將頁面主題與腳註分開
  • 零基礎學網頁設計與web前端開發 —第一講
    —第一講      為了培養協會各位會員的網頁前端設計與開發的能力,加強協會內涵性建設,西京學院數據科學與人工智慧協會、智能電商與商業分析分會、泰迪·西京智能工作室特開展第18期數據科學研習活動——《零基礎學網頁設計與web前端開發》。
  • HTML網頁製作技巧
    在製作網頁過程中,你首先要定義網頁語言,以便訪問者瀏覽器自動設置語言,而我們用所見即所得的HTML工具時,都沒有注意到這個問題,因為它是默認設置。要設置的語言可以在HTML代碼狀態下找到:  <meta http-equiv="Content Type" content="text/html; charset=gb2312">     把charset=gb2312改換成其它語言代碼即可,比如英文harset=en.    2.怎樣防止別人把你的網頁放到框架裡?
  • 使用html表格和CSS進行混合網頁設計
    首頁 > 教程 > 關鍵詞 > 最新資訊 > 正文 使用html表格和CSS進行混合網頁設計
  • 網頁前端技術HTML教程第一講
    第三:用Html代碼編寫的網頁,使用瀏覽器打開。第四:市面上有很多的瀏覽器,我不 一 一 介紹。但我給大家介紹幾個主流的瀏覽器 IE瀏覽器 Egde瀏覽器 GoogleChrome瀏覽器 火狐瀏覽器 Safari瀏覽器 Opera瀏覽器這六款瀏覽器是現在目前市場上主流瀏覽器,給大家做個介紹。IE瀏覽器和Edge瀏覽器都是微軟公司的產品。
  • 初識HTML中的塊元素——零基礎自學網頁製作
    <div>塊元素基礎屬性講解<div>元素是個有故事的元素,這個元素很早就出現在html超文本標記語言中,它設計之初就是為了解決網頁頁面布局的需求。但是遺憾的是它出生後一直懷才不遇。在我還上初中的時候,智慧型手機還沒有出現,更沒有平板電腦等行動裝置。
  • XHTML網頁與HTML網頁製作技術對比
    目前看來關於XHTML網頁的製作大家還存在很多的困惑,一一解答有些困難,我現在就XHTML網頁與HTML網頁製作技法上的不同來做一下說明。首先說一下HTML網頁的製作方法:1、拿到美工設計圖開始切圖2、用表格把切的圖拼成一個網頁3、把內容放在已經編排好的空白處而XHTML網頁在製作技法與順序上是截然不同的,XHTML想要做的就是內容與版式的分離,那麼自然製作人員與設計師的工作可以做到一定程度的分離。
  • 網頁設計_HTML_CSS語言描述的網頁
    :我的網頁製作嘗試</h1><hr /><pstyle="font-family:華文新魏;color:red;font-size:30px">這是我的網頁製作嘗試的第一個段落。
  • HTML元素中的屬性1——零基礎自學網頁製作
    舉個例子:如果我們要在"第一個頁面.html"中顯示一張圖片image1.jpg,它們都在我的"D盤/零基礎自學網頁製作"這個文件夾中。本篇教程針對完全沒有基礎的網頁製作學習者,利用碎片時間學習,只要我們堅持,必然可以完成網頁製作的學習,為未來學習更加複雜的內容打下基礎!喜歡的小夥伴請關注我,閱讀中遇到任何問題請給我留言,如有疏漏或錯誤歡迎大家斧正,不勝感激!
  • HTML|前端網頁的設計基礎知識
    1、關於html簡介html指的是超文本標記語言,是用來描述網頁的一種語言。且其並未為一種程式語言,而是一種標記語言(一套標記標籤),以此為基礎來描述網頁。2、html標籤html通常被尖括號包圍,例如<html>,以此為一個代碼的開始標籤以及終止標籤。圖 1 基本代碼另外,html標籤通常是成對存在的,比如<p>和</p>,一個為其實標籤,另一個為終止標籤,在兩個字符間的文本被現實為段落。
  • 網頁設計HTML_CSS_VC#語言描述的網頁
    使用WWW特有語言HTML語言—基礎描述語言後臺計算機語言描述—代碼HTML<html><bodystyle="background-color: #ffff00"><p>WWW_WEB_入門實踐—網頁設計HTML語言<br />
  • 網頁設計HTML_CSS_VB語言描述的網頁
    紙介質或網頁版面涉及到的元素及其屬性。使用WWW特有語言HTML語言—基礎描述語言後臺計算機語言描述—代碼HTML<html><bodystyle="background-color: #ffff00"><p>WWW_WEB_入門實踐—網頁設計HTML語言<br />
  • 學習網頁製作並不難,HTML菜鳥教程,從這裡開始第一課學習
    很多朋友想學一下網頁製作,上網一看,只要涉及到網頁製作,都離不開HTML這個詞語,HTML是HyperText Markup Language的簡稱,想學習HTML語言,先得了解一些基本知識,今天這邊內容可以作為學習HTML的菜鳥教程第一課。
  • 網頁表單的Web標準解決方案
    首頁 > 教程 > 關鍵詞 > 網頁最新資訊 > 正文 網頁表單的Web標準解決方案
  • 贈書|《網頁設計與製作(HTML+CSS)》附視頻
    HTML與CSS是網頁製作技術的核心和基礎,也是每個網頁製作者必須要掌握的基本知識,兩者在網頁設計中不可或缺。本書從初學者的角度,以形象的比喻、實用的案例、通俗易懂的語言詳細介紹了使用HTML與CSS進行網頁設計與製作的各方面內容和技巧。
  • HTML+CSS+JavaScript網頁設計課程的教與學
    二、教學目標 通過本課程的學習,使學生對網頁設計的基本原則、欄目和目錄結構定義、主流頁面布局方法、導航製作、圖文排版、色彩理論等進行詳細了解。掌握網站規劃、設計、製作、管理、發布的相關技術及網頁製作的操作技能;並熟練運用HTML中的文字、連結、列表、表格、表單、圖像、多媒體、框架標記及屬性設計出框架網頁、表單網頁、多媒體動態網頁;掌握使用css技術進行網頁布局的基本方法。
  • html中使用pdf.js在網頁中加載顯示pdf文件
    在日常的項目當中,有一個需求就是把我們的PDF顯示在html當中,網上有很多方法,但由於瀏覽器兼容問題,很多方法都不是很完美。接下來我們來講一下利用pdf.js來解決這個問題,目前我認為是比較完美的。它的使用方法非常簡單,好用!
  • 「HTML+ CSS」理解html語義化,讓你的網頁更好的被搜尋引擎識別
    1)什麼叫做標籤語義化說的通俗點就是:明白每個html標籤的用法(在什麼情況下使用此標籤合理)比如,網頁上的新聞列表可以使用列表標籤,文章的標題可以用標題標籤,網頁上的各個欄目的欄目名稱也可以使用標題標籤。文章中內容的段落就得放在段落標籤中,在文章中有想強調的文本,就可以使用 em 、strong等標籤表示強調說明等等。
  • 網頁製作中對版面設計的見解
    4.1、網頁版面設計的統一性統一是指事物的相繼出現,並帶有聯屬關係的屬性。這裡所講的統一是指網頁中應該出現的文字、圖片等按照一定的規律有機的結合。網站頁面的版面設計要求有統一的設計標準、統一的色彩和統一的風格,由此加深別人對此風格的認同。
  • web網頁設計標準大小
    3、在ps裡面做網頁可以在800*600狀態下顯示全屏,頁面的下方又不會出現滑動條,尺寸為740*560左右4、在PS裡做的圖到了網上就不一樣了,顏色等等方面,因為WEB上面只用到256WEB安全色,而PS中的RGB或者CMYK以及LAB或者HSB的色域很寬顏色範圍很廣,所以自然會有失色的現象。