<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便! 廣告
                ## HTML的概述 ### HTML的概念 **HTML** 全稱為 HyperText Markup Language,譯為<font color=#0000ff>**超文本標記語言**</font>。 HTML 不是一種編程語言,是一種描述性的**標記語言**。 **作用**:HTML是負責描述文檔**語義**的語言。 ### 概念:超文本 所謂的超文本,有兩層含義: (1)圖片、音頻、視頻、動畫、多媒體等內容,成為超文本,因為它們超出了文本的限制。 (2)不僅如此,它還可以從一個文件跳轉到另一個文件,與世界各地主機的文件進行連接。即:超級鏈接文本。 ### 概念:標記語言 HTML 不是一種編程語言,是一種描述性的**標記語言**。這主要有兩層含義: (1)**標記語言是一套標記標簽**。比如:標簽`<a>`表示超鏈接、標簽`<img>`表示圖片、標簽`<h1>`表示一級標題等等,它們都是屬于 HTML 標簽。 說的通俗一點就是:網頁是由網頁元素組成的,這些元素是由 HTML 標簽描述出來,然后通過瀏覽器解析,就可以顯示給用戶看了。 (2)編程語言是有編譯過程的,而標記語言沒有編譯過程,HTML標簽是直接由瀏覽器解析執行。 ### HTML是負責描述文檔語義的語言 HTML 格式的文件是一個純本文文件(就是用txt文件改名而成),用一些標簽來描述語義,這些標簽在瀏覽器頁面上是無法直觀看到的,所以稱之為“超文本標記語言”。 接下來,我們需要學習 HTML 中的很多“標簽對兒”,這些“標簽對兒”能夠給文本不同的語義。 比如,面試的時候問你,`<h1>` 標簽有什么作用? - 正確答案:給文本增加主標題的語義。 - 錯誤答案:給文字加粗、加黑、變大。 關乎“語義”的更深刻理解,等接下來我們學習了各種標簽,就明白了。 ## HTML的歷史 ![](https://img.kancloud.cn/d7/21/d721307695bfd57edca25c2f4cb72bf7_717x325.png) 其中,我們專門來對XHTML做一個介紹。 **XHTML介紹:** XHTML:Extensible Hypertext Markup Language,可擴展超文本標注語言。 XHTML的主要目的是為了<font color="blue">**取代HTML**</font>,也可以理解為HTML的升級版。 HTML的標記書寫很不規范,會造成其它的設備(ipad、手機、電視等)無法正常顯示。 XHTML與HTML4.0的標記基本上一樣。 XHTML是<font color="blue">**嚴格的、純凈的**</font>HTML。 我們稍后將對XHTML的編寫規范進行介紹。 ## HTML的專有名詞 - 網頁 :由各種標記組成的一個頁面就叫網頁。 - 主頁(首頁) : 一個網站的起始頁面或者導航頁面。 - 標記: 比如`<p>`稱為開始標記 ,`</p>`稱為結束標記,也叫標簽。每個標簽都規定好了特殊的含義。 - 元素:比如`<p>內容</p>`稱為元素. - 屬性:給每一個標簽所做的輔助信息。 - XHTML:符合XML語法標準的HTML。 - DHTML:dynamic,動態的。`javascript + css + html`合起來的頁面就是一個 DHTML。 - HTTP:超文本傳輸協議。用來規定客戶端瀏覽器和服務端交互時數據的一個格式。SMTP:郵件傳輸協議,FTP:文件傳輸協議。 ## 書寫第一個 HTML 頁面 我們打開 VS Code 軟件,新建一個文件,名叫`test.html`(注意,文件名是`test`,后綴名是`html`),保存到本地。 緊接著,在文件里,輸入`html:5`,然后按一下鍵盤上的`Tab`鍵,就可以自動生成如下內容: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html> ``` 上面的內容,就是 html 頁面的骨架。我們在此基礎之上,新增幾個標簽,完整代碼如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h3>我是三級標題</h3> <img src="" alt=""> <a href="https://www.jd.com">我是超鏈接,可以點擊一下</a> </body> </html> ``` 標簽寫完之后,我們用 chrome 瀏覽器打開上面這個`test.html`文件,看看頁面效果: 到此,第一個簡單的 HTML 頁面就寫完了。是不是很有成就感? ## HTML結構詳解 HTML標簽通常是成對出現的(<font color="blue">**雙邊標記**</font>),比如 `<div>` 和 `</div>`;也有少部分單標簽(<font color="blue">**單邊標記**</font>),如:`<br />`、`<hr />`和`<img src="images/1.jpg" />`等。 屬性與標記之間、各屬性之間需要以空格隔開。屬性值以雙引號括起來。 #### html骨架標簽分類 | 標簽名 | 定義 | 說明 | | ---------------- | :----: | :----------------------------- | | `<html></html>` | HTML標簽 | 頁面中最大的標簽,我們成為根標簽 | | `<head></head>` | 文檔的頭部 | 注意在head標簽中我們必須要設置的標簽是title | | `<titile></title>` | 文檔的標題 | 讓頁面擁有一個屬于自己的網頁標題 | | `<body></body>` | 文檔的主體 | 元素包含文檔的所有內容,頁面內容 基本都是放到body里面的 | ### 快速生成 html 的骨架 **方式1**:在 VS Code 中新建 html 文件,輸入`html:5`,按 `Tab`鍵后,自動生成的代碼如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> </body> </html> ``` **方式2**:在Sublime Text中安裝`Emmet`插件。新建html文件,輸入`html:5`,按`Tab`鍵后,自動生成的代碼如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html> ``` **方式3**:在Sublime Text中安裝`Emmet`插件。新建html文件,輸入`html:xt`,按`Tab`鍵后,自動生成的代碼如下: ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> </body> </html> ``` 上面的方式2和方式3中,我們會發現,第一行的內容有些不太一樣,這就是我們接下來要講的**文檔聲明頭**。 ### 1、文檔聲明頭 任何一個標準的HTML頁面,第一行一定是一個以`<!DOCTYPE ……>`開頭的語句。這一行,就是文檔聲明頭,即 DocType Declaration,簡稱DTD。 **DTD可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規范**。 #### HTML4.01有哪些規范呢? **HTML4.01**這個版本是IE6開始兼容的。**HTML5是IE9開始兼容的**。如今,手機、移動端的網頁,就可以使用HTML5了,因為其兼容性更高。 說個題外話,html1 至 html3 是美國軍方以及高等研究所用的,并未對外公開。 HTML4.01里面有兩大種規范,每大種規范里面又各有3種小規范。所以一共6種規范(見下圖)。 HTML4.01里面規定了**普通**和**XHTML**兩大種規范。HTML覺得自己有一些規定不嚴謹,比如,標簽是否可以用大寫字母呢?`<H1></H1>`所以,HTML就覺得,把一些規范嚴格的標準,又制定了一個XHTML1.0。在XHTML中的字母X,表示“嚴格的”。 總結一下,HTML4.01一共有6種DTD。說白了,HTML的第一行語句一共有6種情況: ![](https://img.kancloud.cn/c9/fc/c9fccd68621621f54124ebc30cc558d5_1406x560.png) 下面對上圖中的三種小規范進行解釋: **strict**: 表示“嚴格的”,這種模式里面的要求更為嚴格。這種嚴格體現在哪里?有一些標簽不能使用。 比如,u標簽,就是給一個本文加下劃線,但是這和HTML的本質有沖突,因為HTML最好是只負責語義,不要負責樣式,而u這個下劃線是樣式。所以,在strict中是不能使用u標簽的。 那怎么給文本增加下劃線呢?今后將使用css屬性來解決。 XHTML1.0更為嚴格,因為這個體系本身規定比如標簽必須是小寫字母、必須嚴格閉合標簽、必須使用引號引起屬性等等。 **Transitional**:表示“普通的”,這種模式就是沒有一些別的規范。 **Frameset**:表示“框架”,在框架的頁面使用。 在sublime輸入的html:xt,x表示XHTML,t表示transitional。 在HTML5中極大的簡化了DTD,也就是說HTML5中就沒有XHTML了。HTML5的DTD(文檔聲明頭)如下: ``` <!DOCTYPE html> ``` ### 2、頁面語言 `lang` 下面這行標簽,用于指定頁面的語言類型: ```html <html lang="en"> ``` 最常見的語言類型有兩種: - en:定義頁面語言為英語。 - zh-CN:定義頁面語言為中文。 ### 2、頭標簽 `head` #### html5 的比較完整的骨架: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <meta name="Author" content=""> <meta name="Keywords" content="厲害很厲害" /> <meta name="Description" content="網易是中國領先的互聯網技術公司,為用戶提供免費郵箱、游戲、搜索引擎服務,開設新聞、娛樂、體育等30多個內容頻道,及博客、視頻、論壇等互動交流,網聚人的力量。" /> <title>Document</title> </head> <body> </body> </html> ``` 面試題: - 問:網頁的head標簽里面,表示的是頁面的配置,有什么配置? - 答:字符集、關鍵詞、頁面描述、頁面標題、IE適配、視口、iPhone小圖標等等。 頭標簽內部的常見標簽如下: - `<title>`:指定整個網頁的標題,在瀏覽器最上方顯示。 - `<base>`:為頁面上的所有鏈接規定默認地址或默認目標。 - `<meta>`:提供有關頁面的基本信息 - `<body>`:用于定義HTML文檔所要顯示的內容,也稱為主體標簽。我們所寫的代碼必須放在此標簽內。 - `<link>`:定義文檔與外部資源的關系。 **meta 標簽**: meta表示“元”。“元”配置,就是表示基本的配置項目。 常見的幾種 meta 標簽如下: (1)字符集 charset: ```html <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> ``` 字符集用meta標簽中的`charset`定義,charset就是character set(即“字符集”),即**網頁的編碼方式**。 **字符集**(Character set)是多個字符的集合。計算機要準確的處理各種字符集文字,需要進行字符編碼,以便計算機能夠識別和存儲各種文字。 上面這行代碼非常關鍵, 是必須要寫的代碼,否則可能導致亂碼。比如你保存的時候,meta寫的和聲明的不匹配,那么瀏覽器就是亂碼。 utf-8是目前最常用的字符集編碼方式,常用的字符集編碼方式還有gbk和gb2312等。關于“編碼方式”,我們在下一段會詳細介紹。 (2)視口 viewport: ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` `width=device-width` :表示視口寬度等于屏幕寬度。 viewport 這個知識點,初學者還比較難理解,以后學 Web 移動端的時候會用到。 (3)定義“關鍵詞”: 舉例如下: ```html <meta name="Keywords" content="網易,郵箱,游戲,新聞,體育,娛樂,女性,亞運,論壇,短信" /> ``` 這些關鍵詞,就是告訴搜索引擎,這個網頁是干嘛的,能夠提高搜索命中率。讓別人能夠找到你,搜索到你。 (4)定義“頁面描述”: meta除了可以設置字符集,還可以設置關鍵字和頁面描述。 只要設置Description頁面描述,那么百度搜索結果,就能夠顯示這些語句,這個技術叫做**SEO**(search engine optimization,搜索引擎優化)。 設置頁面描述的舉例: ```html <meta name="Description" content="網易是中國領先的互聯網技術公司,為用戶提供免費郵箱、游戲、搜索引擎服務,開設新聞、娛樂、體育等30多個內容頻道,及博客、視頻、論壇等互動交流,網聚人的力量。" /> ``` 效果如下: ![](https://img.kancloud.cn/dc/0c/dc0ccdcbbc7d54cc647b9af1772005a5_1240x234.png) 上面的幾種`<meta>`標簽都不用記,但是另外還有一個`<meta>`標簽是需要記住的: ```html <meta http-equiv="refresh" content="3;http://www.baidu.com"> ``` 上面這個標簽的意思是說,3秒之后,自動跳轉到百度頁面。 **title 標簽**: 用于設置網頁標題: ```html <title>網頁的標題</title> ``` title標簽也是有助于SEO搜索引擎優化的。 **base標簽**: ```html <base href="/"> ``` base 標簽用于指定基礎的路徑。指定之后,所有的 a 鏈接都是以這個路徑為基準。 ### 3、`<body>`標簽 `<body>`標簽的屬性有: - `bgcolor`:設置整個網頁的背景顏色。 - `background`:設置整個網頁的背景圖片。 - `text`:設置網頁中的文本顏色。 - `leftmargin`:網頁的左邊距。IE瀏覽器默認是8個像素。 - `topmargin`:網頁的上邊距。 - `rightmargin`:網頁的右邊距。 - `bottommargin`:網頁的下邊距。 `<body>`標簽另外還有一些屬性,這里用個例子來解釋: ![](https://img.kancloud.cn/e7/e4/e7e4fc0016f3f27c7f9fbd1754586f66_460x177.png) 上方代碼中,當我們對`點我點我`這幾個字使用超鏈時,`link`屬性表示默認顯示的顏色、`alink`屬性表示鼠標點擊但是還沒有松開時的顏色、`vlink`屬性表示點擊完成之后顯示的顏色。效果如下: ![](https://img.kancloud.cn/8a/bc/8abcf943533a9f5bb3700ceb5781a287_521x154.gif) ## 計算機編碼介紹 計算機,不能直接存儲文字,存儲的是編碼。 計算機只能處理二進制的數據,其它數據,比如:0-9、a-z、A-Z,這些字符,我們可以定義一套規則來表示。假如:A用110表示,B用111表示等。 **ASCII碼:** 美國發布的,用1個字節(8位二進制)來表示一個字符,共可以表示2^8=256個字符。 美國的國家語言是英語,只要能表示0-9、a-z、A-Z、特殊符號。 **ANSI編碼:** **每個國家為了顯示本國的語言,都對ASCII碼進行了擴展**。用2個字節(16位二進制)來表示一個漢字,共可以表示2^16=65536個漢字。例如: 中國的ANSI編碼是GB2312編碼(簡體),對6763漢字進行編碼,含600多特殊字符。另外還有GBK(簡體)。 日本的ANSI編碼是JIS編碼。 臺灣的ANSI編碼是BIG5編碼(繁體)。 **GBK:** 對GB2312進行了擴展,用來顯示罕見的、古漢語的漢字。現在已經收錄了2.1萬左右。并提供了1890個漢字碼位。K的含義就是“擴展”。 **Unicode編碼(統一編碼):** 用4個字節(32位二進制)來表示一個字符,想法不錯,但效率太低。例如,字母A用ASCII表示的話一個字節就夠,可用Unicode編碼的話,得用4個字節表示,造成了空間的極大浪費。A的Unicode編碼是0000 0000 0000 0000 0000 0000 0100 0000 **UTF-8(Unicode Transform Format)編碼:** 根據字符的不同,選擇其編碼的長度。比如:一個字符A用1個字節表示,一個漢字用2個字節表示。 毫無疑問,開發中,都用**UTF-8**編碼吧,準沒錯。 **中文能夠使用的字符集兩種:** - 第一種:UTF-8。UTF-8是國際通用字庫,里面涵蓋了所有地球上所有人類的語言文字,比如阿拉伯文、漢語、鳥語…… - 第二種:GBK(對GB2312進行了擴展)。gb2312 是國標,是中國的字庫,里面**僅**涵蓋了漢字和一些常用外文,比如日文片假名,和常見的符號。 字庫規模: UTF-8(字很全) > gb2312(只有漢字) **重點1:避免亂碼** 我們用meta標簽聲明的當前這個html文檔的字庫,一定要和保存的文件編碼類型一樣,否則亂碼(重點)。 拿 sublime編輯器舉例,當我們不設置的時候,sublime默認類型就是UTF-8。而一旦更改為gb2312的時候,就一定要記得設置一下sublime的保存類型: `文件→ set File Encoding to → Chinese Simplified(GBK)`。VS Code 的道理一樣。 **重點2:UTF-8和gb2312的比較** 保存大小:UTF-8(更臃腫、加載更慢) > gb2312 (更小巧,加載更快) 總結: - UTF-8:字多,有各種國家的語言,但是保存尺寸大,文件臃腫; - gb2312:字少,只用中文和少數外語和符號,但是尺寸小,文件小巧。 列出2個使用情形: 1) 你們公司是做日本動漫的,經常出現一些日語動漫的名字,網頁要使用UTF-8。如果用gb2312將無法顯示日語。 2) 你們公司就是中文網頁,極度的追求網頁的顯示速度,要使用gb2312。如果使用UTF-8將每個漢字多一個byte,所以5000個漢字,多5kb。 我們親測: - qq網、網易、搜狐都是使用gb2312。這些公司,都追求顯示速度。 - 新華網藏語頻道,使用的是UTF-8,保證字符集的數量。 我們是怎么查看網頁的編碼方式的呢?在瀏覽器中打開網頁,右鍵,選擇“查看網頁源代碼”,找到meta標簽中的charset屬性即可。 那么,我們為什么可以查看網頁的源代碼呢?因為這個打開的html網頁已經存到我的臨時文件夾里了,臨時文件夾里的html是純文本文件,純文本文件自然可以查看網頁的源代碼。 ## HTML的規范 - HTML不區分大小寫,但HTML的標簽名、類名、標簽屬性、大部分屬性值建議統一用小寫。 - HTML頁面的后綴名是html或者htm(有一些系統不支持后綴名長度超過3個字符,比如dos系統) ### 1、編寫XHTML的規范: (1)所有標記元素都要正確的嵌套,不能交叉嵌套。正確寫法舉例:`<h1><font></font></h1>` (2)所有的標記都必須小寫。 (3)所有的標簽都必須閉合。 - 雙標簽:`<span></span>` - 單標簽:`<br>` 建議寫成 `<br />` `<hr>` 建議轉成 `<hr />`,還有`<img src=“URL” />` (4)所有的屬性值必須加引號。`<font color="red"></font>` (5)所有的屬性必須有值。`<hr noshade="noshade">`、`<input type="radio" checked="checked" />` (6)XHTML文檔開頭必須要有DTD文檔類型定義。 ### 2、HTML的基本語法特性 #### (1)HTML對換行不敏感,對tab不敏感 HTML只在乎標簽的嵌套結構,嵌套的關系。誰嵌套了誰,誰被誰嵌套了,和換行、tab無關。換不換行、tab不tab,都不影響頁面的結構。 也就是說,HTML不是依靠縮進來表示嵌套的,而是看標簽的嵌套關系。但是,我們發現有良好的縮進,代碼更易讀。建議大家都正確縮進標簽。 百度為了追求極致的顯示速度,所有HTML標簽都沒有換行、都沒有縮進(tab),HTML和換不換行無關,標簽的層次依然清晰,只不過程序員不可讀了。如下圖所示: ![](https://img.kancloud.cn/00/d5/00d54d7f58ad8a8ad80bca52e2eb01fc_940x468.png) #### (2)空白折疊現象 HTML中所有的**文字之間**,如果有空格、換行、tab都將被折疊為一個空格顯示。 舉例如下: ![](https://img.kancloud.cn/21/01/210105a35b2397ce0bc6be06e903ca34_581x301.jpg) #### (3)標簽要嚴格封閉 標簽不封閉的結果是災難性的。 標簽不封閉的舉例如下: ![](https://img.kancloud.cn/ea/6b/ea6b631a16a8af530f155afe727ad454_890x258.jpg)
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看