-音頻標簽:<audio></audio>
-屬性:
src:音頻文件路徑
loop:循環播放
autoplay:自動播放
preload:預加載,none|metadata|auto
-語法結構:
<!--寫法1-->
<audio src="1.mp3"></audio>
<!--寫法2-->
<audio>
<source src="1.mp3"></source>
</audio>
-視頻標簽:<video></video>
-屬性:
src:音頻文件路徑
loop:循環播放
autoplay:自動播放
width:寬
height:高
poster:封面圖片
preload:預加載,none|metadata|auto
-語法結構:
<!--寫法1-->
<video src="1.mp4"></video>
<!--寫法2-->
<video>
<source src="1.mp4"></source>
</video>
無序列表<ul>
屬性:
type:disc默認的,實心圓
circle空心圓,square方塊
使用:type默認實心圓
<ul>
<li>張三</li>
<li>李四</li>
</ul>
type默認為實心圓
使用:type空心圓
<ul type="circle">
<li>張三</li>
<li>李四</li>
</ul>
circle為空心圓
使用:type方塊
<ul type="square">
<li>張三</li>
<li>李四</li>
</ul>
square方塊
有序列表<ol>
屬性:
type:取值有1,a,A,i,I,分別代表數字,小寫字母序列,大寫字母序列,小寫羅馬數字,大寫的羅馬數字,默認的是數字,使用方式同上,這里不再圖示。
案例:
<ol>
<li>張三</li>
<li>李四</li>
</ol>
自定義列表<dl>
一般用來進行圖文展示
案例:
<dl>
<dt>
<img src="images/car-1.png" alt="">
</dt>
<dd>凱美瑞</dd>
</dl>
這兩個都可以當作容器來使用,嵌套其他標簽
div:塊級元素,默認占整行
span:行級元素,內容多寬他就多寬
結構組成:
table:表格標簽
tr:行標簽
td:列表簽
兩行兩列:
<table border="1">
<tr>
<td>姓名</td>
<td>年齡</td>
</tr>
<tr>
<td>張三豐</td>
<td>100</td>
</tr>
</table>
border="1" 表示表格邊框寬度為1px
合并行:rowspan
<table border="1">
<tr>
<td rowspan="2">姓名</td>
<td>年齡</td>
</tr>
<tr>
<td>100</td>
</tr>
</table>
合并列:colspan
景樣式
1.背景屬性縮寫
Background: 背景色 背景圖片 背景平鋪方式 背景定位
例:body {
background-color:# EDEDED;
background-image:url(images/bg.png);
background-repeat:no-repeat;
background-position:50% 30px;
}
縮寫后:
body { background:#EDEDED url(images/bg.png) no-repeat 50% 30px;}
尺寸樣式
1.寬度
width : auto | length
例:
p { width:300px;} div { width:50%;}
2.高度
height : auto | length
例:
img { height:200px;}
div { height:100px;}
邊框樣式
1.邊框線
border-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
例:div { width:300px; height:100px; border-style:solid; }
border-top-style 設置上邊框線
border-bottom-style 設置下邊框線
border-left-style 設置左邊框線
border-right-style 設置右邊框線
2.邊框寬度
border-width : medium | thin | thick | length
例:
div { width:300px; height:100px; border-style:solid; border-width:1px; }
border-top-width 設置上邊框寬度
border-bottom-width 設置下邊框寬度
border-left-width 設置左邊框寬度
border-right-width 設置右邊框寬度
3.邊框顏色
border-color : color
例:div {
width:300px;
height:100px;
border-style:solid;
border-width:1px;
border-color:#FF0000;
}
border-top-color 設置上邊框顏色
border-bottom-color 設置下邊框顏色
border-left-color 設置左邊框顏色
border-right-color 設置右邊框顏色
4.邊框樣式縮寫
border : border-width || border-style || border-color
例:div {
width:300px;
height:100px;
border-style:solid;
border-width:1px;
border-color:#FF0000;
}
縮寫后:div {
width:300px;
height:100px;
border:1px solid #FF0000;
}
外邊距
margin : auto | length
例:div { width:300px; height:100px; margin:10px;}
div { width:300px; height:100px; margin:0 auto;}
margin-top 設置上邊的外邊距
margin-bottom 設置下邊的外邊距
margin-left設置左邊的外邊距
margin-right設置右邊的外邊距
縮寫型式:
margin: 上邊距 右邊距 下邊距 左邊距
margin: 上下邊距左右邊距
margin: 上邊距 左右邊距 下邊距
內邊距
padding : length
例:
div { width:300px; height:100px; padding:10px;}
padding-top 設置上邊的內邊距
padding-bottom 設置下邊的內邊距
padding-left設置左邊的內邊距
padding-right設置右邊的內邊距
縮寫型式:
padding: 上邊距 右邊距 下邊距 左邊距
padding : 上下邊距左右邊距
padding : 上邊距 左右邊距 下邊距
列表樣式
1.項目符號
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha |
katakana | katakana-iroha | lower-latin | upper-latin
例:
ul { list-style-type:disc;}/*實心圓*/
ul { list-style-type:circle;}/*空心圓*/
ul { list-style-type:square;}/*實心方塊*/
ul { list-style-type:none;}/*不顯示項目符號*/
ol { list-style-type:decimal;}/*阿拉伯數字*/
ol { list-style-type:lower-roman;}/*小寫羅馬數字*/
ol { list-style-type:upper-alpha;}/*大寫英文字母*/
2.自定義項目符號
list-style-image : none | url ( url )
例:
ul {list-style-image:url(images/arrow.gif)}
鏈接樣式
1.鏈接沒有被訪問時的樣式
a:link
例: a:link { color:#ff0000; }
2.鏈接被訪問后的樣式
a:visited
例: a:link { color:#0000ff; text-decoration:none; }
3.鼠標懸停在鏈接上的樣式
a:hover
例: a:link { background-color:#ccc; }
4.鼠標點擊鏈接時的樣式
a:active
例:a:active { background-color:#ff0000;}
*請認真填寫需求信息,我們會在24小時內與您取得聯系。