前端必學 40個精選案例實戰一課吃透HTML5+CSS3+JS(超清完結)

端必學 40個精選案例實戰一課吃透HTML5+CSS3+JS(超清完結)

"夏哉ke"：itzcw.com/9395/

前端的三大核心技能

前端開發的三大核心技能通常是：

HTML（超文本標記語言）： HTML是構建網頁的基礎，定義了網頁的結構和內容。前端開發者需要熟悉HTML的語法、標簽和屬性，以及如何使用它們來創建語義化的網頁結構。

CSS（層疊樣式表）： CSS用于控制網頁的樣式和布局，包括顏色、字體、布局、動畫等。前端開發者需要掌握CSS的各種屬性和選擇器，以及布局技術如Flexbox和Grid等，以實現各種視覺效果和響應式布局。

JavaScript（JS）： JavaScript是一種用于網頁交互和動態效果的腳本語言，也是前端開發中最重要的技能之一。前端開發者需要掌握JavaScript的語法、DOM操作、事件處理、異步編程、ES6+新特性等，以及流行的JavaScript庫和框架如React、Vue.js、Angular等。

這三個核心技能相互配合，使得前端開發者能夠創建出功能強大、界面美觀、交互流暢的網頁和應用程序。

前端領域在今生和未來都將扮演著至關重要的角色。以下是前端在今生和未來可能面臨的一些趨勢和挑戰：

今生（當前趨勢）：

響應式設計和開發： 隨著移動設備的普及和各種屏幕尺寸的不斷增加，響應式設計和開發已成為前端開發的標準。前端工程師需要確保他們的應用程序在不同設備上都能提供一致的用戶體驗。

性能優化： 用戶對于網站和應用程序的加載速度和性能越來越重視。因此，前端工程師需要關注性能優化，包括減少頁面加載時間、代碼分割、資源壓縮等技術。

前端框架和工具： 前端領域的框架和工具不斷涌現和更新，如React、Vue.js、Angular等，以及Webpack、Babel、ESLint等工具。前端工程師需要不斷學習和適應新的技術和工具。

單頁應用（SPA）和跨平臺開發： 前端開發越來越傾向于構建單頁應用（SPA），同時也涉及跨平臺開發，如使用React Native、Flutter等技術開發移動應用程序。

Web組件和自定義元素： Web組件是一種可復用的自定義元素，能夠提高開發效率和代碼重用性。前端工程師需要掌握Web組件的開發和使用。

未來（可能的趨勢）：

人工智能和機器學習： 前端應用程序將會越來越多地涉及人工智能和機器學習技術，如自然語言處理、圖像識別等，前端工程師需要學習和適應這些新的技術。

AR/VR和可穿戴設備： 隨著增強現實（AR）、虛擬現實（VR）和可穿戴設備的發展，前端開發也將面臨新的挑戰和機遇，如適配不同的輸入方式、優化性能等。

WebAssembly： WebAssembly是一種新的Web標準，可以使得在Web瀏覽器中運行更高性能的代碼，前端工程師需要掌握WebAssembly的開發和使用。

微前端和組件化開發： 微前端和組件化開發將繼續發展，前端工程師需要關注這些架構模式，并學習如何將它們應用到實際項目中。

無服務器架構： 無服務器架構（Serverless）將成為越來越流行的開發模式，前端工程師需要了解和使用無服務器架構來構建更靈活和可擴展的應用程序。

總的來說，前端領域在今生和未來都將繼續發展和演變，前端工程師需要不斷學習和適應新的技術和趨勢，以保持競爭力并為用戶提供優秀的體驗。

者通過實踐來闡述HTML 優先原則的主要目標是擴大能夠從事 Web 軟件編程工作的人員范圍。

原文鏈接：https://html-first.com/

未經允許，禁止轉載！

作者 | Tony Ennis 譯者 | 彎月

責編 | 夏萌

出品 | CSDN（ID：CSDNnews）

HTML優先是一組原則，旨在通過以下方式使構建 Web 軟件更容易、更快、更具包容性且更易于維護：

利用現代網絡瀏覽器的默認功能。
利用 HTML 屬性語法的極致簡單性。
利用 Web 的查看源代碼功能。

目標

HTML優先原則的主要目標是擴大能夠從事 Web 軟件編程工作的人員范圍。從個人角度來看，這是件好事，因為這可以讓更多的人成為Web 程序員，構建出色的 Web 軟件，并提高他們的收入。從業務角度來看，這些原則也有好處，因為這可以降低構建軟件的成本，并減少招聘所需的資源量（眾所周知，這是一個資源密集型流程）。

HTML優先原則的第二大目標是讓構建 Web 軟件的工作變得更加愉快和無縫。對于大多數 Web 程序員來說，在快速構建產品期間能夠流暢地在文本編輯器和瀏覽器之間來回切換，而不會遇到各種磕磕絆絆，也不需要切換上下文，他們會感到非常興奮。但如今程序員需要幾年的時間來掌握工具和框架才能達到這個階段。HTML 優先原則能夠讓人們在學習編程的早期階段體會這種感覺，并達到這種水平。

為了實現這些目標，首先必須承認 HTML 非常容易理解，因此我們將 HTML 作為產品的基石，不僅用 HTML 來定義內容和結構，還用它來設置樣式和行為。

原則

1. 推薦使用 HTML 原生的方法。

2. 使用 HTML 屬性來設置樣式和行為。

3. 使用利用了 HTML屬性的庫。

4. 避開構建過程。

5. 推薦使用“裸” HTML。

6. 保留查看源代碼的功能。

1.使用 HTML 原有的方法通過外部框架實現所需的功能

瀏覽器支持的開箱即用的功能范圍很廣，而且數量還在不斷增長。在將庫或框架添加到代碼庫之前，請檢查是否可以使用原汁原味的 html/css 來實現它。

鼓勵的寫法：

不鼓勵的寫法：

2.如有可能，默認使用內聯 HTML 屬性定義樣式和行為

我們可以使用 Tailwind 或 Tachyons等 SPC 庫來實現樣式。同時使用 hyperscript、Alpine 或類似的庫來實現行為。這意味著很多功能都需要使用 HTML 來實現。但這也意味著其他開發人員更容易找到和理解行為、瀏覽并修改它們。

鼓勵的寫法：

不鼓勵的寫法：

你可能會注意到，這種方法似乎違反了關注點分離——備受吹捧的軟件設計原則之一。我們認為，非黑即白的關注點分離原則是有缺陷的，因此我們提倡采用一種考慮到行為局部性以及兩者之間權衡的方法。

3.如果需要庫，請使用利用 html 屬性的庫，不推薦使用圍繞 JavaScript 或自定義語法構建的庫

鼓勵的寫法：

不鼓勵的寫法：

4.避開構建過程

需要將文件從一種格式轉換為另一種格式的庫會導致維護開銷增加大量，嚴重影響查看源代碼的功能或導致其無法使用，而且通常開發人員需要學習新工具才能使用它們。現代瀏覽器已不再有當初引入這些實踐時的性能限制。如果我們使用 HTML 優先的庫（例如 static tailwind 或 htmx），則額外所需的 CSS 和JS 量為最少。

鼓勵的寫法：

不鼓勵的寫法：

5.推薦使用“裸” HTML，不推薦編譯為 HTML的各個混亂層

這條原則適用于后端實現。基本思想是可讀性。熟悉 HTML 但不熟悉后端框架的開發人員查看視圖文件，仍然應該能夠理解 90% 以上的內容。如上所述，這意味著犧牲簡潔性而換取易于理解性。

鼓勵的寫法：

不鼓勵的寫法：

6.如有可能，保留右鍵單擊查看源代碼的功能

早期網絡的美妙之處在于，我們總能 "窺探 "到網頁任何部分的代碼。對于有抱負的開發人員來說，這是一項福利，因為這為我們在理論（閱讀代碼如何工作）和實踐之間架起了一座橋梁，將代碼和界面并排展示在我們眼前。對于許多網站來說，我們只需復制并粘貼 html 或 css，然后放到自己的網站上運行，就可以獲得近乎相同的復制品。新舊代碼的混合不僅是一種學習方式，而且往往也是我們創作新作品的基礎。

后來，業界采用了一些 "改進 "方法，導致這種做法變得更為罕見。例如，如果我們使用流行的前端框架 React，就不能點擊 "查看源代碼"，復制代碼并重新混合，因為首先 React 有構建過程，這意味著我們在開發人員工具中看到的代碼與開發人員編寫的代碼不同；其次，React 代碼片段必須封裝在 react 應用程序中才能工作。

遵循 HTML 優先原則的網站能夠重新獲得查看源代碼的功能。事實上，HTML 優先的網站往往更進一步。因為如果使用 HTML 屬性定義用戶界面交互，那么在復制粘貼到新的代碼庫時，也可以保留這些交互（前提是目標文件包含相同的 js 庫）。我們打算將來將其擴展到 HTML 優先的代碼片段庫。

總結

本文中描述的實踐和原則在整個行業中仍然很小眾，而且使用的社區也很少。我希望通過建設網站（https://html-first.com/）的方式來尋找同道合的人，共同探討并完善這些想法。

成	語言	描述
結構	HTML	網頁元素和內容
表現	CSS	網頁元素頁面樣式
行為	JavaScript	網頁交互

1 HTML概念

HTML，超文本標記語言（Hyper Text Markup Language），是一門描述性語言。標記，標簽，元素，叫法不同，意思相同。HTML超文本標記語言主要通過標簽的方式，對網頁頁面的文本、圖片、音頻、視頻等內容進行描述。學習HTML，就是學習各種標簽，來搭建網頁的結構。

2 HTML結構

結構：!DOCTYPE

說明：作用是告訴瀏覽器用哪個文檔規范來解析文檔

標簽：html

說明：用于搭建HTML網頁文檔結構和網頁布局

?標簽：head

說明：用于定義HTML網頁文檔的頭部,它是所有頭部元素的容器?

?標簽：body

說明：用來定義HTML網頁文檔的主體區域?

?標簽：meta

說明：用來描述HTML網頁文檔的屬性?

?標簽：title

說明：用來放到HTML網頁文檔的頭部，是搜索引擎首要抓取的目標代碼?

?2.1 標簽

標簽，也叫作標記，是由一對尖括號<>，里面包含單詞組成

2.1.1 雙標簽

<html></html>

2.1.2 單標簽

<br>

2.1.3 標簽關系

嵌套關系

<html>
    <head>
    </head>
</html>

并列關系

<head>
</head>
<body>    
</body>

3 注釋

注釋用來幫助程序員記錄程序設計方法，輔助程序閱讀

4 head標簽

4.1 title標簽

雙標簽，定義網頁的標題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>百度一下，你就知道了</title>
</head>
<body>

</body>
</html>

4.2 meta標簽

是單標簽，用來描述HTML網頁文檔的屬性

4.2.1 name屬性

屬性值	說明
keywords	網頁關鍵字，多個逗號隔開
description	網頁描述
author	作者
copyright	版權信息

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 網頁關鍵字 -->
    <meta name="keywords" content="html,css,javascript">
    <!-- 網頁描述 -->
    <meta name="description" content="基礎前端知識">
    <!-- 網頁作者 -->
    <meta name="author" content="buddha">
    <!-- 網頁版權信息 -->
    <meta name="copyright" content="版權所有，翻版必究">
</head>
<body>

</body>
</html>

標簽屬性：

1、標簽的屬性寫在開始標簽內部

2、標簽名與屬性之間要有空格隔開

3、一個標簽可以同時存在多個屬性

4、屬性之間以空格隔開

5、屬性沒有先后順序之分

4.2.2 http-equiv屬性

屬性值	說明
Content-Type	定義網頁所使用編碼
refresh	定義網頁自動刷新跳轉

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 設置網頁編碼完整寫法 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <!-- 設置網頁編碼簡寫寫法 -->
    <meta charset="UTF-8">
    <!-- 網頁打開3秒后跳去百度 -->
    <meta http-equiv="refresh" content="3;url=https://www.baidu.com">
</head>
<body>

</body>
</html>

4.3 style標簽

是雙標簽，用來定義標簽的css樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <style type="text/css">
        /* css內聯樣式寫這里 */
    </style>
</head>
<body>

</body>
</html>

4.4 link標簽

是單標簽，是用來引入外部css樣式文件

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

4.5 script標簽

是雙標簽，是用來寫JavaScript代碼的地方

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        /* 這里寫JavaScript代碼 */
    </script>

</head>
<body>

</body>
</html>

4.6 base標簽

是單標簽，是用來設置整個網頁的基礎路徑。

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="https://pic.rmb.bdstatic.com">

</head>
<body>
    <img src="bjh/news/e7fb4c2be6a2e439ff7e3197fa205d8f1336.gif">
</body>
</html>

開發中很少用到，有人使用知道就行

上面所述標簽是放在head標簽里的，接下來接觸的標簽都是放在body標簽內的

5 文本標簽

5.1 標題標簽

是雙標簽，h是header的縮寫

<h1>h1標簽：一級標題</h1>
<h2>h2標簽：二級標題</h2>
<h3>h3標簽：三級標題</h3>
<h4>h4標簽：四級標題</h4>
<h5>h5標簽：五級標題</h5>
<h6>h6標簽：六級標題</h6>

特點：

1、字體加粗

2、獨占一行

3、從h1到h6，字體逐漸減小

4、使用<h>標簽的主要意義是告訴搜索引擎這是一段文字的標題

5、<h1>在一個頁面最多只能有一個，不要用多個

5.2 段落標簽

是雙標簽，p是paragraph的縮寫

<p>這是一段文字</p>
<p>這是一段文字</p>
<p>這是一段文字</p>

特點：

1、獨占一行

2、段落與段落之間，存在間隙

5.3 換行標簽

是單標簽，br是break的縮寫

<p>這是一段<br>文字</p>

特點：

1、強制換行

2、單標簽

5.4 水平線標簽

是單標簽，hr是horizon地平線的縮寫

<p>這是一段文字</p>
<hr>
<p>這是一段文字</p>

特點：

1、在頁面中顯示一條水平線

2、單標簽

6 文本格式化標簽

標簽1	標簽2	說明
b	strong	加粗
u	ins	下劃線
i	em	傾斜
s	del	刪除線

<b>這是一段文字</b>
<strong>這是一段文字</strong>
<br>
<u>這是一段文字</u>
<ins>這是一段文字</ins>
<br>
<i>這是一段文字</i>
<em>這是一段文字</em>
<br>
<s>這是一段文字</s>
<del>這是一段文字</del>

特點：

1、不會獨占一行

2、推薦使用標簽2所在列標簽

6.1 上標標簽

sup是superscripted這個單詞的縮寫

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    a<sup>2</sup>
</body>
</html>

6.2 下標標簽

sub是subscripted這個單詞的縮寫

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    H<sub>2</sub>O
</body>
</html>

6.3 字符實體

在網頁中展示特殊符號效果時，需要使用字符實體替代

顯示結果	描述	實體名稱
	空格
<	小于號	<
>	大于號	>
&	與	&
"	雙引號	"
x	乘號	×
÷	除號	÷
-	長破折號	—
\|	豎線	\|
‘	左單引號	‘
‘	右單引號	’
?	版權符	©
?	注冊商標	®
?	商標	™
°	度	°

7 媒體標簽

7.1 圖片標簽

<img src="./001.jpg" alt="">

img標簽常見屬性：

屬性名	說明
src	圖片路徑（絕對路徑、相對路徑）
alt	圖片加載失敗時，顯示的文字
title	鼠標懸停時，顯示的文字
width	圖片寬度
height	圖片高度

只設置寬或高，會自動等比縮放，寬高只需要數字，不需要'px'

<img src="./001.jpg" alt="圖片加載失敗" title="這是程序兔" width="200" height="200">

絕對路徑：指目錄下的絕對位置，比如從根目錄開始的路徑，或完整的網絡地址
相對路徑：從當前文件開始出發找目標文件的過程

7.2 音頻標簽

<audio src="music.mp3" controls autoplay loop></audio>

audio標簽常見屬性：

屬性名	說明
src	音頻路徑
controls	顯示播放控件
autoplay	自動播放
loop	循環播放

支持mp3、wav、ogg三種音頻格式

7.3 視頻標簽

<video src="video.mp4" controls loop autoplay></video>

屬性名	說明
src	視頻路徑
controls	顯示播放控件
autoplay	自動播放
loop	循環播放

支持mp4、webm、ogg三種視頻格式

7.4 超鏈接標簽

超鏈接，是雙標簽，實現各個獨立頁面之間進行跳轉，可以跳去站外也可以在站內之間跳轉

<a href="鏈接地址">文本或圖片</a>

站外跳轉，采用絕對路徑

<a href="http://www.baidu.com" target="_blank">百度</a>

站內跳轉，采用相對路徑

<!-- a頁面 -->
<a href="b.html">跳去b頁面</a>

<!-- b頁面 -->
<p>b頁面</p>

頁面內跳轉

<a href="#ms">美食</a>
<a href="#jd">景點</a>
<h3 id="ms">推薦美食</h3>
<!-- 省略n個br標簽 -->
<br>
<h3 id="jd">推薦景點</h3>

屬性名	說明
href	跳轉鏈接
target	鏈接打開方式

target屬性值

屬性值	說明
_self	默認，原窗口打開鏈接
_blank	在新窗口打開鏈接
_parent	在父窗口打開鏈接
_top	在頂層窗口打開超鏈接

target屬性值一般使用_self（默認）和_blank

8 列表標簽

8.1 無序列表

<ul type="屬性值">
    <li>列表項</li>
    <li>列表項</li>
    <li>列表項</li>
</ul>

解釋：

1、ul，unordered lists，無序列表，li，list item，列表項

2、ul標簽子標簽只允許是li標簽

3、li標簽可以包含任意內容

type屬性值

屬性值	說明
disc	默認，實心圓
circle	空心圓
square	實心方型

<ul>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ul>

8.2 有序列表

<ol type="屬性值">
    <li>列表項</li>
    <li>列表項</li>
    <li>列表項</li>
</ol>

解釋：

1、ol，ordered lists，有序列表，li，list item，列表項

2、ol標簽子標簽只允許是li標簽

3、li標簽可以包含任意內容

type屬性值

屬性值	說明
1	默認，阿拉伯數字，1,2,3......
a	小寫英文字母，a,b,c......
A	大寫英文字母，A,B,C......
i	小寫羅馬數字,i,ii,iii......
I	大寫羅馬數字,I,II,III......

<ol>
    <li>你</li>
    <li>我</li>
    <li>他</li>
</ol>

8.3 自定義列表

<dl>
    <dt>名詞</dt>
    <dd>描述</dd>
    ……
</dl>

解釋：

1、dl，definition lists，自定義列表；dt，definition term，自定義列表組；dd，definition description，自定義列表描述

<dl>
    <dt>稱呼</dt>
    <dd>你</dd>
    <dd>我</dd>
    <dd>他</dd>
</dl>

9 表格標簽

9.1 表格基本結構

<table>
    <tr>
        <td>單元格1</td>
        <td>單元格2</td>
    </tr>
    <tr>
        <td>單元格3</td>
        <td>單元格4</td>
    </tr>
</table>

解釋：

1、tr，table row，表格行；td，table data cell，表行單元格

<table>
    <tr>
        <td>1</td>
    </tr>
</table>

9.2 表格標簽屬性

屬性名	屬性值	描述
border	數字	邊框寬度
width	數字	表格寬度
height	數字	表格高度

<table border="1" width="200" height="50">
    <tr>
        <td>1</td>
    </tr>
</table>

9.3 表格標題標簽

<caption>標題內容</caption>，位于表格內第一行

<table border="1" width="200" height="50">
    <caption>數字</caption>
    <tr>
        <td>1</td>
    </tr>
</table>

9.4 表格表頭單元格標簽

<th></th>，th，table header cell，表頭單元格

<table border="1" width="200" height="50">
    <caption>數字</caption>
    <tr>
        <th>序號</th>
    </tr>
    <tr>
        <td>1</td>
    </tr>
</table>

9.5 表格語義化結構標簽

thead、tbody、tfoot

<table border="1" width="200" height="50">
    <caption>數字</caption>
    <thead>
        <tr>
            <th>序號</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>匯總</td>
        </tr>
    </tfoot>
</table>

9.6 合并單元格

屬性名	屬性值	說明
rowspan	合并單元格個數	合并行，單元格垂直合并
colspan	合并單元格個數	合并列，單元格水平合并

<td rowspan="跨越的行數"></td>

<td colspan="跨越的列數"></td>

<table border="1" width="200" height="50">
    <caption>數字</caption>
    <thead>
        <tr>
            <th>序號</th>
            <th>金額</th>
            <th>金額</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td rowspan="2">20</td>
            <td rowspan="2">20</td>
        </tr>
        <tr>
            <td>2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>匯總</td>
            <td colspan="2">40</td>
        </tr>
    </tfoot>
</table>

10 表單標簽

10.1 form標簽

雙標簽，包裹其它表單標簽

<form>
    // 表單
</form>

form標簽的常用屬性

屬性	說明
name	表單名稱
method	提交方式
action	提交地址
target	打開方式
enctype	編碼方式

name屬性

一個頁面中，表單可能不止一個。name屬性，用來區分不同的表單

<form name="myForm"></form>

method屬性

用來指定表單數據使用哪種提交方式給后端

屬性值	說明
get	get方式
post	post方式

<form method="get"></form>

action屬性

用來指定表單數據提交到哪個地址

<!-- 比如提交到index.php地址 -->
<form action="index.php"></form>

target屬性

該屬性跟a標簽的target屬性一樣，其屬性值也是四個，一般情況只用到_blank屬性值，默認也是這個值

<form target="_blank"></form>

enctype屬性

屬性值	說明
application/x-www-form-urlencoded	在發送前編碼所有字符（默認）
multipart/form-data	不對字符編碼，在使用包含文件上傳控件的表單時，必須使用該值
text/plain	空格轉換為 "+" 加號，但不對特殊字符編碼

<form enctype="multipart/form-data"></form>

10.2 input標簽

input是單標簽

<input type="表單類型">

屬性值	說明
text	單行文本框
password	密碼文本框
radio	單選框
checkbox	多選框
button	普通按鈕
submit	提交按鈕
reset	重置按鈕
file	文件上傳

單行文本框常用屬性

屬性	說明
value	設置文本框的默認值
size	設置文本框的長度
maxlength	設置最多可輸入字符

<form>
    <input type="text" value="默認值" size="長度" maxlength="可輸入字符">
</form>

<form>
    <label>姓名：<input type="text" value="曹操" size="20" maxlength="10"></label>
</form>

密碼文本框常用屬性

密碼文本框常用屬性和單行文本框常用屬性相同

<input type="password" value="默認值" size="長度" maxlength="可輸入字符">

<form>
    <label>密碼：<input type="password" value="12345678" size="20" maxlength="10"></label>
</form>

單選框

屬性	說明
name	組名，同組單選框，組名要相同，必要屬性
value	單選框選項取值，必要屬性
checked	默認選中項，同組單選框，可以有一個默認選中項

<input type="radio" name="組名" value="取值" checked="checked">

<form>
    性別：
    <input type="radio" name="sex" value="男" checked="checked">男
    <input type="radio" name="sex" value="女">女
</form>

復選框

復選框和單選框的屬性都相同，區別復選框可以多選

<form>
    愛好：
    <input type="checkbox" name="hobby" value="籃球" checked>籃球
    <input type="checkbox" name="hobby" value="足球" checked>足球
    <input type="checkbox" name="hobby" value="臺球">臺球
</form>

普通按鈕

<input type="button" value="取值">

<form>
    <input type="button" value="普通按鈕">
</form>

<button>普通按鈕</button>

區別：

1、input是單標簽，button是雙標簽

2、button標簽的信息除了文本，還可以是圖像、其它標簽等

3、button有type屬性，屬性值可以是button、submit、reset等

提交按鈕

<input type="submit" value="取值">

<form>
    <input type="submit" value="提交">
</form>

把對應表單數據提交給后端服務器

重置按鈕

<input type="reset" value="取值">

<form>
    <input type="reset" value="重置">
</form>

點擊重置后，所在form表單里所有內容被清空了

文件上傳

<input type="file">

<form>
    <input type="file">
</form>

10.3 多行文本框

<textarea name="文本名稱" cols="列數" rows="行數"></textarea>

<form>
    <textarea name="文本名稱" cols="1" rows="2"></textarea>
</form>

10.4 下拉列表

<select>
    <option>選項內容</option>
    <option>選項內容</option>
</select>

下拉列表標簽是為了節省頁面空間

select標簽屬性

屬性名	說明
name	數據提交后端所需字段
size	下拉選項顯示個數
multiple	默認只允許選一個，選多個得加這個屬性
disabled	所有下拉選項禁止選中

<form>
    <select name="age" size="4" multiple="multiple" disabled="disabled">
        <option>18歲以下</option>
        <option>18-28歲</option>
        <option>28-38歲</option>
        <option>38歲以上</option>
    </select>
</form>

option標簽屬性

屬性名	說明
selected	默認選中
value	被選中，數據提交后端的值
disabled	該下拉選項禁止選中

<form>
    <select name="age" size="5">
        <option value="1">18歲以下</option>
        <option value="2" disabled="disabled">18-28歲</option>
        <option value="3" selected="selected">28-38歲</option>
        <option value="4">38歲以上</option>
    </select>
</form>

11 框架標簽

<iframe src="URL" width="數值" height="數值"></iframe>

框架標簽常用屬性

屬性名	說明
src	嵌入的文檔地址
width	標簽寬度
height	標簽高度

<iframe src="https://www.bilibili.com" width="300" height="200"></iframe>

有些文檔禁止被嵌入

12 標簽類型

HTML標簽分為三種，行內標簽、塊級標簽和行內塊級標簽。

12.1 行內標簽

特點：

1、在頁面內只占據剛好能包裹自己內容的空間

2、沒有寬高，內容多大就多大，行內標簽不能嵌套塊級標簽（a標簽除外）

3、行內標簽設置寬高無效，可以對行高line-height進行設置

4、可以設置外邊距margin和內邊距padding，但只對左右邊距有效果，上下無效

5、常見行內標簽span、a、strong、ins、del、br等

span標簽

雙標簽，行內標簽，本身沒有固定樣式

<p>我是<span>中國人</span></p>

12.2 塊級標簽

特點：

1、獨占一行

2、高度、寬度、外邊距、內邊距都可以設置生效

3、寬度默認是父級寬度的100%

4、是一個容器盒子，可以嵌套多層子級行內標簽、塊級標簽，文本類塊級標簽除外

5、常見塊級標簽div、p、h1~h6、ol、ul、li等

div標簽

雙標簽，塊級標簽，本身沒有固定樣式

<!-- 頭部區域 -->
<div></div>
<!-- 內容區域 -->
<div></div>

12.3 行內塊級標簽

特點

1、在頁面內只占據剛好能包裹自己內容的空間

2、高度、寬度、外邊距、內邊距都可以設置生效

3、常見塊級標簽img、input、td

12.4 標簽類型轉換

通過css樣式display屬性轉換，這是css的內容

在線咨詢

上一篇：如何使用Pandas read_html從HTML表格中獲取數據
下一篇：Nginx的rewrite案例之目錄自動添加斜杠

您的項目需求

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

整合營銷服務商

前端必學 40個精選案例實戰 一課吃透HTML5+CSS3+JS(超清完結)

端必學 40個精選案例實戰 一課吃透HTML5+CSS3+JS(超清完結)

目標

原則

1.使用 HTML 原有的方法通過外部框架實現所需的功能

2.如有可能，默認使用內聯 HTML 屬性定義樣式和行為

3.如果需要庫，請使用利用 html 屬性的庫，不推薦使用圍繞 JavaScript 或自定義語法構建的庫

4.避開構建過程

5.推薦使用“裸” HTML，不推薦編譯為 HTML的各個混亂層

6.如有可能，保留右鍵單擊查看源代碼的功能

總結

1 HTML概念

2 HTML結構

?2.1 標簽

2.1.1 雙標簽

2.1.2 單標簽

2.1.3 標簽關系

3 注釋

4 head標簽

4.1 title標簽

4.2 meta標簽

4.2.1 name屬性

4.2.2 http-equiv屬性

4.3 style標簽

4.4 link標簽

4.5 script標簽

4.6 base標簽

5 文本標簽

5.1 標題標簽

5.2 段落標簽

5.3 換行標簽

5.4 水平線標簽

6 文本格式化標簽

6.1 上標標簽

6.2 下標標簽

6.3 字符實體

7 媒體標簽

7.1 圖片標簽

7.2 音頻標簽

7.3 視頻標簽

7.4 超鏈接標簽

8 列表標簽

8.1 無序列表

8.2 有序列表

8.3 自定義列表

9 表格標簽

9.1 表格基本結構

9.2 表格標簽屬性

9.3 表格標題標簽

9.4 表格表頭單元格標簽

9.5 表格語義化結構標簽

9.6 合并單元格

10 表單標簽

10.1 form標簽

10.2 input標簽

10.3 多行文本框

10.4 下拉列表

11 框架標簽

12 標簽類型

12.1 行內標簽

12.2 塊級標簽

12.3 行內塊級標簽

12.4 標簽類型轉換

您的項目需求

前端必學 40個精選案例實戰一課吃透HTML5+CSS3+JS(超清完結)

端必學 40個精選案例實戰一課吃透HTML5+CSS3+JS(超清完結)