整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          網頁設計入門-HTML5


          TML基礎

          HTML歷史

          早在1969年,美國就建立了世界上第一個電腦網絡—阿帕網。但由于當時的電腦網絡只是為了數據運算而建,與人們的日常生活相距甚遠,故而網絡的發展非常緩慢,直到1985年,連接在阿帕網上的電腦主機也只有1961臺。

          相對于電腦網絡來說,網站的出現要晚得多。1989年,歐洲粒子物理實驗室研究員Tim Berners-Lee,發明了一種用于網上交換文本的格式,即基于標記的語言HTML,并創建了網上軟件平臺World Wide Web(萬維網)。HTML最吸引人的地方,在于其超文本鏈接技術,通過超鏈接,可以非常方便地跳轉到其他任何一個網頁上。萬維網實現了媒體思想家特德·納爾遜于1965年提出的超文本設想。萬維網的出現,帶動了網站的裂變式發展,到2006年11月,全球互聯網網站總數就已經超過了一億大關。

          1990年11月,第一個Web服務器nxoc01.cern.ch開始運行,Tim Berners-Lee在自己編寫的圖形化Web瀏覽器“World Wide Web”上,看到了最早的Web頁面。

          而世界上第一個網站(當時的網址是http://nxoc01.cern.ch/hypertext/www/theproject.html)早在1992年就關閉了,然而幸運的是這一界面卻被保留了下來,只要單擊下面這個鏈接:Multiple Choices

          HTML基礎

          HTML是目前在網絡上應用最為廣泛的語言,也是構成網頁文檔的主要語言。HTML文檔是由HTML標簽組成的描述性文本,HTML標簽可以標識文字、圖形、動畫、聲音、表格、鏈接等。

          HTML語言作用

          HTML作為一種網頁內容標識語言,易學易懂,熟悉使用該語言可以制作功能強大、美觀大方的網頁。HTML語言的主要作用說明如下:

           使用HTMl語言標識文本。例如,定義標題文本、段落文本、列表文本、預定義文本等。

           使用HTML語言建立超鏈接,通過超鏈接可以訪問互聯網上的所有信息,當使用鼠標單擊超鏈接時,會自動跳轉到鏈接頁面。

           使用HTML語言創建列表,把信息有序地組織在一起,以方便瀏覽。

           使用HTMl語言在網頁中顯示圖像、聲音、視頻、動畫等多媒體信息,把網頁設計得更富沖擊力。

           使用HTML語言可以制作表格,以方便顯示大量數據。

           使用HTML語言制作表單,允許在網頁內輸入文本信息,執行其他用戶操作,方便信息互動。

           HTML文檔基本結構

          HTML文檔一般都應包含兩部分:頭部區域和主體區域。HTML文檔基本結構由3個標簽負責組織:<html>、<head>和<body>。其中<html>標簽標識HTML文檔,<head>標簽標識頭部區域,而<body>標簽標識主體區域。一個完整的HTML文檔基本結構如下:每個標簽都是成對組成,第一個標簽(如<html>)表示標識的開始位置,而第二個標簽(如</html>)表示標識的結束位置。<html>標簽包含<head>和<body>標簽,而<head>和<body>標簽是并列排列。

          HTML基礎

          編寫HTML文檔時,必須遵循HTML語法規范。HTML文檔實際上就是一個文本文件,它由標簽和信息混合組成,當然這些標簽和信息必須遵循一定的組合規則,否則瀏覽器是無法解析的。

          HTML語言的規范條文不多,相信讀者也很容易理解。從邏輯上分析,這些標簽包含的內容就表示一類對象,也可以稱為網頁元素。從形式上分析,這些網頁元素通過標簽進行分隔,然后表達一定的語義。很多時候,我們把網頁標簽和網頁元素混為一團,而實際上,網頁文檔就是由元素和標簽組成的容器。

           所有標簽都包含在“<”和“>”起止標識符中,構個標簽。例如,<style>、<head>、<body>和<div>等。

           在HTML文檔中,絕大多數元素都有起始標簽和結束標簽,在起始標簽和結束標簽之間包含的是元素主體。例如,<body>和</body>中間包含的就是網頁內容主體。

           起始標簽包含元素的名稱,以及可選屬性,也就是說元素的名稱和屬性都必須在起始標簽中。結束標簽以反斜杠開始,然后附加上元素名稱。例如:

          <tag>元素主體</ta

           元素的屬性包含屬性名稱和屬性值兩部分,中間通過等號進行連接,多個屬性之間通過空格進行分隔。屬性與元素名稱之間也是通過空格進行分隔。例如:

          HTML常用標簽

          HTML定義的標簽很多,下面對常用標簽進行說明,隨著讀者學習不斷深入,相信會完全掌握HTML所有標簽的用法和使用技巧。

          1.文檔結構標簽

          文檔結構標簽主要用來標識文檔的基本結構,主要標簽說明如下。

           <html>...</html>:標識HTML文檔的起始和終止。

           <head>...</head>:標識HTML文檔的頭部區域。

           <body>...</body>:標識HTML文檔的主體區域。

          文本格式標簽

          文本格式標簽主要用來標識文本區塊,并附帶一定的顯示格式,主要標簽說明如下。

           <title>...</title>:標識網頁標題。

           <hi>...</hi>:標識標題文本,其中i表示1、2、3、4、5、6,分別表示一級、二級、三級等標題。

           <p>...</p>:標識段落文本。

           <pre>...</pre>:標識預定義文本。

           <blockquote>...</blockquote>:標識引用文本。字符格式標簽

          字符格式標簽主要用來標識部分文本字符的語義,很多字符標簽可以呈現一定的顯示效果。例如,加粗顯示、斜體顯示或者下劃線顯示等。

          在HTML文檔中,列表結構可以分為兩種類型:有序列表和無序列表。無序列表使用項目符號來標識列表,而有序列表則使用編號來標識列表的項目順序。

          XHTML文檔基本結構

          完整的XHTML文檔結構如下:

          XHTML代碼不排斥HTML規則,在結構上也基本相似,但如果仔細比較,它有兩點不同。

          定義文檔類型

          在XHTML文檔第一行新增了<!DOCTYPE>元素。

          聲明命名空間

          在XHTML文檔根元素中必須使用xmlns屬性聲明文檔的命名空間。xmlns是XHTML NameSpace的縮寫,中文翻譯為命名空間(也有人翻譯為名字空間、名稱空間)。命名空間是收集元素類型和屬性名字的一個詳細DTD,它允許通過一個URL地址指向來識別命名空間。

          XHTML是HTML向XML過渡的標識語言,它需要符合XML規則,因此也需要定義名字空間。又因為XHTML 1.0還不允許用戶自定義元素,因此它的命名空間都相同,就是“Er是根據XML語法簡化而來的,因此它遵循XML文檔規范。同時XHTML又大量繼承HTML語言語法規范,因此與HTML語言非常相似,不過它對代碼的要求更加嚴謹。遵循這些要求,對于培養良好的XHTML代碼書寫習慣是非常重要的。

           XHTML文檔類型

          XHTML 1.0支持3種DTD(型定義)聲明:過渡型(Transitional)、嚴格型(Strict)和框架型(Frameset)。

          1.過渡型

          這種文檔類型對于標簽和屬性的語法要求不是很嚴格,允許在頁面中使用HTML 4.01的標簽(符合XHTML語法標準)。過渡型DTD語句如下:

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

          "http://www.w1.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


          2.嚴格型

          這類文檔類型對于文檔內的代碼要求比較嚴格,不允許使用任何表現層的標簽和屬性。嚴格型DTD語句如下:

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

          "http://www.w1.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


          在嚴格型文檔類型中,以下元素將不被支持。

           center:居中(屬于表現層)。

           font:字體樣式,如大小、顏色和樣式(屬于表現層)。

           strike:刪除線(屬于表現層)。

           s:刪除線(屬于表現層)。

           u:文本下劃線(屬于表現層)。

           iframe:嵌入式框架窗口(專用于框架文檔類型或過渡型文檔)。

           isindex:提示用戶輸入單行文本(與input元素語義重復)。

           dir:定義目錄列表(與dl元素語義重復)。

           menu:定義菜單列表(與ul元素語義重復)。

           basefont:定義文檔默認字體屬性(屬于表現層)。

           applet:定義插件(與object元素語義重復)。

          在嚴格型文檔類型中,以下屬性將不被支持。

           align(支持table包含的相關元素:tr、td、th、col、colgroup、thead、tbody、tfoot)。

           language。

           background。

           bgcolor。

           border(table元素支持)。

           height(img和object元素支持)。

           hspace。

           name(在HTML 4.01 Strict中支持,在XHTML 1.0 Strict中的form和img元素不支持)。

           noshade。

           nowrap。

           target。

           text、link、vlink和alink。

           vspace。

           width(img、object、table、col和colgroup元素支持)。

          框架型

          這是一種專門針對框架頁面所使用的DTD,

          實際上,DTD是一套關于標簽的語法規則。DTD文件是一個ASCII的文本文件,后綴名為.dtd。利用DOCTYPE聲明中的URL可以訪問指定類型的DTD詳細信息。例如,對于XHTML 1.0過渡型DTD的URL為http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd,在Dreamweaver中打開XHTML 1.0過渡型DTD文檔,代碼顯示如圖2.4所示。

          XHTML 1.0過渡型DTD文檔

          一個DTD文檔包含元素的定義規則,元素間關系的定義規則,元素可使用的屬性、實體或符號規則。這些規則用于標簽Web文檔的內容。此外還包括了一些其他規則,它們規定了哪些標簽能出現在其他標簽中。文檔類型不同,它們對應的DTD也不相同。

           DOCTYPE結構圖

          DOCTYPE聲明中各個部分說明如下。

           頂級元素:指定DTD中聲明的頂級元素類型,這與聲明的SGML文檔類型相對應。HTML文檔默認頂級元素為html。

           可用性:指定正式公開標識符(FPI)是可公開訪問的對象(PUBLIC)還是系統資源(SYSTEM)。默認為PUBLIC,SYSTEM系統資源包括本地文件或URL。

           注冊:指定組織是否由國際標準化組織(ISO)注冊。“+”(默認)表示組織名稱已注冊,“-”表示組織名稱未注冊。W3C是屬于非注冊的ISO組織,所以顯示為“-”符號。

           組織:指定在!DOCTYPE聲明引用的DTD(文檔類型定義)的創建和維護的團體或組織的名稱。HTML語言規范的創建和維護組織為W3C。

           類型:指定公開文本的類,即所引用的對象類型。HTML默認為DTD。

           標簽:指定公開文本的描述,即對所引用的公開文本的唯一描述性名稱,后面可附帶版本號。HTML默認為HTML,XHTML默認為XHTML,后面跟隨的是語言版本號。

           定義:指定文檔類型定義,包含Frameset(框架集文檔)、Strict(嚴格型文檔)和Transitional(過渡型文檔)。Strict(嚴格型文檔)禁止使用W3C規范中指定將逐步淘汰的元素和屬性,而Transitional(過渡型文檔)可以包含除frameset元素以外的全部內容。

           語言:指定公開文本的語言,即用于創建所引用對象的自然語言編碼系統。該語言定義已編寫為ISO 639語言代碼(兩個字母要大寫),默認為EN(英語)。

          名字空間

          在XHTML文檔中,讀者還需要注意另一個容易忽略的問題:給<html>標簽定義名字空間。

          HTML元信息

          在HTML文檔結構的頭部區域,存儲著文檔的各種基本信,這些信息主要被瀏覽器所采用,不會顯示在網頁正文中。另外,搜索引擎也會檢索這些信息,因此重視并設置這些頭部信息將有助于提高網頁的訪問率。

          TML5的出現,掀起了Web時代的新浪潮,各大瀏覽器也都紛蓊支持HTML5。HTML5可以使網頁內容更加豐富,不僅可以顯示三維圖形,還可以在不使用Flash插件的基礎上實現音頻、視頻播放等。HTML5是向下兼容HTML4的,它是在HTML4的基礎之上,加進了一些新的標記、屬性、功能的一個新的超文本標記語言,例如HTML5擁有新的HTML文檔結構、新的CSS標準、API等。

          HTML5可以實現與原生APP相媲美的應用,不用另行下載安裝,完全靠瀏覽器就可以運行。

          HTML5可以讓開發人員在不使用Flash插件或第三方媒體插件的情況下,讓用戶瀏覽網頁中的視頻或音頻,大大降低了開發應用的成本與時間。HTML5還提供了很多的應用程序接口(API),例如基于瀏覽器支持的圖形API、地理信息API、本地存儲API和視頻播放相關的API等,這些API使得我們開發一個功能型的應用變得更加容易了。

          同時,HTML5是一種可以被PC、Mac、iPhone、iPad和Android手機等多種客戶端測覽器支持的跨平臺語言。如今,Web時代已被移動端主導,不管是在手機上還是在平板電腦上,隨處可以見到HTML5網站、HTML5應用軟件以及HTML5游戲,HTML5又作為移動端開發的主流語言,這都說明HTML5是前途無量的。

          企業網站提起HTML5大家都不陌生,作為一個新興的前端開發語言,HTML5已經被大量應用到各個領域,通過HTML5技術制作完成的網頁,可以是單純針對PC端,也已單獨適配移動端,更能做成時下最流行的響應式網站,也就是可以根據訪問設備的不同,自動適應屏幕的寬度來改變頁面中的元素樣式,鄭州建站網通過頁面中的必要元素標簽,為大家講解HTML5網站建設的解決方案。

          第一點:網站頭部設計
          網站頭部標簽的作用是在頁面的開端加入一個用以介紹整個頁面內容的信息容器,一般網頁的名稱、簡介內容、關鍵詞、版權信息等元素均會出現了網頁頭部,技術層面上,在網頁頭部還要表示出該頁面采用的制作語言,例如是HTML5還是較為陳舊的HTML4,目的是讓訪問端的瀏覽器使用與之對應的頁面渲染方式。

          第二點:網站導航欄的設計
          網站的導航元素作用就是承載了對于訪客的瀏覽指導作用,導航中的內容是直接循環于網站的一級欄目,當然也有特例,在導航中出現的鏈接內容只是整個頁面中所有鏈接的一小部分,但在設計角度上,導航中出現的內容應是整個網站中權重最高的。


          第三點:網站的文章內容設計
          網站的文章標簽承載了整個網頁中最重要的內容傳遞作用,頁面中的主要信息均會在此展示,當然內容不僅限于文章,也有可能是圖集、圖文或視頻等,對于該部分的元素,HTML5也增加可用標簽,意指讓頁面內容更加合理,其中就包括下面內容中會提到的部件和側邊兩個元素標簽。


          第四點:網頁中小部件的使用
          與我們更加熟悉的div標簽相比,部件標簽(section)對于瀏覽器和搜索引擎來說是具有指導意義的,一般情況下會用于文章內容中的標題、編號等內容,最大的好處就是,讓整個頁面中的內容排列的更加有序,邏輯清晰。


          第五點:網頁布局的側邊設計
          側邊標簽中的內容并不是整個頁面中的主題,而是對主體內容起到補充或解釋說明的作用,在HTML5語言廣泛應用之前,對于頁面中此類元素,不同的前端工程師在標簽的使用上有著不同的習慣,基于HTML5開發的樣式中,此類情況得到了合理的統一。


          第六點:網站底部設計
          此元素的內容是包含更多關于他的父元素的內容。footer置于body之后將可以提供有關該頁面的其他的信息內容。例如網站建設著的一些信息,相關文章的鏈接或者版權信息等等。此元素也可以被被應用于body之中不同的段中,可以給頁面中不同段一些特定的其他信息。底部元素作用是將那些不適合在body中出現的內容展示在頁面上,例如文章內容的版權信息、頁面底部的內容導航、網站的ICP備案信息以及友情鏈接信息等,在HTML5版本之上,也增加了在底部內容中專用的標簽,供開發者使用。


          主站蜘蛛池模板: 久久se精品一区二区影院| 日本一区二区三区在线看| 无码播放一区二区三区| 久久精品国产AV一区二区三区| 看电影来5566一区.二区| 国产一区二区三区精品视频| 国产伦理一区二区| 国产亚洲一区二区三区在线观看| 国产一区二区三区夜色| 亚洲国产一区在线观看| 国产精品毛片一区二区三区| 国产AV国片精品一区二区| 久久精品无码一区二区三区日韩 | 91视频一区二区| 不卡一区二区在线| 福利一区国产原创多挂探花| 无码精品人妻一区| 国产一区在线视频| 中文字幕在线视频一区| 国产高清在线精品一区小说| 国产精品无码一区二区三级 | 国产乱码一区二区三区| 国产福利电影一区二区三区久久久久成人精品综合 | 亚洲一区二区三区香蕉| 一区二区国产精品| 亚洲国产精品乱码一区二区| 亚洲精品伦理熟女国产一区二区| 韩国一区二区视频| 久久久精品日本一区二区三区| 精品无码人妻一区二区三区不卡| 国产在线一区二区在线视频| 亚洲AV无码一区二区三区牲色| 国产一区美女视频| 一区二区三区在线免费看| 亚洲Av无码国产一区二区 | 日韩一区二区三区在线精品| 亚洲AV无码一区二区乱子仑| 亚洲色欲一区二区三区在线观看 | 国产成人精品无码一区二区三区 | 一区二区中文字幕在线观看| 国产免费av一区二区三区|