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:完成頁面的內容展示

CSS：完成頁面樣式的控制，美化頁面，完成頁面的布局。

表單：用于采集用戶輸入的數據。用于和服務器進行交互。

form:用于定義表單的。可以定義一個范圍(代表用戶采集數據的范圍)

屬性：action:指定提交數據的url(指的就是把數據提交到哪里)

method:指定提交方式

分類：一共有7種，2種比較常用。

get:1.請求參數會在地址欄顯示

2.請求參數的長度是有限制的。

3.請求不安全

post:1.請求參數不會在地址欄顯示，會封裝在請求體中。

2.請求參數的長度沒有限制

3.較為安全

表單里面的數據要想被提交，必須指定它的name屬性

表單項標簽

input:可以通過type屬性值，改變元素展示的樣式。

type屬性：text:文本輸入框，默認值

placeholder:指定輸入框的提示信息，當輸入框的內容發生變化，會自動情況提示信息。

password:密碼輸入框

radio：1.單選框(要想讓多個單選框實現單選的效果，則多個單選框的name屬性值必須一樣)

2.一般會給每一個單選框提供value屬性，指定其被選中后提交的值。

3.checked屬性可以指定默認值

checkbox:復選框:

1.一般會給每一個單選框提供value屬性，指定其被選中后提交的值。

2.checked屬性可以指定默認值

file:文件選擇框

hidden:隱藏域，用于提交一些信息

按鈕:

submit:提交按鈕。可以提交表單

button:普通按鈕

image:圖片提交按鈕

src屬性指定圖片的路徑

label:指定輸入項的文字描述信息

注意：lable的for屬性一般會和input的id屬性值對應。如果對應了，點擊lable區域，會讓input輸入框獲取焦點。

select:下拉列表

子元素：option,指定列表項

textarea:文本域

、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、換行標簽：<br/>

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>

在線咨詢

上一篇：JavaScript金典案例，獲取當前實時時間
下一篇：4個頂級開源JavaScript圖表庫

您的項目需求

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

整合營銷服務商