整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
文介紹了網(wǎng)頁編程中的按鈕使用方法。按鈕是網(wǎng)頁中最常用的控件之一，點擊后會觸發(fā)某些程序。即使沒有學(xué)習(xí)過編程，大家也應(yīng)該知道按鈕的概念。按鈕的最大功能是點擊后觸發(fā)程序。這篇文章主要介紹了如何在網(wǎng)頁中插入按鈕，并講解了按鈕的屬性和使用方法。
先來看看今天的實例效果。頁面被分為三部分：按鈕、按鈕和按鈕的共有屬性。
首先是普通按鈕，點擊后文本框的內(nèi)容發(fā)生了變化，但頁面并沒有刷新。接著是重置按鈕，點擊后文本框的內(nèi)容恢復(fù)到初始狀態(tài)，但頁面仍然沒有刷新。提交按鈕點擊后，頁面重新加載，提交了表單中的內(nèi)容。
接著是按鈕，點擊后文本框的內(nèi)容發(fā)生了變化，但頁面沒有刷新。按鈕包含一個圖片且為灰色狀態(tài)，無法點擊。
現(xiàn)在來看看實現(xiàn)的代碼。
輸入和按鈕的寫法非常相似，這里只展示了最基本的寫法。對于初學(xué)者來說，看一眼就明白了。
按鈕有三個類型：普通、重置和提交。按鈕的名稱和值會提交到服務(wù)器端。
提交時提交的是按鈕的值。ID和name是控制按鈕的命名。
點擊按鈕時會觸發(fā)onclick事件。autofocus屬性會在頁面加載完成后自動獲取焦點。
disabled屬性可以設(shè)置按鈕是否可用，不設(shè)置時默認可用。
form屬性用于設(shè)置提交到哪個URL、是否繞過驗證、以及表單的相關(guān)設(shè)置。
相關(guān)屬性的優(yōu)先級高于在表單中設(shè)置的屬性。
以上就是今天的分享內(nèi)容，希望對大家有所幫助。import和button在網(wǎng)頁中插入按鈕的功能是相同的，兩者的外觀也沒有明顯的區(qū)別，但是它們的屬性設(shè)置卻存在一定的重疊。
為什么需要這兩個標(biāo)簽?zāi)?？而阿里巴巴?biāo)簽是HTML 5中新增加的標(biāo)簽，它的必要性體現(xiàn)在哪里呢？同學(xué)們要注意，阿里巴巴標(biāo)簽不是input，它不是一個封閉的標(biāo)簽，而是一個唯一的標(biāo)簽，可以包含文字或其他標(biāo)簽。
例如，可以使用阿里巴巴標(biāo)簽來插入圖片。注意，由于用戶使用的瀏覽器不同，底層的type值是必須填寫的，絕對不能使用默認值。
今天的分享就到這里，希望各位同學(xué)能夠認真練習(xí)，做到不看視頻也能夠正確地寫出代碼。所有的案例和相關(guān)文檔都可以向我索取，下期再見，想學(xué)編程就關(guān)注我吧。
HTML代表超文本標(biāo)記語言（Hypertext Markup Language）。它是一種用于構(gòu)建網(wǎng)頁的標(biāo)記語言。HTML文件包含一組標(biāo)簽，這些標(biāo)簽用于定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。瀏覽器讀取HTML文件，并根據(jù)標(biāo)記中的指示呈現(xiàn)網(wǎng)頁內(nèi)容。
HTML的主要作用是定義文本內(nèi)容、圖像、鏈接和其他媒體的排列方式，并提供交互元素，例如表單和按鈕。
每個HTML文檔都應(yīng)該遵循以下基本結(jié)構(gòu)：
<!DOCTYPE html>
<html>
<head>
<title>網(wǎng)頁標(biāo)題</title>
</head>
<body>
<!-- 內(nèi)容在這里 -->
</body>
</html>
讓我們逐步解釋這個結(jié)構(gòu)：
HTML標(biāo)簽是由尖括號括起來的名稱，例如<p>表示段落，<img>表示圖像。標(biāo)簽通常成對出現(xiàn)，有一個開始標(biāo)簽和一個結(jié)束標(biāo)簽。例如：
<p>這是一個段落。</p>
<p>是開始標(biāo)簽，</p>是結(jié)束標(biāo)簽，文本位于兩個標(biāo)簽之間。標(biāo)簽定義了元素的類型和結(jié)構(gòu)。
有些HTML標(biāo)簽是自封閉的，不需要結(jié)束標(biāo)簽，例如<img>用于插入圖像。
在HTML中，你可以使用注釋來添加說明性文字，注釋不會在瀏覽器中顯示。HTML注釋使用<!--開頭和-->結(jié)尾，如下所示：
<!-- 這是一個注釋 -->
注釋通常用于添加文檔說明、調(diào)試代碼或標(biāo)記未來的修改。
HTML中的文本通常包含在段落、標(biāo)題、列表等元素中。以下是一些常見的文本元素：
示例：
<p>這是一個段落。</p>
<h1>這是一個標(biāo)題</h1>
<p><strong>這是強調(diào)文本。</strong></p>
<p><em>這是斜體文本。</em></p>
<p>訪問<a href="https://www.example.com">示例網(wǎng)站</a></p>
要在網(wǎng)頁中插入圖像，可以使用<img>標(biāo)簽。它是一個自封閉標(biāo)簽，需要指定圖像的src屬性來指定圖像文件的路徑。
示例：
htmlCopy code
<img src="image.jpg" alt="圖像描述">
通過使用<a>標(biāo)簽，可以在網(wǎng)頁中創(chuàng)建鏈接。鏈接通常包含在文本或圖像中，并使用href屬性指定目標(biāo)URL。
示例：
<a href="https://www.example.com">訪問示例網(wǎng)站</a>
HTML支持有序列表（<ol>）、無序列表（<ul>）和定義列表（<dl>）。
無序列表使用<ul>標(biāo)簽定義，每個列表項使用<li>標(biāo)簽。
示例：
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
有序列表使用<ol>標(biāo)簽定義，每個列表項使用<li>標(biāo)簽。
示例：
<ol>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>
定義列表使用<dl>標(biāo)簽定義，每個定義項目使用<dt>標(biāo)簽定義術(shù)語，使用<dd>標(biāo)簽定義描述。
示例：
<dl>
<dt>術(shù)語1</dt>
<dd>描述1</dd>
<dt>術(shù)語2</dt>
<dd>描述2</dd>
</dl>
HTML表單允許用戶與網(wǎng)頁進行交互，提交數(shù)據(jù)。以下是HTML表單的基本元素：
<form>元素用于創(chuàng)建表單，可以包含文本字段、復(fù)選框、單選按鈕、下拉列表等。
示例：
<form action="submit.php" method="post">
<!-- 表單元素在這里 -->
</form>
輸入字段用于接收用戶輸入的數(shù)據(jù)，常見的輸入字段類型包括文本框、密碼框、單選按鈕、復(fù)選框等。
文本框使用<input>標(biāo)簽，type屬性設(shè)置為"text"。
示例：
<input type="text" name="username" placeholder="用戶名">
密碼框使用<input>標(biāo)簽，type屬性設(shè)置為"password"。
示例：
htmlCopy code
<input type="password" name="password" placeholder="密碼">
單選按鈕使用<input>標(biāo)簽，type屬性設(shè)置為"radio"。
示例：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
復(fù)選框使用<input>標(biāo)簽，type屬性設(shè)置為"checkbox"。
示例：
<input type="checkbox" name="subscribe" value="yes">訂閱新聞
下拉列表使用<select>和<option>標(biāo)簽創(chuàng)建。<select>定義下拉列表，而<option>定義選項。
示例：
<select name="country">
<option value="us">美國</option>
<option value="ca">加拿大</option>
<option value="uk">英國</option>
</select>
HTML用于定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，但要使網(wǎng)頁看起來更吸引人，需要使用CSS（層疊樣式表）。CSS允許你定義字體、顏色、布局等樣式。
可以在HTML元素內(nèi)部使用style屬性來定義內(nèi)聯(lián)樣式。
示例：
<p style="color: blue; font-size: 16px;">這是一個藍色的段落。</p>
外部樣式表將樣式規(guī)則保存在獨立的CSS文件中，并通過<link>標(biāo)簽將其鏈接到HTML文檔。
示例（style.css）：
/* style.css */
p {
color: blue;
font-size: 16px;
}
在HTML中鏈接外部樣式表：
<link rel="stylesheet" type="text/css" href="style.css">
這使得可以在整個網(wǎng)站上共享相同的樣式。
HTML是構(gòu)建現(xiàn)代網(wǎng)頁的基礎(chǔ)。通過學(xué)習(xí)HTML的基本語法和元素，你可以創(chuàng)建吸引人且功能強大的網(wǎng)頁。無論是文本、圖像、鏈接還是表單，HTML提供了豐富的工具來呈現(xiàn)內(nèi)容和實現(xiàn)用戶交互。
這篇文章提供了HTML的基礎(chǔ)知識，但HTML是一個廣泛的主題，還有許多高級特性和技巧等待你探索。希望這篇文章對你入門HTML有所幫助，讓你能夠開始創(chuàng)建自己的網(wǎng)頁。繼續(xù)學(xué)習(xí)和實踐，你將成為一個熟練的網(wǎng)頁開發(fā)者。
瀏覽器更好用，自然離不開萬能的《油猴插件》（戳這里），通過腳本實現(xiàn)去廣告、繞過二次跳轉(zhuǎn)、自動翻頁、懸停看圖、扒下載鏈接等功能。雖說AC-baidu這類的腳本自帶更改頁面樣式，
但由于是1對1的，沒法改所有網(wǎng)站的面貌，這時候就要用到另一個插件“Stylus”了，它可以讓絕大多數(shù)網(wǎng)頁都變得工工整整（趕上時代）。
▌用上Stylus
插件可以直接誒從Chrome瀏覽器插件商店安裝，或者網(wǎng)上直接下一個。
樣式可以點擊插件中[查找更多樣式]，
接下來會列出所在網(wǎng)頁可用的所有樣式，供你選擇，包含源鏈接、發(fā)布日期、本周/所有下載數(shù)據(jù)等。
裝好的樣式可以在頂部選擇開關(guān)，也可以組合搭配使用（可能有bug沖突），比方說：
這一步可能需要梯子，不然可能加載不出來...你也可以到Stylish的網(wǎng)站userstyles.org下載安裝。
點擊[選項]進入設(shè)置界面，它支持Dropbox、Google Drive、Onedrive云同步功能，一鍵在其他電腦上同步使用，不再需要一個個手動重新添加。
▌樣式推薦
百度：Baidu Lite 百度輕
谷歌：Google Search - Material Design
IT之家：IT之家去廣告,優(yōu)化閱讀
貼吧：TieBa Maverick
知乎：Flat Zhihu 扁平化知乎
微博：Weibo v6 簡約微博
斗魚：Douyu Cleaner清爽斗魚
夜讀：NightShift - eye care 全局夜間模式
字體：ForceMyFonts 全局字體美化
如果你恰巧會一點CSS，那么可以自定義修改任意樣式，也可以從頭自己做。
▌什么是CSS（層疊樣式表）？
Stylus的原理也不復(fù)雜，通過CSS層疊樣式表改變網(wǎng)頁樣式，什么字體、背景、邊框、網(wǎng)頁布局，統(tǒng)統(tǒng)在它的掌控之中，就像整形一樣，換個鼻子、調(diào)個眼睛什么的，還是全程無痛。
CSS很復(fù)雜，但是Stylus簡單好用、沒啥學(xué)習(xí)成本，所以這部分只是當(dāng)簡單的拓展講一下：
那它是如何誕生的呢？這還得從1993年說起，早期網(wǎng)頁使用的是RRP樣式，僅支持一個樣式表，只能顯示文字，看網(wǎng)頁的體驗可能還不如看報紙來的豐富。之前在《瀏覽器的輝煌發(fā)展史》（戳這里）中咱們提到過一款Mosaic（馬賽克）瀏覽器，
開始采用HTML標(biāo)簽實現(xiàn)樣式表達，支持了書簽、圖標(biāo)按鈕、圖片顯示這些革命性的功能、沿用至今。網(wǎng)景最早支持HTML框架顯示，也就是最簡單的table布局，
可以調(diào)整內(nèi)外邊距，網(wǎng)頁看著更舒服，優(yōu)點是兼容性高，但既要負責(zé)圖文內(nèi)容、又要負責(zé)排版樣式，注定了他的樣式不夠美觀。
魏培源開發(fā)的ViolaWWW瀏覽器用了有層次嵌套性的樣式表，率先支持用<Link>標(biāo)簽引用外部樣式表（可以簡單理解為：你請了個美工幫你改善改善）。但各家瀏覽器各用各的，豈不是亂了套？1994年，以萬維網(wǎng)之父老李為首的W3C萬維網(wǎng)聯(lián)盟，開始提供網(wǎng)絡(luò)標(biāo)準(zhǔn)化建議。
同年老萊（H?kon W Lie）提出層疊HTML樣式表（CHSS）支持用戶自定義樣式，網(wǎng)頁作者可以自己DIY版面，不同的規(guī)則用不同的百分比呈現(xiàn)，這也是CSS的雛形。隔壁的波斯正在做一款A(yù)rgo瀏覽器，兩人相談盛歡、打算合作。
1996年底出現(xiàn)了一種和CSS語法很像的表現(xiàn)指明語言，PSL 96，可以根據(jù)不同的瀏覽器信息，自動判斷用什么樣式。年底，CSS已經(jīng)完成，支持改變字體大小、字形、顏色、間距、排列、表格、邊框、id、class等等，如果說普通網(wǎng)頁是你剛買到手的毛坯房，那么CSS就是你給它做裝修。
但由于早期網(wǎng)頁設(shè)計師濫用HTML導(dǎo)致了“tagsoup標(biāo)簽湯”問題，哪怕微軟在IE上逐步實現(xiàn)CSS，但BUG依然不少（
果然BUG是微軟祖?zhèn)鰾UFF）。
隔壁對手網(wǎng)景則推出了JS（JavaScript）語言，瀏覽器大戰(zhàn)沒有勝者，當(dāng)時的網(wǎng)頁設(shè)計師被迫要為IE和網(wǎng)景分別設(shè)計一套網(wǎng)頁，頭都氣禿了...
于是民間團體WaSP（網(wǎng)頁標(biāo)準(zhǔn)計劃）發(fā)動水軍推動W3C 標(biāo)準(zhǔn)化，怒噴那些不加盟的廠商。在1998年出臺CSS2，他們之中的7位主要成員成立了CSS 武士團（CSS Samurai），催廠商們改善對CSS的支持，Opera照做了，但微軟依舊無動于衷。
可能也是因為大家看不到CSS的優(yōu)勢，覺得沒必要，但2003年，Dave Shea推出了CSS 禪意花園（CSS Zen Garden）來展示樣式效果，也就是搭了個“樣板房”，讓設(shè)計師們熱血沸騰起來。
在2006~2009年間，DIV+CSS布局開始取代傳統(tǒng)表格布局，CSS3引入了簡單動畫等功能，插了JS一腳，還有靈活的flex彈性布局，沿用至今，而2011年開始設(shè)計的CSS4特性目前支持的還太少。
▌其他瀏覽器
你說為啥不直接用Stylish呢？因為3年前原作者賣給SimilarWeb之后，它涉嫌竊取用戶瀏覽歷史，被Chrome和Firefox下架。而Stylus是Stylish 1.5.2的開發(fā)分支，也是原作者維護的最后一個版本，作為GH上的開源項目，代碼公開審查，可以安心食用啦。
除了Chrome外，F(xiàn)irefox、Opera也都支持，Safari可以用FreeStyler（你也要來一段說唱嗎），同類插件還有xStyle。當(dāng)然，由于win的字體渲染并不美觀，還可以搭配MacType使用，關(guān)于它的配置方法，咱們以后繼續(xù)說。
參考&引用：
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
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
