快來投稿啦！2022年“將《紅色傳奇》進行到底”征文書畫誦讀評比活動開始啦！

貫徹落實《中共廣西壯族自治區委員會組織部關于繼續抓好2022年“將〈紅色傳奇〉進行到底”系列活動的通知》的精神，決定在全市單位、社區、農村、校園開展“將《紅色傳奇》進行到底”征文、書法、繪畫、誦讀評比活動。

一、參賽作品類別及相關要求

（一）征文作品

1．內容要求

（1）著重圍繞《紅色傳奇》紀錄片和《紅色傳奇》《傳承紅色基因爭做時代新人》等系列讀本的相關人物、事件、精神，結合清廉柳州建設等內容進行創作；

（2）文章體裁不限，要求主題鮮明、內容充實、中心突出，符合社會主義核心價值觀；

（3）每位參賽者最多可提交1篇作品；

（4）必須由本人獨立撰寫，不能抄襲他人作品；

（5）小學組、中學組參賽作品需由指導老師在活動主題網站報名頁面的“推薦意見”欄內寫上100—200字的評語和推薦意見。

2．格式要求

（1）字數要求

小學組（1—6年級）：不超過800字；

中學組（7—12年級）：800—1500字；

成人組：1500—2500字。

（2）提交作品為Word文檔，保存格式支持DOC、DOCX，大小不超過1MB；

（3）Word文件命名方式：姓名+標題；

（4）Word文件格式要求：A4紙型，標題采用二號小標宋體，正文采用三號仿宋體，字間距標準，行間距固定值29.5磅。

（二）書法作品

1．內容要求

（2）作品分為軟筆書法、硬筆書法；

（3）每位參賽者最多可提交1件作品；

（4）作品必須由創作者獨立完成，不得代筆、挪用他人作品。

2．格式要求

（1）軟筆書法作品最大尺寸不超過四尺豎幅（68cm寬×136cm高），最小尺寸不小于四尺三開（45cm×68cm）；

（2）硬筆書法作品最小不小于16開（21cm×28cm）；

（3）提交的電子版作品圖片務必是清晰、無局部模糊、無遮擋、無暗角、無變形的JPG格式文件，大小在1M—5M；（如圖片出現以上問題評審組不予評審）

（4）JPG文件命名方式：姓名+標題；

（5）獲獎作品后期需提供可以達到出版要求的電子文件。（可掃描或用專業相機翻拍，文件大小需達到3M以上，分辨率需達到300DPI。）

（三）繪畫作品

1．內容要求

（2）作品形式不限，要求作品主題明確、立意鮮明、導向正確。作品中不得出現任何形式的地圖；作品中凡出現或涉及國旗、黨旗、國徽、黨徽、軍旗等徽標圖案時務必做到描繪準確，不能歪曲、模糊、污染；作品如描繪的是歷史事件，所描繪的場景和人物服飾等需遵照歷史原貌，不得臆造和歪曲歷史；

（3）每位參賽者最多可提交1幅作品；

（4）作品必須由創作者獨立完成，不得代筆、挪用他人作品。

2．格式要求

（1）非國畫作品統一使用4開紙（44cm×59cm），國畫作品統一使用四尺三開宣紙（68cm×45cm）；

（2）作品最大尺寸不超過80cm寬×150cm高，最小尺寸不小于4開（44cm×59cm）；

（3）報名提交的電子版作品圖片務必是清晰、無局部模糊、無遮擋、無暗角、無變形的JPG格式文件，大小在1M—5M；（如圖片出現以上問題評審組不予評審）

（4）JPG文件命名方式：姓名+標題；

（5）獲獎作品后期需提供可以達到出版要求的電子文件。（可掃描或用專業相機翻拍，文件大小需達到3M以上，分辨率需達到300DPI。）

（四）誦讀作品

1．內容要求

（1）參賽者從《紅色經典誦讀書目》（可在活動官方網站下載）中任選一篇作為誦讀的內容，并將誦讀作品錄制成音頻上傳至活動官方網站；

（2）每位參賽者最多可提交1個作品；

（3）作品必須由創作者獨立完成，不得代讀、挪用他人作品。

紅色經典誦讀書目網址：http://gx.people.com.cn/GB/349603/396553/index.html。

（或長按識別下方二維碼）

2．格式要求

（1）音頻為MP3格式，大小不超過20M，無需壓縮和打包音頻文件；

（2）MP3文件命名方式：姓名+標題。

二、投送方式

1．投稿時間：即日起至2022年10月31日。

2．投送方式：參賽者通過登錄活動主題網站進行報名投稿，投稿網站地址：http://gx.people.com.cn/GB/349603/396553/index.html。

（或長按識別下方二維碼）

3．在報名截止時間前，如需修改已提交的作品，可在活動官方網站撤回重新上傳。

三、評比辦法

本次評選活動采用初賽（縣級）、復賽（市級）、決賽（自治區級）的三級賽制，由各級活動組委會組織行業專家（作家、書法家、畫家、出版人、專業教師等）組成評審組，按照評審規則，逐級對本級評比的作品進行分組線上評審。

四、獎項設置

（一）征文類

1．小學組、中學組、成人組分別設特等獎1名，一等獎10名，二等獎20名，三等獎30名，優秀獎若干名。

2．小學組、中學組各設優秀指導老師獎11名。

（二）書法類

1．小學組、中學組、成人組分別設特等獎1名，一等獎10名，二等獎20名，三等獎30名，優秀獎若干名。

2．小學組、中學組各設優秀指導老師獎11名。

（三）繪畫類

1．小學組、中學組、成人組分別設特等獎1名，一等獎10名，二等獎20名，三等獎30名，優秀獎若干名。

2．小學組、中學組各設優秀指導老師獎11名。

（四）誦讀類

1．小學組、中學組、成人組分別設特等獎1名，一等獎10名，二等獎20名，三等獎30名，優秀獎若干名。

2．小學組、中學組各設優秀指導老師獎11名。

（五）優秀組織獎

設優秀組織獎若干名。

五、獎勵辦法

（一）由自治區“將《紅色傳奇》進行到底”系列活動組委會頒發榮譽證書。

（二）獲獎作品由廣西人民出版社結集出版（無稿酬）。

（三）書畫作品特等獎和一等獎獲獎作品將被組委會永久收藏并頒發收藏證書。

主辦單位對參加活動的作品有展覽、研究、攝影、錄像、出版及宣傳權。

七、其他事項

各地要根據新冠肺炎疫情常態化防控工作要求，遵守屬地管理原則，科學制定活動疫情防控工作方案及應急處置預案，安全有序推進活動的組織籌備。

圖文來源丨柳州市委組織部

值班編輯丨黃杏俏

責任編輯丨梁立明

責任監制丨梁洲

出品單位丨融水苗族自治縣融媒體中心

回說到html的基本格式和a標簽的用法。

接下來說一說段落標簽——p標簽，不管是一封信還是一篇文章，合理的分段能夠讓整篇文字的結構更加清晰。

整篇文章以標題起始。

在html中標題標簽有h1、h2、h3、h4、h5、h6。

上回我們創建了一個index.html文件，里面寫了：

現在把body中的代碼換成：

雙擊index.html文件，便會在瀏覽器中看到如下效果：

h2標簽中的文字相較h1標簽中的文字顯示效果要小一些，h3比h2又小一些，h6最小。具體效果你可以自己敲代碼試一試。

標題之后便是第一個自然段。html中段落標簽為p，代碼如下：

瀏覽器中的效果如下：

標題標簽和段落標簽都會獨占一行，獨占一行的意思就是，第一行我只寫了一個字，那么之后的字就不能和我在一行了，因為我獨占了。比如，下面圖中這樣，我在h3標簽中只寫了一個“我”字，h3標簽之后寫了一個“你”字：

瀏覽器中的效果：

如果，我們不用h3標簽，就像下面這樣：

瀏覽器中的效果：

現在我們是不是可以理解標題標簽（h1~h6）和段落標簽（p）獨占一行的意思了。

獨占一行的標簽還有div、blockquote。

下面是div、blockquote標簽的代碼：

瀏覽器中的效果：

你一定注意到代碼中我寫的話了吧，p標簽有內邊距，div沒有，blockquote不光有內邊距還有縮進，那么內邊距是個什么東東呢？縮進又是什么東東呢？聽我給你慢慢道來。

我們在紙上畫邊框為紅色的一個長方形或者正方形，長方形或者正方形里面放一個藍色的紙片。如下圖：

理解了內邊距之后，那么再來說說縮進，縮進就好像是在前面加了幾個空白一樣。如果你要手動縮進那你就敲幾個空格上去，如果用blockquote標簽的話，這個標簽自動給你加上了縮進。

那么p標簽和blockquote標簽的內邊距怎么才能看得見呢？

其實瀏覽器有一個查看內邊距的功能，這個功能叫做開發者工具。

看圖：

你也可以按f12鍵，調出這個開發者工具。所有瀏覽器都有這個開發者工具，一般的快捷鍵都是f12。

我們來查看一下p標簽的內邊距：

p標簽的上、下、左、右邊框和它里面的文字之間是有距離的，也就是圖中土黃色的部分。

但是如果你用開發者工具，查看div標簽的話，并沒有內邊距。

查看blockquote標簽的話也是有內邊距的。

我們為什么要了解這些東西呢？這些東西是很重要的基礎，不管學什么東西，老師總會強調你基礎很重要。但是你卻感覺這些東西好像并沒有什么用，那是因為前期學的東西還沒有構成一個體系，如果現在讓你做一個淘寶首頁出來，你肯定不會，因為你只學了一丟丟，還沒有能力去做淘寶的首頁。等你學完了，有能力做淘寶首頁的時候，你會發現不了解這些基礎的后果就是從頭再學一遍，徒增學習成本。何不現在就把基礎打扎實呢？

動手做，動手敲，敲完了在瀏覽器測試效果。不敲光看，你是永遠學不會的。

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

在線咨詢

上一篇：國內的瀏覽器和國外瀏覽器相比都有哪些優勢
下一篇：Bootstrap Table 插入選擇框

您的項目需求

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

整合營銷服務商

快來投稿啦！2022年“將《紅色傳奇》進行到底”征文書畫誦讀評比活動開始啦！

ntroduction

Syntax

Tools

HTML Tags

文件標簽

排版標簽

HTML 注釋

<br/> 標簽

<p> 標簽

<hr> 標簽

關于 HTML 中標簽屬性

<div> 標簽

<span> 標簽

字體標簽

<font> 標簽

標題標記

清單標記（列表標記）

圖形標簽

超連接標簽

表格標簽

表單標簽

框架標簽

其它標簽與特殊字符

<meta> 標簽

<link>標簽

特殊字符

?HTML DOM

Introduction

DOM Node

DOM 方法 & 屬性

DOM 事件

您的項目需求