自己總結的HTML5知識點(一)

  • nternet 互聯網:將全球的計算機連接起來所形成的網絡

  • web 萬維網:通俗的說就是網頁,把各類信息通過網頁的形式提供給用戶

  • web與Internet的關系:web是internet上的一個應用

  • web工作原理:用戶使用瀏覽器通過HTTP協議訪問web服務器,web服務器通過HTTP協議反饋相應的信息到瀏覽器供用戶使用

  • HTML:超文本標記語言

  • 單標記/空標記:

     <input />
    
  • 雙標記

    <body></body>
    

    <!doctype html>
    <html>
    <head>
    <title>文檔標題</title>
    <body>
    <h1 align="center">標題</h1>
    <p valign="center">段落</p>

    </body>

    </head>
    </html>

  • <b></b>加粗<i></i>傾斜<u></u>下劃線<s></s>刪除線
    上標下標
    <div></div>塊分區<span></span>行內分區<pre></pre>預格式化
  • 插入圖片:

     <img src="1.jpg"/  width="100">  (絕對路徑)
    
    <img src="../1.jpg"/ height="200">   (相對路徑)
    
    width/height:設置圖片寬/高,只能設置一個,否則圖片會失真
    
  • 插入鏈接:

      <a href="http://www.------網址------">網址鏈接</a>
    
  <table border="1" bgcolor="red" width="10" height="10"
  cellspacing="0" cellpading="2">
  <!--創建表格/增添表格線/設置表格邊框顏色/設置寬/設置高/設置邊框粗細/設置內容與邊框距離-->
    <caption>表格標題</caption>         <!--設置表格標題-->
    <tr >                                   <!--創建行-->
        <td>第一行,第一列</td         ><!--創建單元格-->
        <td>第一行,第二列</td>
        <td>第一行,第三列</td>
     </tr>
  </table>
  • 行分組:

      - <thead></thead>表頭行分組
    
      - <tbody></body>表主體行分組
    
      - <tfoot></tfoot>表尾行分組
    
  • 單元格跨行:

      - <td rowspan="2"></td>   <!--跨兩行-->
    
  • 單元格跨列:

      - <td colspan="3"></td><!--跨兩列-->
    
  • 表格嵌套:

...

  <td>
     <table>
         ....
     </table>
  </td>

...

  • 有序列表
<ol type="列表類型" start="起始編號">
    ...
   <li>...</li>
    ...
   <li>...</li>
   ...
</ol>
        type類型
        1,數字(默認)
        a,小寫字母
        A,大寫字符
        i,小寫羅馬數字
        I,大寫羅馬數字
  • 無序列表

      <ul type="列表類型">
              ...
          <li>...</li>
              ...
           <li>...</li>
               ...
      </ul>
          type類型
          disc:實心圓(默認)
          circle:空心圓
          square,實心矩形
    
  • 定義列表

    • dl:標記定義一個定義列表

    • dt:標記定義了定義列表中的一個術語

    • dd:標記對定義列表中的術語提供定義

  • 表單
  <form><!--定義表單-->
    <!--主要屬性 action:定義表單被提交時發生的動作,通常包含服務方腳本的URL;
    method:指出表單數據提交的方式,取值為get或者post;
    enctype:表單數據進行編碼的方式;
    name:表單名稱-->
    <input type="text"><!--文本框-->
    <input type="password"/><!--密碼框-->
                                    <!--主要屬性
                                      name:名稱
                                      value:由訪問者自由輸入的任何文本
                                      maxlength:限制輸入的字符數
                                      readonly:設置文本控件只讀-->
  • <input type="radio"/><!--單選框-->
    <input type="checkbox"/><!--復選框-->
                                      <!--主要屬性
                                       name:設置名稱,并用于分組,一組單選框或者復選框的名稱必須相同
                                    value:文本,當提交form時,如果選中了此單選按鈕,那么value就被發送到服務器
                                       checked:設置默認被選中-->
    
  • <input type="submit"/><!--提交按鈕-->
    <input type="reset"/><!--重置按鈕-->
    <input type="button"/><!--普通按鈕-->
                                      <!--name:名稱
                                      value:按鈕的標題文字-->
    
  • <input type="hidden"/ name="" value=""><!--隱藏域-->
    <input type="file"/ name=""><!--文件選擇框-->
    <!----><input type="checkbox" name="chkHid" id="chkHid" />
    <label for="chkHid">不要公開我的信息</label>
      <!--將文本與控件聯系在一起后,單擊文本,效果就同單擊控件一樣-->
     </form>
    
  • 選項框

    • select:創建選項框

    • name:選項框命名

    • size:大于1,則為滾動列表

  • multipe:設置多選

  • 通用選擇器 *{ }

  • 元素選擇器 h1 { } 權值為1

  • 類選擇器 .color { } 權值為10

  • id選擇器 #num { } 權值為100

  • 內聯樣式 < p styple=""> 權值為 1000

  • 群組選擇器 .color,#num,h1 { }

  • 后代選擇器 body p { }

  • 子代選擇器 body>h2>p { }

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,915評論 18 139
  • 內容抽屜菜單ListViewWebViewSwitchButton按鈕點贊按鈕進度條TabLayout圖標下拉刷新...
    皇小弟閱讀 46,884評論 22 665
  • 邏輯狗是女兒時不時會看的書,做做練習,鍛煉思維能力,真的挺不錯的,每次做完都要求我檢查,有時也會自己先檢查一...
    甸媽閱讀 279評論 0 0
  • 停止寫作一個半月的時間,時間相當長了,在這段可以形成曲線圖的日子里,我的曲線是低平的,沒有寫過一篇或者一個字。 這...
    張好奇閱讀 444評論 14 12