HTML教程（看完這篇就夠了）

TML教程

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。

您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。

在本教程中，您將學習如何使用 HTML 來創建站點。

HTML 很容易學習！相信您能很快學會它！

本教程包含了數百個 HTML 實例。

使用本站的編輯器，您可以輕松實現在線修改 HTML，并查看實例運行結果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>孫叫獸的博客</title>
    </head>
    <body>
        <h1>我的第一個標題</h1>
        <p>我的第一個段落。</p>
    </body>
</html>

HTML 文檔的后綴名

.html

.htm

都可以。

HTML 簡介

實例：

<!doctype html>
<html>
<header>
<meta charset="utf-8">
<title>孫叫獸的博客</title>
</header>
<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 標簽是由尖括號包圍的關鍵詞，比如 <html>

HTML 標簽通常是成對出現的，比如 <b> 和 </b>

標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽

開始和結束標簽也被稱為開放標簽和閉合標簽

<標簽>內容</標簽>

html元素

“HTML 標簽” 和 “HTML 元素” 通常都是描述同樣的意思.

但是嚴格來講, 一個 HTML 元素包含了開始標簽與結束標簽，如下實例:

HTML 元素:

<p>這是一個段落</p>

web瀏覽器

Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用于讀取HTML文件，并將其作為網頁顯示。

瀏覽器并不是直接顯示的HTML標簽，但可以使用標簽來決定如何展現HTML頁面的內容給用戶

html網頁結構

<html>
    <head>
        <title>頁面標題</title>
    </head>
    <body>
        <h1>這是一個標題</h1>
        <p>這是一個段落。</p>
        <p>這是另外一個段落。</p>
    </body>
</html>

html的版本：

<!DOCTYPE>聲明

<!DOCTYPE>聲明有助于瀏覽器中正確顯示網頁。

網絡上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網頁內容。

doctype 聲明是不區分大小寫的，以下方式均可：

<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>

html5

<!DOCTYPE html>

html4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4 Transitional//EN""
http://www.w3.org/TR/html4/loose.dtd">

xhtml1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

中文編碼

目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字符聲明為 UTF-8。

JavaScript 語句向瀏覽器發出的命令。語句的作用是告訴瀏覽器該做什么。

JavaScript 語句

JavaScript 語句是發給瀏覽器的命令。

這些命令的作用是告訴瀏覽器要做的事情。

下面的 JavaScript 語句向 id="demo" 的 HTML 元素輸出文本 "你好 Dolly" ：

實例

document.getElementById("demo").innerHTML = "你好 Dolly";

嘗試一下 ?

分號 ;

分號用于分隔 JavaScript 語句。

通常我們在每條可執行的語句結尾添加分號。

使用分號的另一用處是在一行中編寫多條語句。

實例:

a = 5;

b = 6;

c = a + b;

以上實例也可以這么寫:

a = 5; b = 6; c = a + b;

嘗試一下 ?

	您也可能看到不帶有分號的案例。在 JavaScript 中，用分號來結束語句是可選的。

JavaScript 代碼

JavaScript 代碼是 JavaScript 語句的序列。

瀏覽器按照編寫順序依次執行每條語句。

本例向網頁輸出一個標題和兩個段落：

實例

document.getElementById("demo").innerHTML="你好 Dolly";

document.getElementById("myDIV").innerHTML="你最近怎么樣?";

JavaScript 代碼塊

JavaScript 可以分批地組合起來。

代碼塊以左花括號開始，以右花括號結束。

代碼塊的作用是一并地執行語句序列。

本例向網頁輸出一個標題和兩個段落：

實例

function myFunction()

{

document.getElementById("demo").innerHTML="你好Dolly";

document.getElementById("myDIV").innerHTML="你最近怎么樣?";

}

JavaScript 語句標識符

JavaScript 語句通常以一個 語句標識符 為開始，并執行該語句。

語句標識符是保留關鍵字不能作為變量名使用。

下表列出了 JavaScript 語句標識符 (關鍵字) ：

語句	描述
break	用于跳出循環。
catch	語句塊，在 try 語句塊執行出錯時執行 catch 語句塊。
continue	跳過循環中的一個迭代。
do ... while	執行一個語句塊，在條件語句為 true 時繼續執行該語句塊。
for	在條件語句為 true 時，可以將代碼塊執行指定的次數。
for ... in	用于遍歷數組或者對象的屬性（對數組或者對象的屬性進行循環操作）。
function	定義一個函數
if ... else	用于基于不同的條件來執行不同的動作。
return	退出函數
switch	用于基于不同的條件來執行不同的動作。
throw	拋出（生成）錯誤。
try	實現錯誤處理，與 catch 一同使用。
var	聲明一個變量。
while	當條件語句為 true 時，執行語句塊。

JavaScript 對大小寫敏感。

JavaScript 對大小寫是敏感的。

當編寫 JavaScript 語句時，請留意是否關閉大小寫切換鍵。

函數 getElementById 與 getElementbyID 是不同的。

同樣，變量 myVariable 與 MyVariable 也是不同的。

空格

JavaScript 會忽略多余的空格。您可以向腳本添加空格，來提高其可讀性。下面的兩行代碼是等效的：

var person="Hege";

var person = "Hege";

對代碼行進行折行

您可以在文本字符串中使用反斜杠對代碼行進行換行。下面的例子會正確地顯示：

document.write("你好 \

世界!");

不過，您不能像這樣折行：

document.write \

("你好世界!");

您知道嗎？

提示：JavaScript 是腳本語言。瀏覽器會在讀取代碼時，逐行地執行腳本代碼。而對于傳統編程來說，會在執行前對所有代碼進行編譯。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

錄

使用場景

display屬性

visibility 可見性

overflow 溢出

博主個人興趣

在線咨詢

上一篇：手把手教你前端的各種文件上傳攻略和大文件斷點續傳
下一篇：vue深坑記-keep-alive 路由緩存和清除

您的項目需求

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

整合營銷服務商

HTML教程（看完這篇就夠了）

錄

您的項目需求