網(wǎng)元的四大部分:header,nav,main,footer
article-> section
em 斜體
strong 粗體
span 文本串
q 引用
blockquote 多行引用
br 換行
? 空格
hr 水平線
address 地址
code 代碼引用
pre 多行代碼引用
ul 無序列表 默認前面有點
li
li
/ul
有序列表炭剪,默認前面有1,2,3
ol
li
li
/ol
div 用id區(qū)分塊
<table summary="簡介舔糖,不會顯示出來">
<caption>標(biāo)題</caption>
<tbody>
<tr>
<th>1的標(biāo)頭</th>
<th>2的標(biāo)頭</th>
<th>2的標(biāo)頭</th>
</tr>
<tr>
<td>1的值</td>
<td>2的值</td>
<td>2的值</td>
</tr>
</tbody>
</table>
<a href="www.baidu.com" title="百度" target="_blank" //新標(biāo)簽頁打開>
<a href="mailto:taoxutao@huawei.com?subject=主題&cc=peter.tao@ebistrategy.com">
<img alt="圖片不顯示時顯示的文字" src="路徑" title="鼠標(biāo)劃過時顯示的文字">
與服務(wù)器交互戳葵,提交接受信息署照,form表單,里面的元素一般都用name來溝通,action=“向該網(wǎng)址提交”
input可以用來當(dāng)輸入框type=text,button,submit,reset,checkbox,radio(實現(xiàn)單選要name相同)
name,value,checked
select下拉框 multiple="multiple" 可以多選僚楞,安裝ctrl(windows),or command(mac)
<select>
<option vaule="love" selected="selected">love</option>
<option value="make">make</option>
</select>
<label for="id(關(guān)聯(lián)控件的id)"></label> //比如ratio前的label,點擊后選擇
CSS
p{
color:red;
}
.class{
color:red;
}
#id{
color:red;
}
<p class="cls1 cls2"></p>同時用兩個class,如果有相同的屬性别凤,會覆蓋
.first>li 子選擇器 作用于下第一代li標(biāo)簽
.first li 包含(后代)選擇器 作用于所有的li標(biāo)簽
*{color:red;} 作用于全部的html元素
a:hover{ /超鏈接偎行,鼠標(biāo)滑過時的效果/
color:red;
font-size:200px;
}
span p{ /同時對span,p標(biāo)簽起作用/
color:red;
}
p{color:red;} /權(quán)值為1/
p span{color:green;} /權(quán)值為1+1=2/
.warning{color:white;} /權(quán)值為10/
p span.warning{color:purple;} /權(quán)值為1+1+10=12/
#footer .note p{color:yellow;} /權(quán)值為100+10+1=111/
.class .class 父子川背,非嚴格父子
例如:
.father .c3{backcolor:green;}
<div class="father">
<p class="c3">this is the text</p> //顯示綠色
</div>
.class.class 鏈接選擇器,且蛤袒,只有元素同時包含兩個class熄云,才會生效
.important{color:red;}
.warning{font-size:20px;}
.important.warning{border:30px;}
<p class="important warning"></p>