HTML常用標籤

 行級標籤:一段獨立的文字或圖片就是一行。按行逐一顯示。
    標記標籤:用於顯示文字標記
         <label>內容</label>
    圖像標籤:用於顯示圖片,alt用於在無法找到圖片時顯示的信息。title用於鼠標移到圖片上所顯示的內容 
        <img src="圖片的路徑" title="提示標題" alt="提示信息"/>
    範圍標籤:用於顯示限制範圍內的文檔內容
<span>內容</span>
    換行標籤:將內容進行換行顯示(相當於Java中的\n,無閉合標籤)
<br/>
    超鏈接標籤:極爲常用的鏈接標籤
        <a href="目標頁面地址" target="頁面打開方式">信息</a>
        說明:
            href——用於設定需要進行跳轉的頁面地址
            target——頁面打開方式
    _blank:新空白窗口內顯示
    _self:當前窗口內(默認)
            _parent:父窗口內
    _top:頂級窗口內
        三種鏈接方式
            頁面間鏈接:完成頁面間跳轉
    錨鏈接:跳轉到當前頁面指定的錨定位置
錨鏈接實現步驟
1、設定頁面間的錨(name)
2、超鏈接時使用#+name(錨)的方式進行跳轉
    功能性鏈接:完成特定的功能,如發郵件:mailto
塊級標籤:多段內容在一行內進行顯示或多行內容爲一段進行顯示。兩個塊級標籤隔行進行顯示(有特例)
    基本塊級標籤
        標題標籤:<h1>內容</h1>~<h6>內容</h6>——用於顯示不同大小字體的標題內容
        水平線標籤:<hr/>——顯示一條水平線(無閉合標籤)
        段落標籤:<p>內容</p>——將內容按照段落進行顯示
        分組標籤:<filedset>內容</filedset>——將頁面進行分組顯示
                  
<legend>內容</legend>——對分組標籤添加文字
   
 佈局塊級標籤:
        有序標籤:一般用於新聞列表、內容的列表、導航,內容前有序號                <ol>                    <li>內容</li>                        ...                </ol>        無序標籤:一般用於新聞列表、內容的列表、導航,內容前無序號,但可以有統一的符號                                <ul>                    <li>內容</li>                        ...                </ul>
        描述標籤:一般可以用於圖文混排,內容和標題有縮進。
                <dl>
                    <dt>標題</dt>
                    <dd>內容</dd>
                </dl>
        表格標籤:常用於規整數據的顯示(不常用,加載完全才會顯示,給人感覺慢)
                <table>
                    <caption>表格標題<caption>
                    <thead>
                    <tr>
                        <td>第一行第一列的內容(表頭)</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>第二行第一列的內容(主體)</td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                        <td>第三行第一列的內容(表尾)</td>
                    </tr>
                    </tfoot>    
                </table>
                說明:tr表格中的行,td爲行中的列。rowspan跨行colspan跨列(從當前行開始跨)
        表單標籤:一般用於需要提交信息的頁面,與其他標籤聯合使用,比如登錄頁面,註冊頁面等。
                <form action="表單提交地址" method="提交方式">
                </form>
                action——當前表單內容進行提交過程中,處理地址負責處理當前表單的內容
method——內容提交方式,推(post安全性較高)拉(get地址欄會出現一串編碼)
            表單元素:
                <input type="元素類型"  value="元素初始值" name = "名稱" />
            元素類型:
                輸入框
    text——輸入文本框(maxlength:最大長度)
    password——密碼框
                按鈕
    button——用於做各種用途的按鈕
    submit——用於實現提交表單內容
    reset——用於實現重置表單內容
    image——用於實現圖片效果的按鈕
                    說明:submit與reset需要與form配合使用。
                選擇框(checked:是否被選中)
    checkbox——複選框
    radio——單選按鈕(name必須設定,擁有相同name值的所有元素表示一個分組)
                上傳
    file——用於實現上傳文件的選擇
                隱藏域
    hidden——內容不顯示在表單中,用於做特殊用途(如:保存記錄ID)
            下拉列表:select——用於實現以列表方式顯示選擇項
            <select>
       <option selected="selected">顯示內容</option>
       <option>列表內容</option>
            </select>
                    selected——表示默認選中
            多行文本框
         <textarea cols="列寬度" rows="行高度">內容</textarea>
    分區標籤:相當於一個大容器,也叫浮動標籤。
                <div></div>

常用的四種佈局方式
    div-ul(ol)-li:用於實現菜單或導航
    div-dl-dt-dd:用於實現圖文混排的效果
    table-tr-td:圖文佈局或數據顯示
    form-table-tr-td:表單的佈局實現(將一組信息進行統一提交)

特殊符號
    空格——&nbsp;
    大於——&gt;
    小於——&lt;
    引號——&quot;
    版權號——&copy;

HTML框架

框架用於將一個指定的頁面劃分爲多個部分用於引用其他頁面
    內嵌框架(iframe)
            <iframe src="頁面地址" scrolling="yes/no" frameborder="0/1" name="名稱"/>
            說明:
        src——框架所顯示的頁面地址
scrolling——是否出現滾動條
frameborder——邊框;0:無邊框;1:有邊框
    框架集(frameset)
<frameset rows="值1,值2……" cols="值1,值2……" border="值">
<frame src="頁面地址" scrolling="yes/no"/>
……
</frameset>
<noframes>
頁面內容或提示信息
</noframes>
說明:
rows——用於將頁面進行橫向分割。rows中有多少項值表示分割爲多少行
cols——用於將頁面進行縱向分割。cols中有多少項值表示分割爲多少列
border——表示邊框的寬度。無邊框值爲0
frame——表示分割項,用於顯示所引用的頁面。有多少行(或列)就需要有多少個<frame/>
        scrolling——表示frame是否具有滾動條。no:無滾動條;yes:有滾動條
                noframes——用於在瀏覽器不支持frameset(所有設置將不能正常顯示)顯示的內容
注意:
編寫代碼過程中,frameset替換了body標籤(body於frameset不能同時出現)。
分割數值之間一定要用逗號(,)連接
        缺點:
瀏覽器可能會不支持
需要多個頁面
靈活性較差
     

 



    
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章