總結過去幾天所學過的全部HTML知識點

 

換行符<br/>

段落<p>

<p>標籤有一個align屬性，其中有left（左對齊），right（右對齊），center（居中）值。

<p align="left">這是一個左對齊的段落</p>

 

標題

<h1>標題1</h1>        
<h2>標題2</h2>
<h3>標題3</h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>

文本格式化

<b>定義粗體文本</b>
<i> 定義斜體文本 </i>
<del>定義刪除文本</del>
<sup>定義上標字</sup>
<sub>定義下標字</sub>

連接

<a href="URL">  </a>

href 定義連接地址、 title 連接提示信息、 target 連接打開方式(_blank 新的空白頁,_self 當前頁,_top)

<a href="http://www.baidu.com" title=" 連接提示信息" target="blank" >這是一個連接到百度的連接,並打開新的窗口</a>

<a>標籤的其餘應用： <a href="mailto:郵箱地址">郵件連接</a>

<a href="tel:電話號碼">一鍵撥打</a>

<a href="sms:13181818181">一鍵發送短信</a>

 

錨點

錨點標籤用於使用戶"跳"到文檔的某個部分。 

<a href="#位置名">  </a>

<a name="位置名">  </a>

<a href="#me"> 我是錨點 </a> 
文字文字
文字文字
文字文字
...
<a name="me"> 點擊我,我就跳到"我是錨點"</a>

圖像

<img src="圖像的路徑" width="100" height="100" alt="替代文字" /> // alt 很重要,必填   當圖片還沒加載好時,alt能夠起到一個提示做用

圖片相對地址的定義

./　　　　　　        當前目錄

../ 　　　　　　      回到上一層目錄

images/　　　　     進入一層目錄

../images/ 　　      回到上一層目錄，而後再進入images目錄

　　

圖像熱區　　

<img src="URL" usemap="# map 名稱" />

　　<map name="map 名稱">

　　 　　<area shape="形狀" coords="座標值" href="URL" />

　　</map>

　　　　　　圓形：shape="circle"，coords="x,y,z"

　　　　　　　　　　x,y爲圓心座標（x,y），z爲圓的半徑

　　　　　　多邊形：shape="poly"，coords="x1,y1,x2,y2,x3,y3,..."

　　　　　　矩形：shape="rectangle"，coords="x1,y1,x2,y2"）

<img src="URL" usemap="#rect" />

　　<map name="rect">
　　 　　<area shape="rect" coords="" href="pttp://www.baidu.com" />
   </map> //這是一個矩形的圖像熱區,點擊圖像熱區就連接到百度148,139,295,0

 

audio(音頻)

語法： <audio src="song.ogg" controls="controls"></audio>

　　考慮到不一樣瀏覽器對視頻文件的兼容性：

　　　　<audio controls="controls">

　　　　　　<source src="song.ogg" type="audio/ogg">

　　　　　　<source src="song.mp3" type="audio/mpeg">

　　　　　　<p>您的瀏覽器不支持 audio標籤</p>

　　　　 </audio >

 

 

autoplay autoplay　　 若是出現該屬性，則音頻在就緒後立刻播放。

controls controls 　　  若是出現該屬性，則向用戶顯示控件，好比播放按鈕。

loop loop　　　　　　  若是出現該屬性，則每當音頻結束時從新開始播放。

preload preload　　    若是出現該屬性，則音頻在頁面加載時進行加載，並預備播放。若是 使用 "autoplay"，則忽略該屬性。

src url 　　　　　　　  要播放的音頻的 URL。

 

 

video(視頻)

語法： <video src=「movie.mp4」 controls="controls"></video>

　　考慮到不一樣瀏覽器對視頻文件的兼容性：

　　　<video controls="controls">

　　　　　　<source src="movie.ogg" type="video/ogg">

　　　　　　<source src="movie.mp4" type="video/mp4">

　　　　　　<p>Your browser does not support the video tag.</p>

　　　</video>

 

屬性說明：

　　autoplay autoplay  　　     　若是出現該屬性，則視頻在就緒後立刻播放。

　　controls controls 　　　     　若是出現該屬性，則向用戶顯示控件，好比播放按鈕。

　　loop loop　　　　　　　　      若是出現該屬性，則當媒介文件完成播放後再次開始播放。

　　muted muted 　　　　　   　規定視頻的音頻輸出應該被靜音。

　　poster URL 　　　　　　　 　 規定視頻下載時顯示的圖像，或者在用戶點擊播放按鈕前顯示的圖像。

　　preload preload　　　　　　  若是出現該屬性，則視頻在頁面加載時進行加載，並預備播放。若是 使用 "autoplay"，則忽略該屬性。

　　src url　　　　　　　　　　　 要播放的視頻的 URL。

　　 width pixels 　　　　　　　　設置視頻播放器的寬度。

　　height pixels 　　　　　　　　設置視頻播放器的高度。

 

 HTML 較經常使用的實體字符

 

無序列表

 

<ul >
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ul>

 

 

 

有序列表

 

<ol >
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>

 

 

定義列表

<dl>
  <dt>HTML</dt>
    <dd>html 是超文本標記語言</dd>

  <dt>XHTML</dt>
    <dd>可擴展超文本置標語言 </dd>
    <dd>表現方式與超文本置標語言（HTML）相似，不過語法上更加嚴格 </dd>
</dl>

 

 

HTML 表格

表格由 <table> 標籤以及一個或多個 tr、th或td 元素組成, 單元格能夠包含文本、圖片、列表、段落、表單、水平線、表格等等

   <table border="1">
         <tr>
             <td>一行一列</td>
            <td>一行二列</td>
        </tr>
        <tr>
            <td>二行一列</td>
            <td>二行二列</td>
        </tr>
    </table>
            

 

屬性                 值 　　　　　　　　　　　　　　        說明

width  　　　　　px、 %　　　　　　　　　　　　　   指定表格的寬度

height　　　　　 px、% 　　　　　　　　　　　　　　表格的高度

border  　　　　  px 　　　　　　　　　　　　　　　　指定表格邊框的寬度

cellpadding  　　 px 　　　　　　　　　　　　　　   　指定邊框與內容之間的空白

cellspacing 　　　px、 % 　　　　　　　　　　　　  　指定單元格之間的空白

align　　　　　　 left、 right 、 center 　　　　　　　指定對齊方式

valign　　　　 　 top、 middle 、 bottom 　　　　  　垂直排列方式

colspan 　　　　　　　　　　　　　　　　　　　       　合併列單元格

rowspan 　　　　　　　　　　　　　　　　　　　　      合併行單元格

  

 

 <iframe> 內嵌框架

說明：

屬性　　　　　　屬性值　　　　　　　 說明

width 　　　　　 　px , % 　　　　　　　　指定框架的寬度

height 　　　　　　px , % 　　　　　　　　指定框架的高度

scrolling　　　　　 yes,no,auto　　　　　　是否顯示滾動條

frameborder 　　　1, 0 　　　　　　　　　 是否顯示邊框

 

iframe可用做連接的目標，連接的target屬性必須引用iframe的name屬性

語法：

<iframe src="http://www.hao123.com" width="250" height="200" scrolling="no" frameborder="0" name="框架名"></iframe>