首頁 > 開發者 > JavaScript
HTML入門，html入門教程
1、HTML簡介
HTML（Hypertext Markup Language）即超文字標記語言 (HTML)，是用於描述網頁文檔的一種標記語言。
HTML 標籤標籤通常被稱為 HTML 標籤 (HTML tag)。HTML提供了許多標記，如段落標記、標題標記、超連結標記、圖片標記等，網頁中需要定義什麼內容，就用相應的HTML標記描述即可。
2、HTML結構
1 <!DOCTYPE html><!-- 表示HTML5文檔協議聲明標籤，協議的不同會影響整個頁面的顯示效果 --> 2 <html><!-- <html>表示文檔標籤 --> 3 <head><!-- <head>標籤表示文檔的頭部標籤，在<head>標籤中的資訊是用於給瀏覽器識別的內容，如這裡的<meta charset="UTF-8">用於告知瀏覽器該文檔的編碼為UTF-8 --> 4 <meta charset="UTF-8"> 5 <!-- 這是注釋，不會顯示在網頁上，注釋的內容寫在符號之間 --> 6 <title>第一個HTML檔案</title><!-- <title>表示該文檔的標題 --> 7 </head> 8 9 <body><!-- <body>標籤為我們在瀏覽器中看到的內容 -->10 第一個HTML檔案11 </body> 12 </html>
注釋的內容寫在<!-- 與 -->符號之間，在瀏覽器中的運行效果如下
3、HTML頭部標籤3.1、<!DOCTYPE>標記
<!DOCTYPE> 標記位於文檔的最前面，用於向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標準規範。主要用於瀏覽器解析文檔標籤的依據。
<!DOCTYPE>標記和瀏覽器的相容性相關，如果刪除<!DOCTYPE>，就意味著讓瀏覽器來顯示HTML頁面的內容。這時，IE6，IE7，IE8，Firefox2，Firefox3，Chrome，有多少種瀏覽器，頁面就有可能有多少種顯示效果，這是不被允許的。
3.2、<html>標記
<html>標記位於<!DOCTYPE> 標記之後，也稱為根標記，用於告知瀏覽器其自身是一個 HTML 文檔， <html>標記標誌著HTML文檔的開始，</html>標記標誌著HTML文檔的結束，在他們之間的是文檔的頭部和主體內容。所有的標籤必須寫在<html>與</html>這兩個閉合標籤之間。可以通過lang屬性設定當前文檔的主要語言是什麼，協助搜尋引擎解析文檔，如：<html lang="zh-cn"></html>表示當前文檔語言為中文。
<head>標記用於定義HTML文檔的頭部資訊，也稱為頭部標記，緊跟在<html>標記之後。head標籤定義的內容只是提供給瀏覽器使用，不用於使用者的呈現。主要用來封裝其他位於文檔頭部的標記，例如<title>、<meta>、<link>及<style>等，用來描述文檔的標題、作者以及和其他文檔的關係等。一個HTML文檔只能含有一對<head>標記，絕大多數文檔頭部包含的資料都不會真正作為內容顯示在頁面中。
<meta>標記可提供有關頁面的元資訊（meta-information），比如針對搜尋引擎和更新頻度的描述和關鍵詞。
<meta> 標籤位於文檔的頭部，不包含任何內容。<meta> 標籤的屬性定義了與文檔相關聯的成對的名稱和數值。如：
<meta name="keywords" content="HTML,ASP,PHP,SQL">
"keywords" 是一個經常被用到的名稱。它為文檔定義了一組關鍵字。某些搜尋引擎在遇到這些關鍵字時，會用這些關鍵字對文檔進行分類。
<title>標記用於定義HTML頁面的標題，即給網頁取一個名字，必須位於<head>標記之內。一個HTML文檔只能含有一對<title></title>標記，<title></title>之間的內容將顯示在瀏覽器視窗的標題列中。其基本文法格式如下：
<title>網頁標題名稱</title>
title標籤對於網站SEO至關重要，標題的好壞直接影響網站的SEO。
<link>標記最常用的用法是用來連結外部的CSS檔案，
<link rel="stylesheet" type="text/css" href="theme.css" />
此外還可以用來引入網站的icon表徵圖
<link rel="shortcut icon" href="http://www.baidu.com/favicon.ico" />
4、HTML內容標籤4.1、標題標籤
標題標籤用<h1> - <h6> 來表示，其中<h1> 定義最大的標題。<h6> 定義最小的標題，從<h1> - <h6>，相對於當前文檔的重要性依次降低。建議h1標籤在整個頁面中最多出現一次（當然可以超過，但是不利於搜尋SEO）。標題標籤是用於體現文檔內容的重要性，不要僅僅是為了產生粗體或大號的文本而使用標題。
注意：瀏覽器會自動地在標題的前後添加空行。
4.2、段落標籤段落是通過 <p> 標籤定義的，p標籤之間不會相互共用一行，會獨佔一行或者多行的空間。
4.3、水平線標記
hr標籤表示在頁面中插入一條水平線，hr標籤是單標籤，不需要閉合標籤。
4.4、換列標籤
<br> 可插入一個簡單的分行符號，也是一個單標籤，不需要閉合標籤。
4.5、span標籤
<span> 標籤被用來組合文檔中的行內元素，span標籤可以跟其他的span標籤共用一行。通常情況下，需要給span標籤應用樣式，否則與頁面上的其他文本沒有什麼任何區別。
4.6、div標籤
<div> 元素來組合區塊層級元素，這樣就可以使用樣式對它們進行格式化。
4.7、 img標籤
<img> 標籤向網頁中嵌入一幅映像，從技術上講，<img> 標籤並不會在網頁中插入映像，而是從網頁上連結映像。<img> 標籤建立的是被引用映像的佔位空間。
<img> 標籤有兩個必需的屬性：src 屬性 和 alt 屬性。
5、HTML進階標籤5.1、列表標籤5.1.1、無序列表
無序列表用ul標籤來表示，其中的清單項目用li標籤表示，無序列表的各個清單項目之間沒有順序層級之分，是並列的
5.1.2、有序列表
有序列表用ol標籤來表示，其中的清單項目也用li標籤表示，其各個清單項目按照一定的順序排列定義
5.1.3、自訂欄表
自訂欄表常用於對術語或名詞進行解釋和描述，定義列表的清單項目前沒有任何項目符號
5.2、表格標籤
簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成，tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元，一個簡單的樣本如下：
5.3、表單標籤5.3.1、Form標籤
表單的域標籤，用於包裹整個表單的內容。表單就是使用者提交資料到背景一個虛擬單子，表單一般由文字框、下拉式清單、單選、多選、文本域等組成，Action屬性，用於指定當前表單提交的時候指向背景地址。
Input標籤是文字框、單選、多選、按鈕等。Type屬性不同的取值決定了input標籤的作用。
文字框：text
密碼框：password
單選：radio
多選：checkbox
按鈕：button
提交按鈕：submit
重設按鈕： reset
Input標籤的 checked屬性，屬性值只有一個checked，可以省略屬性值，在選項按鈕和多選按鈕中表示此按鈕被選中。
5.3.3、Select標籤
select 元素可建立單選或多選菜單，<select> 元素中的 <option> 標籤用於定義列表中的可用選項。
Multipe:也是一個單屬性。值只有一個multiple。設定了此屬性工作表示select標籤表現為 列表標籤。否則表示下拉式清單標籤。
5.3.4、文本域標籤
Textarea文本域標籤，用來輸入大量文本的的標籤。文本域標籤的cols表示可以容納多少列字元。Rows容納多少行資料。
5.3.5、Lable標籤
Lable標籤可以讓標籤文本點擊的時候讓label指向的標籤表單標籤獲得焦點。
兩種方式：1、使用for屬性指向 表單標籤 2、用lable標籤包裹表單標籤。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
