html開發知識

一：初識html

1：什麼是HTML？
超文本標記語言。
2：什麼是html語義化？
用標籤進行排版。
3：html語義化的優勢？
方便團隊開發，維護，詢搜索；讓頁面更加的清晰。

二：html經常使用標籤

1：h標籤

字體加大加粗標籤，從h1-h6依次遞減，單獨佔一行。
<h1>aaaaaa</h1>
<h2>aaaaaa</h2>
<h3>aaaaaa</h3>
<h4>aaaaaa</h4>
<h5>aaaaaa</h5>
<h6>aaaaaa</h6>

2：p標籤

行標籤，又稱爲段落標籤。
<p>aaaaaa</p>

3：span標籤

又稱爲行內標籤，不會佔行，只會佔一小塊。
<span>aaaa</span>

4：img標籤

<img src="./image/picture.jpg" title="圖片沒找到哦" alt="圖片"/>
屬性說明：
src：圖片路徑
title：當鼠標放到圖片上提示內容
alt：圖片沒找到顯示的內容

5：列表標籤

ul標籤：

無序列表
<ul>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
</ul>

ol標籤：

有序列表
<ol>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
</ol>

dl標籤：

自定義列表
<dl>
<dt>aaaa</dt>
<dt>aaaa</dt>
<dt>aaaa</dt>
</dl>

6：br標籤

換行標籤
<br/>

7：hr標籤

下劃線符
<hr/>

8：a標籤

連接跳轉標籤
<a href="www.baidu.com" target="_self/_block">百度</a>
屬性說明：
href：跳轉的url路徑。
target：_self/_block，當前標籤面打開/從新打開標籤面打開。

9：table標籤

表格標籤
<table border="1" cellpadding="1" cellspacing="1" width="400px">
        <tr>
            <td colspan="2">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td rowspan="2">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
屬性說明：
border：表格的邊框
cellpadding：列的內邊距
cellspacing：列之間的距離
colspan：跨的列數
rowspan：跨的行數

10：from標籤

表單標籤
<form action="#" method="post">
<fieldset>----------------標籤關聯標籤
<legend align="left" >用戶註冊信息</legend>
請輸入用戶名：<input type="text" name="username" value="請輸入用戶名" size="25" maxlength="20" /><br/>
請輸入密碼：<input type="password" /><br/>
性別：<label><input type="radio" name="sex" />男</label><label><input type="radio" name="sex" />女</label><br/>---------------讓按鈕關聯漢字，點漢字時就會選中按鈕
愛好：<input type="checkbox" name="hobby" />游泳 <input type="checkbox" name="hobby" />籃球 <input type="checkbox" name="hobby" />遊戲<br/>
上傳圖片：<input type="file" /><br/>
<select >
<option>請選擇城市</option>
</select><br/>
<textarea cols="50" rows="5" readonly="readonly">協議.........</textarea><br/>
<input type="submit" value="提交" /><input type="reset" value="重置"/><br/>
</fieldset>
</form>
附：
disabled="disabled"指禁用按鈕
readonly="readonly" :文本框或密碼框爲只讀的
checked="checked":單選或多選按鈕被選中
selected="selected":下拉列表被選中

11：frame標籤

iframe：

內嵌框架：
<iframe src="https://www.baidu.com/" width="500px" height="300px" frameborder="1" name="myframe"></iframe>

frameset：

框架集： <frameset rows=」30%,40%30%」 > <frame src=」地址」 > <frameset cols=」50%,50%」> <frame src=」地址」/> <frame src=」地址」/> </frameset> <frame src=」地址」/> </frameset>