整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
ext-shadow
text-shadow支持文字陰影功能，簡單利用CSS3屬性增加文字的質(zhì)感而不須使用任何圖片
語法： text-shadow: h-shadow v-shadow blur color;
h-shadow 必需。水平陰影的位置。允許負(fù)值。(正右負(fù)左)
v-shadow 必需。垂直陰影的位置。允許負(fù)值。(正下負(fù)上)
blur 可選。模糊的距離。
color 可選。陰影的顏色。
text-shadow: 3px 3px 3px #999999;所有主流瀏覽器都支持 text-shadow 屬性。
注釋：Internet Explorer 9 以及更早版本的瀏覽器不支持 text-shadow 屬性。(IE最新的版本IE11)
/*text-shadow: 水平偏移量(正右負(fù)左) 垂直偏移量(正下負(fù)上) 陰影模糊半徑 陰影顏色;*/
/*基本使用*/
text-shadow: -10px -10px 1px orange;
/*類似發(fā)光字*/
text-shadow: 0 0 5px red;
/*多重陰影*/
text-shadow: 0 0 10px red,0 0 30px green,0 0 50px orange;
/*取消陰影*/
text-shadow: none;background-image ：設(shè)置元素的背景圖像。
CSS3支持多重背景圖,只要加上一個(gè)url指定圖片路徑,并用逗號(hào)(,)將兩組url分隔就可以了
background-image:url(a.jpg),url(b.jpg);background-size: 設(shè)置背景尺寸
background-size是CSS3新增的屬性,以前的背景圖無法重設(shè)大小,這個(gè)新屬性能夠讓我們?cè)O(shè)置背景圖的尺寸。
語法:
background-size: length|percentage|cover|contain;
background:60px 80pxcover:把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無法顯示在背景定位區(qū)域中。
contain 把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域。
box-shadow
box-shadow語法是為圖像制造影子，CSS3的box-shadow有點(diǎn)兒類似于text-shadow, 只不過box-shadow是給對(duì)象實(shí)現(xiàn)圖層陰影效果。
語法： box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平陰影的位置。允許負(fù)值。
v-shadow 必需。垂直陰影的位置。允許負(fù)值。
blur 可選。模糊距離。
spread 可選。陰影的尺寸。
color 可選。陰影的顏色。
inset 可選。將外部陰影 (outset) 改為內(nèi)部陰影, 默認(rèn)值: outset。
實(shí)例：
-moz-box-shadow: 10px 10px 15px 2px #666;
-webkit-box-shadow: 10px 10px 15px 2px #666;
-ms-box-shadow: 10px 10px 15px 2px #666;
-o-box-shadow: 10px 10px 15px 2px #666;
box-shadow: 10px 10px 15px 2px #666;目前大部分瀏覽器新版的主流瀏覽器已支持box-shadow語法，但由于CSS3還在規(guī)劃中、尚未定案，所以有些瀏覽器會(huì)使用自己的語法，
Firefox使用-moz-box-shadow, safari與chrome則使用-webkit-boxshadow。
IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 屬性。
/*box-shadow: 水平偏移量 垂直偏移量 陰影模糊半徑 陰影拓展半徑 顏色 投影方式(inset);*/
box-shadow: -10px 50px 1px 10px green;
box-shadow: -10px 50px 1px 10px green,5px -20px 5px 0px blue;border-radius
border-radius就是給圖像制造圓角。CSS2.0要做圓角，必須把圖像切成小塊，再用div將這些小塊圖像接回。
實(shí)例：
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 屬性。(IE9已支持)
border-radius:50% 圓形
/*左上角開始順時(shí)針旋轉(zhuǎn)： 水平彎曲程度/垂直彎曲程度*/
border-radius: 100px 20px 30px 40px/50px 60px 70px 80px;
border-radius: 10px 30px 50px 70px;/*上右下左*/
border-radius: 50px/100px;/*水平都是50px 垂直都是100px*/
border-radius: 50px;border-image花樣邊框
border-image可以做出頁面花邊的效果,語法如下
border-image:source slice width repeat;
source:指定圖片路徑(必填)
slice: 切出圖片使用的邊框線(必填)
width: 圖片的寬度(可省略)
repeat: 圖片填充方式(可省略),設(shè)置值有stretch、repeat和round
stretch: 把圖片拉伸到整個(gè)邊框區(qū)域
repeat：重復(fù)填充
round：重復(fù)填充并自動(dòng)調(diào)整圖片大小
border-image是CSS3的新增功能,目前IE和Firefox不支持,不推薦使用
border-collapse
為表格設(shè)置合并邊框模型：
table,td{
border-collapse:collapse; //邊框重疊
}separate 默認(rèn)值。邊框會(huì)被分開。不會(huì)忽略 border-spacing 和 empty-cells 屬性。
collapse 如果可能, 邊框會(huì)合并為一個(gè)單一的邊框。會(huì)忽略 border-spacing 和 empty-cells 屬性。
inherit 規(guī)定應(yīng)該從父元素繼承 border-collapse 屬性的值。
opacity
設(shè)置 div 元素的不透明級(jí)別：
div{
opacity:0.5; /* 取值范圍0-1 */
}
div{
opacity:0.5;
filter:Alpha(opacity=10); //IE8早期版本 取值范圍1-100
}text-overflow 屬性規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情。
clip 修剪文本。
ellipsis 顯示省略符號(hào)來代表被修剪的文本。
string 使用給定的字符串來代表被修剪的文本。
div.test{
text-overflow:ellipsis;
}實(shí)例: 在標(biāo)題欄中如何實(shí)現(xiàn), 當(dāng)標(biāo)題文本超長時(shí)，就會(huì)自動(dòng)截?cái)啵?/p>
這三條語句組合使用, 就可以對(duì)單行超長文本做截?cái)? 并且在截?cái)嗟牡胤阶詣?dòng)補(bǔ)充省略號(hào)。
數(shù)據(jù)分析中，將數(shù)據(jù)以表格的形式呈現(xiàn)出來是必不可少的環(huán)節(jié)，Pandas 是一個(gè)非常強(qiáng)大的數(shù)據(jù)分析庫，提供了很多方便的方法來處理和展示數(shù)據(jù)。今天，我們將學(xué)習(xí)如何使用 Pandas 自定義表格樣式并將其導(dǎo)出為 HTML 格式。
通過這種方式，我們可以更好地組織和展示數(shù)據(jù)，并在網(wǎng)頁上共享我們的分析結(jié)果，并且，掌握Pandas數(shù)據(jù)存儲(chǔ)和表格樣式自定義的方式，在日常工作過程中有更多應(yīng)用和實(shí)踐意義，將拓展我們的數(shù)據(jù)分析思路。
首先，導(dǎo)入pandas庫，并為其設(shè)置別名pd，使用pandas的read_excel函數(shù)讀取指定路徑下的Excel文件，并將其內(nèi)容存儲(chǔ)在DataFrame對(duì)象df中。
import pandas as pd
df=pd.read_excel(r'C:\Users\shangtianqiang\Desktop\2023年胡潤百富榜.xlsx')
#默認(rèn)顯示DataFrame的前五行。
df.head()df.info()顯示DataFrame的簡要信息，包括索引、列名、數(shù)據(jù)類型和每列的非空值數(shù)量，這里顯示該數(shù)據(jù)表含有1241行數(shù)據(jù)。
#數(shù)據(jù)預(yù)覽
df.info()使用iloc方法篩選DataFrame的前100行數(shù)據(jù)。
df=df.iloc[:100,:]#篩選前100行數(shù)據(jù)
df定義一個(gè)樣式對(duì)象style，該對(duì)象用于生成HTML的樣式，這里對(duì)篩選出來的前100行的數(shù)據(jù)進(jìn)行了樣式設(shè)置，它定義了一個(gè)居中的標(biāo)題（h1標(biāo)簽），一個(gè)表格（table標(biāo)簽），以及表格中的表頭（th標(biāo)簽）和單元格（td標(biāo)簽）。
# 定義CSS樣式，添加標(biāo)題“2023年胡潤百富榜”
style="""
<style>
h1 {
text-align: center;
font-size: 24px;
margin-bottom: 10px;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
<head><title>2023年胡潤百富榜</title></head>
<h1>2023年胡潤百富榜</h1>
""" 將DataFrame轉(zhuǎn)換為HTML代碼，并添加樣式，index=False來去除行索引 。
# 將DataFrame轉(zhuǎn)換為HTML代碼，并添加樣式
html=style + df.to_html(index=False) # 使用index=False來避免顯示行索引 將生成的HTML內(nèi)容寫入到名為'2023年胡潤百富榜.html'的文件中。
# 將HTML代碼寫入文件或打印到控制臺(tái)
with open('2023年胡潤百富榜.html', 'w') as file:
file.write(html) # 將HTML代碼寫入文件output.html完整版的代碼如下所示。
import pandas as pd
df=pd.read_excel(r'C:\Users\shangtianqiang\Desktop\2023年胡潤百富榜.xlsx')
df=df.iloc[:100,:]#篩選前100行數(shù)據(jù)
# 定義CSS樣式，添加標(biāo)題“2023年胡潤百富榜”
style="""
<style>
h1 {
text-align: center;
font-size: 24px;
margin-bottom: 10px;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
<head><title>2023年胡潤百富榜</title></head>
<h1>2023年胡潤百富榜</h1>
"""
# 將DataFrame轉(zhuǎn)換為HTML代碼，并添加樣式
html=style + df.to_html(index=False) # 使用index=False來避免顯示行索引
# 將HTML代碼寫入文件或打印到控制臺(tái)
with open('2023年胡潤百富榜.html', 'w') as file:
file.write(html) # 將HTML代碼寫入文件output.html導(dǎo)出的HTML表格樣式如下所示，整體圖表風(fēng)格較為簡潔。
html的格式數(shù)據(jù)也是數(shù)據(jù)存儲(chǔ)的一種方式，使用read_html命令可以將其很便捷地導(dǎo)入，從而進(jìn)行接下來的數(shù)據(jù)分析。
import pandas as pd
df_html=pd.read_html('2023年胡潤百富榜.html',encoding='gbk')[0]
df_html通過學(xué)習(xí)如何使用 Pandas 自定義表格樣式并將其導(dǎo)出為 HTML 格式，我們掌握了更豐富的數(shù)據(jù)處理和展示技巧，并且，還可以根據(jù)實(shí)際業(yè)務(wù)需求來自定義表格樣式，實(shí)現(xiàn)與他人共享數(shù)據(jù)的目的。
本文主要記錄常用的html標(biāo)簽使用說明，用起來的時(shí)候偶爾查查。
標(biāo)簽 | 英文全拼 | 作用 | 特點(diǎn) |
?<html></html>?? | html | 網(wǎng)頁的根標(biāo)簽 | 所有的標(biāo)簽都要寫在這一對(duì)根標(biāo)簽里面 |
??<head></head>?? | head | 網(wǎng)頁的頭標(biāo)簽 | 包括完檔的屬性和信息 |
??<body></body>?? | body | 網(wǎng)頁的主題 | 包含文檔的所有內(nèi)容 |
??<div></div>?? | division | 定義一個(gè)區(qū)域 | 瀏覽器通常會(huì)在??<div>??前后放置一個(gè)換行符 |
??<!-- 注釋 -->?? | - | 注釋 | 單標(biāo)簽 |
??<br>或<br/>?? | break | 換行 | 單標(biāo)簽，不會(huì)在其前后創(chuàng)建空白行 |
??<hr>或<hr/>?? | horizontal rule | 添加水平線 | 單標(biāo)簽 |
??<img src="">?? | image | 添加圖片 | 單標(biāo)簽 |
??<embed src="">?? | embed | 嵌入外部應(yīng)用 | 單標(biāo)簽 |
??<meta>?? | meta | 提供有關(guān)頁面的元信息 | 單標(biāo)簽，??<meta>???標(biāo)簽通常位于??<head>??區(qū)域內(nèi) |
??<link>?? | link | 定義文檔與外部資源的關(guān)系 | 單標(biāo)簽，??<link>???標(biāo)簽只能存在于??<head>??區(qū)域內(nèi)，不過它可出現(xiàn)任何次數(shù)。 |
??<p></p>?? | paragraph | 定義段落 | 自動(dòng)在其前后創(chuàng)建空白行 |
??<h1> to <h6>?? | Header 1 to Header 6 | 定義標(biāo)題 | h1在一個(gè)頁面里只能出現(xiàn)一次 |
??<strong></strong>?? | strong | 文本加粗 | 加粗標(biāo)記該文本 |
??<b></b>?? | bold | 文本加粗 | 加粗顯示文本，不推薦使用 |
??<em></em>?? | emphasize | 文本傾斜 | 傾斜標(biāo)記文本 |
??<i></i>?? | italic | 文本傾斜 | 傾斜顯示文本，不推薦使用 |
??<del></del>?? | delete | 文本添加刪除線 | - |
??<s></s>?? | strike | 文本添加刪除線 | 不推薦使用 |
??<ins></ins>?? | insert | 文本添加下劃線 | - |
??<u></u>?? | underline | 文本添加下劃線 | 不推薦使用 |
??<a href="">填寫內(nèi)容</a>?? | anchor | 添加超鏈接 | 最好使用CSS來改變鏈接的樣式 |
??<ul></ul>?? | unordered list | 定義無序列表 | 通常與??<li>??標(biāo)簽一起使用 |
??<ol></ol>?? | ordered list | 定義有序列表 | 通常與??<li>??標(biāo)簽一起使用 |
??<li></li>?? | list item | 創(chuàng)建列表項(xiàng) | 可與各種列表定義標(biāo)簽一起使用 |
??<dl></dl>?? | definition list | 定義描述列表 | 通常與??<dt>???和??<dd>??一起使用 |
??<dt></dt>?? | definition term | 定義條目 | 定義描述列表的項(xiàng)目 |
??<dd></dd>?? | definition description | 定義描述 | 對(duì)描述列表中的項(xiàng)目進(jìn)行描述 |
??<table></table>?? | table | 定義HTML表格 | 盡可能通過樣式改變表格外觀 |
??<tr></tr>?? | table row | 定義表格的行 | 一個(gè)??<tr>???標(biāo)簽包含一個(gè)或多個(gè)??<th>???或??<td>??標(biāo)簽 |
??<th></th>?? | table headline | 定義表格每一列的標(biāo)題 | 該標(biāo)簽的文本通常呈現(xiàn)為粗體且居中 |
??<td></td>?? | table data | 定義表格中的單元格數(shù)據(jù) | 該標(biāo)簽的文本呈現(xiàn)為普通且左對(duì)齊 |
??<caption>表格標(biāo)題</caption>?? | caption | 定義整個(gè)表格的標(biāo)題 | ??<caption>???標(biāo)簽必須直接放在??<table>??標(biāo)簽后 |
??<input type="">?? | input | 定義輸入控件 | 輸入字段可通過多種方式改變，取決于type屬性 |
??select?? | select | 定義下拉列表 | ??<select>???中的??<option>??標(biāo)簽定義了列表中的可用選項(xiàng) |
??<option></option>?? | option | 定義下拉列表中的可用項(xiàng) | ??<option>??標(biāo)簽不可自由定義寬高 |
??<optgroup></optgroup>?? | options group | 定義選項(xiàng)組 | ??<optgroup>??標(biāo)簽用于把相關(guān)的選項(xiàng)組合在一起 |
??<textarea></textarea>?? | textarea | 定義多行的文本輸入控件 | 文本的默認(rèn)字體是等寬字體 |
??<form></form>?? | form | 定義表單 | ??<form>??可以包含多個(gè)元素 |
??<fieldset></fieldset>?? | field set | 定義圍繞表單中元素的邊框 | ??<legend>???為??<fieldset>??定義標(biāo)題 |
??<legend></legend>?? | legend | 為??<fieldset>??定義標(biāo)題 | ??<legend>??通過css設(shè)定樣式 |
??<progress></progress>?? | progress | 定義運(yùn)行中的任務(wù)進(jìn)度 | ??<progress>???是HTML5中的新標(biāo)簽，??<progress>??標(biāo)簽不適合用來表示度量衡 |
??<meter></meter>?? | meter | 度量衡 | ??<meter>???是HTML5的新標(biāo)簽，??<meter>??標(biāo)簽不適合用來表示進(jìn)度條 |
??<audio></audio>?? | audio | 添加音頻 | ??<audio>??標(biāo)簽是HTML5的新標(biāo)簽 |
??<video></video>?? | video | 添加視頻 | ??<video>??標(biāo)簽是HTML5的新標(biāo)簽 |
??<source>?? | source | 定義媒介資源 | ??<source>??標(biāo)簽是HTML5中的新標(biāo)簽 |
普通用法
錨點(diǎn)鏈接
錨點(diǎn)鏈接通過點(diǎn)擊超鏈接，自動(dòng)跳轉(zhuǎn)到我們?cè)O(shè)置錨點(diǎn)的位置，類似于word的目錄導(dǎo)航。建立錨點(diǎn)的元素必須要有id或name屬性，最好兩個(gè)都有。這里只跳轉(zhuǎn)本頁面元素，其他頁面跳轉(zhuǎn)自行搜索。
具體做法如下：
示例如下。為了顯示效果，通過使用lorem自動(dòng)生成隨機(jī)文本（具體使用方法搜索，一般直接輸入就行），lorem*50表示重復(fù)lorem15次。
<a href="#id2">a</a>
<p id="id1">
(lorem*15)
</p>
(lorem*15)
<p id="id2">
(lorem*15)
</p>超鏈接全局設(shè)置
在頁面head中寫入代碼可以設(shè)置超鏈接的全局跳轉(zhuǎn)設(shè)置
<head>
<!-- 讓頁面所有的超鏈接新頁面打開 -->
<base target="_blank">
</head>charset編碼
name
網(wǎng)頁自動(dòng)跳轉(zhuǎn)
無序列表
無序列表使用粗體圓點(diǎn)進(jìn)行標(biāo)記。簡單示例如下。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
...
</ul>有序列表
有序列表使用數(shù)字進(jìn)行標(biāo)記，我們可以通過整數(shù)值start指定列表編號(hào)的起始值。簡單示例如下。
<ol start="2">
<li>a</li>
<li>b</li>
<li>c</li>
...
</ol>描述列表
通過描述列表自定義列表，列表項(xiàng)內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。簡單示例如下。
<dl>
<dt>A</dt> <!-- 小標(biāo)題 -->
<dd>A1</dd> <!-- 解釋標(biāo)題 -->
<dd>A2</dd> <!-- 解釋標(biāo)題 -->
<dt>B</dt> <!-- 小標(biāo)題 -->
<dd>B1</dd> <!-- 解釋標(biāo)題 -->
<dd>B2</dd> <!-- 解釋標(biāo)題 -->
</dl>基礎(chǔ)表格
簡單示例如下。
<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格標(biāo)題</caption> <!-- 定義表格標(biāo)題 -->
<tr>
<!-- 定義表格的行 -->
<td>A1</td> <!-- 定義表格該行第一列中的數(shù)據(jù) -->
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<!-- 定義表格的行 -->
<th>A</th> <!-- 定義表格每一列的標(biāo)題 -->
<th>B</th>
<th>C</th>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
</table>單元格合并
簡單示例如下。
<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格標(biāo)題</strong></caption> <!-- 定義表格標(biāo)題 -->
<tr height="100">
<!-- 定義表格的行 -->
<td colspan="2">A1</td> <!-- 定義該行可以橫跨兩列 -->
<td>B1</td>
</tr>
<tr height="100">
<td>A2</td>
<td>B2</td>
<td rowspan="2">C</td> <!-- 定義該行可以橫跨兩行 -->
</tr>
<tr height="100">
<td>A3</td>
<td>B3</td>
</tr>
</table>對(duì)于??<input>??不同的type屬性值，輸入字段擁有很多種形式。輸入字段可以是文本字段、復(fù)選框、掩碼后的文本控件、單選按鈕、按鈕等等。
文本輸入框
簡單示例如下。
<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用戶名">密碼輸入框
簡單示例如下。
<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密碼">單選框
示例一，兩個(gè)單選框都可以被選中
<div>
<input type="radio" name="man" checked="checked">男
</div>
<div>
<input type="radio" name="woman">女
</div>示例二，兩個(gè)單選框只能有一個(gè)被選中
<div>
<input type="radio" name="gender" checked="checked">男
</div>
<div>
<input type="radio" name="gender">女
</div>下拉列表
??<select>??
??<optgroup>??
??<option>??
示例一，單選下拉列表
<select>
<option value="a">a</option>
<option value="b">b</option>
<option value="c" selected='selected'>c</option> <!-- 默認(rèn)選中 -->
</select>示例二，帶組合的單選下拉列表
<select>
<optgroup label="A">
<option value="a1">a1</option>
<option value="a2" selected='selected'>a2</option>
</optgroup>
<optgroup label="B">
<option value="b1">b1</option>
<option value="b2">b2</option>
</optgroup>
</select>示例三，帶組合的多選下拉列表
<select multiple=”multiple”>
<optgroup label="A">
<option value="a1">a1</option>
<option value="a2" selected='selected'>a2</option>
</optgroup>
<optgroup label="B">
<option value="b1" selected='selected'>b1</option>
<option value="b2">b2</option>
</optgroup>
</select>多選框
簡單示例如下。
<input type="checkbox" checked="checked">A
<input type="checkbox">B文本框
簡單示例如下。
<textarea cols="5" rows="2" placeholder="text"></textarea>文本上傳控件
簡單示例如下。
<input type="file" accept="image/gif, image/jpeg"/>其他類型按鈕
<input type="submit">文件提交按鈕
<input type="button" value="">普通按鈕
<input type="image" src="">圖片按鈕
<input type="reset">重置按鈕
<input type="url">網(wǎng)址控件
<input type="date">日期控件
<input type="time">時(shí)間控件
<!--email提供了郵箱的完整驗(yàn)證，必須包含@和后綴，如果不滿足驗(yàn)證，會(huì)阻止表單提交-->
<input type="email">郵件控件
<input type="number" step="3">數(shù)字控件
<input type="range" step="100">滑塊控件
<input type="color">顏色控件表單
示例一，普通表單
<form>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>示例二，帶分組信息表單
<form>
<fieldset>
<legend>Personalia:</legend>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</fieldset>
First nameA: <input type="text" name="fname"><br>
Last nameB: <input type="text" name="lname"><br>
</form>??<progress>???與??<meter>??主要區(qū)別和用法見??HTML5 progress和meter控件??
??<progress>??
簡單示例如下。
<progress value="60" max="100"></progress>??<meter>??
簡單示例如下
<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>??<audio>??
簡單示例如下
<audio src="demo.mp3" controls autoplay></audio>??<video>??
簡單示例如下
<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>??<source>??
簡單示例如下
<video controls>
<source src="demo.mp3" type="audio/mp3">
<source src="demo.mp4" type="video/mp4">
您的瀏覽器不支持video元素。
</video>??HTML特殊字符編碼對(duì)照表??
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
