一個基本的HTML5模板「建議收藏」

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="main.css" />
 <script type="text/javascript" src="myscript.js" ></script>
</head>
<body>
這里是內容
</body>
</html>

【說明】
第一行<!DOCTYPE html>用來聲明這是個html5文檔
html文檔 以<html>開始，以</html>結束
<head></head>是頭部信息，這部分是在頁面上是不顯示的，主要告訴瀏覽器一些信息，比如使用的字符集，
文檔標題、需要加載的CSS（層疊樣式表）和JavaScript文檔。
<link>表示鏈接一個外部mian.css 的樣式表文件。樣式表用來美化頁面元素，定義元素的參數。
<javascript>表示這是個瀏覽器腳本文件，里面的src屬性表示鏈接一個外部腳本文件。
<body></body>表示主體，這部分是用來在瀏覽器頁面是顯示的，是用戶可以真正看到的內容。body里面可
包含很多語義標簽，像div，span，table，form，video，li等。

文本標記語言(英文HyperText Markup Language,簡稱：HTML)是一種用于創建網頁的標準標記語言!
對于中文網頁需要使用<meta charset='utf-8'>聲明編碼，否則會出現亂碼。有些瀏覽器（如360瀏覽器）會設置GBK為默認編碼，則你需要設置為<meta charset='gbk'>
例子模板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML中文網(html.cn)</title>
</head>
<body>
    <h1>我的第一個標題</h1>
    <p>我的第一個段落。</p>
</body>
</html>

解析

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數據，如 <meta charset="utf-8"> 定義網頁編碼格式為 utf-8。
<title> 元素描述了文檔的標題
<body> 元素包含了可見的頁面內容
<h1> 元素定義一個大標題
<p> 元素定義一個段落

什么是HTML？

HTML 是用來描述網頁的一種語言。
HTML 指的是超文本標記語言：HyperText Markup Language
HTML 不是一種編程語言，而是一種標記語言
標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網頁
HTML 文檔包含了HTML 標簽及文本內容
HTML文檔也叫做 web 頁面

HTML 標簽

HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。
HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>
HTML 標簽通常是成對出現的，比如 <b> 和 </b>
標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽
開始和結束標簽也被稱為開放標簽和閉合標簽
<標簽>內容</標簽>

HTML 元素

“HTML 標簽” 和 “HTML 元素” 通常都是描述同樣的意思.
但是嚴格來講, 一個 HTML 元素包含了開始標簽與結束標簽，如下實例:
HTML 元素:
<p>這是一個段落。</p>

HTML 頭部元素

頭部元素包含關于文檔的概要信息，也稱為元信息（meta-information）。Meta 意為“關于某方面的信息”。
可以這么說，元數據（meta-data）是關于數據的信息，而元信息是關于信息的信息。

HTML <HEAD> 元素

<head> 元素包含了所有的頭部標簽元素。在元素中你可以插入腳本（scripts）, 樣式文件（CSS），及各種meta信息。
可以添加在頭部區域的元素標簽為: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

HTML <TITLE> 元素

<title> 標簽定義了不同文檔的標題。
<title> 在 HTML/XHTML 文檔中是必須的。
<title> 元素：
1.定義了瀏覽器工具欄的標題
2.當網頁添加到收藏夾時，顯示在收藏夾中的標題
3.顯示在搜索引擎結果頁面的標題

HTML <BASE> 元素

<base> 標簽描述了基本的鏈接地址/鏈接目標，該標簽作為HTML文檔中所有的鏈接標簽的默認鏈接:

<head>
<base href="http://www.html.cn/images/" target="_blank">
</head>

HTML <LINK> 元素

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML <STYLE> 元素

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>

HTML <META> 元素

meta標簽描述了一些基本的元數據。
<meta> 標簽提供了元數據.元數據也不顯示在頁面上，但會被瀏覽器解析。
META 元素通常用于指定網頁的描述，關鍵詞，文件的最后修改時間，作者，和其他元數據。
元數據可以使用于瀏覽器（如何顯示內容或重新加載頁面），搜索引擎（關鍵詞），或其他Web服務。
<meta> 一般放置于 <head> 區域

<META> 標簽- 使用實例

為搜索引擎定義關鍵詞:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
為網頁定義描述內容:
<meta name="description" content="免費 Web & 編程教程">
定義網頁作者:
<meta name="author" content="HTML">
每30秒鐘刷新當前頁面:
<meta http-equiv="refresh" content="30">

HTML <SCRIPT> 元素

HTML head 元素

標簽	描述
<head>	定義了文檔的信息
<title>	定義了文檔的標題
<base>	定義了頁面鏈接標簽的默認鏈接地址
<link>	定義了一個文檔和外部資源之間的關系
<meta>	定義了HTML文檔中的元數據
<script>	定義了客戶端的腳本文件
<style>	定義了HTML文檔的樣式文件

HTML 元素

HTML元素指的是從開始標簽（start tag）到結束標簽（end tag）的所有代碼。例：

開始標簽	元素內容	結束標簽
<p>	這是一個段落	</p>
<a href="default.html">	這是一個鏈接	</a>
<br>	換行

說明：HTML 文檔是由 HTML 元素定義的
注：開始標簽常被稱為起始標簽（opening tag），結束標簽常稱為閉合標簽（closing tag）。

元素語法

HTML 元素以開始標簽起始
HTML 元素以結束標簽終止
元素的內容是開始標簽與結束標簽之間的內容
某些 HTML 元素具有空內容（empty content）
空元素在開始標簽中進行關閉（以開始標簽的結束而結束）
大多數 HTML 元素可擁有屬性
注釋: 您將在本教程的下一章中學習更多有關屬性的內容。
嵌套的 HTML 元素
HTML 文檔由嵌套的 HTML 元素構成。大多數 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
空元素
沒有內容的 HTML 元素被稱為空元素。空元素是在開始標簽中關閉的。
<br> 就是沒有關閉標簽的空元素（<br> 標簽定義換行）。
在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關閉。
在開始標簽中添加斜杠，比如 <br />，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。
即使 <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實是更長遠的保障。

注釋標簽

HTML注釋標簽用來在源文檔中插入注釋。注釋不會在瀏覽器中顯示。可使用注釋對您的代碼進行解釋，這樣做有助于您在以后的時間對代碼的編輯。特別是代碼量很大的情況下很有用

標簽定義及使用說明

注釋標簽用來在源文檔中插入注釋。注釋不會在瀏覽器中顯示。
您可使用注釋對您的代碼進行解釋，這樣做有助于您在以后的時間對代碼的編輯。特別是代碼量很大的情況下很有用。
您也可以在注釋內容存儲針對程序所定制的信息。在這種情況下，這些信息對用戶是不可見的，但是對程序來說是可用的。一個好的習慣是把注釋或樣式元素放入注釋文本中，這樣就可避免不支持腳本或樣式的老瀏覽器把它們顯示為純文本。

<script type="text/javascript">
<!--
function displayMsg()
{
  alert("Hello World!")
}
//-->
</script>

注釋：命令行最后的兩個正斜杠（//）是 JavaScript 注釋符號。這確保了 JavaScript 不會執行 –> 標簽。
除了在源文檔中有非常明顯的作用外，許多 Web 服務器也利用注釋來實現文檔服務端軟件特有的特性。這些服務器可以掃描文檔，從傳統的 HTML/XHTML 注釋中找到特定的字符序列，然后再根據嵌在注釋中的命令采取相應的動作。這些動作可能是簡單地包括其他文件中的文本（即所謂的服務器端包含，server-inside include），也可能是復雜地執行其他命令去動態生成文檔的內容。

HTML 段落與文字

標題

在 HTML 文檔中，標題很重要。標題（Heading）是通過 <h1> - <h6> 等標簽進行定義的。其中<h1> 定義最大的標題，<h6> 定義最小的標題
HTML中的標題標簽通過<h1>-<h6>來設置，越往下標題越小

段落

在HTML中段落是通過p標簽來定義的，它可以將HTML文檔分割為若干段落部分。因為p標簽是塊級元素，所以瀏覽器會自動地在段落的前后添加空行。
注意：因為p標簽是塊級元素，所以瀏覽器會自動地在段落的前后添加空行
我們可以通過<br/>標簽來對段落進行換行
如果希望在不產生一個新段落的情況下進行換行，就可以使用<br /> 標簽，注意它是一個單標簽。

文本格式化

HTML可定義很多供格式化輸出的元素，例：使用標簽 <b>(“bold”) 與 <i>(“italic”) 對輸出的文本進行格式，從而顯示粗體或者斜體
示例：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>HTML教程(html.cn)</title> 
</head> 
<body>
<b>加粗文本</b><br><br>
<i>斜體文本</i><br><br>
<code>電腦自動輸出</code><br><br>
這是 <sub> 下標</sub> 和 <sup> 上標</sup>
</body>
</html>

HTML 文本格式化標簽

標簽	描述
<b>	定義粗體文本
<em>	定義著重文字
<i>	定義斜體字
<small>	定義小號字
<strong>	定義加重語氣
<sub>	定義下標字
<sup>	定義上標字
<ins>	定義插入字
<del>	定義刪除字

HTML”計算機輸出”標簽

標簽	描述
<kbd>	定義鍵盤碼
<samp>	定義計算機代碼樣本
<var>	定義變量
<pre>	定義預格式文本
<code>	定義計算機代碼

HTML 引文，引用，及標簽定義

標簽	描述
<abbr>	定義縮寫
<address>	定義地址
<bdo>	定義文字方向
<blockquote>	定義長的引用
<q>	定義短的引用語
<cite>	定義引用、引證
<dfn>	定義一個定義項目

區塊

大多數 HTML 元素被定義為塊級元素或內聯元素。塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）；而內聯元素則不會。

HTML 區塊元素
可以通過 <div> 和 <span> 將 HTML 元素組合起來

HTML塊級元素
塊級元素在瀏覽器顯示時，通常會以新行來開始和結束 - 例：<h1>, <p>, <ul>, <table>

HTML內聯元素
內聯元素在顯示時通常不會以新行開始 - 例：<b>, <td>, <a>, <img>

HTML <div> 元素
HTML <div> 元素是塊級元素，瀏覽器會在其前后顯示折行 - 如果與 CSS 一同使用，<div> 元素可用于對大的內容塊設置樣式屬性。 - <div> 元素的另一個常見的用途是文檔布局

HTML <span> 元素
HTML <span> 元素是內聯元素，可用作文本的容器 - 與 CSS 一同使用時，<span> 元素可用于為部分文本設置樣式屬性

HTML字符實體

在 HTML 中，某些字符是預留的，這些預留字符必須被替換為字符實體；而，一些在鍵盤上找不到的字符也可以使用字符實體來替換。

HTML 實體
在 HTML 中，某些字符是預留的。
比如在 HTML 中不能使用小于號（<）和大于號（>）因為瀏覽器會誤認為它們是標簽，所以希望能正確地顯示預留字符，我們必須在 HTML 源代碼中使用字符實體（character entities）。
字符實體類似這樣
&entity_name;
或
&#entity_number;

HTML 字符實體
不間斷空格
HTML 中的常用字符實體是不間斷空格( )
瀏覽器總是會截短 HTML 頁面中的空格，如果需要在頁面中增加空格的數量，需要使用字符實體

有用的字符實體

顯示結果	描述	實體名稱	實體編碼
	空格
<	小于號	<	<
>	大于號	>	>
&	和號	&	&
“	引號	"	"
‘	撇號	' (IE不支持)	'
￠	分	￠	￠
￡	鎊	￡	￡
￥	元	￥	￥
€	歐元	€	€
§	小節	§	§
?	版權	?	?
?	注冊商標	?	?
?	商標	?	?
×	乘號	×	×
÷	除號	÷	÷

注意：實體名稱對大小寫敏感

歡迎大家提議、分享、交流、共同學習進步

隨著5G網絡逐漸普及，手機已經成為了我們的一部分，從前出門要還要想著帶個什么樣子的包，現在的出門只要記得帶好手機就足矣！以前手機要實現一個功能就需要安裝相應的APP，而現在微信小程序等帶給我們不一樣的體驗，我們不再需要安裝各種各樣的APP，很多都可以在微信小程序上完成。微信小程序的開發門檻雖然低了很多，但我們還是需要掌握一定的基礎知識，而作為基礎中的基礎，HTML5是我們必須學習的。

一、HTML代碼基礎

1、HTML5的語法要求非常寬松，屬性值可以用單引號、雙引號包含起來，甚至可以不加引號。如：

id="wl" id='wl' id=wl 這三個是一樣的效果。

但需要注意的是如果屬性值中含有空格、單引號、大于小于號、反引號等字符時，則必須加引號，而當屬性值中含有單引號時，可以加雙引號，而值中有雙引號時就可以加單引號。為了養成一個好的習慣，建議好始終給屬性值加雙引號。

2、內容標簽是標簽中包含一段內容，如p和strong這樣的元素；非內容標簽（空元素）是指標簽不包含內容，比如換行等，它只有起始標簽，不需要結束標簽，以HTML5以前為了強調結束，經常把非內容標簽寫成<br />樣子，而在HTML5中規定，非內容標簽不需要關閉。常見的非內容標簽有：<meta>、<img>、<br>、<input>、<link>、<hr>、<embed>等。

3、注釋：不論單選還是多行，只需要把注釋放在。

4、HTML頁面根元素，在整個頁面中html是根元素，在這個元素中一般有兩個屬性，一個是lang，另一個是manifest。

<html lang="zh-cmn-Hans">：聲明頁面的語言為簡體中文。（非標準寫法為lang="zh-CN"）；manifest屬性用于設定頁面緩存，它一旦設置后，瀏覽器便會將需要緩存的文件保存在本地，主要適用于不依賴網絡，且下載后不需要再次更新的HTML5游戲、應用等，如果頁面內容需要頻繁更新的應該少用該屬性，具體用法可以查詢HTML5手冊，這里不詳細說明。

5、Head元素包含五個主要部分，分別是title、link、style、base和meta元素。title元素即網頁的標題；link元素定義了文檔與外部資源的關系，除了CSS外，還有許多的外部資源也通過這一元素引入頁面；style元素用于在頁面中定義樣式；base元素用于標記文檔的基礎URL地址，還可被用于設置全局的瀏覽器打開方式，如：<base target="_blank">設置頁面中所有的鏈接均在新窗口中打開

;meta元素是head中各類最豐富的一個元素，雖然它包含了多種多樣的元數據，但它被規定了必須包含name（元數據名稱），http-equiv（編譯指令）和charset（字符編碼）三種屬性的其中一種。如不希望頁面被抓取并公開時，我們可以在頁面中添加名為robots的meta標記，如：<meta name="robots" content="none">，反之則所有都被檢索到<meta name="robots" content="all">

。meta元素還能完成諸如刷新、重定向、緩存時間等功能。

6、HTML5新增了header元素，專門用來表述這樣的頭部區域，section元素對應不用的內容版塊，文章可以用article元素來表示，頁面的側邊欄可以用aside元素來表示，而且不僅可以放在整個頁面的代表側邊欄區域，還能放入section或article中，來容納一些與版塊和文章相關的內容。

7、footer元素和header元素并非區塊內容，在這兩種元素之內不能再嵌套放入類似section之類的元素。

8、不是所有的文字段落都適用p元素，如一段文字為聯系信息時，則應使用address元素。

9、定義列表的除了有ul和ol外，還有一種更加自定義的形式，它由三種元素的組合而成，分別是dl、dt和dd。

10、內容分組元素figure元素，它主要用于展示插圖、圖表、照片、代碼列表等。

11、HTML5加入了一種新的內容分組元素，用來指定頁面的主要內容，main元素，每一個頁面中最多只能有一個main元素，另外還有像水平分隔線的hr,表示源代碼的pre，代表引用的blockquote等都同樣屬于內容分組元素。

12、在過去HTML版本中，a還可以當成錨點，如<a name="a1"></a>，但在HTML5中把這一特性去掉了，當href屬性缺失時，它被視作一個占位符，而不會顯示為一個超鏈接。

13、span元素是一種常見的文本元素，但如果不對span設置樣式，則spqn中的文本和其他的文本看上去不會有任何差異。

14、在HTML5中有兩種表示強調的文本元素，分別為em和strong，em元素更多代表語義、語氣的加強，而strong則更加強調頁面文本的重要性、緊急程度等，瀏覽器中em默認的顯示為斜體，而strong則顯示為粗體。

15、big標記的文本顯示大于普通的段落文本，而small標記的文本則小于普通的段落文本；當需要插入某句被引用的話，或者某段文字摘錄時，可以使用q元素，而當需要插入文獻的標題、作者、鏈接時使用cite元素，q元素默認在頭和尾加上雙引號，而cite元素默認顯示為斜體。

16、表單在制作時需要設置method和action屬性，分別用來指定表單提交數據的方式和目的頁面；數據提交的方式有兩種，get和post，get是把數據放在URL中，以明文的方式發送給后臺，它不能傳輸過大的數據，也不能傳輸文件類數據，而post是把數據放在數據體內再發給后臺，數據不能直接被看到，可傳輸的數據量較大，所以一般都選擇使用post方式。

17、在文本輸入框可以加入placeholder（占位符）屬性，值為框內顯示的文本，也可以為input元素添加required屬性使該表單項必填，也可以添加autofocus屬性使其自動獲得焦點，一般設置第一個字段。

18、HTML5為input元素增加了很多新的類型，如電話的tel，電子郵件的email，日期的date等。

19、radio表示單選按鈕，同一組的單選按鈕具有相同的name屬性，它的值由value屬性決定，checked屬性表示該按鈕默認選中。如：

<p>
<label for="sex">性別：</label>
<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female">女
</p>

還可以使用分區度更高的fieldset元素，它可以對表單內容的一部分進行打包，生成一組相關的表單字段，它使用legend元素指定標題。

checkbox的input元素為復選框，checked屬性為選中狀態；select元素生成下拉菜單，元素使用option元素標記。

在線咨詢

上一篇：關于元素CSS高度的5個概念
下一篇：HTML多層級下拉框

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

一個基本的HTML5模板「建議收藏」

什么是HTML？

HTML 標簽

HTML 元素

HTML 頭部元素

HTML <HEAD> 元素

HTML <TITLE> 元素

HTML <BASE> 元素

HTML <LINK> 元素

HTML <STYLE> 元素

HTML <META> 元素

<META> 標簽- 使用實例

HTML <SCRIPT> 元素

HTML 元素

元素語法

注釋標簽

標簽定義及使用說明

HTML 段落與文字

標題

段落

文本格式化

區塊

HTML字符實體

您的項目需求