HTML網頁編程之按鈕詳解

文介紹了網頁編程中的按鈕使用方法。按鈕是網頁中最常用的控件之一，點擊后會觸發某些程序。即使沒有學習過編程，大家也應該知道按鈕的概念。按鈕的最大功能是點擊后觸發程序。這篇文章主要介紹了如何在網頁中插入按鈕，并講解了按鈕的屬性和使用方法。

先來看看今天的實例效果。頁面被分為三部分：按鈕、按鈕和按鈕的共有屬性。

首先是普通按鈕，點擊后文本框的內容發生了變化，但頁面并沒有刷新。接著是重置按鈕，點擊后文本框的內容恢復到初始狀態，但頁面仍然沒有刷新。提交按鈕點擊后，頁面重新加載，提交了表單中的內容。

接著是按鈕，點擊后文本框的內容發生了變化，但頁面沒有刷新。按鈕包含一個圖片且為灰色狀態，無法點擊。

現在來看看實現的代碼。

輸入和按鈕的寫法非常相似，這里只展示了最基本的寫法。對于初學者來說，看一眼就明白了。

按鈕有三個類型：普通、重置和提交。按鈕的名稱和值會提交到服務器端。

提交時提交的是按鈕的值。ID和name是控制按鈕的命名。

點擊按鈕時會觸發onclick事件。autofocus屬性會在頁面加載完成后自動獲取焦點。

disabled屬性可以設置按鈕是否可用，不設置時默認可用。

form屬性用于設置提交到哪個URL、是否繞過驗證、以及表單的相關設置。

相關屬性的優先級高于在表單中設置的屬性。

以上就是今天的分享內容，希望對大家有所幫助。import和button在網頁中插入按鈕的功能是相同的，兩者的外觀也沒有明顯的區別，但是它們的屬性設置卻存在一定的重疊。

為什么需要這兩個標簽呢？而阿里巴巴標簽是HTML 5中新增加的標簽，它的必要性體現在哪里呢？同學們要注意，阿里巴巴標簽不是input，它不是一個封閉的標簽，而是一個唯一的標簽，可以包含文字或其他標簽。

例如，可以使用阿里巴巴標簽來插入圖片。注意，由于用戶使用的瀏覽器不同，底層的type值是必須填寫的，絕對不能使用默認值。

今天的分享就到這里，希望各位同學能夠認真練習，做到不看視頻也能夠正確地寫出代碼。所有的案例和相關文檔都可以向我索取，下期再見，想學編程就關注我吧。

一部分：HTML簡介

什么是HTML？

HTML代表超文本標記語言（Hypertext Markup Language）。它是一種用于構建網頁的標記語言。HTML文件包含一組標簽，這些標簽用于定義網頁的結構和內容。瀏覽器讀取HTML文件，并根據標記中的指示呈現網頁內容。

HTML的主要作用是定義文本內容、圖像、鏈接和其他媒體的排列方式，并提供交互元素，例如表單和按鈕。

HTML的基本結構

每個HTML文檔都應該遵循以下基本結構：

<!DOCTYPE html>
<html>
<head>
    <title>網頁標題</title>
</head>
<body>
    <!-- 內容在這里 -->
</body>
</html>

讓我們逐步解釋這個結構：

<!DOCTYPE html>：這是文檔類型聲明，它告訴瀏覽器正在使用的HTML版本。<!DOCTYPE html>表示使用HTML5。
<html>：HTML文檔的根元素。所有其他元素都包含在<html>標簽內。
<head>：包含與文檔相關的元信息，如頁面標題、字符集聲明和外部樣式表鏈接。
<title>：定義網頁的標題，顯示在瀏覽器標簽頁上。
<body>：包含網頁的主要內容，如文本、圖像和其他媒體。

HTML標簽和元素

HTML標簽是由尖括號括起來的名稱，例如<p>表示段落，<img>表示圖像。標簽通常成對出現，有一個開始標簽和一個結束標簽。例如：

<p>這是一個段落。</p>

<p>是開始標簽，</p>是結束標簽，文本位于兩個標簽之間。標簽定義了元素的類型和結構。

有些HTML標簽是自封閉的，不需要結束標簽，例如<img>用于插入圖像。

HTML注釋

在HTML中，你可以使用注釋來添加說明性文字，注釋不會在瀏覽器中顯示。HTML注釋使用結尾，如下所示：

<!-- 這是一個注釋 -->

注釋通常用于添加文檔說明、調試代碼或標記未來的修改。

第二部分：HTML基本元素

文本

HTML中的文本通常包含在段落、標題、列表等元素中。以下是一些常見的文本元素：

<p>：定義一個段落。
<h1>到<h6>：定義標題，<h1>是最高級別的標題，<h6>是最低級別的標題。
<strong>：定義強調文本，通常以粗體顯示。
<em>：定義強調文本，通常以斜體顯示。
<a>：定義超鏈接，允許用戶點擊跳轉到其他頁面。

示例：

<p>這是一個段落。</p>
<h1>這是一個標題</h1>
<p><strong>這是強調文本。</strong></p>
<p><em>這是斜體文本。</em></p>
<p>訪問<a href="https://www.example.com">示例網站</a></p>

圖像

要在網頁中插入圖像，可以使用<img>標簽。它是一個自封閉標簽，需要指定圖像的src屬性來指定圖像文件的路徑。

示例：

htmlCopy code
<img src="image.jpg" alt="圖像描述">

src：指定圖像文件的路徑。
alt：提供圖像的替代文本，用于無法加載圖像時的文字描述。

鏈接

通過使用<a>標簽，可以在網頁中創建鏈接。鏈接通常包含在文本或圖像中，并使用href屬性指定目標URL。

示例：

<a href="https://www.example.com">訪問示例網站</a>

href：指定鏈接的目標URL。

列表

HTML支持有序列表（<ol>）、無序列表（<ul>）和定義列表（<dl>）。

無序列表

無序列表使用<ul>標簽定義，每個列表項使用<li>標簽。

示例：

<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

有序列表

有序列表使用<ol>標簽定義，每個列表項使用<li>標簽。

示例：

<ol>
    <li>第一項</li>
    <li>第二項</li>
    <li>第三項</li>
</ol>

定義列表

定義列表使用<dl>標簽定義，每個定義項目使用<dt>標簽定義術語，使用<dd>標簽定義描述。

示例：

<dl>
    <dt>術語1</dt>
    <dd>描述1</dd>
    <dt>術語2</dt>
    <dd>描述2</dd>
</dl>

第三部分：HTML表單

HTML表單允許用戶與網頁進行交互，提交數據。以下是HTML表單的基本元素：

<form>元素

<form>元素用于創建表單，可以包含文本字段、復選框、單選按鈕、下拉列表等。

示例：

<form action="submit.php" method="post">
    <!-- 表單元素在這里 -->
</form>

action：指定表單數據提交的目標URL。
method：指定提交方法，通常是"post"或"get"。

輸入字段

輸入字段用于接收用戶輸入的數據，常見的輸入字段類型包括文本框、密碼框、單選按鈕、復選框等。

文本框

文本框使用<input>標簽，type屬性設置為"text"。

示例：

<input type="text" name="username" placeholder="用戶名">

type：指定字段類型。
name：指定字段的名稱。
placeholder：設置文本框的占位符文本。

密碼框

密碼框使用<input>標簽，type屬性設置為"password"。

示例：

htmlCopy code
<input type="password" name="password" placeholder="密碼">

單選按鈕

單選按鈕使用<input>標簽，type屬性設置為"radio"。

示例：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

name：指定單選按鈕組的名稱。
value：指定每個選項的值。

復選框

復選框使用<input>標簽，type屬性設置為"checkbox"。

示例：

<input type="checkbox" name="subscribe" value="yes">訂閱新聞

下拉列表

下拉列表使用<select>和<option>標簽創建。<select>定義下拉列表，而<option>定義選項。

示例：

<select name="country">
    <option value="us">美國</option>
    <option value="ca">加拿大</option>
    <option value="uk">英國</option>
</select>

name：指定下拉列表的名稱。
每個<option>標簽表示一個選項，使用value屬性定義選項的值。

第四部分：HTML樣式和CSS

HTML用于定義網頁的結構和內容，但要使網頁看起來更吸引人，需要使用CSS（層疊樣式表）。CSS允許你定義字體、顏色、布局等樣式。

內聯樣式

可以在HTML元素內部使用style屬性來定義內聯樣式。

示例：

<p style="color: blue; font-size: 16px;">這是一個藍色的段落。</p>

外部樣式表

外部樣式表將樣式規則保存在獨立的CSS文件中，并通過<link>標簽將其鏈接到HTML文檔。

示例（style.css）：

/* style.css */
p {
    color: blue;
    font-size: 16px;
}

在HTML中鏈接外部樣式表：

<link rel="stylesheet" type="text/css" href="style.css">

這使得可以在整個網站上共享相同的樣式。

總結

HTML是構建現代網頁的基礎。通過學習HTML的基本語法和元素，你可以創建吸引人且功能強大的網頁。無論是文本、圖像、鏈接還是表單，HTML提供了豐富的工具來呈現內容和實現用戶交互。

這篇文章提供了HTML的基礎知識，但HTML是一個廣泛的主題，還有許多高級特性和技巧等待你探索。希望這篇文章對你入門HTML有所幫助，讓你能夠開始創建自己的網頁。繼續學習和實踐，你將成為一個熟練的網頁開發者。

瀏覽器更好用，自然離不開萬能的《油猴插件》（戳這里），通過腳本實現去廣告、繞過二次跳轉、自動翻頁、懸停看圖、扒下載鏈接等功能。雖說AC-baidu這類的腳本自帶更改頁面樣式，

但由于是1對1的，沒法改所有網站的面貌，這時候就要用到另一個插件“Stylus”了，它可以讓絕大多數網頁都變得工工整整（趕上時代）。

▌用上Stylus

插件可以直接誒從Chrome瀏覽器插件商店安裝，或者網上直接下一個。

樣式可以點擊插件中[查找更多樣式]，

接下來會列出所在網頁可用的所有樣式，供你選擇，包含源鏈接、發布日期、本周/所有下載數據等。

裝好的樣式可以在頂部選擇開關，也可以組合搭配使用（可能有bug沖突），比方說：

這一步可能需要梯子，不然可能加載不出來...你也可以到Stylish的網站userstyles.org下載安裝。

點擊[選項]進入設置界面，它支持Dropbox、Google Drive、Onedrive云同步功能，一鍵在其他電腦上同步使用，不再需要一個個手動重新添加。

▌樣式推薦

百度：Baidu Lite 百度輕

谷歌：Google Search - Material Design

IT之家：IT之家去廣告,優化閱讀

貼吧：TieBa Maverick

知乎：Flat Zhihu 扁平化知乎

微博：Weibo v6 簡約微博

斗魚：Douyu Cleaner清爽斗魚

夜讀：NightShift - eye care 全局夜間模式

字體：ForceMyFonts 全局字體美化

如果你恰巧會一點CSS，那么可以自定義修改任意樣式，也可以從頭自己做。

▌什么是CSS（層疊樣式表）？

Stylus的原理也不復雜，通過CSS層疊樣式表改變網頁樣式，什么字體、背景、邊框、網頁布局，統統在它的掌控之中，就像整形一樣，換個鼻子、調個眼睛什么的，還是全程無痛。

CSS很復雜，但是Stylus簡單好用、沒啥學習成本，所以這部分只是當簡單的拓展講一下：

那它是如何誕生的呢？這還得從1993年說起，早期網頁使用的是RRP樣式，僅支持一個樣式表，只能顯示文字，看網頁的體驗可能還不如看報紙來的豐富。之前在《瀏覽器的輝煌發展史》（戳這里）中咱們提到過一款Mosaic（馬賽克）瀏覽器，

開始采用HTML標簽實現樣式表達，支持了書簽、圖標按鈕、圖片顯示這些革命性的功能、沿用至今。網景最早支持HTML框架顯示，也就是最簡單的table布局，

可以調整內外邊距，網頁看著更舒服，優點是兼容性高，但既要負責圖文內容、又要負責排版樣式，注定了他的樣式不夠美觀。

魏培源開發的ViolaWWW瀏覽器用了有層次嵌套性的樣式表，率先支持用<Link>標簽引用外部樣式表（可以簡單理解為：你請了個美工幫你改善改善）。但各家瀏覽器各用各的，豈不是亂了套？1994年，以萬維網之父老李為首的W3C萬維網聯盟，開始提供網絡標準化建議。

同年老萊（H?kon W Lie）提出層疊HTML樣式表（CHSS）支持用戶自定義樣式，網頁作者可以自己DIY版面，不同的規則用不同的百分比呈現，這也是CSS的雛形。隔壁的波斯正在做一款Argo瀏覽器，兩人相談盛歡、打算合作。

1996年底出現了一種和CSS語法很像的表現指明語言，PSL 96，可以根據不同的瀏覽器信息，自動判斷用什么樣式。年底，CSS已經完成，支持改變字體大小、字形、顏色、間距、排列、表格、邊框、id、class等等，如果說普通網頁是你剛買到手的毛坯房，那么CSS就是你給它做裝修。

但由于早期網頁設計師濫用HTML導致了“tagsoup標簽湯”問題，哪怕微軟在IE上逐步實現CSS，但BUG依然不少（

果然BUG是微軟祖傳BUFF）。

隔壁對手網景則推出了JS（JavaScript）語言，瀏覽器大戰沒有勝者，當時的網頁設計師被迫要為IE和網景分別設計一套網頁，頭都氣禿了...

于是民間團體WaSP（網頁標準計劃）發動水軍推動W3C 標準化，怒噴那些不加盟的廠商。在1998年出臺CSS2，他們之中的7位主要成員成立了CSS 武士團（CSS Samurai），催廠商們改善對CSS的支持，Opera照做了，但微軟依舊無動于衷。

可能也是因為大家看不到CSS的優勢，覺得沒必要，但2003年，Dave Shea推出了CSS 禪意花園（CSS Zen Garden）來展示樣式效果，也就是搭了個“樣板房”，讓設計師們熱血沸騰起來。

在2006~2009年間，DIV+CSS布局開始取代傳統表格布局，CSS3引入了簡單動畫等功能，插了JS一腳，還有靈活的flex彈性布局，沿用至今，而2011年開始設計的CSS4特性目前支持的還太少。

▌其他瀏覽器

你說為啥不直接用Stylish呢？因為3年前原作者賣給SimilarWeb之后，它涉嫌竊取用戶瀏覽歷史，被Chrome和Firefox下架。而Stylus是Stylish 1.5.2的開發分支，也是原作者維護的最后一個版本，作為GH上的開源項目，代碼公開審查，可以安心食用啦。

除了Chrome外，Firefox、Opera也都支持，Safari可以用FreeStyler（你也要來一段說唱嗎），同類插件還有xStyle。當然，由于win的字體渲染并不美觀，還可以搭配MacType使用，關于它的配置方法，咱們以后繼續說。

參考&引用：

sspai.com/post/40485

sspai.com/post/45537

github.com/openstyles/stylus

zhihu.com/search?type=content&q=css

zhihu.com/question/24826065/answer/194294438

zh.wikipedia.org/wiki/層疊樣式表?oldformat=true

在線咨詢

上一篇：高級面試題！請描述下從輸入URL到整個網頁加載完畢發生了什么？
下一篇：（HTML完結篇）制作一個簡單頁面(詳解)-零基礎自學網頁制作

您的項目需求

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

整合營銷服務商