!DOCTYPE HTML html head meta http-equiv= Content-Type content= text/html; charset=utf-8 title 標題標簽 /title /head body h1 了不起的蓋茨比 /h1 p 《了不起的蓋茨比》為那個奢靡年代的縮影。蓋茨比懷揣著對 美國夢 的期翼，投身到那個年代的燈紅酒綠之中，卻在名利場中看盡世態炎涼，以及浮華背后一切終將逝去的空虛悵惘。1925年《了不起的蓋茨比》問世。 /p /body /html 

什么是代碼注釋？代碼注釋的作用是幫助程序員標注代碼的用途，過一段時間后再看你所編寫的代碼，就能很快想起這段代碼的用途。代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能，方便多人合作開發網頁代碼。

語法：

文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。

 head title ... /title meta link style ... /style script ... /script /head 

title 標簽
在 title 和 title 標簽之間的文字內容是網頁的標題信息，它會出現在瀏覽器的標題欄中。網頁的title標簽用于告訴用戶和搜索引擎這個網頁的主要內容是什么，搜索引擎可以通過網頁標題，迅速的判斷出網頁的主題。每個網頁的內容都是不同的，每個網頁都應該有一個獨一無二的title。
例如：

 head title hello world /title /head 

title 標簽的內容“hello world”會在瀏覽器中的標題欄上顯示出來，如下圖所示

在網頁上要展示出來的頁面內容一定要放在body標簽中。如下圖是一個新聞文章的網頁。

如果想在網頁上顯示文章，這時就需要 p 標簽了，把文章的段落放到 p 標簽中。

語法： p 段落文本 /p

注意一段文字一個 p 標簽，如在一篇新聞文章中有3段文字，就要把這3個段落分別放到3個 p 標簽中。如下圖所示。

文章的段落用 p 標簽，那么文章的標題用什么標簽呢？在本節我們將使用 hx 標簽來制作文章的標題。
標題標簽一共有6個，h1、h2、h3、h4、h5、h6分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。并且依據重要性遞減。 h1 是最高的等級。

語法： hx 標題文本 /hx x:1-6

注意：因為h1標簽在網頁中比較重要，所以一般h1標簽被用在網站名稱上。騰訊網站就是這樣做的。如： h1 騰訊網 /h1

h1-h6標簽的默認樣式：
標簽代碼：

在瀏覽器中顯示的樣式：

有了段落又有了標題，現在如果想在一段話中特別強調某幾個文字，這時候就可以用到 em 或 strong 標簽
但兩者在強調的語氣上有區別:

em 表示強調，在瀏覽器中 em 默認用斜體表示

strong 表示更強烈的強調，在瀏覽器中 strong 用粗體表示。

兩個標簽相比，目前國內前端程序員更喜歡使用 strong 表示強調。

在瀏覽器中默認樣式是有區別的：

瀏覽器中的樣子，如下圖。

語法：
em 需要強調的文本 /em
strong 需要強調的文本 /strong

栗子：
在網上商城中，某產品的打折后的價格是需要強調的。如下圖。

代碼實現:

語法： span 文本 /span

我們對 em 、 strong 、 span 這三個標簽進行一下總結：

em 和 strong 標簽是為了強調一段話中的關鍵字時使用，它們的語義是強調。

span 標簽是沒有語義的，它的作用就是為了設置單獨的樣式用的。

如果現在我們想把上一小節的第一段話“美國夢”三個字設置成blue（藍色），但注意不是為了強調“美國夢”，而只是想為它設置和其它文字不同的樣式（并不想讓屏幕閱讀器對“美國夢”這三個字加重音讀出），所以這樣情況下就可以用到 span 標簽了。
如下面例子：

 p 1922年的春天，一個想要成名名叫 em 尼克?卡拉威 /em （托比?馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王， strong 股票 /strong 飛漲的時代。為了追尋他的 span 美國夢 /span ，他搬入紐約附近一海灣居住。 /p 

我們如果想設置“美國夢”三個字設置成blue（藍色），只需要在 style 標簽中加入：

span{color:blue;}

css部分，以后會聊，你能大概明白span就是能干單獨設置樣式的活，就ok了

想在你的html中加一段引用嗎？比如在你的網頁的文章里想引用某個作家的一句詩，這樣會使你的文章更加出彩，那么 q 標簽是你所需要的。

語法： q 引用文本 /q

栗子：

 p 最初知道莊子，是從一首詩 q 莊生曉夢迷蝴蝶。望帝春心托杜鵑。 /q 開始的。雖然當時不知道是什么意思，只是覺得詩句挺特別。后來才明白這個典故出自是莊子的《逍遙游》，《逍遙游》代表了莊子思想的最高境界，是對世俗社會的功名利祿及自己的舍棄。 /p 

講解:

在上面的例子中，“莊生曉夢迷蝴蝶。望帝春心托杜鵑?！?這是一句詩歌，出自晚唐詩人李商隱的《錦瑟》 。因為不是作者自己的文字，所以需要使用實現引用。

注意要引用的文本不用加雙引號，瀏覽器會對q標簽自動添加雙引號。

下圖是代碼顯示結果：

注意這里用標簽的真正關鍵點不是它的默認樣式雙引號（如果這樣我們不如自己在鍵盤上輸入雙引號就行了），而是它的語義：引用別人的話。

blockquote 的作用也是引用別人的文本。但它是對長文本的引用，如在文章中引入大段某知名作家的文字，這時需要這個標簽。
等等，上一節 q 標簽不是也是對文本的引用嗎？不要忘記 q 標簽是對簡短文本的引用，比如說引用一句話就用到 q 標簽。
如想在我的文章中引用李白《關山月》中的詩句，因為引用文本比較長，所以使用 blockquote 。

語法： blockquote 引用文本 /blockquote
如下面例子：

 blockquote 明月出天山，蒼茫云海間。長風幾萬里，吹度玉門關。漢下白登道，胡窺青海灣。由來征戰地，不見有人還。 戍客望邊色，思歸多苦顏。高樓當此夜，嘆息未應閑。 /blockquote 

瀏覽器對 blockquote 標簽的解析是縮進樣式。如下圖所示：

例子，我們想讓一首詩顯示得更美觀些，如顯示下面效果：

怎么可以讓每一句詩詞后面加入一個折行呢？那就可以用到 br / 標簽了，在需要加回車換行的地方加入 br / ， br / 標簽作用相當于word文檔中的回車。
代碼改為：

 h2 《詠桂》 /h2 p 暗淡輕黃體性柔， br / 情疏跡遠只香留。 br / 何須淺碧深紅色， br / 自是花中第一流。

詩文在瀏覽器中顯示為：

在html代碼中輸入空格、回車都是沒有作用的。要想輸入空格，必須寫入nbsp;。不要忘了那個分號

在html代碼中輸入空格是不起作用的，如下代碼。

在瀏覽中顯示，還是沒有空格效果。

輸入空格的正確方法：

在瀏覽器中的顯示出來的空格效果。如下圖所示。

學習過程中遇到什么問題或者想獲取學習資源的話，歡迎加入學習交流群
343599877，我們一起學前端！

在信息展示時，有時會需要加一些用于分隔的橫線，這樣會使文章看起來整齊些。如下圖所示：

語法：

html4.01版本 hr

xhtml1.0版本 hr /
注意：

hr / 標簽和 br / 標簽一樣也是一個空標簽，所以只有一個開始標簽，沒有結束標簽。

hr / 標簽的在瀏覽器中的默認樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不美觀，沒有關系，這些外在樣式在我們以后學習了css樣式表之后，都可以對其修改。

大家注意，現在一般使用 xhtml1.0 的版本（其它標簽也是），這種版本比較規范。

一般網頁中會有一些網站的聯系地址信息需要在網頁中展示出來，這些聯系地址信息如公司的地址就可以 address 標簽。也可以定義一個地址（比如電子郵件地址）、簽名或者文檔的作者身份。
栗子：

 address 本文的作者： a href= mailto:zhaoliangsyn@163.com zhaolion /a /address 

在介紹語言技術的網站中，避免不了在網頁中顯示一些計算機專業的編程代碼，當代碼為一行代碼時，你就可以使用 code 標簽了，如下面例子：

code var i = a + b; /code

注意：在文章中一般如果要插入多行代碼時不能使用 code 標簽了。如果是多行代碼，可以使用 pre 標簽。

在上節中介紹加入一行代碼的標簽為 code ，但是在大多數情況下是需要加入大段代碼的，如下圖：

怎么辦？不會是每一代碼都加入一個 code 標簽吧，沒有這么復雜，這時候就可以使用 pre 標簽。

語法： pre 語言代碼段 /pre

pre 標簽的主要作用:預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。
如下代碼：

 pre  var message= 歡迎  for(var i=1;i i++) alert(message); /pre 

在瀏覽器中的顯示結果為：

在上面的例子中可以看到代碼中的空格，換行符都保留下來。如果用以前的方法，回車需要輸入 br 簽，空格需要輸入

注意： pre 標簽不只是為顯示計算機的源代碼時用的，在你需要在網頁中預顯示格式時都可以使用它，只是 pre 標簽的一個常見應用就是用來展示計算機的源代碼。

在瀏覽網頁時，你會發現網頁上有很多信息的列表，如新聞列表、圖片列表，如下圖所示。

這些列表就可以使用ul-li標簽來完成。ul-li是 沒有前后順序的信息列表。

語法：

 ul li 信息 /li li 信息 /li  ...... /ul 

舉例：

 ul li 精彩少年 /li li 美麗突然出現 /li li 觸動心靈的旋律 /li /ul 

ul-li在網頁中顯示的默認樣式一般為：每項li前都自帶一個圓點，如下圖所示：

如果想在網頁中展示有前后順序的信息列表，怎么辦呢？如，當當網上的書籍熱賣排行榜，如下圖所示。這類信息展示就可以使用 ol 標簽來制作有序列表來展示。

語法：

 ol li 信息 /li li 信息 /li  ...... /ol 

舉例：

下面是一個熱點課程下載排行榜：

 ol li 前端開發面試心法 /li li 零基礎學習html /li li JavaScript全攻略 /li /ol 

ol 在網頁中顯示的默認樣式一般為：每項 li 前都自帶一個序號，序號默認從1開始，如下圖所示：

在網頁制作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個 div 標簽中，這個 div 標簽的作用就相當于一個容器。

語法： div … /div

確定邏輯部分：
什么是邏輯部分？它是頁面上相互關聯的一組元素。如網頁中的獨立的欄目版塊，就是一個典型的邏輯部分。如下圖所示：圖中用紅色邊框標出的部分就是一個邏輯部分，就可以使用 div 標簽作為容器。

在上一小節中，我們把一些標簽放進 div 里，劃分出一個獨立的邏輯部分。為了使邏輯更加清晰，我們可以為這一個獨立的邏輯部分設置一個名稱，用id屬性來為 div 提供唯一的名稱，這個就像我們每個人都有一個身份證號，這個身份證號是唯一標識我們的身份的，也是必須唯一的。

如下兩圖進行比較，如果設計師把兩個圖給你，哪個圖你看上去能更快的理解呢？是不是右邊的那幅圖呢。

語法： div id= 版塊名稱 … /div

有時候我們需要在網頁上展示一些數據，如某公司想在網頁上展示公司的庫存清單。如下表：

想在網頁上展示上述表格效果可以使用以下代碼：

創建表格的四個元素： table、tbody、tr、th、td

table … /table ：整個表格以 table 標記開始、 /table 標記結束。

tbody … /tbody ：當表格內容非常多時，表格會下載一點顯示一點，但如果加上 tbody 標簽后，這個表格就要等表格內容全部下載完才會顯示。

tr … /tr ：表格的一行，所以有幾對tr 表格就有幾行。

td … /td ：表格的一個單元格，一行中包含幾對 td ... /td ，說明一行中就有幾列。

th … /th ：表格的頭部的一個單元格，表格表頭。

表格中列的個數，取決于一行中數據單元格的個數。

上述代碼在瀏覽器中顯示的默認的樣式為：

總結：

table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的

表頭，也就是th標簽中的文本默認為粗體并且居中顯示

Table 表格在沒有添加 css 樣式之前，是沒有邊框的。這樣不便于我們后期合并單元格知識點的講解，所以在這一節中我們為表格添加一些樣式，為它添加邊框。
代碼中加入：

 style type= text/css table tr td,th{border:1px solid #000;} /style 

上述代碼是用 css 樣式代碼，為th，td單元格添加粗細為一個像素的黑色邊框。

結果窗口顯示出結果樣式：

表格還是需要添加一些標簽進行優化，可以添加標題和摘要。代碼如下

摘要 摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。
語法： table summary= 表格簡介文本

標題 用以描述表格內容，標題的顯示位置：表格上方。
語法：

 table caption 標題文本 /caption tr td … /td td … /td  … /tr … /table 

使用 a 標簽可實現超鏈接，它在網頁制作中可以說是無處不在，只要有鏈接的地方，就會有這個標簽。

語法 ：
a href= 目標網址 title= 鼠標滑過顯示的文本 鏈接顯示的文本 /a

例如：
a href= http://www.zhaolion.com title= 點擊進入我的博客 click here! /a

上面例子作用是單擊click here!文字，網頁鏈接到這個網頁。

title屬性的作用，鼠標滑過鏈接文字時會顯示這個屬性的文本內容。這個屬性在實際網頁開發中作用很大，主要方便搜索引擎了解鏈接地址的內容（語義化更友好)
提醒
還有一個有趣的現象不知道小伙伴們發現了沒有，只要為文本加入a標簽后，文字的顏色就會自動變為藍色（被點擊過的文本顏色為紫色），顏色很難看吧，不過沒有關系后面我們學習了css樣子就可以設置過來（a{color:#000}),后面會詳細講解。

a 標簽在默認情況下，鏈接的網頁是在當前瀏覽器窗口中打開，有時我們需要在新的瀏覽器窗口中打開。只需要添加一個屬性 target= _blank
如下代碼：
a href= 目標網址 target= _blank click here! /a

a 標簽還有一個作用是可以鏈接Email地址，使用mailto能讓訪問者便捷向網站管理者發送電子郵件。我們還可以利用mailto做許多其它事情。下面一一進行講解，請看詳細圖示：

提醒:如果mailto后面同時有多個參數的話，第一個參數必須以“?”開頭，后面的參數每一個都以“ ”分隔。
下面是一個完整的實例: 在瀏覽器中顯示的一個發送按鈕

點擊鏈接會打開電子郵件應用，并自動填寫收件人等設置好的信息，如下圖：

在網頁的制作中為使網頁炫麗美觀，肯定是缺少不了圖片，可以使用 img 標簽來插入圖片。
語法： [站外圖片上傳中……(48)]

舉例： img src = myimage.gif alt = My Image title = My Image /

講解：

src：標識圖像的位置；

alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本；

title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)；

圖像可以是GIF，PNG，JPEG格式的圖像文件。

網站怎樣與用戶進行交互？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就可以處理表單傳過來的數據。

語法： form method= 傳送方式 action= 服務器文件

講解：

form ： form 標簽是成對出現的，以 form 開始，以 /form 結束。

action ：瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。

method ： 數據傳送的方式（get/post）。

 form method= post action= save.php  label for= username 用戶名: /label  input type= text name= username /  label for= pass 密碼: /label  input type= password name= pass /  /form 

注意

所有表單控件（文本框、文本域、按鈕、單選框、復選框等）都必須放在 form /form 標簽之間（否則用戶輸入的信息可提交不到服務器上哦?。?/p>

method:post/get的區別這一部分內容屬于后端程序員考慮的問題。感興趣的小伙伴可以問谷哥

當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框。文本框也可以轉化為密碼輸入框。

語法：

 form  input type= text/password name= 名稱 value= 文本 /  /form 

type：

當type= text 時，輸入框為文本輸入框;

當type= password 時, 輸入框為密碼輸入框。

name：為文本框命名，以備后臺程序ASP 、PHP使用。

value：為文本輸入框設置默認值。(一般起到提示作用)

舉例：

 form  input type= text name= myName  br/  input type= password name= pass  /form 

在瀏覽器中顯示的結果：

當用戶需要在表單中輸入大段文字時，需要用到文本輸入域。

語法： textarea rows= 行數 cols= 列數 文本 /textarea

textarea 標簽是成對出現的，以 textarea 開始，以 /textarea 結束。

cols ：多行輸入域的列數。

rows ：多行輸入域的行數。

在 textarea /textarea 標簽之間可以輸入默認值。

舉例：

 form method= post action= save.php label 聯系我們 /label textarea cols= 50 rows= 10 在這里輸入內容... /textarea /form 

在瀏覽器中顯示結果：

在使用表單設計調查表時，為了減少用戶的操作，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和復選框，兩者的區別是單選框中的選項用戶只能選擇一項，而復選框中用戶可以任意選擇多項，甚至全選。請看下面的例子:
語法： input type= radio/checkbox value= 值 name= 名稱 checked= checked /

type:

當 type= radio 時，控件為單選框

當 type= checkbox 時，控件為復選框

value：提交數據到服務器的值（后臺程序PHP使用）

name：為控件命名，以備后臺程序 ASP、PHP 使用

checked：當設置 checked= checked 時，該選項被默認選中

如下面代碼：

在瀏覽器中顯示的結果：

注意:同一組的單選按鈕，name 取值一定要一致，比如上面例子為同一個名稱“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。

下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選。如下代碼：

講解：

value：

selected= selected ：設置selected= selected 屬性，則該選項就被默認選中。

下拉列表也可以進行多選操作，在 select 標簽中設置multiple= multiple 屬性，就可以實現多選功能，在 widows 操作系統下，進行多選時按下Ctrl鍵同時進行單擊（在 Mac下使用 Command +單擊），可以選擇多個選項。如下代碼：

在瀏覽器中顯示的結果：

在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。這一小節講解提交按鈕：當用戶需要提交表單信息到服務器時，需要用到提交按鈕。
語法： input type= submit value= 提交

type：只有當type值設置為submit時，按鈕才有提交作用

value：按鈕上顯示的文字

舉例：

在瀏覽器中顯示的結果：

當用戶需要重置表單信息到初始時的狀態時，比如用戶輸入“用戶名”后，發現書寫有誤，可以使用重置按鈕使輸入框恢復到初始狀態。只需要把type設置為 reset 就可以。
語法： input type= reset value= 重置

type：只有當type值設置為reset時，按鈕才有重置作用

value：按鈕上顯示的文字

舉例：

在瀏覽器中顯示的結果：
輸入賬號

單擊重置按鈕

小伙伴們，你們在前面學習表單各種控件的時候，有沒有發現一個標簽--label，這一小節就來揭曉它的作用。
label標簽不會向用戶呈現任何特殊效果，它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上（就自動選中和該label標簽相關連的表單控件上）。
語法： label for= 控件id名稱
注意 標簽的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同。 這樣你會在點慢跑標簽，即使沒有點checkbox 也能選中
例子：

 form  a 你對什么運動感興趣： /a br /  label for= 1 慢跑 /label input type= checkbox name= manpao id= 1 br /  label for= 2 登山 /label input type= checkbox name= dengshan id= 2 br /  label for= 3 籃球 /label input type= checkbox name= lanqiu id= 3 br /  /form 

學習過程中遇到什么問題或者想獲取學習資源的話，歡迎加入學習交流群
343599877，我們一起學前端！

以上就是總結學習HTML需要哪些知識點？的詳細內容，html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。