今天是2018年7月10日
1.標(biāo)簽
1.1<h1>-<h6>標(biāo)簽
使用<h1>~<h5>標(biāo)簽設(shè)置標(biāo)題嘿棘,按升序標(biāo)題從大到小。
1.2<p>
<p>是段落標(biāo)簽
1.3<img>
img標(biāo)簽用于插入圖片桦他,它有兩個(gè)屬性作用如下
//src:將要插入的圖片路徑
//alt:當(dāng)圖片無法顯示時(shí)蔫巩,替代顯示的文本內(nèi)容
<img src="xxx" alt="xxx">
1.4<input>
通過設(shè)置input標(biāo)簽的type屬性可以用input標(biāo)簽生產(chǎn)文本框,按鈕快压,提交/重置等按鈕。
input標(biāo)簽的type屬性
1.5<button>
button標(biāo)簽用于生成按鈕垃瞧,等效于
<input type="button">
1.6<a>
a標(biāo)簽用于生成超鏈接蔫劣,如下
<a href="url....">value</a>
1.7<div>
div標(biāo)簽可以把HTML中的元素分成塊級(jí)別的元素
1.8<ul>
ul-li用于生成無序列表,修改CSS樣式可以生成有序列表个从。
2.選擇器
2.1元素選擇器
元素選擇器以頁(yè)面元素(標(biāo)簽)為單位進(jìn)行CSS樣式的設(shè)置脉幢,其弊端在于一旦對(duì)某種頁(yè)面元素進(jìn)行了設(shè)置,所有的相同頁(yè)面元素樣式都會(huì)改變嗦锐,因此要慎用嫌松。
<style>
div{
...
}
</style>
<body>
<div>...</div>
</body>
2.2類名選擇器
類名選擇器是依據(jù)元素的Class屬性來對(duì)元素進(jìn)行Css樣式設(shè)置的,一個(gè)元素可以使用多個(gè)Class樣式奕污。
<style>
.class1{
...
}
.class2{
...
}
</style>
<body>
<div class="class1 class2">//可以使用多個(gè)類樣式
...
</div>
</body>
2.3ID選擇器
ID選擇器跟類選擇器類似萎羔,其依據(jù)是元素的ID屬性,但因?yàn)樵氐腎D屬性都是唯一的碳默,因此ID樣式也不能重復(fù)使用贾陷,故慎用
<style>
#xxx{
...
}
</style>
<body>
<div id="xxx">...</div>
</body>
2.4偽類選擇器
偽類選擇器用來對(duì)某些元素添加特殊的效果,語法相對(duì)靈活缘眶。
<style>
a:hover{
...
}
</style>
<body>
<a></a>
</body>
3.盒子模型
盒子模型可以明確網(wǎng)頁(yè)中元素的定并方便開發(fā)者進(jìn)行排版
盒子模型圖示
常用的屬性如下,通過他們我們可以方便的進(jìn)行網(wǎng)頁(yè)的布局髓废。
-
margin
-
border
-
padding
利用網(wǎng)頁(yè)F12調(diào)試工具調(diào)試布局