00
img 圖片標籤
HTML img 圖片標籤
<img src="圖片 URL" alt="圖片文字" title="顯示文字" border="圖片邊框">
| 參數 | 用法說明 |
| src | 圖片網址，必要項目。 |
| border | 圖片邊框，例如 border="0" 代表邊框為 0。 |
| alt | 圖片替代文字，當圖片顯示失效，則顯示 alt 文字。 |
| title | 圖片文字標示，當滑鼠移經圖片，自動顯示的文字。 |
| width | 圖片寬度，例如 width="120px" 代表寬度限制在 120px。 |
| height | 圖片高度，例如 height="100px" 代表高度限制在 100px。 |
width:auto 自動判斷圖片寬度。
<img style="width:auto;" src="https://xxx.jpg" />
<img style="width:auto;" src="https://xxx.jpg" />
width:300px : 將圖片寬度設為 300px。
<img style="width:300px;" src="https://xxx.jpg" />
<img style="width:300px;" src="https://xxx.jpg" />
<img src="https://xxx.jpg" style="height: 100px; width: 100px;" />
height: inherit ; width: inherit; 將圖設為父層的寬度 高度屬性值。
<div style="height: 40px; width: 40px;">
<img src="https://xxx.jpg" style="height: inherit; width: inherit;" /></div>
<div style="height: 40px; width: 40px;">
<img src="https://xxx.jpg" style="height: inherit; width: inherit;" /></div>
max-width 及 max-height 設為 100px ， 將圖 寬度/高度 有幾大都不能超出 100px。
<img src="https://xxx.jpg" style="height: 400px; width: 400px;max-width:100px;max-height:100px;" />
<img src="https://xxx.jpg" style="height: 400px; width: 400px;max-width:100px;max-height:100px;" />
height: 50% width: 50%; 設定跟父元素的 50% 。
<div style="height: 200px; width: 200px;">
<img src="https://xxx.jpg" style="height: 50%; width: 50%;" /></div>
<div style="height: 200px; width: 200px;">
<img src="https://xxx.jpg" style="height: 50%; width: 50%;" /></div>
box-shadow: 15px 15px 10px 0px rgba(20% , 20% , 40% , 0.6 ) : 設定圖片陰影。
<img style="box-shadow: 15px 15px 10px 0px rgba(20% , 20% , 40% , 0.6);" src="https://xxx.jpg" width="200px" />
<img style="box-shadow: 15px 15px 10px 0px rgba(20% , 20% , 40% , 0.6);" src="https://xxx.jpg" width="200px" />
#imgT 為這個 div id ，加入下列 CCS 後出現背景圖案。
<style>
#imgT {background-image: url("https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg");
-moz-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
-o-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
-webkit-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
background-position: center; /*置中*/
background-repeat: no-repeat; /*背景圖案不重複*/
border:2px solid #000000; /*邊框樣式與顏色*/
background-color:#CCCCCC; /*背景的顏色*/}
</style>
<style>
#imgT {background-image: url("https://9to5google.com/wp-content/uploads/sites/4/2019/01/google_logo_1.jpg");
-moz-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
-o-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
-webkit-background-size: contain; /*底圖就會依照區塊的大小，等比縮放到區塊中*/
background-position: center; /*置中*/
background-repeat: no-repeat; /*背景圖案不重複*/
border:2px solid #000000; /*邊框樣式與顏色*/
background-color:#CCCCCC; /*背景的顏色*/}
</style>
svg
circle=圓形 cx=X座標 cy=Y座標 r=圓形半徑 fill=物件颜色 stroke=邊框颜色 stroke-width=邊框寬度
<svg width="130%" height="100px">
<circle cx="60" cy="50" r="30" fill="blue" />
</svg>
<circle cx="60" cy="50" r="30" fill="blue" />
</svg>
<svg width="100px" height="100px">
<circle cx="60" cy="50" r="30" stroke="black" stroke-width="5" fill="red"/>
</svg>>
<circle cx="60" cy="50" r="30" stroke="black" stroke-width="5" fill="red"/>
</svg>>
<svg width="100px" height="120px">
<circle cx="60" cy="50" r="30" stroke="red" stroke-width="7" fill="none"/>
</svg>
<circle cx="60" cy="50" r="30" stroke="red" stroke-width="7" fill="none"/>
</svg>
<svg width="130px" height="120px">
<ellipse cx="60"cy="50" rx="50" ry="20" fill="yellow" />
</svg>
<ellipse cx="60"cy="50" rx="50" ry="20" fill="yellow" />
</svg>
rect=矩形 x=X座標 y=Y座標 rx=X圓角 ry=Y圓角 width=矩形寬度 height=矩形高度 fill=物件颜色 stroke=邊框颜色 stroke-width=邊框寬度
<svg width="100%" height="100%">
<rect x="20" y="35" width="50" height="50" stroke="black"
fill="yellow" />
</svg>
<rect x="20" y="35" width="50" height="50" stroke="black"
fill="yellow" />
</svg>
<svg width="100%" height="100%">
<rect x="20" y="35" width="50" height="50" stroke="red"
fill="blue" />
</svg>
<rect x="20" y="35" width="50" height="50" stroke="red"
fill="blue" />
</svg>
<svg width="100%" height="100%">
<rect x="20" y="35" width="80" height="50" stroke="red"
stroke-width="3" />
</svg>
<rect x="20" y="35" width="80" height="50" stroke="red"
stroke-width="3" />
</svg>
<svg width="100%" height="100%">
<rect x="20" y="35" rx="15" ry="15" width="100"
height="50"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
<rect x="20" y="35" rx="15" ry="15" width="100"
height="50"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
<svg width="100%" height="100%">
<rect x="20" y="35" rx="50" ry="50" width="100"
height="50"
style="fill:none;stroke:black;stroke-width:5;" />
</svg>
<rect x="20" y="35" rx="50" ry="50" width="100"
height="50"
style="fill:none;stroke:black;stroke-width:5;" />
</svg>
polyline=連接的直線 fill=物件颜色 stroke=邊框颜色 stroke-width=邊框寬度
points="x1 y1,x2,y2,x3 y3,....
points="x1 y1,x2,y2,x3 y3,....
<svg width="150px" height="150px">
<polyline fill="yellow" stroke="red" stroke-width="3"
points="5 30, 30 60,60 5,90 60,120 30,120 100,
5 100,5 30" />
</svg>
<polyline fill="yellow" stroke="red" stroke-width="3"
points="5 30, 30 60,60 5,90 60,120 30,120 100,
5 100,5 30" />
</svg>
<svg style="font-size: 20px ;">
<text x="5" y="50" fill="red" transform="rotate(30 20,40)">html.ug5g.com</text>
</svg>
<text x="5" y="50" fill="red" transform="rotate(30 20,40)">html.ug5g.com</text>
</svg>
<svg style="font-size: 20px ;">
<defs><path id="path1" d="M5,8 a1,1 0 0,0 100,0" /></defs>
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">ug5g.com</textPath>
</text>
</svg>
<defs><path id="path1" d="M5,8 a1,1 0 0,0 100,0" /></defs>
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">ug5g.com</textPath>
</text>
</svg>
<svg style="font-size: 20px ;">
<text x="10" y="20" style="fill:red;">https:
<tspan x="10" y="45">html.ug5g</tspan>
<tspan x="10" y="70">.com</tspan>
</text>
</svg>
<text x="10" y="20" style="fill:red;">https:
<tspan x="10" y="45">html.ug5g</tspan>
<tspan x="10" y="70">.com</tspan>
</text>
</svg>
00
<frameset > <frame >
HTML <frameset > <frame > 標簽
| 屬性 | 值 | 描述 |
|---|---|---|
| frameborder | 0 / 1 | 規定是否顯示框架周圍的邊框。 |
| longdesc | URL | 規定一個包含有關框架內容的長描述的頁面。 |
| marginheight | pixels | 定義框架的上方和下方的邊距。 |
| marginwidth | pixels | 定義框架的左側和右側的邊距。 |
| name | name | 規定框架的名稱。 |
| noresize | noresize | 規定無法調整框架的大小。 |
| scrolling | yes / no / auto | 規定是否在框架中顯示滾動條。 |
| src | URL | 規定在框架中顯示的文檔的 URL。 |
| cols | pixels / % / * | 設定框架集中列的數目和尺寸。 |
| rows | pixels / % / * | 設定框架集中行的數目和尺寸。 |
00
HTML 標簽
HTML fieldset 標簽
<fieldset> 標簽會在相關表單元素周圍繪制邊框
<fieldset>
<legend>黃金 ＥＴＦ</legend><pre>
02840.HK SPDR 金 83168.HK 恆生人幣金ETF
03081.HK 價值黃金 09081.HK 價值黃金－U
83081.HK 價值黃金－R
</pre></fieldset>
<fieldset>
<legend style="text-align: center;color:red" >黃金 ＥＴＦ</legend><pre>
02840.HK SPDR 金 83168.HK 恆生人幣金ETF
03081.HK 價值黃金 09081.HK 價值黃金－U
83081.HK 價值黃金－R
</pre></fieldset>
訂閱：
文章 (Atom)