直接用瀏覽器打開代碼。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="">
<style>
body{
height: 5000px;
}
a:link{
}
a:visited{
}
a:hover{
}
a:active{
}
</style>
</head>
<body>
div 和 span 都沒有語義 div有換行span沒有
<br /> 換行
<hr /> 一行
<!-- 圖片 -->
<img src="" alt="">
<!-- 錨鏈接 -->
<a target="_self">123</a>
<a target="_blank">xxx</a>
<a href="#live">跳轉(zhuǎn)到h1</a>
<h1 id="live">hahahaahaha? h1</h1>
<!-- 使用base標(biāo)簽設(shè)置全局的打開_blank -->
<!-- <base target="_blank, _self, _parent, _top"> -->
<!-- 特殊字符 -->
<© >
<!-- 無序列表 -->
<ul>
<li></li>
</ul>
<!-- 有序列表? -->
<ol>
<li></li>
</ol>
<!-- 自定義列表 一般用來做頁面底部部分 -->
<dl>
<dt>名詞</dt>
<dd>名詞補充解釋</dd>
<dd>名詞補充解釋</dd>
<dd>名詞補充解釋</dd>
<dd>名詞補充解釋</dd>
<dd>名詞補充解釋</dd>
</dl>
<table border = 1 width="300" align="center"> <!-- 表格 -->
<caption>表格標(biāo)題</caption>
<tr> <!-- 每一行 -->
<td>姓名 </td>? <!-- 每個單元格 -->
<td>電話 </td>
<td>地址 </td>
</tr>
<tr>
<td>小明</td>
<td>123</td>
<td>地址</td>
</tr>
</table>
<br /><br /><br /><br /><br /><br />
<!-- 表格聯(lián)系 -->
<table width="300" border="1" align="center" cellpadding="0" cellspacing="0" >
<caption>表頭標(biāo)題</caption>
<tr align="center">
<td>姓名</td>
<td>性別</td>
<td colspan="2">電話</td>
</tr>
<tr>
<td>小王</td>
<td>女</td>
<td>22344</td>
<td rowspan="3">海淀區(qū)</td>
</tr>
<tr>
<td>小李</td>
<td>男</td>
<td>555666</td>
</tr>
<tr>
<td>小張</td>
<td>男</td>
<td>9008939012</td>
</tr>
<tr>
<td>小張</td>
<td>男</td>
<td>9008939012</td>
<th>123</th>
</tr>
</table>
<table border="1" align="center" cellspacing="0" cellpadding="0" width="500">
<caption><h3>小說排行榜</h3></caption>
<tr>
<th>排名</th>
<th>關(guān)鍵詞</th>
<th>趨勢</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相關(guān)鏈接</th>
</tr>
<tr>
<td>123</td>
<td>鬼吹燈</td>
<td><img src="images/down.jpg" alt="下降"></td>
<td>1xx3</td>
<td>456</td>
<td><a >貼吧</a></td>
</tr>
</table>
<label>label標(biāo)簽的使用<input type="text/submit/hidden/button/etc" name="" value=""></label>
<select name=""> option的selected="selected"代表默認(rèn)選中
<option value="" selected="selected">option</option>
<option value="">option2</option>
</select>
input的checked的代表默認(rèn)選中
<input type="radio" name="" value="" checked="checked">123
<!-- 表單域控件 -->
<form action="html學(xué)習(xí)筆記_submit" method="get" accept-charset="utf-8">
用戶名:<input type="text" name="user" value="123"> <br/> <br/>
密碼：<input type="password" name="pass">
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
class選擇器可以多次重復(fù)使用，id選擇器一般只有唯一性。<hr/>
div a 子代選擇器 div > a親兒子 第一級子代 子代選擇器不要漏層標(biāo)簽，每一層都要有大于號指下去<hr/>
.nav , .sitenav{}并集選擇器<hr/>
塊級元素
行內(nèi)元素 指定寬高無效，默認(rèn)為本身內(nèi)容大小，里面只放行內(nèi)元素(a特殊，a可以放塊級元素)
行內(nèi)塊元素inline-block 可以設(shè)置寬高，默認(rèn)不換行，但是之間會有留白空隙
<h2>顯示模式的轉(zhuǎn)換</h2>
div{? //轉(zhuǎn)化為行內(nèi)元素
display:inline;
}
span{? //轉(zhuǎn)化為塊級元素
display:block;
}
a{? //轉(zhuǎn)化為行內(nèi)塊元素
display:inline-block;
}
<br/>
<h3>行內(nèi)元素和行內(nèi)塊級元素可以當(dāng)成文字來看</h3>
<h2>css三大特性</h2>
<h3>1.css層疊性</h3>就近原則
<h3>2.繼承性</h3>文字的樣式和顏色等繼承
<h3>3.優(yōu)先級</h3>
div(標(biāo)簽選擇器) 權(quán)重 0，0，0，1
.nav(類選擇器) 權(quán)重0，0，1，0
#na(id選擇器)? 權(quán)重0,1,0,0
!important 最重要
<br/>
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
border: 1px solid red;
border-collapse: collapse;//表格合并相鄰邊框
pading：上右下左
margin: 100px auto;//居中
兩個相鄰盒子margin外邊距合并問題，以最大的為準(zhǔn)
兩個包含盒子 外邊距塌陷，父盒子給1px邊框或者overflow:hidden溢出隱藏
.fu{
height: 150px;
background-color: pink;
/* overflow: hidden ; 這三種方法解決塌陷問題 */
/* border: 1px solid red; */
/* padding-top: 1px; */
}
.zi{
height: 100px;
width: 100px;
background-color: purple;
margin-top: 100px;
}
<br />
float:left;使用浮動脫離文檔標(biāo)準(zhǔn)流。主要解決塊級元素一行排列問題，可以left可以right方便排版。浮動不會超過邊框和padding
使用浮動之后，元素默認(rèn)轉(zhuǎn)化為行內(nèi)塊級元素了，不寫寬則默認(rèn)內(nèi)容文字大小
<h4>轉(zhuǎn)化為inline-block和block的一個區(qū)別，inlineblock會和父控件有一個默認(rèn)邊距，顯得大一些，再加一句overflow:hidden可以解決這個問題。而轉(zhuǎn)化為block不會出現(xiàn)這個問題，會鋪滿整個父控件</h4>
<hr />
<h3>清除浮動的四種方法(為了解決子元素浮動導(dǎo)致的父控件高度為0的問題)</h3>
<p>1.額外標(biāo)簽法</p>最后一個浮動標(biāo)簽添加一個div，然后.xx{clear:both}
<p>2.父級添加overflow屬性方法</p>
<p>3.after偽元素清除</p>.clearfix:after{content:"";display:block;height:0;clear:both;visibility:hidden;} 父元素使用一下這個類
<p>4.使用before和after雙偽元素清除</p>.clearfix:before , .clear:after{content:"";display:table;} 和 .clearfix{clear:both}
<hr/>
<h3>定位 position</h3>
<p>有四個屬性值，top bottom left right</p>
1.static靜態(tài)定位，相當(dāng)于取消定位，標(biāo)準(zhǔn)文檔流模式 <br>
2.相對定位 positon:relative;移動以自己上個狀態(tài)為基準(zhǔn)點。標(biāo)準(zhǔn)流中，原來的位置還占有。<br>
3.絕對定位positon:absolute;不在標(biāo)準(zhǔn)流里面占位置，跟浮動一樣。如果父元素沒有定位，以瀏覽器當(dāng)前屏幕為基準(zhǔn)。找到最近一級父元素有定位的為基準(zhǔn)。<strong>子絕父相</strong><br/>
4.fixed固定定位
<h2>跟浮動一樣，定位之后的元素也會默認(rèn)轉(zhuǎn)化為行內(nèi)塊元素，尺寸默認(rèn)為內(nèi)容寬高</h2>
<h3>小例子，用最后一個定位會覆蓋在最上面的特性做a的邊框，在hover狀態(tài)下加相對定位，如果已經(jīng)用定位了就修改z-index值</h3>
<hr/>
display:none 隱藏 不在文檔流里占位置。visibility:hidden隱藏，但是文檔流里面還占有位置。
display:block;對應(yīng)的顯示出來 visibility:visible對應(yīng)的顯示;
cursor改變鼠標(biāo)樣式<br>
input輪廓線outline <br>
textarea防止拖拽 設(shè)置resize:none;
img設(shè)置圖文關(guān)系 設(shè)置vertical-align
設(shè)置文字溢出處理white-space:nowrap;
<hr/>
<h3>精靈圖。background-positon:</h3>
<h3>滑動門效果。a里面包含span標(biāo)簽，span里面包含文字，然后給a的背景圖片為左對齊，給span的bg-postion右對齊,注意span和a標(biāo)簽都要轉(zhuǎn)為inline-block，都要給高度，分別設(shè)置paddingleft和right撐開背景圖片圓邊框</h3>
<h3>用大小盒子來截取去掉邊框小技巧</h3>
</body>
</html>
