html和css

 註釋：<!--這是一段註釋。註釋不會在瀏覽器中顯示。-->

1、塊標籤

一、<p> </p>標籤，段落，p標籤中不能嵌套塊標籤，若是嵌套了的話，解釋器會自動截斷p標籤

二、<h1> </h1>  至<h6> </h6>標題標籤，大小從大到小。

三、<hr />畫一條水平線。

四、<ul> <li> </li> /ul> 列表

ul的例子1：

<ul style="list-style-type: none;padding: 0">
    <li><img src="abc.png" style="width: 100px;height: 100px"></li>
    <li><img src="abc.png" style="width: 100px;height: 100px"></li>
    <li><img src="abc.png" style="width: 100px;height: 100px"></li>
</ul>

顯示效果：

ul例子2：

<ul style="list-style-type: none;padding: 0">
    <li><div style="width: 100px ;height: 100px;background-color: red;margin-bottom: 5px"></div></li>
    <li><div style="width: 100px ;height: 100px;background-color: red;margin-bottom: 5px"></div></li>
    <li><div style="width: 100px ;height: 100px;background-color: red;margin-bottom: 5px"></div></li>
</ul>

顯示效果：

 

五、table

<table>
    <tr>
        <th>abc</th>
        <th>dfc</th>
    </tr>
    <tr>
        <th>abc</th>
        <th>dfc</th>
    </tr>
</table>

table的用處例1：

<table>
    <tr>
        <th><img src="abc.png"></th>
        <th><img src="abc.png"></th>
    </tr>
    <tr>
        <th><img src="abc.png"></th>
        <th><img src="abc.png"></th>
    </tr>
</table>

顯示效果：

 

 

2、內聯標籤

<img src="xxxx"/> 圖像標籤，圖像就是它的內容。

<a> </a>，超連接標籤。

a標籤屬性：

#定義a標籤超連接下劃線屬性
a{
text-decoration:none;
}

#超連接顯示生效
a:link{
text-decoration:none;
color : black
}

# 點擊完超連接後
a:visited{
text-decoration:none;
color: #555555;
}

#鼠標放到超連接上
a:hover{
text-decoration:none;
color: red
}

#鼠標點擊超連接時
a:active{
text-decoration:none;
color: #00A000
}

　　

 

3、CSS style屬性

alt：img標籤訂義的src加載失敗時顯示的內容。

style:

text-align : center,left,right 。文本類容居住，靠左，靠右

background-color:背景顏色 。背景顏色填充內容部分和padding部分。

padding: 10px 0 0 0 ，分別設置上、右、下、左 內邊距。padding: 10px 20px，設置上下邊距爲10px，左右邊距爲20px。margin外邊距。

list-style-type，ul和li標籤用。 none無樣式，disc帶黑圓點。

line-height：行高、內容所佔高度，邊界爲padding。img標籤訂義行高對src圖片無效果，對alt加載圖片失效時的文字內容有效。

background-image: url('xxxx')，背景圖片，圖片顯示有內容覺決定

<div style="background-image: url('abc.png') ;">
</div>
# 沒內容，看不見背景圖片。
# 可定義高度，這樣能看到背景圖片
<div style="background-image: url('abc.png') ;height: 361px">
</div>

background-repeat，no-repeat ，不平鋪，repeat-x橫向平鋪，repeat-y縱向平鋪。

float： left ,right向左向右浮動，飄起來，在非float層的上面。clear：both,left,right清除浮動，緊跟浮動元素下方顯示接下來的東西。

position：relative 相對定位，對其正常位置進行定位，能夠left,right,top,bottom對其修改位置。absolute，固定定位，相對於static之外的第一個父元素定位，能夠left,right,top,bottom對其修改位置，若是沒定義這些值，那麼他跟不定義position沒區別。fixed，固定定位，能夠left,right,top,bottom對其修改位置,若是沒有定義其中任何一個值，他機會跟不定義fixed的位置在同一個位置，可是是固定的。static,正常定位，忽略left,right,top,bottom。

input文本框默認提示。<input type="text" placeholder="請輸入帳戶" name="account"/>