HTML 元素與標簽

TML（HyperText Markup Language）是一種用于創建網頁的標準標記語言。在HTML中，"元素"和"標簽"是構建網頁的基本組成部分，它們一起定義了網頁的結構和內容。HTML標簽是用來定義HTML元素的開始和結束的，而HTML元素是由標簽及其包含的內容組成的。

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

1、HTML 元素

HTML元素指的是從開始標簽到結束標簽的所有內容。它們是HTML文檔的構建塊，用于創建和組織網頁內容。HTML元素可以包含文本、圖片、鏈接、表格等多種類型的數據。元素可能包括一個開始標簽和一個結束標簽，也可能只有一個標簽（在自閉合元素的情況下）。

1） <!DOCTYPE> 聲明

用于定義文檔類型，告訴瀏覽器此文檔使用哪個HTML版本。

<!DOCTYPE html>

2） <html>

根元素，包含整個HTML文檔。

<html lang="en">
</html>

3） <head>

包含文檔的元數據，如標題、字符集聲明和鏈接到樣式表。

<head>
  <title>頁面標題</title>
  <meta charset="UTF-8">
</head>

4）<title>

定義文檔的標題，顯示在瀏覽器的標題欄或頁面的標簽頁上。

<title>這是文檔的標題</title>

5）<body>

包含文檔的所有可見內容，如文本、圖片、鏈接和其他多媒體元素。

<body>
  <h1>這是一個主標題</h1>
  <p>這是一個段落。</p>
</body>

6） <header>

定義一個區域或頁面的頭部，通常包含標題和導航鏈接。

<header>
  <h1>網站標題</h1>
  <nav>
    <ul>
      <li><a href="#">首頁</a></li>
      <li><a href="#">關于</a></li>
    </ul>
  </nav>
</header>

7） <footer>

定義頁面或區域的頁腳部分，通常包含版權信息、聯系信息等。

<footer>
  <p>版權所有 ? 2024</p>
</footer>

8） <nav>

定義導航鏈接的部分，用于頁面內或頁面間的導航。

<nav>
  <ul>
    <li><a href="#">首頁</a></li>
    <li><a href="#">新聞</a></li>
  </ul>
</nav>

9）<section>

定義文檔中的一個獨立部分，通常與標題一起使用。

<section>
  <h2>章節標題</h2>
  <p>這是該章節的一些內容。</p>
</section>

10. <article>

定義可以獨立于內容其余部分的完整自包含內容，例如博客帖子或新聞文章。

<article>
  <h2>文章標題</h2>
  <p>文章內容...</p>
</article>

11. <aside>

定義與周圍內容稍微分離的內容，如側邊欄或廣告欄。

<aside>
  <p>這是一些附加信息。</p>
</aside>

12. <figure> 和 <figcaption>

<figure> 定義獨立的流內容（如圖表、圖像、代碼示例等），<figcaption> 提供該內容的標題。

<figure>
  <img src="image.jpg" alt="描述性文本">
  <figcaption>圖像標題</figcaption>
</figure>

2、HTML 標簽

HTML標簽是HTML元素的一部分，用于從邏輯上開始或結束一個元素。標簽通常成對出現，包括一個開始標簽和一個對應的結束標簽，結束標簽的名稱前會有一個斜線（/）作為區分。有些HTML標簽是自閉合的，意味著它們不需要結束標簽，如圖像標簽（<img />）和換行標簽（<br />）。

標簽	說明
<!DOCTYPE>	聲明文檔類型和HTML版本。
<html>	標識一個HTML文檔的根元素。
<head>	包含了文檔的元數據。
<title>	指定文檔的標題。
<body>	包含了可見的頁面內容。
<h1> - <h6>	定義標題，從 <h1> 到 <h6> 重要性遞減。
<p>	定義段落。
<br>	插入一個換行符。
<hr>	在頁面上繪制一條水平線。
<b>	定義粗體文本。
<i>	定義斜體文本。
<u>	定義下劃線文本。
<strong>	定義重要文本。
<em>	定義強調文本。
<mark>	定義被標記或高亮的文本。
<small>	定義小號文本。
<sub>	定義下標文本。
<sup>	定義上標文本。
<a>	定義超鏈接。
<img>	在頁面中嵌入圖像。
<ul>	定義無序列表。
<ol>	定義有序列表。
<li>	定義列表項。
<table>	定義表格。
<th>	定義表格的表頭單元格。
<tr>	定義表格的行。
<td>	定義表格單元。
<form>	定義HTML表單。
<input>	定義輸入控件。
<textarea>	定義多行文本輸入控件。
<button>	定義按鈕。
<select>	定義下拉列表。
<option>	定義下拉列表中的選項。
<article>	定義文章。
<section>	定義文檔中的一個區域（或節）。
<header>	定義介紹性內容或導航鏈接的容器。
<footer>	定義注腳或文檔的頁腳。
<nav>	定義導航鏈接的部分。
<aside>	定義側邊欄內容。

使用示例：

<!DOCTYPE html>
使用示例：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML標簽使用示例</title>
</head>
<body>
<header>
    <h1>歡迎來到我的網頁</h1>
    <nav>
        <a href="#content">主要內容</a> |
        <a href="#contact-form">聯系表單</a>
    </nav>
</header>
<section id="content">
    <article>
        <h2>HTML基礎</h2>
        <p>HTML是構建網頁的基石。<strong>標簽</strong>是它的核心組成部分。<mark>本文</mark>介紹了一些最常用的HTML標簽。</p>
    </article>
    <aside>
        <h3>注意</h3>
        <p>記得檢查HTML5的新特性和標簽。</p>
    </aside>
    <ul>
        <li>文本標簽</li>
        <li>列表</li>
        <li>表格</li>
        <li>表單</li>
    </ul>
    <ol>
        <li>先介紹基礎</li>
        <li>然后是進階</li>
    </ol>
    <table>
        <tr>
            <th>標簽</th>
            <th>描述</th>
        </tr>
        <tr>
            <td><p></td>
            <td>段落標簽</td>
        </tr>
        <tr>
            <td><a></td>
            <td>鏈接標簽</td>
        </tr>
    </table>
</section>
<section id="images">
    <h2>圖片</h2>
    <img src="example.jpg" alt="示例圖片">
</section>
<footer>
    <section id="contact-form">
        <h2>聯系我們</h2>
        <form>
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name"><br>
            <label for="email">電子郵件:</label>
            <input type="email" id="email" name="email"><br>
            <input type="submit" value="提交">
        </form>
    </section>
    <p>? 2024 HTML標簽示例</p>
</footer>
</body>
</html>

參考文檔：Hhttps://www.cjavapy.com/article/3303/

個網頁對應于一個html文件，HTML文件以.htm或.html為擴展名。可以使用任何能夠生成TXT類型源文件的文本編輯來產生HTML文件。標準的HTML文件都具有一個基本的整體結構，即HTML文件的開頭與結尾標志和HTML的頭部與實體2大部分。有3個雙標記符用于頁面整體結構的確認。

1、HTML元素
a、從開始標簽到結束標簽的所有代碼
b、開始（開放）標簽<p>、結束（閉合）標簽</p>、標簽內的東西：元素內容
c、<br/>空元素，換行的意思
d、用p標簽行之間間隔較大，用br標簽行之間間隔較小
e、HTML元素語法：
(1)元素內容是開始標簽與結束標簽之間的內容
(2)空元素在開始標簽中進行關閉
(3)大多數HTML元素可擁有屬性
f、嵌套的HTML元素：大多數的HTML元素都是可以嵌套使用的

2、HTML屬性
a、標簽可以擁有屬性為元素提供更多信息
b、屬性以鍵值對的形式出現：例如a標簽里面 href="www.baidu.com"
c、常用標簽類型：
(1)<h1 align = " ">對齊方式，例如center中間
(2)<body bgcolor=" ">背景顏色
(3)<a target = " ">規定在何處打開鏈接，_self本地默認打開
屬性：
(1)默認，覆蓋原標簽頁
(2)_blank，打開為新標簽頁
(4)<body backgroud=" ">設置背景圖片
d、通用屬性：
(1)class：規定元素的類名
(2)id：規定元素的唯一ID
(3)style：規定元素的樣式，一般引用css
(4)title：規定元素的額外信息

3、HTML格式化
a、定義粗體文本
b、<big>定義大號字，HTML5會被css代替
c、<em>定義著重問題
d、定義斜體字
e、<small>定義小號字
f、<strong>定義加重語氣
g、<sub>定義下標字
h、<sup>定義上標字
i、<ins>定義插入字，有下劃線
j、<del>定義刪除字，有刪除線

每種HTML標記符在使用中可帶有不同的屬性項，用于描述該標記符說明的內容顯示不同的效果。正文標記符中提供以下屬性來改變文本的顏色及頁面背景。

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

2）元素（Element）

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

3）屬性（Attribute）

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

4）文檔結構

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

5）塊級元素和內聯元素

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

6）嵌套

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

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提供了創建表單的標簽和元素，可以用于收集用戶的輸入數據。通過使用表單元素如文本框、復選框、單選按鈕和下拉列表等，用戶可以輸入數據并提交給服務器進行處理。

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

在線咨詢

上一篇：HTML簡介-2019-1-18：22:05
下一篇：前端_CSS的字體

您的項目需求

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

整合營銷服務商