HTML元素總結

標籤：html

html元素

<p></p> ：段落標記，會自動換行，常用於常值內容

        例：<p>這是一個段落</p>

               650) this.width=650;" src="/e/u261/themes/default/images/spacer.gif" style="background:url("/e/u261/lang/zh-cn/images/localimage.png") no-repeat center;border:1px solid #ddd;" width="142" alt="spacer.gif" />

<h1> ~ <h6> ：標題標記，會自動換行，字型由大到小

        例：<h1>這是h1</h1>

               <h2>這是h2</h2>

               <h3>這是h3</h3>

               <h4>這是h4</h4>

               <h5>這是h5</h5>

               <h6>這是h6</h6>

              650) this.width=650;" src="/e/u261/themes/default/images/spacer.gif" style="background:url("/e/u261/lang/zh-cn/images/localimage.png") no-repeat center;border:1px solid #ddd;" alt="spacer.gif" />

<br/> ：換行標記

<nobr/>：強制不換行

<a></a>：連結，href屬性指向連結地址，行內元素，不會自動換行

          例：<a href="http://www.baidu.com">百度</a>

                <a href="http://www.google.com">google</a>

          650) this.width=650;" src="/e/u261/themes/default/images/spacer.gif" style="background:url("/e/u261/lang/zh-cn/images/localimage.png") no-repeat center;border:1px solid #ddd;" alt="spacer.gif" />

<img> ：圖片元素，src指向圖片地址，行內元素，不會自動換行

          例：<img src="1.png"/>

                 <img src=2.png/>

               650) this.width=650;" src="/e/u261/themes/default/images/spacer.gif" style="background:url("/e/u261/lang/zh-cn/images/localimage.png") no-repeat center;border:1px solid #ddd;" width="176" alt="spacer.gif" />

<i></i>：斜體字標記，行內元素

<b></b>：粗體字標記，行內元素

<u></u>：底線標記，行內元素

<s></s>：刪除線標記，行內元素

：下標標記，行內元素

：上標標記，行內元素

<hr/>：分割線，單行標記

          例：<i>這是i標記</i>

               <b>這是b標記</b>

               <s>這是s標記</s>

               <u>這是u標記</u>

               _這是sub

               ^這是pub

               <hr/>

        650) this.width=650;" src="/e/u261/themes/default/images/spacer.gif" style="background:url("/e/u261/lang/zh-cn/images/localimage.png") no-repeat center;border:1px solid #ddd;" width="383" alt="spacer.gif" />

<div></div>：分區標記，塊元素，會自動換行

<span></span>：分區標記，行內元素

表格：

<table>

     <tr>

          <td></td>

     </tr>

</table>

<tr>：每一行

<td>：第一列

屬性：

     border：顯示表格邊框

     cellspacing：儲存格的外邊距

     cellpadding：儲存格的內邊距

     align：表格內元素水平對齊

     valign:表格內元素簡直對齊

     rowspan：合并行

     colspan：合并列

例：

<table cellspacing="1px" cellpadding="1px" border="1px">

  <tr>

  <td>第一行第一列</td>

  <td>第一行第二列</td>

  </tr>

  <tr>

  <td>第二行第一列</td>

  <td>第二行第二列</td>

  </tr>

</table>

650) this.width=650;" src="/e/u261/themes/default/images/spacer.gif" style="background:url("/e/u261/lang/zh-cn/images/localimage.png") no-repeat center;border:1px solid #ddd;" alt="spacer.gif" />

列表：

<ol></ol>：有序列表

<ul></ul>：無序列表

<li></li>：列表中子項目

例：

     <ol>

         <li>有序列表</li>

         <li>有序列表</li>

         <li>有序列表</li>

     </ol>

     <ul>

         <li>無序列表</li>

         <li>無序列表</li>

         <li>無序列表</li>

     </ul>

     650) this.width=650;" src="/e/u261/themes/default/images/spacer.gif" style="background:url("/e/u261/lang/zh-cn/images/localimage.png") no-repeat center;border:1px solid #ddd;" width="142" alt="spacer.gif" />

表單

<form></form>：表單元素

<input type="" value=""/>：輸入框

     屬性：type="text/password/submit/button/radio/checkbox"         

               text：文本輸入框

               password：密碼輸入框，文本為密文

               submit：提交按鈕 

               button：普通按鈕

               radio：單選框

               checkbox：複選框

               checked：預設選中項

          value：文字框提示，預設值

<textarea></textarea>：多行文本域

          屬性：cols ：指定文本域的列數

                    rows：指定檔案域的行數

例：

          <form action="">

              使用者名稱：<input type="text" value="請輸入使用者名稱"/><br/>

              密碼： <input type="password" value="請輸入密碼"/><br/>

              性別： <input type="radio" name="sex" value="man" checked/>男

                 <input type="radio" name="sex" value="woman"/>女

                 <br/>

         愛好： <input type="checkbox" name="interest" value="1" checked/>藍球

                 <input type="checkbox" name="interest" value="2"/>電影

                 <input type="checkbox" name="interest" value="3"/>音樂

                 <input type="checkbox" name="interest" value="4"/>散步

        簡歷：<br/><textarea cols="30" rows="10">請輸入個人資訊<textarea><br/>

        來自: <select>

                    <option>請選擇</option>

                    <option>北京</option>

                    <option>上海</option>

               </select>

                 <br/>

                 <input type="submit" value="提交"/>

       </form>

650) this.width=650;" src="/e/u261/themes/default/images/spacer.gif" style="background:url("/e/u261/lang/zh-cn/images/localimage.png") no-repeat center;border:1px solid #ddd;" alt="spacer.gif" />

為控制項分組

<fieldset>：為控制項分組

<legend>：指定分組元素標題

例：

     <fieldset>

         <legend>地址資訊</legend>

         地址：<input type="text"/><br/>

         郵編：<input type="text"/>

     </fieldset>

650) this.width=650;" src="/e/u261/themes/default/images/spacer.gif" style="background:url("/e/u261/lang/zh-cn/images/localimage.png") no-repeat center;border:1px solid #ddd;" alt="spacer.gif" />

<!-- 中間部分為注釋 -->  ：注釋符號，中間部分在網頁上不顯示

特殊字元：

&nbsp;   ：空格

&amp;   ：&

&lt;        ：<

&gt;       ：>

本文出自 “探討科學” 部落格，請務必保留此出處http://xiaoxin901008.blog.51cto.com/10300691/1934974

HTML元素總結