「HTML」概念和基本標簽

、www：

萬維網，建立在internet上，全球性的、交互、多平臺、分布的信息資源。

wwwf組成：

url：統一資源定位器，通俗來說就是訪問地址
HTTP：超文本傳輸協議
HTML：超文本標記語言

2、網頁的后綴名：html和htm

3、標簽：

雙標簽：<標簽名>內容</標簽名>

單標簽：<標簽名 />

注釋標簽：

各種標簽，以html文檔結構來做：

<!doctype html> <!--文檔類型標簽-->
<html> --最外層的標簽
<head> <!--頭部標簽，包含編碼、標題等-->
	<title>標題</title> <!--標題標簽-->
	<meta charset="utf-8"/> <!--編碼格式-->
</head>
  <body> <!--主體標簽，里面顯示的內容-->
  	<h1>哈哈哈哈</h1>
  </body>
</html>

4、標題標簽

h1~h6,h1最大的，h6最小的

屬性：align,對齊方式

屬性值：left-左對齊，center-居中，right-右對齊

示例：

<h1 align="left">標題左對齊</h1>

5、段落標簽：

內容

屬性：

-title:提示信息

-style:行內樣式

-dir:文字方向，默認從左向右，ltl或者rtl

示例：

<p title="這是提示信息" dir="ltl"></p>

6、換行標簽：

7、水平線標簽：<hr/>

屬性：

align:對齊方式，默認center居中對齊

color:顏色

width:寬度，可以取值百分比或者像素

size:高度，只能取值像素

noshade:取消陰影

示例：

<hr color="red" width="50%" size="10"/>

8、強調標簽：加粗字體

和

9、圖片標簽：<img />

屬性：

src:圖片路徑

alt:圖片加載錯誤時提示信息

title:鼠標放在圖片上提示信息

width:寬度

border:邊框

示例：

<img src="1.jpg" alt="圖片加載失敗" title="提示信息"/>

10、超鏈接：<a>文本</a>

屬性：

href：要跳轉的地址

示例：

<a href="https://www.baidu.com">百度一下</a>

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> 元素定義一個大標題
元素定義一個段落

什么是HTML？

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

標簽

HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>

HTML 標簽通常是成對出現的，比如 和

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

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

<標簽>內容</標簽>

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。

HTML（HyperText Markup Language，中文：超文本標記語言）是一種用于創建網頁結構和內容的標記語言。它由一系列標簽組成，這些標簽描述了網頁中的各個元素和其它相關信息。通過使用HTML標簽和屬性，開發人員可以定義文本、圖像、鏈接、表格、表單等元素，并控制它們的外觀和行為。本文主要介紹HTML的基本概念、歷史背景和用途。

參考文檔：https://www.cjavapy.com/article/3297/

HTML實例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CJAVAPY編程之路(cjavapy.com)</title>
</head>
<body>
 
<h1>我的第一個標題</h1>
 
<p>我的第一個段落。</p>
 
</body>
</html>

HTML文檔的后綴名可以是.html或.htm，都可以使用，沒有區別。

注意：對于中文網頁需要使用<meta charset="utf-8"> 聲明編碼，否則會出現亂碼。有些瀏覽器(如 360 瀏覽器)會設置 GBK 為默認編碼，則你需要設置為<meta charset="gbk"> 。

1、HTML的基本概念

1）標簽（Tag）

HTML使用標簽來定義網頁中的各個元素。標簽通常以尖括號< >的形式出現，如表示段落，<img>表示圖像等。標簽可以包含屬性，用于提供額外的信息或控制元素的行為。

2）元素（Element）

一個完整的HTML元素由開始標簽、內容和結束標簽組成。例如，這是一個段落就是一個完整的段落元素。

3）屬性（Attribute）

HTML標簽可以具有屬性，用于提供元素的額外信息或控制元素的行為。屬性以鍵值對的形式出現，例如<img src="image.jpg">中的src屬性指定了圖像的源文件。

4）文檔結構

一個HTML文檔由<html>、<head>和<body>等標簽組成。其中，<html>標簽用于定義整個HTML文檔的根元素，<head>標簽用于定義文檔的頭部信息，如標題和樣式表鏈接，<body>標簽用于定義文檔的主體內容。

5）塊級元素和內聯元素

HTML元素可以被分類為塊級元素和內聯元素。塊級元素以塊的形式顯示，獨占一行或一塊空間，如、<div>等。內聯元素以行內的方式顯示，不會獨占一行，如、<a>等。

6）嵌套

HTML元素可以嵌套在其他元素內部，形成一個層次結構。例如，<div>元素可以包含元素，元素可以包含元素。

7）<!DOCTYPE> 聲明

HTML文檔的開頭通常會包含一個DOCTYPE聲明，用于指定文檔的HTML版本。

例如：

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

2、HTML與Web 瀏覽器

HTML（HyperText Markup Language）是一種用于創建網頁結構和內容的標記語言，而Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用于顯示和解釋HTML文檔的應用程序。Web瀏覽器通過解析HTML文檔，將其轉換為可視化的網頁。瀏覽器會讀取HTML文檔中的標簽和內容，并根據這些標簽和內容的定義，渲染出網頁的結構和樣式。HTML提供了各種標簽和屬性，用于定義文本、圖像、鏈接、表格、表單等在網頁中的展示和交互方式。瀏覽器在解析HTML時，會根據標簽和屬性的定義，將文本顯示為段落、標題或其他格式，顯示圖像、鏈接，并響應用戶的交互操作。

通過HTML和Web瀏覽器的結合，用戶可以在瀏覽器中訪問和瀏覽各種網頁內容，包括網頁文本、圖像、視頻、音頻等多媒體元素，并與網頁進行交互，如點擊鏈接、填寫表單、提交數據等。

大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，需要在頭部將字符聲明為 UTF-8 或 GBK。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
頁面標題</title>
</head>
<body>
 
<h1>我的第一個標題</h1>
 
<p>我的第一個段落。</p>
 
</body>
</html>

3、HTML版本及歷史背景

HTML有多個版本，每個版本都有不同的特性和改進。

版本	發布時間
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2014

1）HTML 1.0

HTML 1.0是最早的HTML版本，于1993年發布。它只包含一些基本的標簽和屬性，用于創建簡單的文本和鏈接。HTML 1.0的目標是定義一種通用的超文本標記語言。

2）HTML 2.0

HTML 2.0于1995年發布，是對HTML 1.0的改進和擴展。它引入了一些新的標簽和屬性，如圖像標簽和表格標簽，以支持更豐富的內容展示。

3）HTML 3.2

HTML 3.2于1997年發布，是對HTML 2.0的進一步改進。它引入了一些新的標簽和屬性，如表單標簽和框架標簽，以支持交互性和頁面布局。

4）HTML 4.01

HTML 4.01于1999年發布，是對HTML 3.2的修訂和擴展。它引入了更多的標簽和屬性，如層標簽和樣式表，以支持更靈活的頁面設計和樣式控制。

5）XHTML 1.0

XHTML（eXtensible HyperText Markup Language）是基于XML的HTML版本。XHTML 1.0于2000年發布，它嚴格遵循XML的語法規則，要求所有標簽和屬性都要正確嵌套和閉合。

6）HTML5

HTML5是HTML的最新版本，于2014年正式發布。HTML5引入了許多新的特性和API，如語義化標簽、多媒體支持、Canvas繪圖、本地存儲等。HTML5還支持響應式設計，以適應不同設備和屏幕尺寸。

4、HTML用途

HTML是構建網頁結構和內容的基礎語言，它提供了豐富的標簽和屬性，使得開發者可以創建各種類型的網頁，并實現不同的功能和效果。HTML用于定義網頁的整體結構，包括標題、段落、列表、標題、導航菜單等元素。通過使用不同的HTML標簽和屬性，可以將文本、圖像、音頻、視頻等內容組織起來，并構建頁面的層次結構。HTML可以用于展示文本內容和多媒體元素，如圖像、音頻和視頻。通過使用適當的HTML標簽和屬性，可以插入和顯示各種類型的媒體內容，從而使網頁更加豐富和吸引人。HTML提供了創建表單的標簽和元素，可以用于收集用戶的輸入數據。通過使用表單元素如文本框、復選框、單選按鈕和下拉列表等，用戶可以輸入數據并提交給服務器進行處理。