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

TML元素的屬性

屬性是為HTML元素提供的附加信息。

為相同的HTML元素指定不同的屬性，會呈現不同的功能或效果。

舉個例子：

比如我們在上一篇中練習過的<a></a>標簽構成的超鏈接元素中有一個href屬性，這個屬性指定的是點擊后跳轉的頁面地址，相同的<a>標簽改變href屬性就能跳轉不同的頁面。例如

<a href="https://www.bilibili.com/read/cv2720755">殲-20戰斗機</a>
<a href="http://mil.chinanews.com/mil/hd2011/2014/03-06/315569.shtml">殲-20戰斗機</a><!-- 注釋 看起來一樣的超鏈接元素因為href屬性不同，打開的頁面也不同。-->

小伙伴們自己寫的時候要注意使用半角符號，不然不能正確打開鏈接。

超鏈接元素中還有一個控制鏈接頁面打開的屬性叫做target，是用來控制新打開頁面窗口的位置。下面我們就看看target屬性為_blank和_parent的情況下的不同。例如

<a href="https://www.bilibili.com/read/cv2720755" target="_blank">殲-20戰斗機</a>
<a href="http://mil.chinanews.com/mil/hd2011/2014/03-06/315569.shtml" target="_parent">殲-20戰斗機</a><!-- 注釋 看起來一樣的超鏈接元素因為target屬性不同，打開的頁面所在窗口不同。-->

測試后，target="_blank"時，新頁面在測試頁面窗口旁邊新建一個窗口打開。

target="_parent"時，新頁面在原有測試頁面窗口中打開。

如圖所示：

左邊為_blank,右邊為_parent,點擊左邊鏈接后，新窗口在原有窗口旁邊打開。如下圖：

點擊右側

新頁面在原窗口處打開。

<a>標簽的target屬性還有_self、_top這樣的屬性，感興趣的小伙伴可以自行測試。

一般HTML元素的通用屬性有：class 、id 、style 、title這四類，其中class 、id 、style這三個屬性會在CSS的講解中詳細學習。

下面我們通過練習來看看title屬性的作用。

HTML元素屬性使用練習1

NO.1: title

title屬性用于顯示元素的額外信息使用。示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網頁</title>
</head> 
<body>
  <h1>第一個網頁</h1><hr>
<a href="https://www.bilibili.com/read/cv2720755" target="_blank" title="中國最先進戰斗機">殲-20戰斗機</a>
</body> 
</html>

效果如圖：當鼠標移動到超鏈接上時，"中國最先進戰斗機"的說明就出現在下側。

NO.2:href/src/url

這三個屬性雖然寫法不同，但都是為元素指定路徑使用的。不屬于通用屬性。

例如<a>標簽中指定鏈接路徑使用的是href，而<img>標簽中導入圖片的路徑是src，url在css中也常用來引入鏈接。具體練習大家可以翻看《HTML中的元素使用方法2——零基礎自學網頁制作》一文。

這里要介紹的是關于網頁中的路徑的兩個重要概念：絕對路徑、相對路徑。

絕對路徑是指文件在硬盤上真正存在的路徑。

相對路徑就是相對自己的目標文件的位置。

怎么理解這兩個概念呢？舉個例子：

如果我們要在"第一個頁面.html"中顯示一張圖片image1.jpg，它們都在我的"D盤/零基礎自學網頁制作"這個文件夾中。如圖：

如果用絕對路徑導入寫法是這樣的：

<img src="file:///D:/零基礎自學網頁制作/image1.jpg"/>

相對路徑這樣寫：

<img src="image1.jpg"/>

大家觀察一下，也看出了絕對路徑與相對路徑的區別了。

另外，這樣的鏈接也屬于絕對路徑：href="https://www.bilibili.com/read/cv2720755"

那么什么時候使用相對路徑什么時候使用絕對路徑呢？這個問題我會在明天深入為大家講解，這涉及到網頁或網站上傳服務器的問題。

做教程確實是沒什么人看，但是我依然會堅持，我是一名高校教師（認證資料等疫情結束后去辦公室拍攝上傳吧），把自己的知識寫出來對自己來說是一個提高，也把原來很多常用卻不甚了然的概念再次打磨清晰是我最大的收獲。本篇教程針對完全沒有基礎的網頁制作學習者，利用碎片時間學習，只要我們堅持，必然可以完成網頁制作的學習，為未來學習更加復雜的內容打下基礎！

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

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中的<div>塊元素——零基礎自學網頁制作

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

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

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

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

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

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

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

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

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

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

HTML的世界里，一切都是由容器和內容構成的。容器，就如同一個個盒子，用來裝載各種元素；而內容，則是這些盒子里的珍寶。理解了這一點，我們就邁出了探索HTML布局的第一步。

在HTML中，布局標簽主要用于控制頁面的結構和樣式。本文將介紹一些常用的布局標簽及其使用方法，并通過代碼示例進行演示。

一、理解布局的重要性

布局在我們前端開發中擔任什么樣的角色呢？想象一下，你面前有一堆散亂的積木，無序地堆放在那里。

而你的任務，就是將這些積木按照圖紙拼裝成一個精美的模型。HTML布局標簽的作用就像那張圖紙，它指導瀏覽器如何正確、有序地顯示內容和元素，確保網頁的結構和外觀既美觀又實用。

下面我們就來看看在HTML中常用的基礎布局標簽有哪些，如何使用這些布局標簽完成我們的開發目標。

二、常用的布局標簽

1、div標簽

div標簽是一個塊級元素，它獨占一行，用于對頁面進行區域劃分。它可以包含其他HTML元素，如文本、圖片、鏈接等。通過CSS樣式可以設置div的布局和樣式。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>
</head>
<body>

<div>這是一個div元素

</div>

</body>
</html>

運行結果：

2、span標簽

span標簽是一個內聯元素，它不獨占一行，用于對文本進行區域劃分。它主要用于對文本進行樣式設置，如字體、顏色等。與div類似，span也可以包含其他HTML元素。
示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  .text {
    color: blue;
    font-size: 20px;
  }
</style>
</head>
<body>

<p>這是一個<span>span元素</span>。</p>

</body>
</html>

運行結果：

3、table標簽

table標簽用于創建表格，它包含多個tr（行）元素，每個tr元素包含多個td（單元格）或th（表頭單元格）元素。

<table> 定義一個表格，<tr> 定義表格中的行，而 <td> 則定義單元格。通過這三個標簽，我們可以創建出整齊劃一的數據表，讓信息的展示更加直觀明了。

需要注意的是：

<table>和</table>標記著表格的開始和結束。
<tr>和</tr>標記著行的開始和結束，幾組表示該表格有幾行。
<td>和</td>標記著單元格的開始和結束，表示這一行中有幾列。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  table, th, td {
    border: 1px solid black;
  }
</style>
</head>
<body>
<table>
  <tr>
    <th>姓名</th>
    <th>年齡</th>
  </tr>
  <tr>
    <td>張三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>
</body>
</html>

運行結果：

4、form標簽

<form>標簽的主要作用是定義一個用于用戶輸入的HTML表單。這個表單可以包含各種輸入元素，如文本字段、復選框、單選按鈕、提交按鈕等。

<form>元素可以包含以下一個或多個表單元素：<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>和<output>等。

示例代碼：

<!DOCTYPE html>
<html>
<head>
<style>
  form {
    display: flex;
    flex-direction: column;
  }
</style>
</head>
<body>

<form>
  <label for="username">用戶名：</label>
  <input type="text" id="username" name="username">
  <br>
  <label for="password">密碼：</label>
  <input type="password" id="password" name="password">
  <br>
  <input type="submit" value="提交">
</form>

</body>
</html>

運行結果：

5、列表標簽

1）無序列表

指沒有順序的列表項目
始于<ul>標簽，每個列表項始于<li>
type屬性有三個選項：disc實心圓、circle空心圓、square小方塊。默認屬性是disc實心圓。

示例代碼：

<!DOCTYPE html>
<htmml>
<head>
<meta charst = "UTF-8">
<title>html--無序列表</title>
</head>
<body>
<ul>
<li>默認的無序列表</li>
<li>默認的無序列表</li>
<li>默認的無序列表</li>
</ul>
<ul>
<li type = "circle">添加circle屬性</li>
<li type = "circle">添加circle屬性</li>
<li type = "circle">添加circle屬性</li>
</ul>
<ul>
<li type = "square">添加square屬性</li>
<li type = "square">添加square屬性</li>
<li type = "squaare">添加square屬性</li>
</ul>
</body>
</html>

運行結果：

也可以使用CSS list-style-type屬性定義html無序列表樣式。

想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！「鏈接」

2）有序列表

指按照字母或數字等順序排列的列表項目。
其結果是帶有前后順序之分的編號,如果插入和刪除一個列表項，編號會自動調整。
始于<ol>標簽，每個列表項始于<li>。

示例代碼：

<ol>
<li>默認的有序列表</li>
<li>默認的有序列表</li>
<li>默認的有序列表</li>
</ol>
<ol type = "a" start = "2">
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
<li value ="20">第四項</li>
</ol>
<ol type = "Ⅰ" start = "2">
<li>第1項</li>
<li>第2項</li>
<li>第3項</li>
</ol>

運行結果：

同樣也可以使用CSS list-style-type屬性定義html有序列表樣式。

3）自定義列表

自定義列表不僅僅是一列項目，而是項目及其注釋的組合。
以<dl>標簽開始。每個自定義列表項以<dt>開始。每個自定義列表項的定義以<dd>開始。
用于對術語或名詞進行解釋和描述，自定義列表的列表項前沒有任何項目符號。
基本語法：

<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>

<dt>名詞2</dt>
<dd>名詞2解釋1</dd>
<dd>名詞2解釋2</dd>
</dl>

<dl>即“definition list（定義列表）”，
<dt>即“definition term（定義名詞）”，
而<dd>即“definition description（定義描述）”。

示例代碼：

<dl>
<dt>計算機</dt>
<dd>用來計算的儀器</dd>

<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置</dd>
</dl>

運行結果：

以上就是HTML中常用的布局標簽及其使用方法。在實際開發中，還可以結合CSS和JavaScript來實現更復雜的布局和交互效果。

掌握了這些HTML常用布局標簽，你已經擁有了構建網頁的基礎工具。記住，好的布局不僅需要技術，更需要創意和對細節的關注。現在，打開你的代碼編輯器，開始你的布局設計之旅吧！

ntroduction

HTML 是一種描述網頁語言，指的是超文本標記語言 (Hyper Text Markup Language)。其中，超文本指的是網頁上可以包含圖片，視頻，連接信息。標記也叫做標簽，所以標簽書寫的是<內容>。語言就是一種交流工具，HTML 是用戶與瀏覽器之間交互工具。

簡單說，HTML 是由瀏覽器解析執行的，它不會將 HTML 標簽展示出來，而是會解析 HTML 標簽，以特定效果展示出來。

Syntax

HTML 可以直接使用文本編輯器來編寫
HTML 文件它的后綴名是 .htm 或 .html
<html> 標簽它代表當前頁面是一個 HTML
<head> 標簽中可以聲明 HTML 頁面的相關信息
<body> 標簽中它主要是用于顯示頁面信息
標簽要有開始，有結束。開始標簽與結束標簽中的內容是標簽的內容，如果沒有標簽內容，可以讓標簽自關閉 <br/>。
大多數標簽它具有屬性，屬性值要使用引號引起來。
HTML 本身是不區分大小寫的。

<html>
    <head>HEAD</head>
    <body>BODY</body>
</html>

Tools

可以使用 JetBrains WebStorm 或者 VS Code 進行開發。

HTML Tags

文件標簽

<html> 代表當前書寫的是一個 HTML 文檔

<head> 存儲的本頁面的一些重要的信息，它不會顯示

標簽下有一個子標簽 <title> 它是用于定義頁面的標題的

<body> 書寫的內容會顯示出來，屬性：1. text 用于設置文字顏色；2. bgcolor 用于設置頁面的背景色；3. background 用于設置頁面的背景圖片

排版標簽

HTML 注釋

<br/> 標簽

br 標簽就是一個換行功能標簽

<p> 標簽

在 p 標簽中的內容會在開始與結束之間產生一個空白行并且它會自動換行

常用屬性 align 的作用是設置段落中的內容對齊方式，可取值有 left right center

<hr> 標簽

hr 標簽會在頁面上產生一個水平線

常用屬性：

align：可取值有 left right center 代表水平線位置

size：代表水平線高度（厚度）

width：代表水平線寬度

color：水平線的顏色

關于 HTML 中標簽屬性

兩種方式:

直接設置值，默認單位是 px （像素） <HR WIDTH="200">
可以設置百分比 <HR WIDTH="35%">

<div> 標簽

Div 是一個塊標簽

Div 與 CSS 結合，會更好對頁面進行排版

<span> 標簽

Span 標簽也是一個塊標簽Div 與 span 區別：Div 會自動換行，我們也叫這樣的標簽為行級元素Span 標簽它不會自動換行，我們也叫它為行內元素

字體標簽

<font> 標簽

Font 標簽可以設置字體，字的大小及顏色

常用屬性：

Face：用于設置字體，例如宋體隸書楷體

Size：用于設置字的大小

Color：用于設置字的顏色

我們所看到的屏幕上所有的顏色都是由紅、綠、藍這三種基色調混合而成的。每一種顏色的飽和度和透明度都是可以變化的，用 0～255 的數值來表示。如純紅色表示為 (255，0，0)，十六進制表示為 #FF0000。按這種表達方式，理論上我們可以得到 256 * 256 *256=16777216 種顏色。

使用十六進制方式，取值范圍 #000000 ~ #FFFFFF （黑色到白色）。當顏色值為 #cc3300 時，也可以使用 #c30 這種簡化的方式來表示。
RGB 顏色表示法：RGB(x,y,z)，x、y、z 是 0 ～ 255 之間的整數。
在線顏色選擇器：http://www.86y.org/code/colorpicker/color.html

標題標記

<h1> 最大 <h6> 最小，它們代表的是標題，可以使用 <b> <i> 對文字設置加粗或傾斜

注意：在 HTML 中允許標簽進行嵌套的，但是一般都包裹嵌套，而不可以進行交叉嵌套

清單標記（列表標記）

有序清單：

<!-- 有序列表 I II III-->
<ol type="I" start="3">
    <li>張三</li>
    <li>李四</li>
    <li>王五</li>
</ol>
<!-- 無序列表 -->
<ul type="square">
    <li>Java</li>
    <li>Python</li>
    <li>C#</li>
</ul>

圖形標簽

<img> 可以讓我們在網頁引入一張圖片

常用屬性

src 代表的圖片的路徑
width 圖片的寬度
height 圖片的高度
border 用于設置圖片的邊框
alt 如果圖片不可以顯示時，默認顯示的文本信息
align 圖片附件文字的對齊方式，取值有：left right middle top bottom

超連接標簽

<a> 標簽可以實現跳轉到其它頁面操作。超鏈接內容不僅可以是文本，也可以是圖片等信息

常用屬性

href 代表的要跳轉的路徑
name 屬性可以在本頁面設置一個錨點
target 這個屬性規定在何處打開這個鏈接文檔，可取值：_blank _self _parent _top framename

表格標簽

<!-- 學習表格標簽 -->
<table border="2" align="center" width="400px">
    <caption>學生成績單</caption>
    <tr>
        <th>姓名</th>
        <th>語文成績</th>
        <th>數學成績</th>
        <td colspan="2" align="center"><b>操作</b></td>
    </tr>
    <tr align="center">
        <td>張三</td>
        <td>99</td>
        <td>100</td>
        <td>修改</td>
        <td>刪除</td>
    </tr>
    <tr align="center">
        <td>李四</td>
        <td>90</td>
        <td>66</td>
        <td>修改</td>
        <td>刪除</td>
    </tr>
</table>

表單標簽

通過表單可以將要提交的數據提交到指定的位置

<!-- 表單：用戶注冊案例 -->
<form name="form1" action="user/login" method="POST">
    <table border="1" width="64%" align="center">
        <tr>
            <td>用戶名：</td>
            <td>
                <input type="text" name="username">
            </td>
        </tr>
        <tr>
            <td>密碼：</td>
            <td>
                <input type="password" name="password">
            </td>
        </tr>
        <tr>
            <td>性別：</td>
            <td>
                <input type="radio" name="sex" checked="checked">男
                <input type="radio" name="sex" >女
            </td>
        </tr>
        <tr>
            <td>地址：</td>
            <td>
                <select name="province">
                    <option value="0">--請選擇省--</option>
                    <option value="10001">廣東</option>
                    <option value="10002">上海</option>
                    <option value="10003">山東</option>
                </select> 省
                <select name="city">
                    <option>--請選擇市--</option>
                    <option value="1000301">廣州市</option>
                    <option>深圳市</option>
                    <option>東莞市</option>
                </select> 市
            </td>
        </tr>
        <tr>
            <td>編程語言：</td>
            <td>
                <input type="checkbox" name="language" checked="checked">Java
                <input type="checkbox" name="language">Python
                <input type="checkbox" name="language">Go
            </td>
        </tr>
        <tr>
            <td>照片：</td>
            <td>
                <input type="file" name="image">
            </td>
        </tr>
        <tr>
            <td>自我介紹：</td>
            <td>
                <textarea name="remark" rows="5" cols="100"></textarea>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="submit" value="注冊"> 
                <input type="reset" value="取消"> 
            </td>
        </tr>
    </table>
</form>

框架標簽

通過框架標簽可以定制 HTML 頁面布局

在 HTML 頁面上去描述框架信息時，不可以將 <frameset> 寫在 <body> 標簽中

framesetTest.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>HTML 框架標簽</title>
    </head>
    <!-- rows 定義了三行：第一行 100 像素，第三行：100 像素；第二行：剩下的像素 -->
    <frameset rows="100, * , 100"> 
        <frame name="topModule" src="./top.html"></frame>
        <frameset cols="100, * ">
            <frame name="menuModule" src="./menu.html"></frame>
            <frame name="contentModule" src="./content.html"></frame>
        </frameset>
        <frame name="footModule" src="./foot.html"></frame>
    </frameset>
</html>

top.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>top</title>
    </head>
    <body>
        <div>頭部信息</div>
    </body>
</html>

foot.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>footL</title>
    </head>
    <body>
        <div>底部信息</div>
    </body>
</html>

menu.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>menu</title>
    </head>
    <body>
        <div>菜單信息</div>
    </body>
</html>

content.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>content</title>
    </head>
    <body>
        <div>內容顯示區</div>
    </body>
</html>

其它標簽與特殊字符

<meta> 標簽

它可以對頁面進行描述及熱詞設置，可以方便搜索引擎查找頁面
通過 meta 標簽設置 http 響應信息
通過 meta 標簽可以設置頁面的編碼，<meta http-equiv="Content-Type" content="text/html; charset=gbk">
通過 meta 標簽來設置頁面加載后在指定的時間后跳轉到指定的頁面，<meta http-equiv="refresh" content="5; url=http://www.baidu.com">

<link>標簽

使用 link 標簽來導入 CSS

特殊字符

詳情查看菜鳥教程：https://www.runoob.com/charsets/ref-html-ascii.html

?HTML DOM

Introduction

DOM, Document Object Model -- 文檔對象模型，是 HTML 和 XML 文檔的編程接口，以樹結構表達 HTML 文檔。

DOM 是 W3C（萬維網聯盟）的標準。

DOM 定義了訪問 HTML 和 XML 文檔的標準。

W3C DOM 標準被分為 3 個不同的部分：

核心 DOM - 針對任何結構化文檔的標準模型
XML DOM - 針對 XML 文檔的標準模型
HTML DOM - 針對 HTML 文檔的標準模型

DOM Node

DOM 是被視為節點樹的 HTML。

根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節點：

整個文檔是一個文檔節點
每個 HTML 元素是元素節點
HTML 元素內的文本是文本節點
每個 HTML 屬性是屬性節點
注釋是注釋節點

HTML DOM 將 HTML 文檔視作樹結構，這種結構被稱為節點樹。

節點樹中的節點彼此擁有層級關系。常用父（parent）、子（child）和同胞（sibling）等術語來描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。

在節點樹中，頂端節點被稱為根（root）。
每個節點都有父節點、除了根（它沒有父節點）。
一個節點可擁有任意數量的子節點。
同胞是擁有相同父節點的節點。

DOM 方法 & 屬性

HTML DOM 方法是可以在節點（HTML 元素）上執行的動作。

HTML DOM 屬性是可以在節點（HTML 元素）設置和修改的值。

可通過 JavaScript （以及其他編程語言）對 HTML DOM 進行訪問。所有 HTML 元素被定義為對象，而編程接口則是對象方法和對象屬性。方法是能夠執行的動作（比如添加或修改元素）。屬性是能夠獲取或設置的值（比如節點的名稱或內容）。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>DOM</title>
    </head>
    <body>
        <div id="div1">
            <p id="p1">Hello</p>
            <p id="p2">Hello</p>
        </div>
        <script>
            // 先獲取 P 元素
            var element = document.getElementById("p1")
            // 直接修改 p 元素的內容
            element.innerHTML = "此時已是修改后的內容"

            // 修改 p2 標簽的樣式
            var ele = document.getElementById("p2")
            ele.style.color="blue"
            ele.style.fontFamily="宋體"
            ele.style.fontSize="larger"

            // 添加元素
            // 創建一個p元素
            var elementP = document.createElement("p")
            // 創建一個內容
            var nodeText = document.createTextNode("新加的 P 元素")
            // 把文字內容添加到p元素中
            elementP.appendChild(nodeText)
            // 把新創建的p元素添加div1元素中
            var div1 = document.getElementById("div1")
            div1.appendChild(elementP)

            // 插入添加新的元素
            // 創建一個新的元素
            var eleP = document.createElement("p")
            // 創建一個內容
            var noText = document.createTextNode("在 P1 元素前添加的新元素")
            // 把文字內容添加到 p 元素中
            eleP.appendChild(noText)
            // 把新創建的 p 元素添加 div 1 元素中
            var parentDiv1 = document.getElementById("div1")
            // 獲取指定被添加的元素
            var p1 = document.getElementById("p1")
            // 在元素前添加；參數說明：1.要添加的元素；2.在那個元素之前添加（指定一個元素）
            parentDiv1.insertBefore(eleP, p1)

            // 刪除元素
            // 獲取父元素
            var pdiv1 = document.getElementById("div1")
            var removep1 = document.getElementById("p1")
            // 使用父元素刪除該元素
            pdiv1.removeChild(removep1)
        </script>
    </body>
</html>

DOM 事件

HTML DOM 允許 JavaScript 對 HTML 事件作出反應。當事件發生時，可以執行 JavaScript，比如發生用戶點擊一個 HTML 元素的事件。

如需在用戶點擊某個元素時執行代碼，可以把 JavaScript 代碼添加到 HTML 事件屬性中：onclick=JavaScript

HTML 事件的例子：

當用戶點擊鼠標時
當網頁已加載時
當圖片已加載時
當鼠標移動到元素上時
當輸入字段被改變時
當 HTML 表單被提交時
當用戶觸發按鍵時

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>DOM 事件</title>
        <!-- JavaScript 代碼必須寫在 script 中 -->
        <script>
            function onLoadFun(){
                alert("已載入...");
            }
            // 文本框失去焦點事件
            function onBlurFun(){
                alert("此方法是文本框失去焦點事件，用來校驗此文本框輸入數據的")
            }
            // 表單被提交時執行事件
            function onSubmitFun(){
                alert("此表單已提交，這個方法也可以來作為數據校驗的");
            }
            // 元素被改變時觸發事件
            function onChangeFun(){
                alert("文本框元素已輸入新的數據")
            }
            // 當鼠標懸停在某一個元素上時執行的方法
            function onMouseOverFun(element){
                element.innerHTML = "鼠標已停在H1元素上了"
            }
            // 當鼠標離開某一個元素時執行事件
            function onMouseOutFun(element){
                element.innerHTML = "鼠標已離開H1元素上了..."
            }
        </script>
    </head>
    <!-- 需求：當頁面被載入時，執行一個代碼，彈框提示已載入 -->
    <body onload="onLoadFun()">
        <!-- 需求：在一個表單中有用戶名錄入的文本框，當輸入完文本框的時候進行名稱校驗，提交的時候彈框顯示 -->
        <form onsubmit="onSubmitFun()">
            用戶名：<input id="username" name="username" onchange="onChangeFun()" >
            <br/>
            <button type="submit">提交</button>
        </form>
        <!-- 需求：有一個 H1 標簽元素，當鼠標移動到 H1 元素上時，修改文字，當鼠標移出元素時執行事件 -->
        <h1 onmouseover="onMouseOverFun(this)" onmouseout="onMouseOutFun(this)">我是一個標題</h1>
    </body>
</html>

想了解更多，歡迎關注我的微信公眾號：Renda_Zhang

在線咨詢

上一篇：超長的文字在網頁怎么處理？不用刪文字，溢出處理
下一篇：HTML DOM-事件

您的項目需求

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

整合營銷服務商

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

TML元素的屬性

HTML完整學習目錄

一、理解布局的重要性

二、常用的布局標簽

1、div標簽

2、span標簽

3、table標簽

4、form標簽

5、列表標簽

1）無序列表

2）有序列表

3）自定義列表

ntroduction

Syntax

Tools

HTML Tags

文件標簽

排版標簽

HTML 注釋

<br/> 標簽

<p> 標簽

<hr> 標簽

關于 HTML 中標簽屬性

<div> 標簽

<span> 標簽

字體標簽

<font> 標簽

標題標記

清單標記（列表標記）

圖形標簽

超連接標簽

表格標簽

表單標簽

框架標簽

其它標簽與特殊字符

<meta> 標簽

<link>標簽

特殊字符

?HTML DOM

Introduction

DOM Node

DOM 方法 & 屬性

DOM 事件

您的項目需求