HTML標題

HTML 文檔中，標題很重要。

HTML 標題

標題（Heading）是通過 <h1> - <h6> 等標簽進行定義的。

<h1> 定義最大的標題。<h6> 定義最小的標題。

實例

[demo]

<html>

<head>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

<p>請僅僅把標題標簽用于標題文本。不要僅僅為了產生粗體文本而使用它們。請使用其它標簽或 CSS 代替。</p>

</body>

</html>

[/demo]

注釋：瀏覽器會自動地在標題的前后添加空行。

注釋：默認情況下，HTML 會自動地在塊級元素前后添加一個額外的空行，比如段落、標題元素前后。

標題很重要

請確保將 HTML heading 標簽只用于標題。不要僅僅是為了產生粗體或大號的文本而使用標題。

搜索引擎使用標題為您的網頁的結構和內容編制索引。

因為用戶可以通過標題來快速瀏覽您的網頁，所以用標題來呈現文檔結構是很重要的。

應該將 h1 用作主標題（最重要的），其后是 h2（次重要的），再其次是 h3，以此類推。

HTML 水平線

<hr /> 標簽在 HTML 頁面中創建水平線。

hr 元素可用于分隔內容。

實例

[demo]

<html>

<head>

</head>

<body>

<p>hr 標簽定義水平線：</p>

<hr />

<hr />

<hr />

</body>

</html>

[/demo]

提示：使用水平線 (<hr> 標簽) 來分隔文章中的小節是一個辦法（但并不是唯一的辦法）。

HTML 注釋

可以將注釋插入 HTML 代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略注釋，也不會顯示它們。

注釋是這樣寫的：

實例

[demo]

<html>

<head>

</head>

<body>

<p>這是一段普通的段落。</p>

</body>

</html>

[/demo]

注釋：開始括號之后（左邊的括號）需要緊跟一個嘆號，結束括號之前（右邊的括號）不需要。

提示：合理地使用注釋可以對未來的代碼編輯工作產生幫助。

HTML 提示 - 如何查看源代碼

您一定曾經在看到某個網頁時驚嘆道 “WOW! 這是如何實現的？”

如果您想找到其中的奧秘，只需要單擊右鍵，然后選擇“查看源文件”（IE）或“查看頁面源代碼”（Firefox），其他瀏覽器的做法也是類似的。這么做會打開一個包含頁面 HTML 代碼的窗口。

來自本頁的實例

標題

如何在 HTML 文檔中顯示標題。

[demo]

<html>

<head>

</head>

<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

<p>請僅僅把標題標簽用于標題文本。不要僅僅為了產生粗體文本而使用它們。請使用其它標簽或 CSS 代替。</p>

</body>

</html>

[/demo]

隱藏的注釋

如何在 HTML 源代碼中插入注釋。

[demo]

<html>

<head>

</head>

<body>

<p>這是一段普通的段落。</p>

</body>

</html>

[/demo]

水平線

如何插入水平線。

[demo]

<html>

<head>

</head>

<body>

<p>hr 標簽定義水平線：</p>

<hr />

<hr />

<hr />

</body>

</html>

[/demo]

HTML 標簽描述

<html> 定義 HTML 文檔。

<body> 定義文檔的主體。

<h1> to <h6> 定義 HTML 標題

<hr> 定義水平線。

<!--> 定義注釋。

級標簽

一個頁面的布局就像一張報紙需要排版，需要分為多個區塊。塊內為多行逐一排列的文字、圖片、超鏈接等內容，這些區塊一般稱之為塊級標簽；而文字、圖片、超鏈接等稱之為行級標簽。

塊級標簽顯示的外觀按“塊”來顯示，具有一定的高度和寬度，如：<div>、<p>等；

行級標簽顯示的外觀按“行”來顯示，類似于文本的顯示，如：<img>、<a>等。

1.基本的塊級標簽

1.1.標題標簽<h1>~<h6>

標題標簽表示一段文字的標題（主題），并且支持多層次的內容結構，一級標簽使用<h1>，二級標簽使用<h2>，以此類推。html提供六級，<h1>最大，<h6>最小代碼及顯示效果如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>標題標簽對比</title>
	</head>	
	<body>
		<h1>一級標簽</h1>
		<h2>二級標簽</h2>
		<h3>三級標簽</h3>
		<h4>四級標簽</h4>
		<h5>五級標簽</h5>
		<h6>六級標簽</h6>
	</body>
</html>

標題標簽代碼預覽

1.2.段落標簽<p>

段落標簽是表示一段文字內容的，一個段落可以包含多行文字，文字內容將隨瀏覽器窗口的大小自動換行。

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>段落標簽</title>
	</head>	
	<body>
		<h1>標題</h1>
		<p>第一段文字</p>
		<p>第一段文字</p>
	</body>
</html>

段落標簽代碼預覽

1.3.水平線標簽<hr/>

水平線標簽顯示一條水平線，這個標簽比較特殊沒有結束標簽，直接是用來<hr/>表示標簽的開始和結束。

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>段落標簽</title>
	</head>	
	<body>
		<h1>標題</h1>
    <hr/>
		<p>第一段文字</p>
		<p>第一段文字</p>
	</body>
</html>

水平線標簽代碼預覽

2.常用于布局的塊級標簽

2.1.有序列表標簽<ol>

使用<ol>,</ol>(有序列表)，<li></li>(列表項)HTML代碼如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>有序列表</title>
	</head>	
	<body>
		<ol>
			<li>第一條數據</li>
			<li>第二條數據</li>
			<li>第三條數據</li>
		</ol>
	</body>
</html>

有序列表代碼預覽

2.2.無序列表標簽<ul>

使用<ul>,</ul>(無序列表)，<li></li>(列表項)HTML代碼如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>無序列表</title>
	</head>	
	<body>
		<ul>
			<li>第一條數據</li>
			<li>第二條數據</li>
			<li>第三條數據</li>
		</ul>
	</body>
</html>

無序列表代碼預覽

2.3.定義列標簽<dl>

使用<dl>（定義列表）<dt> （定義列表中的項目）和 <dd> （列表中項目的描述）HTML代碼如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>dl-dt-dd的使用</title>
	</head>	
	<body>
		<dl>
			<dt>項目名稱</dt>
			<dd>項目描述的第一行</dd>
			<dd>項目描述的第二行</dd>
		</dl>
	</body>
</html>

定義列標簽<dl>代碼預覽

2.4.表格標簽<teble>

使用<teble>，</teble>（表格），<tr>，</tr>（行），<td>，</td>（列）HTML代碼如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>table標簽的使用</title>
	</head>	
	<body>
		<table width="200" border="1">
			<tr>
				<td>姓名</td>
				<td>年齡</td>
			</tr>
			<tr>
				<td>張三</td>
				<td>20</td>
			</tr>
			<tr>
				<td>李四</td>
				<td>22</td>
			</tr>
		</table>
	</body>
</html>

表格標簽代碼預覽

2.5.表單標簽<form>

使用<form>,</form>（表單），<input/>（內容）HTML代碼如下：

<html>
	<head>
		<meta http-equiv="content-type" content="text/html" ;charset="gb2312">
		<title>form的使用</title>
	</head>
	<body>
		<form action="" method="post">
			<p>
				用戶名：
				<input name="username" type="text" size="20" />
			</p>
			<p>
				密   碼：
				<input name="password" type="password" size="20" />
			</p>
			<input name="submit" type="button" value="登錄" />
		</form>
	</body>
</html>

form標簽代碼預覽

2.6.分區標簽<diy>

<diy>標簽相當于一個大容器，可以容納無序、有序列表，表格等標簽，也可以容納圖片、文字、標題、段落等內容HTML代碼如下：

<html>
	<head>
		<meta http-equiv="content-type"content="text/html";charset="gb2312">
		<title>div的使用</title>
	</head>	
	<body>
		<div style="width: 500; height: 300; background-color: aquamarine;">
			<p>段落標簽</p>
			<h1>標題標簽</h1>
			<ul>
				<li>無序列表標簽第一行</li>
				<li>無序列表標簽第二行</li>
			</ul>
			文字可以直接輸入在這里
		</div>
	</body>
</html>

div標簽代碼預覽

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基礎（2）

您的項目需求

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

整合營銷服務商

HTML標題

級標簽

ntroduction

Syntax

Tools

HTML Tags

文件標簽

排版標簽

HTML 注釋

<br/> 標簽

<p> 標簽

<hr> 標簽

關于 HTML 中標簽屬性

<div> 標簽

<span> 標簽

字體標簽

<font> 標簽

標題標記

清單標記（列表標記）

圖形標簽

超連接標簽

表格標簽

表單標簽

框架標簽

其它標簽與特殊字符

<meta> 標簽

<link>標簽

特殊字符

?HTML DOM

Introduction

DOM Node

DOM 方法 & 屬性

DOM 事件

您的項目需求