xHtml+css學習筆記

第一節

 xHTML規範

*文檔方面
-必須定義文檔類型(DTD)和名字控件
*標籤方面
-全部標籤均要小寫、關閉、合理嵌套、ID不能重複
-標籤屬性藥有值，屬性值要加印號且不能爲空
-圖片必定要加上alt屬性
-表格標籤不許使用height屬性,能夠使用width屬性
-禁止使用 < embed >< iframe >標籤,非w3c標準
-鏈接不許使用target屬性
*內容模型:
-body、form、blockquote僅能包含塊狀元素
-文本、圖像、鏈接等內鏈元素不容許直接邏樓在body中,必須被p或div等塊狀元素包含
-內鏈元素不能包含塊狀元素
*其餘內容
1:註釋中的文字不能包含--
2:全部特殊符號須要用編碼表示    

第二節

<塊狀元素>
-塊元素通常是其餘元素的容器元素, 快元素通常都重新行開始,它能夠容納文本、內聯元素和其餘塊狀元素，經過width和height屬性能夠設置其大小
，經常使用塊元素是段落表"p"
*特例
-form標籤只能容納塊元素
*疑問
-table標籤是否屬於塊元素
經常使用塊狀元素
-div,p,table,h1~h6,ul,ol,li,dl,dt,dd,center,form
<內聯元素>
-內聯元素既是非塊狀元素,內聯元素只能容納文本或者其餘內聯元素, 不會獨佔一行,width和height屬性對其不起做用,能夠容納內聯元素和文本元素

xhtml共有91個標籤

問題總結:
1>如何使塊狀元素不獨佔一行,使其能夠並列一行
方法一:添加float屬性，好比
    <div style="width:200px; height: 200px; background: red; float:left" ></div>
    <div style="width:200px; height: 200px; background: blue; float:left" ></div>
    <a href="#" style="width:200px; height: 200px; background: yellow; float:left">信息能夠有限公司</a>
方法二:
2>如何使width和heigth屬性對內聯元素起做用
方法一:添加float屬性，好比
    <div style="width:200px; height: 200px; background: red; float:left" ></div>
    <div style="width:200px; height: 200px; background: blue; float:left" ></div>
    <a href="#" style="width:200px; height: 200px; background: yellow; float:left">信息能夠有限公司</a>
方法二:添加display:block樣式,顯示修改內聯元素爲塊狀元素
好比

<a href="#" style="width:200px; height: 200px; background: yellow; float:left; display: block">x</a> 

 

第三節

< 盒子模型 >
*盒子模型四要素
-(content)內容  (border)邊框   (padding)內邊距 (margin)外邊距

兩個盒子上下放置  間距取上下間距最大值
     < div  style ="width:200px; height: 200px; background: #E16B11;margin-button: 10px;"   ></ div >
     < div  style ="width:200px; height: 200px; background: #13AB86;margin-top: 20px;"   ></ div >
==>20px
兩個盒子左右放置  間距取左右間距之和
     < div  style ="width:200px; height: 200px; background: #E16B11;margin-right: 10px;float: left"   ></ div >
     < div  style ="width:200px; height: 200px; background: #13AB86;margin-left: 20px;float:left"   ></ div >

==>30px