整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          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/


          主站蜘蛛池模板: 亚洲国产欧美日韩精品一区二区三区| 精品久久久久一区二区三区| 日韩美一区二区三区| 成人区人妻精品一区二区不卡| 蜜臀AV无码一区二区三区| 日韩精品国产一区| 久久一区二区三区免费| 久久久一区二区三区| 色噜噜狠狠一区二区三区| 免费高清在线影片一区| 国产精品无码一区二区在线观一 | 国产精品一区二区久久精品无码| 中文字幕亚洲一区二区三区| 久久国产精品无码一区二区三区 | 老鸭窝毛片一区二区三区| 亚洲无线码一区二区三区| 亚洲欧美国产国产一区二区三区| 色系一区二区三区四区五区| 无码一区二区三区| 美女免费视频一区二区三区| 久久久无码精品国产一区| 午夜性色一区二区三区不卡视频| 中文字幕一区在线观看| 国产高清一区二区三区| 精品国产不卡一区二区三区| 欲色aV无码一区二区人妻| 精品国产免费一区二区三区| 国产成人综合一区精品| 国产在线无码一区二区三区视频| 国产精品乱码一区二区三| 白丝爆浆18禁一区二区三区| 亚洲Av无码国产一区二区 | 无码精品一区二区三区免费视频| 精品国产区一区二区三区在线观看| 国产成人一区在线不卡| 日韩中文字幕精品免费一区| 国精无码欧精品亚洲一区| 国产主播一区二区三区| 亚洲国产系列一区二区三区| 国产精品特级毛片一区二区三区| 精品视频一区二区三区在线播放|