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/

TML常用元素使用練習2

NO.3:

注釋標簽是為代碼添加注釋使用的，它的內容不會顯示在頁面中。幾乎每種編程語言都有自己注釋的寫法。對于一些復雜代碼標注注釋對團隊合作非常重要，即使自己若干年后打開以前寫的代碼，也能通過注釋快速回憶起曾經的思路。當然，HTML很少用到注釋，因為它太簡單了。

代碼示例：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網頁</title>
</head> 
<body>
  <h1>第一個網頁</h1><hr>
<p>千里之行始于足下<br>值得注意的是我們沒有必要一一講解HTML中的所有元素以及每個元素的各個屬性，<br>
  因為每個元素的使用都是大同小異，我們完全可以通過幾個常用案例對HTML全部元<br>
  素及屬性的指定形成一個整體認識，以后可以根據需求通過查詢手冊來自己學習其他<br>
  元素及其屬性的用法。</p><hr><!--這里是注釋-->
</body> 
</html>

因為頁面中沒有顯示，就不給大家截圖了。

NO.4:<img>

<img>可以用來顯示圖片元素，但是寫法和之前的元素不太一樣，這個元素沒有結尾標簽。它是通過改變標簽的src屬性向頁面導入圖片。

在做這個練習之前我們需要做一個準備工作，

step1：找一張圖片，例如：下面這張美女

step2：右鍵-另存為

step3：選擇路徑，我們在之前的篇章中已經帶領大家在自己的某個盤上建立了一個叫做"零基礎自學網頁制作"的文件夾，圖片保存到這個文件夾中！

step4：圖片命名為 image1.jpg

step5：確定你的"第一個頁面.html"文件和"image1.jpg"在一個文件夾中。

<img src="image1.jpg"/> 示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網頁</title>
</head> 
<body><h1>第一個網頁</h1><hr>
<img src="image1.jpg"/>
  </body> 
</html>

頁面效果如圖所示：

HTML元素中除了有向首尾標簽中間添加文字來顯示內容的元素，也有通過src屬性導入信息的元素。

NO.5:<a></a>

<a></a>標簽是用來添加超鏈接的元素，這個元素的寫法比較有趣。

<a href="https://www.toutiao.com/i6785149184245760516/?group_id=6785149184245760516?group_id=6785149184245760516?group_id=6785149184245760516">零基礎自學網頁制作——序章（學習目的、對象、基本概念）</a>代碼示例：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網頁</title>
</head> 
<body>
  <h1>第一個網頁</h1>
<hr><a href="https://www.toutiao.com/i6785149184245760516/?group_id=6785149184245760516?group_id=6785149184245760516?group_id=6785149184245760516"> 零基礎自學網頁制作——序章（學習目的、對象、基本概念）</a></body> </html>

頁面效果如圖：

通過點擊"零基礎自學網頁制作——序章（學習目的、對象、基本概念）"可以跳轉到相應頁面。

通過觀察發現，a標簽是在首尾標簽之間添加要顯示的文字內容，通過為href屬性添加網址完成超鏈接設置。

大家思考一下，如果把文字換成圖片，超鏈接還會起作用嗎？

示例代碼如下：

<a href="https://www.toutiao.com/i6785149184245760516/?group_id=6785149184245760516?group_
id=6785149184245760516?group_id=6785149184245760516"><img src="image1.jpg"/></a>

使用"<img src="image1.jpg"/>"代替"零基礎自學網頁制作——序章（學習目的、對象、基本概念）"。

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網頁</title>
</head> 
<body>
  <h1>第一個網頁</h1><hr>
<a href="https://www.toutiao.com/i6785149184245760516/?group_id=6785149184245760516?group
_id=6785149184245760516?group_id=6785149184245760516"> <img src="image1.jpg"/></a>
  </body> 
  </html>

效果如下：

看起來似乎沒有變化，但是鼠標移動到圖片上時，箭頭變成了小手的圖標。

點擊后打開目標鏈接。

今天的內容到這里就結束了，通過這幾個元素的學習，大家對html元素的使用建立了基本概念。

下一期我們將詳細講解html元素中的屬性，在練習中再次介紹幾個常用元素，并為大家講解"絕對路徑"與"相對路徑"的區別。

喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

HTML頁面中head標簽有啥用？——零基礎自學網頁制作

初識meta標簽與SEO——零基礎自學網頁制作

HTML中的元素使用方法1——零基礎自學網頁制作

HTML中的元素使用方法2——零基礎自學網頁制作

HTML元素中的屬性1——零基礎自學網頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作

使用HTML添加表格1（基本元素）——零基礎自學網頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網頁制作

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作

封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作

HTML表單4（form的action、method屬性）——零基礎自學網頁制作

HTML列表制作講解——零基礎自學網頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

起之前工作面試時，面試官問的一個問題：行內元素有哪些，和塊級元素有什么區別？這是一道蠻基礎的面試題，但是很多初學者平時只注重標簽語義，忽視了標簽行內和塊級的特性，因此對于上述問題很有可能答不上來或者答不全。

HTML常見的行內元素有：

還有包括一些文本元素如：<br> 、<b>、 <strong>、<sup> 、<sub>、 <i> 、<em> 、<del> 、 <u>等。

要是只回答<span>和<img>那就說不過去了吧。

HTML常見的塊級元素有：

<div>、<table>、<form>、<p>、<ul>、

<h1>......<h6>、<hr> 、<pre>、<address>、<center>、<marquee> 、<blockquote> 等。

要是只回答<div>那就說不過去了吧。

那它們之間的區別是什么呢？

·塊級元素

1.總是從新的一行開始，即各個塊級元素獨占一行，默認垂直向下排列；

2.高度、寬度、margin及padding都是可控的，設置有效，有邊距效果；

3.寬度沒有設置時，默認為100%；

4.塊級元素中可以包含塊級元素和行內元素。

·行內元素

1.和其他元素都在一行，即行內元素和其他行內元素都會在一條水平線上排列；

2.高度、寬度是不可控的，設置無效，由內容決定。

設置margin左右有效，有邊距效果；

設置margin上下會撐大空間但是不會產生邊距效果（即盒模型margin-top/bottom有值，但頁面上沒有邊距效果）。

設置padding左右有效，設置padding上下會撐大空間但是不會產生邊距效果（同上）。

padding效果如下展示：


<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
   </head>
	<style>
		span{
			border:1px solid red;
			padding:10px;
		}
		div{
			border:1px solid blue;
		}
	</style>
   <body>
	   <div>塊級元素</div>
	   <span> 行內元素</span>
	   <span> 行內元素</span>
	   <div>塊級元素</div>
   </body>
</html>

3.根據標簽語義化的理念，行內元素最好只包含行內元素，不包含塊級元素。

轉換

當然塊級元素與行內元素之間的特性是可以相互轉換的。HTML可以將元素分為行內元素、塊狀元素和行內塊狀元素三種。

使用display屬性能夠將三者任意轉換：

(1)display:inline;轉換為行內元素；

　　(2)display:block;轉換為塊狀元素；

　　(3)display:inline-block;轉換為行內塊狀元素。

行內塊狀元素綜合了行內元素和塊狀元素的特性：

(1)不自動換行，與其他行內元素都會在一條水平線上排列；

(2)高度、寬度、margin及padding都是可控的，設置有效，有邊距效果；

(3)默認排列方式為從左到右。

在線咨詢

上一篇：用HTML5構建一個流程圖繪制工具
下一篇：HTML 頁面顯示 XML 數據

您的項目需求

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