當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5从入门到精通笔记

發布時間：2023/12/20 HTML 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5从入门到精通笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

添加小程序，兌換各種視頻教程/數據資源。

第一章：HTML5新增語法，元素，屬性，事件

1.html5語法：

? ? ? ?1.1 html是不區分大小寫，也不區分大雙引號。

? ? ? ?1.2 對于具有boolean值得屬性，如disabled和readonly等，當值寫屬性不寫值，將屬性值設置為屬性名或設置為空字符串時，表示為true，如<input disabled /> ，<input disabled=''?/>，<input disabled="disabled" />。當不寫該屬性時，表示未faske，如<input />。

? ? ? ?1.3 html5簡化的模板：

<!DOCTYPE html> <meta charset="UTF-8"> <title>標題</title>

2. html5元素：參考http://www.w3school.com.cn/。

? ? ? 2.1 語義化結構元素：只有語義，沒有實際功能。

html5結構化元素

元素名稱	解釋
header	頁面的標題
footer	頁面的頁腳
section	頁面的內容區塊
article	頁面的文章文字內容部分
aside	頁面左右板塊
nav	頁面導航板塊
main	頁面主題內容板塊，與header，footer構成完整頁面

?? ? ? 2.2?功能元素：具有實際功能的元素標簽。

元素名稱	說明
hgroup	相當于div
video	視頻
audio	音頻
embed	用于插入多媒體，格式包括midi，wav，aiff，au，mp3
mark	黃色高亮背景，相當于帶黃色背景的span標簽。如<mark>你好</mark>? ?,顯示為??
dialog	對話框或窗口，<dialog open>對話黃</dialog>顯示為
datalist	下拉列表 <datalist id="list3"><option>下拉列表1</option><option>下拉列表2</option> </datalist> <input type="text"? list="list3" /> ?
canvas	繪圖
progress	進度條 <progress value="0.7"></progress>? value 范圍0~1，，<progress ></progress> 不寫value表示藍色部分來回擺動動態的進度條。
meter	刻度尺，用于標識一個值所處范圍,不可接受(紅色),可以接受(黃色),非常優秀(綠色);

?? ? ? 2.3?表單元素：即input的type類型：email;url;number;tel;search;range;color;date;month;week.....

3. HTML5屬性：

? ? ? ?3.1 表單屬性：?

? ? ? ? ? ? ? ? 1).placeholder：占位符?<input type="text"placeholder="請輸入用戶名" />

?? ???????? ??? 2).autofocus：自動獲取焦點 type="text"<input autofocus>;

?? ???????? ????3).multiple：允許輸入框中出現多個輸入(用逗號分隔);?<input type="email" multiple />

?? ???????? ????4).form：用于把輸入域放在FORM外部;

???? ?????????????????? ?<form id="f4"></form>

???? ?????????????????? ?<input type="" form="f4" />? ? ? ? ? ? ? ? ? ?

??? ??????????? 5).required：必填項,內容不能為空? <input required>;

??? ??????????? 6).maxlength：字符中最大長度;

??? ??????????? 7).minlength：字符串最小長度;

??? ??????????? 8).max：輸入框允許輸入的數字最大值;

??? ??????????? 9).min：輸入框允許輸入的數字最小值;

??? ??????????? 10).pattern：指定必需符合正則表達式;

??????????? ??? 11).autocomplete="on/off"：表示開啟或關閉，用戶輸入后自動保存下次在輸入時呈現歷史輸入記錄。

? ? ? ?3.2?其他屬性：?

? ? ? ? ? ? ? ? 1).script的async屬性：定義腳本是否異步執行。

4. HTML全局屬性：即可以用戶任意的html元素標簽的屬性。

全局屬性	說明
contentEditable	該標簽下所有文本內容是否可在線編輯，所有瀏覽器都支持。 <ul contenteditable="true"><li>內容可以在線編輯1</li><li>內容可以在線編輯2</li> </ul> ?
contextmenu	鼠標右鍵時，列表顯示菜單。目前只有firefox支持。 <div contextmenu="mymenu"><menu id="mymenu"><menuitem label="右鍵分享"></menuitem></menu> </div> ?
data-*	自定義屬性名/值，所有瀏覽器都支持。<div data-index="1"></div>
hidden	除了IE外，都支持，標簽是否隱藏? < div hidden></div>

5. HTML5事件：

? ? ?? 5.1?window事件：即應用到body標簽上的事件。

事件名稱	說明
onafterprint	body文檔被打印之后觸發
onbeforerprint	body文檔被打印之前觸發
onbeforeunload	body文檔被卸載之前觸發
onoffline	文檔離線運行時觸發
ononkue	文檔上線運行時觸發
onpagehide	窗口隱藏時觸發
onpageshow	窗口顯示時觸發
onresize	窗口大小改變時觸發
onstorage	web storage區域更新后觸發
onundo	文檔運行undo時觸發
onerror	文檔運行錯誤時觸發
onhaschange	文檔改變時觸發
onmessage	在消息被觸發時觸發
onpopstate	窗口歷史記錄改變時觸發

? ? ?? 5.2?form事件：即應用到form標簽上的事件。

事件名稱	說明
oncontextmenu	當上下文菜單被觸發時觸發，即右鍵菜單顯示時觸發
onformchange	表單改變時觸發
onforminput	表單獲得用戶輸入時觸發
oninput	input元素獲得用戶輸入時觸發
oninvalid	元素無效時觸發

? ? ?? 5.3?mouse事件：即鼠標事件。

事件名稱	說明
ondrag	元素被拖動事件
ondragend	元素被拖動結束時事件
onmousewheel	鼠標滾輪滾動時事件
onscroll	元素滾動條滾動時事件
ondragenter	元素拖動進入有效區域時觸發
ondragleave	元素拖動離開有效區域時觸發
ondragover	元素在有效區域上拖動時觸發
ondragstart	元素開始拖動時觸發
ondrop	元素拖動松開時觸發

? ? ?? 5.4?media事件：即audio,video,img,embed,object標簽觸發的事件。

第二章：HTML5的表單元素及屬性

1.html5的input的type類型：

input的類型

代碼

說明

文本框

可輸入數字，字母等。

單選框

<input type="radio">男

若干種選其一

復選框

<input type="checkbox">男

可多選

下拉列表

下拉選中

密碼框

*****

提交按鈕

提交按鈕

點擊按鈕

點擊按鈕

圖片按鈕

隱藏域

隱藏

重復按鈕

清空表單所有數據

文件夾

上傳文件

email類型

驗證輸入框是否包括@

url類型

驗證是否是有效網址

number類型

驗證是否是數字，常與max,min,value,step連用

range類型

滑塊，常與max,min,value,step連用

sea類型eix

firefox不支持，搜索，自動可清空的x，

tel類型

color類型

日期時間類型

類型	代碼	說明
date	<input type="date" />	選取年月日，如
month	<input type="month" />	選取年月，如
week	<input type="week" />	選取軸和年，如
time	<input type="time" />	選取時和分，如
datetime	<input type="datetime" />	選取UTC年月日，如
datatime-local	<input type="datatime-local" />	選取本地時間，如

2.html5的input的屬性：

屬性	代碼	數碼
autocomplete	<input type="text" autocomplete="on">	下次輸入相同內容，瀏覽器是否自動完成輸入內容
autofocus	<input type="text" autofocus="autofocus">	是否自動獲得焦點

第三章：HTML5繪圖

1. 繪制圖形的基本步驟：目前只有IE7及以下的IE瀏覽器不支持canvas。

? ? ?1.1 定義canvas標簽的id值：canvas默認是300*150的寬高。

<canvas id="mycanvas" width="200" height="100">您的瀏覽器不支持canvas，請更換瀏覽器！</canvas>

? ? ?1.2 js通過canvas的id獲取canvas標簽對象：

var canvas=document.getElementById("mycanvas")

? ? ?1.3 js獲取2d或者3d畫筆：

var ctx=canvas.getContext("2d")

? ? ?1.4 繪制圖形：

? ? ? ? ? ? 1.4.1 繪制路徑：如直線或圓，三角形等。

ctx.beginPath();??? ??? //開始一條新路徑。 ctx.closePath();???? ?? //閉合當前路徑。即當前路徑到開始路徑的連線。 ctx.moveTo(x,y);??? ??? //光標移到指定的起點。 ctx.lineTo(x,y);? ????//從指定起點到當前點畫一條直線。然后光標也開始移動到此。 ctx.arc(cx,cy,r,start,end,wise); ??? //繪制圓拱路徑。Start/end=n*Math.PI/180，弧度表示。 //cx,cy?圓心坐標。r，半徑。start，開始角度（弧度）。end，結束角度（弧度）。 //wise，可選參數，true為逆時針,false為順時針，默認true。start=0,end=Math.PI*2時，是繪制圓形圖形。 ctx.arcTo(x1,y1,x2,y2,r);? //繪制曲線，表示起點/終點位置和弧半徑r； ctx.fill();???????????? //填充。 ctx.stroke();??????????? //描邊。

案例：繪制復制的路徑圖形如下：

<body ><canvas id="mycanvas" width="300" height="300">不支持canvas</canvas> </body> <script type="text/javascript">var canvas= document.getElementById("mycanvas")var ctx=canvas.getContext("2d")ctx.beginPath()ctx.fillStyle="rgb(100,255,100)"ctx.strokeStyle="rgb(0,0,100)"var x=Math.sin(0)var y=Math.cos(0)var dig=Math.PI/15*11for(var i=0;i<30;i++){var x=Math.sin(i*dig)var y=Math.cos(i*dig)ctx.lineTo(150+x*100,150+y*100)}ctx.closePath()ctx.fill()ctx.stroke() </script>

? ? ? ? ? ? 1.4.2?繪制矩形：

ctx.lineWidth = 1????? //邊框寬度(描邊寬度)。 ctx.fillStyle = "#f00"??? //填充樣式。 ctx.strokeStyle="#fff";? //描邊樣式(邊框顏色) 。 ctx.fillRect(x,y,w,h)???? //填充一個矩形。x,y為矩形的左上角開始的相對于畫布canvas左上角的坐標。 ctx.strokeRect(x,y,w,h)? //描邊一個矩形。 ctx.clearRect(x,y,w,h);?? //清除一個矩形范圍內所有元素。

? ? ? ? ? ? 1.4.3?繪制曲線：

? ? ? ? ? ? ? ? ? ? ? （1）簡單曲線：ctx.arcTo(x1,y1,x2,y2,r)。曲線起點x1,y1坐標，終點x2,y2坐標。

<body ><canvas id="mycanvas" width="300" height="300">不支持canvas</canvas> </body> <script type="text/javascript">var canvas= document.getElementById("mycanvas")var ctx=canvas.getContext("2d")ctx.beginPath()ctx.moveTo(20,20)ctx.lineTo(20,20)ctx.arcTo(150,20,150,70,50)ctx.lineTo(150,120)ctx.stroke() </script>

? ? ? ? ? ? ? ? ? ? ? （2）貝塞爾二次方曲線：ctx.quadraticCurveTo(cpx,cpy,x,y)。控制點坐標(cpx,cpy)，終點坐標(x,y)。

ctx.beginPath() ctx.moveTo(20,20) //確定開始點 ctx.quadraticCurveTo(20,100,20,170) //定義控制點 ctx.quadraticCurveTo(20,100,200,20) //定義結束點 ctx.stroke() //描邊

? ? ? ? ? ? ? ? ? ? ? ?（3）貝塞爾三次方曲線：ctx.bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)。控制點1坐標(cpx1,cpy1)，控制點2坐標(cpx2,cpy2)，終點坐標(x,y)。

ctx.beginPath() ctx.moveTo(20,20) //確定開始點 ctx.bezierCurveTo(20,100,20,170) //定義控制點1 ctx.bezierCurveTo(20,100,200,20) //定義控制點2 ctx.bezierCurveTo(20,100,200,20) //定義結束點 ctx.stroke() //描邊

? ? ? ? ? ? 1.4.4?設置圖形樣式：

? ? ? ? ? ? ? ? ? 1.4.4.1 設置線型：包括線型的粗細，端點樣式，兩線段連接處樣式，線型交點。

? ? ? ? ? ? ? ? ? ? ? ? ?ctx.lineWidth=1：設置線寬為1，默認值為1。

? ? ? ? ? ? ? ? ? ? ? ? ?ctx.lineCap=butt：設置端點樣式，包括butt,round,square。默認為butt。

? ? ? ? ? ? ? ? ? ? ? ? ?ctx.lineJoin=round：設置兩條線段連接處的樣式，包括round,bevel,miter。

? ? ? ? ? ? ? ? ? ? ? ? ?ctx.miterLimit=10：設置兩線段連接處交點的繪制方式，默認是10.

? ? ? ? ? ? ? ? ? 1.4.4.2?繪制線型漸變：ctx.createLinearGradient(x0,y0,x1,y1).addColorStop(stop,color)，漸變開始坐標（x0,y0），結束坐標（x1,y1）。stop是0-1之間的位置值，color是接收位置顯示的顏色。案例如下：

<body ><canvas id="mycanvas" width="300" height="300">不支持canvas</canvas> </body> <script type="text/javascript">var canvas= document.getElementById("mycanvas")var ctx=canvas.getContext("2d")var line=ctx.createLinearGradient(0,0,0,200)line.addColorStop(0,"#ff0000")line.addColorStop(1/3,"#ffff00")line.addColorStop(2/3,"#0000ff")line.addColorStop(1,"#ff0000")ctx.fillStyle=linectx.strokeStyle=linectx.fillRect(10,10,200,200) </script>

? ? ? ? ? ? ? ? ? 1.4.4.3?繪制徑向漸變：ctx.createRadialGradient(x0,y0,r0,x1,y1,r1).addColorStop(stop,color)。開始圓的坐標(x0,y0)，半徑r0,。結束圓的坐標(x1,y1)，半徑r1。stop是0-1之間的位置值，color是接收位置顯示的顏色。案例如下：

<body ><canvas id="mycanvas" width="300" height="300">不支持canvas</canvas> </body> <script type="text/javascript">var canvas= document.getElementById("mycanvas")var ctx=canvas.getContext("2d")var line=ctx.createRadialGradient(55,55,20,100,100,90)line.addColorStop(0,"#ff0000")line.addColorStop(1/3,"#ffff00")line.addColorStop(2/3,"#0000ff")line.addColorStop(1,"#ff0000")ctx.fillStyle=line ctx.fillRect(10,10,200,200) </script>

? ? ? ? ? ? ? ? ? 1.4.4.4?繪制圖案：ctx.createPattern(image,r)。image表示可繪制的圖片，畫布或視頻元素。r表示重復的方向，包括repeat(水平和垂直方向都重復)，repeat-x、repeat-y、no-repeat（不重復）。案例如下：

<body ><canvas id="mycanvas" width="300" height="300">不支持canvas</canvas> </body> <script type="text/javascript">var canvas= document.getElementById("mycanvas")var ctx=canvas.getContext("2d")var img=new Image()img.src="2.png"img.onload=function(){var parn=ctx.createPattern(img,'no-repeat')ctx.fillStyle=parnctx.fillRect(0,0,600,600)} </script>

? ? ? ? ? ? ? ? ? 1.4.4.5?設置不透明度：ctx.rgba(R,G,B,A)。案例如下：

<body ><canvas id="mycanvas" width="300" height="300">不支持canvas</canvas> </body> <script type="text/javascript">var canvas= document.getElementById("mycanvas")var ctx=canvas.getContext("2d")ctx.translate(200,20)for(var i=1;i<50;i++){ctx.save()ctx.transform(0.95,0,0,0.95,30,30)ctx.rotate(Math.PI/12)ctx.beginPath()ctx.fillStyle='rgba(255,0,0,'+(1-(i+10)/40)+')'ctx.arc(0,0,50,0,Math.PI*2,true)ctx.fill()} </script>

? ? ? ? ? ? ? ? ? 1.4.4.6?設置陰影：案例如下：

<body ><canvas id="mycanvas" width="300" height="300">不支持canvas</canvas> </body> <script type="text/javascript">var canvas= document.getElementById("mycanvas")var ctx=canvas.getContext("2d")ctx.shadowOffsetX=13 //陰影x偏移ctx.shadowOffsetY=3 //陰影Y偏移ctx.shadowBlur=2 //陰影大小ctx.shadowColor='rgba(0,0,0,0.9)' //陰影顏色ctx.fillStyle="#33ccff"ctx.fillRect(20,20,300,60)ctx.fill()ctx.font="45px 黑體"ctx.fillStyle="white"ctx.fillText("HTML5",30,64) </script>

? ? ? ? ? ? 1.4.5?操作圖形：

? ? ? ? ? ? ? ? ?1.4.5.1 保存和恢復canvas狀態：ctx.save()保存當前狀態。ctx.restore()從上一個保存狀態中再次取出。

? ? ? ? ? ? ? ? ?1.4.5.2?清除畫布：ctx.clearReact(x,y,w,h)清除以(x,y為坐標)，寬高為w和h的矩形畫布。

? ? ? ? ? ? ? ? ?1.4.5.3?移動畫筆：ctx.translate(x,y) 將畫布移動到(x,y)坐標處。案例如下：

<body ><canvas id="mycanvas" width="700" height="200">不支持canvas</canvas> </body> <script type="text/javascript">function drawTop(ctx,fillStyle){ //繪制傘的頂部ctx.fillStyle=fillStylectx.beginPath()ctx.arc(0,0,30,0,Math.PI,true)ctx.closePath()ctx.fill()}function drawBottom(ctx){ //繪制傘底部把手ctx.save()ctx.fillStyle="blue"ctx.fillRect(-1.5,0,1.5,40)ctx.beginPath()ctx.strokeStyle="blue"ctx.arc(-5,40,4,Math.PI,Math.PI*2,true)ctx.stroke()ctx.closePath()ctx.restore()}var canvas= document.getElementById("mycanvas")var ctx=canvas.getContext("2d")ctx.translate(80,80)for(var i=1;i<10;i++){ctx.save()ctx.translate(60*i,0)drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)")drawBottom(ctx)ctx.restore()} </script>

? ? ? ? ? ? ? ? ?1.4.5.4?旋轉畫筆：ctx.rotate(angle) 將畫布旋轉angle度。案例如下：

<body ><canvas id="mycanvas" width="400" height="300">不支持canvas</canvas> </body> <script type="text/javascript">function drawTop(ctx,fillStyle){ //繪制傘的頂部ctx.fillStyle=fillStylectx.beginPath()ctx.arc(0,0,30,0,Math.PI,true)ctx.closePath()ctx.fill()}function drawBottom(ctx){ //繪制傘底部把手ctx.save()ctx.fillStyle="blue"ctx.fillRect(-1.5,0,1.5,40)ctx.beginPath()ctx.strokeStyle="blue"ctx.arc(-5,40,4,Math.PI,Math.PI*2,true)ctx.stroke()ctx.closePath()ctx.restore()}var canvas= document.getElementById("mycanvas")var ctx=canvas.getContext("2d")ctx.translate(80,80)for(var i=1;i<10;i++){ctx.save()ctx.rotate(Math.PI*(2/4+i/4))ctx.translate(0,-100)drawTop(ctx,"rgb("+(30*i)+","+(255-30*i)+",255)")drawBottom(ctx)ctx.restore()} </script>

? ? ? ? ? ? ? ? ?1.4.5.5 縮放圖形：ctx.scale(x,y) 將畫布x軸縮放x，y軸縮放y。案例如下：

<body ><canvas id="mycanvas" width="400" height="300">不支持canvas</canvas> </body> <script type="text/javascript">var canvas= document.getElementById("mycanvas")var ctx=canvas.getContext("2d")ctx.translate(200,20)for(var i=1;i<80;i++){ctx.save() ctx.translate(30,30)ctx.scale(0.95,0.95)ctx.rotate(Math.PI/12)ctx.beginPath()ctx.fillStyle="red"ctx.globalAlpha="0.4"ctx.arc(0,0,50,0,Math.PI*2,true)ctx.closePath()ctx.fill()} </script>

? ? ? ? ? ? ? ? ?1.4.5.6?變換矩陣：ctx.transform(a,b,c,d,e,f)，即縮放，移動，旋轉，傾斜。?a表示水平縮放比例，b表示水平傾斜，c表示垂直傾斜，d表示垂直縮放，e表示水平移動,f表示垂直移動。如cxt.transfomr(0.95,0,0,0.95,30,30)。

? ? ? ? ? ? ? ? ?1.4.5.7?組合圖形：ctx.globalCompositeOperation="source-over"，當2個或以上圖形存在重疊區域時，重疊區域的樣式，

? ? ? ? ? ? ? ? ?1.4.5.8?裁切路徑：ctx.clip()，從原始畫布上裁切任意形狀和尺寸。沒有被裁切的部位會被隱藏。

? ? ? ? ? ? 1.4.6 繪制文本：

ctx.textBaseline = top/hanging/middle/alphabetic/ideographic/bottom;???// 基線。即垂直方向上中下對齊方式 ctx.font = "12px sans-serif";?? //文本大小與字體。 ctx.textAlign=start/center/end/left/right; //文字的對齊方式。 ctx.fillText(str,x,y[,maxWidth]);?? //填充文本(實心)。x,y表示開始坐標和最大文本寬度px計算。 ctx.strokeText(str,x,y[,maxWidth]);??????? //空心文本。默認黑色字體。 ctx.measureText(str);???????? //返回文本寬度,方法返回對象如{width:200}。

? ? ? ? ? ? 1.4.7?繪制圖像：? Canvas屬于客戶端技術，圖片在服務器中，所以瀏覽器載圖片，等待圖片下載完成，則繪制圖像。可以通過頁面圖像id獲得圖像元素，也可用new Image新建一個圖像元素。

var img = new Image();?? ?? //創建圖片對象。 img.src = "img/p3.png";? ?? //發送異步請求下載圖片。 img.onload = function(){? ? //圖片下載完成(加載)。ctx.drawImage(img,x,y);? //繪制原始大小圖片，x,y為啟動繪制坐標。ctx.drawImage(img,x,y,w,h);//繪制拉伸圖片。W.h為繪制的圖像的寬高。ctx.drawImage(img,sx,sy,swidth,sheight,x,y[,width,height]); //sx,sy表示開始剪切圖片的開始位置，swidth,sheight表示被剪切圖像的寬高，x,y表示圖像在畫布的坐標位置，widht,height表示畫出來的原圖像的寬高，可對原圖寬高拉伸。ctx.createPattern(image,type);//表示圖片的平鋪方式，type的取值有 repeat,no-repeat,repeat-x,repeat-y; };

? ? ? ? ? ? 1.4.8?path2D對象：??

//繪制一個圓 var circle=new Path2D(); //創建一個空Path2D對象，var circle=new Path2D(path)復制一個Path2D對象。 circle.arc(50,50,50,0,2*Math,PI) ctx.stroke(circle)

第四章：SVG

1. svg定義：在網頁中繪制復雜的圖形。位圖——由像素組成，一個點就是一個像素，識別顏色較多，放大到一定程度時，會失真。矢量圖——以線和色塊為主，識別顏色較少。任意放大不會失真。svg的應用興趣圖譜：

2. HTML中使用svg：svg是基于xml的技術。

? ? 2.1 img標簽引入1.svg文件：<img src="1.svg"/>。

? ? 2.2 div標簽引入1.svg文件：<div? style="background:url(1.svg) no-repeat;width:200px;height:200px"></div>

? ? 2.3 iframe標簽引入1.svg文件：<iframe src="1.svg"></iframe>

? ? 2.4 HTML中直接嵌入svg代碼：

? ? 2.5?鏈接到1.svg文件：<a href="1.svg"></a>

3. svg中的基本圖形：矩形，圓形，橢圓，多邊形，直線，折線，路徑，文本，線框樣式，svg濾鏡，模糊效果，陰影效果。線型漸變，徑向漸變，圖片。<g></g>標簽可以包裹以上的圖形，并設置共同屬性樣式。

? ? 3.1 圓形：

<circle cx="100" cy="50" r="40" fill="red" stroke="black" stroke-width="2"></circle> <circle cx="100" cy="50" r="40" style="fill:red; stroke:black; stroke-width:2;cursor:pointer"></circle>

? ? 3.2 矩形：

<rect width="300" height="100" style="fill:red;stroke: black;stroke-width: 5;" rx='10' ry='10' x="20" y="20"></rect>

? ? 3.3 橢圓：

<ellipse cx="150" cy="80" rx="100" ry="50" style="fill:red;stroke:purple;stroke-width:2 ;"></ellipse>

? ? 3.4 多邊形：

<polygon points="200,10 250,190 160,210" style="fill:red;stroke: purple;stroke-width: 2;"></polygon>

? ? 3.5?直線：

<line x1="10" y1="20" x2="50" y2="100" style="stroke: purple;stroke-width: 2;"></line>

? ? 3.6 折線：

<polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke: purple;stroke-width: 2;"></polyline>

? ? 3.7?路徑：

<path d="M150 0L75 200 L225 200 Z"></path>

? ? 3.8 文本：

<text x="0" y="15" fill="red" transform="rotate(30 20,40)" font-size="20" text-anchor="middle">第一行文本<tspan x="10" y="45">第二行文本</tspan> </text>

? ? 3.9?線框樣式：即圖形的屬性。

? ? ? ? ? 3.9.1 stroke：描邊顏色。??

? ? ? ? ? 3.9.2?stroke-width：描邊邊寬。??

? ? ? ? ? 3.9.3?stroke-linecap：線段或路徑斷點樣式? 。包括butt（平直）,round（圓形）,square（正方形）,inherit（繼承）。

? ? 3.10?svg濾鏡：略。

? ? 3.11?陰影效果：略。

? ? 3.12 線型漸變：略。

? ? 3.13?徑向漸變：略。

? ? 3.14?圖片：

<image x="10" y="20" width="50" height="50" xlink:href="1.png"></image>

總結

以上是生活随笔為你收集整理的HTML5从入门到精通笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：【推荐】前沿智能视频分析深度学习算法框架
下一篇： HTML5开发从入门到精通学习路线图