天天看點

黑馬程式員-HTLM知識點總結

---------------------- ASP.Net+Android+IOS開發、.Net教育訓練、期待與您交流! ----------------------

Html

     Html就是超文本标記語言的簡寫,是最基礎的網頁語言。

     Html是通過标簽來定義的語言,代碼都是由标簽所組成。

     Html代碼不用區分大小寫。

     Html代碼由<html>開始</html>結束。裡面由頭部分<head></head>和體部分<body></body>兩部分組成。

     頭部分是給Html頁面增加一些輔助或者屬性資訊,它裡面的内容會最先加載。

   體部分是真正存放頁面資料的地方

1HTML注釋與特殊字元

    用<!--注釋-->這種格式加入注釋

    常用特殊字元表:

 HTML編碼 顯示或處理結果

 &lt      <

 &gt      >

 &amp     &

 &quot    "

 &reg     ®

 &copy    ©

 &trade   ™

 &nbsp    空格字元

2 body标簽的屬性

    text屬性用于設定網頁中文本的顔色

    link屬性用于設定一般超連結文本的顯示顔色

    alink屬性用于設定滑鼠移動到超連結上方時超連結文本的顔色

    vlink屬性用于設定通路過的超連結文本的顯示顔色

    leftmargin屬性用于設定顯示畫面與浏覽器左邊緣的間隙,機關為像素

    topmargin屬性用于設定顯示畫面與浏覽器上邊緣的間隙,機關為像素

3 格式标簽

    <p></p> 段落标簽

    <br> 換行标簽

    <nobr></nobr> 防止因為文本過長浏覽器自動換行

    <blockquote></blockquote> 以縮進的方式顯示文本

    <center></center> 将内容居中顯示

    <marquee></marquee> 滾動标簽 屬性 direction= left right up down

          behavior=slide 滾動一次

          behavior=scroll 循環滾動

          behavior=alternate 來復原動

    <ol><li></ol>有序清單 

    <ul><li></ul>無序清單

    <pre></pre>預格式文本标簽

4 文本标簽

    <b></b>粗體字

    <i></i>斜體

    <u></u>下劃線

    <sub></sub>下标

    <sup></sup>上标

    <tt></tt>列印機風格顯示文本

    <cite></cite>引用方式顯示文本

    <em></em>強調的文本

    <strong></strong>加重的文本

    <font></font> 屬性(face:字型  size:大小 color:顔色)

5 超連結标簽

    <a href = "url"></a>

    <a href = "mailto:....." subject="主題"><a>

    <a name = "name"><a href ="#name">同一頁面的跳轉

    URL(Uniform Resource Locator)統一資源定位

    url的基本組成:協定    主機名      端口号 資源名

                HTTP://www.baidu.com:8080/index.html

6 圖像标簽

    <image>标簽 屬性src ="url" alt align borderwidth height

    圖像超連結 <a href="url" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" ><imgsrc="logo.gif"></a>  

    圖像地圖:一副圖像分成多個區域,每個區域指向不同的url位址,區域稱為熱點

    怎樣産生圖像地圖:

        (1)首先必須定義出圖像的各個熱點的形狀、位置坐标、及其指向的URL位址,這過程叫做熱點映射,圖像熱點映射需要使用<map name=mapname></map>标簽對進行說明

        (2)圖像映射中的各個區域用<area>标簽進行說明,<area>标簽的格式為<area shape="形狀"           coords="坐标" href="url" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >,href也可用nohref進行替換,表示在該區域點選滑鼠無效,<area>

        标簽還有一個target屬性,用來指明浏覽器在哪個視窗或者幀中顯示href指向的資源

        (3)定義好圖像熱點映射後,就在<img>中加入一個名為usemap的屬性設定,usemap屬性指定該圖像被用作圖像地圖,值為圖像熱點映射名稱,例如<img src="china.jpg"usemap="#mymap">

    sharp屬性設定說明:

        rect 矩形 coords屬性設定其左上角和右下角的坐标

        poly 多邊形 coords屬性設定其各個頂點的坐标

        cicle 圓  coords屬性設定其圓心的坐标及其半徑

1 表格基礎

  <tr>行标簽

  <td>單元格标簽

  <td>中的nowrap屬性防止因單元格内文本過長而自動換行

  <th></th>跟<td>作用差不多,其中文本為黑體居中,一般作為表頭使用

  <caption></caption> 說明表格的資訊

  每個表格可以有一個表頭、一個表尾和一個或多個表體(即正文),分别以THEAD、TFOOT和TBODY元素表示。TBODY作用是:可以控制表格分行下載下傳,進而提高下載下傳速度。(網頁的打開是先表格的的内容全部下載下傳完畢後,才顯示出來,分行下載下傳可以先顯示部分内容,這樣會減少使用者等待時間。)

2幀标簽

  <frameset>标簽對不能放在<body>标簽中 border屬性用來定義邊框寬度 framebarder用于定義邊框是  否顯示,可以為0,1,no,yes

  <frame>屬性 src表示初始url位址 name屬性表示幀視窗的名字 scrolling 是否顯示滾動條

  noresize邊框是否允許移動

  <a href="" target="_blank" rel="external nofollow" >中的target屬性:

       _blank 新啟動一個視窗打開連結

        _self  在同一個視窗中打開,預設

        _parent在父視窗即上一級視窗中打開

        _top   在整個浏覽器視窗中打開

  <noframes>标簽對 如果使用的浏覽器不支援frameset可在<noframes>标簽對嵌套<body>輸出這是個帶  架構的網頁但你的浏覽器不支援

  <iframe>标簽對可以不嵌套在<frameset>中,屬性跟<frame>類似,建立了一個單獨的幀視窗,實作畫中畫的效果

3 表單元素

  <form>用來建立一個表單,具有action,method,target,title,enctype

      action 用來設定接受的處理浏覽器的表單内容的伺服器程式的url,為空時預設為目前伺服器

      method 取值為get,post

      target 用來指定伺服器傳回結果顯示的目标視窗或者目标幀

      title 用來設定當網站通路者滑鼠停留在表單任意位置幾秒後浏覽器用黃色小浮标顯示的文本,一般為表單的名稱或者描述

      enctype 訓示浏覽器使用哪種編碼方式将表單資料傳送給www伺服器,取值:application/x-www-        form-urlencoded(預設 将上傳的資料轉換為URL編碼)和multipart/form-data(使用表單上傳檔案使用)

   <input type="hidden"> 在表單中建立一個隐藏的表單元素,在向伺服器送出時一并送出

   <input type ="file">  建立一個文本輸入區域,并在旁邊顯示一個浏覽按鈕

   <input type="image" name="map"> 在表單中建立一個圖像元素,在單擊圖像時可以實作跟送出按鈕相同的功能,并送出滑鼠單擊處的X坐标Y坐标map.x map.y

   <select><option></option></select> 建立清單框

     <select的屬性> multiple允許按ctrl選中多個清單項

    size 設定清單框中清單項顯示的行數 預設為1

  <option>的屬性 valueselected

   <textarea>标簽對用于建立多行文本區域

  屬性:cols列數rows行數

---------------------- ASP.Net+Android+IOS開發、.Net教育訓練、期待與您交流! ----------------------

詳細請檢視:http://edu.csdn.net

繼續閱讀