H5學習筆記（一）

無淚薔薇發表於2019-01-22
H5筆記

1、web與internet
  1、internet是一個全球性的計算機網際網路絡
   因特網、網際網路
   主要服務：www，email、bbs（電子公告板）、ftp（上傳檔案）
   目標：資訊共享
    實現技術：
    Tcp/ip協議、 
   分組交換原理，資訊在網路上被分成許多個小資料，會進行
分組傳輸，到達目的地後將資料重組為資訊。
2、web
    前端主要就是實現客戶端技術，如果會服務端技術價格會更高
    1、什麼是web
    web就是internet上面的一種網頁應用程式
    將各種服務與資訊進行連線，並且提供了生動的圖形使用者介面
    2、web的工作原理
    1、基於b/s結構的模式
    2、c/s結構的模式 qq，微信
     3、web的組成
    瀏覽器、通訊協議（http）、web伺服器
    瀏覽器與伺服器
    伺服器：
        儲存web頁面，提供託管環境
        響應瀏覽器的請求，執行伺服器端程式
        主流的伺服器：
            tomcat
            iis
            apache
    瀏覽器：user Agent 使用者代理
        提交使用者請求
        解析html程式碼和指令碼程式，使用圖形化方式顯示內容
        瀏覽器產品：google、firefox、safari、opera、ie
    4、web相關技術
      1、伺服器端技術
        php、jsp、asp
      2、客戶端技術
        html
        css
        JavaScript（剩下的那些都是在這三個基礎之上封裝的框架）
2、html
  1、html概述 超級文字標記語言
    .html .htm字尾名
  2、html文件結構
    1、文件宣告 用於指定html的風格和版本
      html5：<!doctype html>
      出現在頁面的最頂部
      2、html頁面
      位置：<!doctype html>下方
      數量：有且只有一個
      標籤：<html></html>

                html頁面包括兩大部分

 1、網頁頭部：<head></head>
            <title></title>--標題
            <meta/>定義編碼，關鍵字、描述、自動重新整理
             <meta charset="utf-8"/>
             定義頁面的編碼格式
             <meta http-equiv="refresh" content="3;http://www.baidu.com"/>
             3秒之後跳到百度頁面
             <link/>--引入外部css樣式表
             <script></script>--引入JavaScript
             <style></style>--定義內部樣式表

    2、網頁主體：<body ></body>
            text字型顏色 bgcolor定義背景顏色
            頁面上顯示的內容都放到body裡邊
  3、html基本語法
    1、標籤語法
     1、什麼是html標籤
        在html中，用於描述功能的符號，不同標籤有不同的功能，html由不同的標籤組成
     2.標籤的組成
     分為兩大類
     1、封閉型別標籤
        有開始，也有結束的標籤，也叫雙標籤
        語法：
        <標籤名稱>內容</標籤名稱>
        <p></p>、<hn></hn>、<a></a>、<b></b>、<div></div>
    2、非封閉標籤
        <input/>、<img>、<br>、<hr>
      語法：<標籤名稱>或<標籤名稱/>
    2、元素
        從開始標籤到結束標籤之間的所有內容，都統稱為元素。
        元素：標籤、屬性、內容
        1、元素巢狀：
        在一個元素內部又增加了另外一個元素
        語法：
          <標籤1>
            <標籤2></標籤2>
          </標籤1>
          注意：
          1、巢狀順序
            一定要完整巢狀
            <div>
                <p></p>
            </div>正確
            <div>
                <p>dsfskjdfh
            </div>錯誤
          2、程式碼縮排
            巢狀程式碼中，子級元素前，要通過幾個空格來表示層級關係
            <p><div></div></p>
        2、屬性和值
        屬性：修飾元素不同的顯示效果
        值：確定顯示效果的內容
        屬性：只能宣告在開始標籤中，並且屬性與標籤名稱中間用空格分開
        語法：<標籤 屬性名1=屬性值1 屬性名2=屬性值2></標籤>
        屬性和值之間用=關聯
        標準屬性：
        所有元素都具備的屬性
        id:標識元素在頁面中的唯一名稱
        title:滑鼠移入元素時，所提示的文字內容
        class：定義元素的類樣式(與css相關)
        style:定義元素的內聯樣式（與css相關）
  4、html註釋
    註釋內容不會被瀏覽器解析執行
    語法：<!-- 被註釋的內容 -->
    註釋不能被巢狀
    不能寫在標籤內
  5、html版本
    html2.0
    html4.01 <div align=center></div>  <br><br/>
    xhtml1.0 <div align="center"></div> <br/>

    html5:
    目標：讓程式碼更簡潔
    1、所有的單標籤可以不加/
    2、某些特定的屬性，可以不給值
        disabled  checked  selected readonly
4、文字標記
    1、特殊字元
    需求：頁面上列印輸出<p></p>
    注意：
     1、html中，<>不能隨意輸出
     2、頁面上無論出現多少個回車和空格，最終都會被解釋為1個空格
     解決方案：靠‘轉義字元’
     轉義字元：&lt; <
           &gt; >
           &nbsp; 空格
           &yen;￥
           &copy;
        2、文字標籤
      1、文字樣式
        <b></b>加粗
        <i></i>斜體
        <u></u>下劃線
        <s></s>刪除線
        <sub></sub>下標
        <sup></sup>上標
      2、標題元素
        <hn></hn> n:1-6
        h1字型最大
      3、段落元素：<p></p>
        表示獨立成一個段落，並且會有垂直方向上的空白
        常用屬性：align ：center/left/right
      4、換行元素：<br>
      5、分割槽元素
        1、行內分割槽元素
           <span></span>
        作用：自定義顯示效果
        2、塊分割槽元素
           <div></div>
           作用：佈局
       塊級元素：<p></p>、div、hn
       預設情況下，塊級元素會獨佔一行，元素前後都會自動換行
       行內元素：<span>、b、i、u
       不會換行，可以和其他行內元素位於同一行
     6、分割線元素
        作用：在頁面繪製一條水平線
        <hr>
        屬性：
            size：高度
            width:寬度
            color:顏色
            align:center/left/right
     7、預格式化
     作用：保留原文件中的格式（回車和空格）
     <pre></pre>
day01 pm
1、影象和連結（url）
  1、url
    1、目錄和目錄結構
      1、目錄
        web站點中資料夾的名字
      2、目錄結構
        檔案所在目錄的完整表示方式
    2、url
      1、什麼是url
      uniform resource locator統一資源定位器，簡稱路徑
      作用：用來表示在網路中要用到的資源的位置
      2、url（路徑）分類
       1、絕對路徑
         1、什麼是絕對路徑
         資原始檔的地址，是從資原始檔所在的最高階目錄開始算起
         2、本機上的絕對路徑，從碟符處開始，一直到檔名稱為止C:\Users\Administrator\Desktop\day01
         3、網路資源中的絕對路徑
        完整url：
         http://www.baidu.com
         協議：http/https
         主機名：www.baidu.com
         目錄結構：img
         檔名：1.jpg
       2、相對路徑（重點）
        1、什麼是相對路徑
          查詢的資原始檔的位置是相對於當前檔案所在路徑開始出發 所經過的所有的目錄結構，就是相對路徑
          1、同目錄中
            當前檔案與資原始檔在同一資料夾中
            直接通過檔名進行引用
          2、資原始檔在子目錄中
          解決：先進入子目錄，再查詢資原始檔名稱
          img/btn.jpg
          3、當前檔案在子目錄中，資原始檔在父目錄結構下
          解決：先後退  ../（向上一級）
          再查詢
        注意：路徑描述最好不要出現中文
        儘量嚴格按照大小寫方式去描述路徑
  2、影象
    1、影象格式
        jpg、gif、png
    2、影象元素<img>單標籤
    屬性；src(必需)要顯示影象的url
          width:寬度
          height:高度
          title：滑鼠移入影象上顯示的文字
          注意：
          width和height只設定一個屬性的話，圖片等比縮放
          width和height賦值時，可以只給數字不給單位，html中，數字的單位預設是px（畫素）
  3、連結
    1、連結的作用
    允許使用者在頁面上完成點選並且跳轉的行為
    語法：<a>內容</a>
    屬性：1、href:連結url
          只有你設定了href屬性之後，才允許被使用者點選
          2、target：
        目標：開啟新頁面的方式是什麼
        取值：
            1、_self，預設值，在本身的頁面中開啟新頁面
            2、_blank:在新標籤頁中開啟頁面
         3、連結的表現形式
        1、下載資源
        設定href屬性為 .rar 或.zip等形式的檔案，就可以實現下載而不是跳轉
        2、形式為電子郵件連結
         <a href="mailto:郵箱地址">聯絡我們</a>
        3、返回頁面頂部的空連線
        <a href="#">返回頂部</a>
        4、連結到JavaScript
        作用：點選 連結 完成對一段JavaScript程式碼的呼叫操作
        <a href="javascript:js程式碼;"></a>
       4、錨點
        1、作用：為了在頁面的某個位置處。做一個標識，方便網頁隨時隨地的跳轉到這個標識上來
        2、錨點的使用
          1、定義錨點
            語法:<a>內容</a>
            屬性：name：錨點的名稱
          2、跳轉到錨點
          <a href="#錨點名稱">內容</a>
          3、id屬性定義錨點
           任何一個元素的id屬性值，都可以作為一個錨點
 2、表格
    1、作用：按照一定的格式去顯示資料
     表格：是由一組單元格按照從左到右，從上到下的順序進行排列
     資料都必需寫在單元格中
     2、建立表格
        1、定義表格<table></table>
        2、定義錶行<tr></tr>
        <td></td>單元格
        注意：tr標記放在table中，td要放在tr中
        <th></th>文字加粗，並且居中顯示
        3、預設的表格，每行單元格的數量都是統一的
    3、表格的屬性
      1、table屬性
        1、width:寬度
        2、height:高度
        3、align：center、left、right控制水平對齊方式
        4、border：設定表格的寬度
        5、cellpadding：內邊距，單元格的邊框與內容之間的距離
        6、cellspacing:外邊距，單元格與單元格之間的距離
        7、bgcolor:表格的背景顏色
      2、tr屬性
        1、align所在行的資料的水平對齊方式
        2、valign：所在行資料的垂直對齊方式
            top、middle、bottom
        3、bgcolor：所在行的背景顏色
     3、td屬性
        align
        valign
        width
        height
        colspan跨列
        rowspan跨行
     4、表格標題
     有且只有一個
     標籤<caption></caption>
     位置：table當中的第一行
     5、複雜應用
     1、行分組
        1、表頭行分組
        <thead></thead>
        2、表主體行分組
        <tbody></tbody>
        3、表尾行分組
        <tfoot></tfoot>
    2、不規則表格的實現
        通過colspan和rowspan來實現
        colspan：從指定單元格開始，橫向向右，合併掉幾個單元格（包含自己）
        rowspan：從指定單元格開始，縱向向下，合併掉幾個單元格（包含自己）
    3、表格的巢狀
    巢狀的表格，需要放在td中
    <table>
        <tr>
            <td>
                <table>
                    <tr>
                        <td></td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

相關文章