前端必學 40個精選案例實戰一課吃透HTML5+C

前端必學 40個精選案例實戰一課吃透HTML5+CSS3+JS(MK分享)

端必學 40個精選案例實戰一課吃透HTML5+CSS3+JS

"xiaのke"：sisuoit.com/4737.html

隨著互聯網技術的飛速發展，HTML5、CSS3和JavaScript已經成為網頁開發的重要基石。它們分別負責網頁的結構、樣式和行為，讓網頁呈現出豐富多彩、動態交互的效果。本文將帶你吃透HTML5、CSS3和JS，從入門到精通，助你成為一名優秀的網頁開發者。

二、HTML5：網頁的結構

HTML，全稱HyperText Markup Language，是網頁的基礎語言。HTML5作為HTML的最新版本，提供了許多新的元素和API，使得網頁內容更加豐富，交互性更強。

語義元素：如<header>、<footer>、<article>等，使網頁結構更清晰，便于搜索引擎優化和輔助閱讀器識別。
媒體元素：如<video>和<audio>，使得在網頁上嵌入媒體內容變得簡單。
圖形繪制API：Canvas、SVG等，讓網頁實現2D、3D圖形繪制。
離線存儲：Web Storage、IndexedDB等，使網頁能夠在客戶端存儲數據，提升用戶體驗。

三、CSS3：網頁的樣式

CSS，全稱Cascading Style Sheets，用于描述HTML元素的樣式。CSS3作為CSS的最新版本，引入了許多新的特性，讓網頁更加美觀、動感。

盒子模型：通過box-sizing屬性，你可以控制盒子的寬度和高度。
動畫與過渡：transition和animation屬性，讓元素在頁面上動起來。
漸變與陰影：gradients和shadows屬性，使元素呈現出生動的效果。
媒體查詢：通過媒體查詢，你可以為不同的設備或視口尺寸設置不同的樣式。

四、JavaScript：網頁的行為

JavaScript是一種腳本語言，用于控制網頁的行為。通過JavaScript，你可以實現各種動態效果和交互功能。

DOM操作：通過JavaScript，你可以操作HTML元素，實現頁面的動態內容更新。
事件處理：點擊事件、鍵盤事件等，讓網頁響應用戶的操作。
AJAX：通過AJAX技術，你可以在不刷新頁面的情況下與服務器進行通信，提升用戶體驗。
前端框架：如React、Vue等，使開發更加高效，組件化開發使代碼復用性更高。

五、總結

HTML5、CSS3和JavaScript是網頁開發的三大核心技術。要想成為一名優秀的網頁開發者，你需要熟練掌握它們。通過不斷學習和實踐，你將能夠運用這些技術構建出功能強大、交互豐富的網頁。在這個過程中，不要忘記保持對新技術的好奇心和學習動力，因為互聯網技術日新月異，只有不斷學習，才能跟上時代的步伐。

明：SVG 雖然也是標簽，但它不是 HTML5，標題加了 HTML5 只是為了與 canvas 放到一起。

一、為什么要學 SVG ?

SVG 意為可縮放矢量圖形（Scalable Vector Graphics），使用 XML 格式定義矢量圖形。其他的圖像格式都是基于像素的，但是 SVG 沒有單位的概念，它的20只是表示1的20倍，所以 SVG 繪制的圖形放大或縮小都不會失真。

與其他圖像比較，SVG 的優勢有以下幾點：

SVG 可以被多個工具讀取和修改。
SVG 與其他格式圖片相比，尺寸更小，可壓縮性強。
SVG 可任意伸縮。
SVG 圖像可以隨意地高質量打印。
SVG 圖像可以添加文本和事件，還可搜索，適合做地圖。
SVG 是純粹的 XML，不是 HTML5。
SVG是W3C標準

二、SVG 形狀元素

2.1、svg 標簽

SVG 的代碼都放到 svg 標簽呢，SVG 中的標簽都是閉合標簽，與html中標簽用法一致。svg的屬性有：

有width和height，指定了svg的大小。

eg：畫一條直線，完整代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body style="height:600px;">
 <svg width="300" height="300">
  <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="20"></line>    
 </svg> 
</body>
</html>

上述 svg 設置的寬高沒有帶單位，此時默認是像素值，如果需要添加單位時，除了絕對單位，也可以設置相對單位。

viewBox 屬性

使用語法：<svg viewBox=" x1,y1,width,height "></svg>

四個參數分別是左上角的橫縱坐標、視口的寬高。表示只看SVG的某一部分，由上述四個參數決定。

使用 viewBox 之后，相當于svg整體大小不變，只能看到 viewBox 設置部分，視覺上被放大。

2.2、SVG 如何嵌入 HTML

SVG 的代碼可以直接嵌入到 html 頁面中，也可以通過 html 的embed、object、iframe嵌入到html中。嵌入的時候嵌入的是 SVG 文件，SVG 文件必須使用 .svg 后綴。分別介紹各種方法如何使用？

2.2.1、embed 嵌入：

使用語法：<embed src="line.svg" type="image/svg+xml"></embed>

src是SVG文件路徑，type 表示 embed 引入文件類型。

優點：所有瀏覽器都支持，并允許使用腳本。

缺點：不推薦 html4 和 html 中使用，但 html5 支持。

2.2.2、object 嵌入：

使用語法：<object data="line.svg" type="image/svg+xml"></object>

data 是 SVG 文件路徑，type 表示 object 引入文件類型。

優點：所有瀏覽器都支持，支持 html、html4 和 html5。

缺點：不允許使用腳本。

2.2.3、iframe 嵌入：

使用語法：<iframe width="300" height="300" src="./line.svg" frameborder="0"></iframe>

src是 SVG 文件路徑，width、height、frameborder 設置的大小和邊框。

優點：所有瀏覽器都支持，并允許使用腳本。

缺點：不推薦 html4 和 html 中使用，但 html5 支持。

2.2.4、html中嵌入：

svg 標簽直接插入 html 內容內，與其他標簽用法一致。

2.2.5、連接到svg文件：

使用 a 標簽，直接鏈接到 SVG 文件。

使用語法：<a href="line.svg">查看SVG</a>

三、SVG形狀元素

3.1、線 - line

使用語法：
<svg width="300" height="300" >  
 <line x1="0" y1="0" x2="300" y2="300" stroke="black" stroke-width="20"></line>
</svg>

使用line標簽創建線條，(x1,y1)是起點，(x2,y2)是終點，stroke繪制黑線，stroke-width是線寬。

3.2、矩形 - rect

//使用語法：
<svg width="300" height="300" >
<rect 
 width="100" height="100"  //大小設置
 x="50" y="50"  //可選 左上角位置，svg的左上角默認(0,0)
 rx="20" ry="50" //可選 設置圓角
 stroke-width="3" stroke="red" fill="pink" //繪制樣式控制
></rect>
</svg>

上述參數 width、height是必填參數，x、y是可選參數，如不設置的時候，默認為(0,0)，也就是svg的左上角開始繪制。rx、ry是可選參數，不設置是矩形沒有圓角。fill定義填充顏色。

3.3、圓形 - circle

// 使用語法
<svg width="300" height="300" >
 <circle 
  cx="100" cy="50" // 定義圓心 ，可選
  r="40" // 圓的半徑
  stroke="black" stroke-width="2" fill="red"/> //繪制黑框填充紅色
</svg>

上述(cx,xy)定義圓心的位置，是可選參數，如果不設置默認圓心是（0,0）。r是必需參數，設置圓的半徑。

3.4、橢圓 - ellipse

橢圓與圓相似，不同之處在于橢圓有不同的x和y半徑，而圓兩個半徑是相同的。

// 使用語法
<svg width="300" height="300" >
 <ellipse 
  rx="20" ry="100" //設置橢圓的x、y方向的半徑
  fill="purple" // 橢圓填充色
  cx="150" cy="150" //設置橢圓的圓心 ，可選參數
 ></ellipse>
</svg>

上述橢圓的兩個rx、ry兩個方向半徑是必須參數，如果rx=ry就表示是圓形，（cx,cy）是橢圓的圓心，是可選參數，如果不設置，則默認圓心為（0,0）。

3.5、折線 - polyline

// 使用語法
<svg width="300" height="300" style="border:solid 1px red;">
  <!-- 繪制出一個默認填充黑色的三角形 -->
 <polyline 
  points=" //點的集合
   0 ,0, // 第一個點坐標
   100,100, // 第二個點坐標
   100,200 // 第三個點坐標
    " 
  stroke="green" 
 ></polyline>
<!-- 繪制一個臺階式的一條折線 -->
 <polyline 
  points="0,0,50,0,50,50,100,50,100,100,150,100,150,150" 
  stroke="#4b27ff" fill="none"
 ></polyline>
</svg>

上述代碼執行結果如圖所示：

需要注意的是 points 中包含了多個點的坐標，但不是一個數組。

3.6、多邊形 - polygon

polygon 標簽用來創建不少于3個邊的圖形，多邊形是閉合的，即所有線條連接起來。

// 使用語法
<svg width="300" height="300" style="border:solid 1px red;">
 <polygon 
  points="
    0,0,   //多邊形的第一點
   100,100,  //多邊形的第二點
    0,100  //多邊形的第三點
  " 
	stroke="purple"
	stroke-width="1"
	fill="none"
 ></polygon>
</svg>

polygon繪制的時候與折線有些類似，但是polygon會自動閉合，折線不會。

3.7、路徑 - path

path 是SVG基本形狀中最強大的一個，不僅能創建其他基本形狀，還能創建更多其他形狀，如貝塞爾曲線、2次曲線等。

點個關注，下篇更精彩！

、初識CSS3

本章目標：

會使用行內樣式、內部樣式表和外部樣式表三種方式為HTML5文檔添加CSS樣式
會使用CSS3的基本選擇器設置字體大小和顏色
會使用復合選擇器為特定的網頁元素添加CSS樣式
會使用CSS3高級選擇器為網頁元素添加CSS樣式

1.1、什么是CSS

Cascading Style Sheet 級聯樣式表。表現HTML或XHTML文件樣式的計算機語言。 包括對字體、顏色、邊距、高度、寬度、背景圖片、網頁定位等設定

在這里插入圖片描述

說明：

首先介紹什么是CSS
然后對比講解使用CSS和沒有使用CSS的兩個相同的HTML代碼頁面顯示效果，說明CSS的重要性
最后根據圖說明CSS在網頁中的應用

1.2、CSS的發展史

在這里插入圖片描述

CSS1.0 讀者可以從其他地方去使用自己喜歡的設計樣式去繼承性地使用樣式；

CSS2.0 融入了DIV+CSS的概念，提出了HTML結構與CSS樣式表的分離

CSS2.1 融入了更多高級的用法，如浮動，定位等。

CSS3.0 它包括了CSS2.1下的所有功能，是目前最新的版本，它向著模塊化的趨勢發展，又加了很多使用的新技術，如字體、多背景、圓角、陰影、動畫等高級屬性，但是它需要高級瀏覽器的支持。

由于現在IE 6、IE 7使用比例已經很少，對市場企業進行調研發現使用CSS3的頻率大幅增加，學習CSS3已經成為一種趨勢，因此本書會講解最新的CSS3版本

本課程中主要講解css2.1和css3

CSS的優勢

內容與表現分離
網頁的表現統一，容易修改
豐富的樣式，使得頁面布局更加靈活
減少網頁的代碼量，增加網頁的瀏覽速度，節省網絡帶寬
運用獨立于頁面的CSS，有利于網頁被搜索引擎收錄

1.3、CSS的基本語法

首先講解CSS的基本語法結構，由選擇器和聲明構成
然后對照具體的樣式詳細講解語法，強調聲明必須在 { } 中
最后說明基本W3C的規范，每條聲明后的 ; 都要寫上

在這里插入圖片描述

Style標簽

講解CSS樣式如何在HTML中應用，引入style標簽的應用
講解style標簽，說明type=“text/css的用法
說明style標簽在HTML文檔中的位置，在與之間

在這里插入圖片描述

1.4、引入CSS方式

行內樣式使用style屬性引入CSS樣式 <h1 style="color:red;">style屬性的應用</h1> <p style="font-size:14px; color:green;">直接在HTML標簽中設置的樣式</p> 使用style屬性設置CSS樣式僅對當前的HTML標簽起作為，并且是寫在HTML標簽中的這種方式不能起到內容與表現相分離，本質上沒有體現出CSS的優勢，因此不推薦使用。
內部樣式表 CSS代碼寫在 <head> 的 <style> 標簽中 <style> h1{color: green; } </style> 優點：方便在同頁面中修改樣式缺點：不利于在多頁面間共享復用代碼及維護，對內容與樣式的分離也不夠徹底引出外部樣式表
外部樣式表 CSS代碼保存在擴展名為.css的樣式表中 HTML文件引用擴展名為.css的樣式表，有兩種方式
鏈接式（使用的最多,記住這個就可以了）使用標簽鏈接外部樣式表，并講解各參數的含義，標簽必須放在標簽中

在這里插入圖片描述

導入式使用@import導入外部樣式表

在這里插入圖片描述

鏈接式與導入式的區別

標簽是屬于XHTML范疇的，@import是屬于CSS2.1中特有的。
使用鏈接的CSS是客戶端瀏覽網頁時先將外部CSS文件加載到網頁當中，然后再進行編譯顯示，所以這種情況下顯示出來的網頁與用戶預期的效果一樣，即使網速再慢也一樣的效果。
使用@import導入的CSS文件，客戶端在瀏覽網頁時是先將HTML結構呈現出來，再把外部CSS文件加載到網頁當中，當然最終的效果也與使用鏈接文件效果一樣，只是當網速較慢時會先顯示沒有CSS統一布局的HTML網頁，這樣就會給用戶很不好的感覺。這個也是現在目前大多少網站采用鏈接外部樣式表的主要原因。
由于@import是屬于CSS2.1中特有的，因此對于不兼容CSS2.1的瀏覽器來說就是無效的。

CSS樣式優先級

行內樣式>內部樣式表>外部樣式表
就近原則：越接近標簽的樣式優先級越高

【學員練習】使用標題標簽和段落標簽制作李白的詩《望廬山瀑布》，詩正文字體顏色為綠色，字體大小為14p

在這里插入圖片描述

1.5、CSS基本選擇器

標簽選擇器 HTML標簽作為標簽選擇器的名稱 <h1>…<h6>、<p>、<img/>

在這里插入圖片描述

類選擇器一些特殊的實現效果，單純使用標簽選擇器不能實現，從而引出類選擇器

在這里插入圖片描述

ID選擇器 ID選擇器的名稱就是HTML中標簽的ID名稱，ID全局唯一

在這里插入圖片描述

小結

標簽選擇器直接應用于HTML標簽
類選擇器可在頁面中多次使用
ID選擇器在同一個頁面中只能使用一次

基本選擇器的優先級

ID選擇器>類選擇器>標簽選擇

標簽選擇器是否也遵循“就近原則”？ 不遵循，無論是哪種方式引入CSS樣式，一般都遵循ID選擇器 > class類選擇器 > 標簽選擇器的優先級

1.6、CSS高級選擇器

1、層次選擇器

在這里插入圖片描述

后代選擇器 body p{ background: red; }

在這里插入圖片描述

后代選擇器兩個選擇符之間必須要以空格隔開，中間不能有任何其他的符號插入

子選擇器 body>p{ background: pink; }

在這里插入圖片描述

相鄰兄弟選擇器 .active+p { background: green; }

在這里插入圖片描述

通用兄弟選擇器 .active~p{ background: yellow; }

添加圖片注釋，不超過 140 字（可選）

在線咨詢

上一篇：網頁中實現文件上傳下載的三種解決方案(推薦)
下一篇：「網警提醒」網頁篡改需提防大意違法淚兩行

您的項目需求

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

整合營銷服務商

前端必學 40個精選案例實戰 一課吃透HTML5+C

端必學 40個精選案例實戰 一課吃透HTML5+CSS3+JS

"xiaのke"：sisuoit.com/4737.html

一、為什么要學 SVG ?

二、SVG 形狀元素

三、SVG形狀元素

、初識CSS3

1.1、什么是CSS

1.2、CSS的發展史

1.3、CSS的基本語法

1.4、引入CSS方式

1.5、CSS基本選擇器

1.6、CSS高級選擇器

1、層次選擇器

您的項目需求

前端必學 40個精選案例實戰一課吃透HTML5+C

端必學 40個精選案例實戰一課吃透HTML5+CSS3+JS