HTML5的基礎知識介紹

<!DOCTYPE html>
<!--
   ↑ 聲明文檔類型爲HTML5文件。
       文檔聲明,在HTML文檔必不可少,且必須放在文檔第一行。
-->css

 

<head>
    <!--{meta標籤}
    一、charset屬性:單獨使用。設置文檔字符集編碼格式。
          >>>寫法:<meta charset="UTF-8">
       >>>常見的中文編碼格式:
    GB-2312:國標碼,簡體中文
    GBK:擴展的國標碼,簡體中文
    UTF-8:萬國碼 Unicode碼 基本兼容各國語言
    二、http-equiv屬性:需配合content屬性使用。主要聲明瀏覽器如何解釋編譯文件。
       >>>寫法:<meta http-equiv="屬性值"  content="屬性值詳細內容">
    >>>經常使用屬性值:Content-Type HTML4.01以前的文檔內容編碼聲明
             refresh  網頁刷新         set-Cookie設置瀏覽器cookie緩存
    三、name屬性:需配合content屬性使用。主要用於給搜索引擎提供必要信息。
    >>>寫法:<meta name="屬性值"  content="屬性值詳細內容">
    >>>重要屬性值:author  做者,聲明網站做者,經常使用公司網址表示
             keywords 網站關鍵字   ,多個關鍵字,用英文逗號分隔
             description 網頁描述,搜索引擎顯示在title下的描述內容
    *http-equiv和name屬性,必須與content屬性配合使用。前二者只是用於聲明即將修改哪些屬性值,
      而實際的屬性值內容,在content中描述。
 -->
    <!--做者-->
    <meta name="author"  content="http://www.jredu100.com"/> 
    <!--網頁關鍵字-->
    <meta name="keywords"  content="html5,網頁,web前端開發"/>
    <!--網頁描述-->
    <meta name="description"  content="這是我在傑瑞教育開發的第一個網頁"/>
    <!--聲明文檔的編碼格式-->
    <meta charset="UTF-8">
  
  
  
    <!--{link標籤}
    一、做用:用於爲網頁連接各類文件
    二、經常使用屬性:
    rel:用於代表被連接文件與當前文件的關係。此處選icon,代表被連接的圖片是當前網頁的icon圖標。
    type:代表被連接文件是什麼類型,能夠省略。
    href:代表連接文件的地址。
    -->
    <link rel="icon" type="image/x-icon"href="tupian/weixin.png"/>
  
  
    <!--網頁的標題,即網頁選項卡內的文字-->
    <title>個人第一個網頁</title>
 </head>html

 

<body>
  <!--{HTML的標籤分類}
   一、塊級標籤:自動換行,先後隔一行
   二、行級標籤:按行逐一顯示
   是否自動換行,是咱們斷定塊級標籤的重要指標。
  -->
  <!-- [常見的塊級標籤]
   標題標籤<h1></h1>……<h6></h6>
   水平線<hr/>
   段落<p></p>
   換行<br/>
   引用<blockquote></blockquote >
   預格式<pre></pre>
  -->
  <!--標題標籤<h1></h1>......<h6></h6>:默認加粗,H1最大,H6最小
   <h1>一級標題</h1>
   <h2>二級標題</h2>
   <h3>三級標題</h3>
   <h4>四級標題</h4>
   <h5>五級標題</h5>
   <h6>六級標題</h6>
  -->
  <!--引用<blockquote></blockquote >
   一、代表標籤中的文字,爲引用的內容。瀏覽器顯示爲段落縮進
   二、cite屬性,代表引用的來源,通常爲引用的網址URL
  -->
  <!--預格式<pre></pre>
   瀏覽器解析時,會按照等寬字體顯示,而且保留標籤內的空格和回車。經常使用於保留代碼格式。
  -->
  <h1>基於佈局的塊級標籤</h1>前端

  <!--[有序列表ol order list]-->
  <ol>
   <li>列表第一項</li>
   <li>列表第二項</li>
   <li>列表第三項</li>
   <li>列表第四項</li>
  </ol>
  <!--[無序列表 ul unorder list]-->
  <ul>
   <li>列表第一項</li>
   <li>列表第二項</li>
   <li>列表第三項</li>
   <li>列表第四項</li>
  </ul>
  <!--[定義描述列表]
   <dl>
    <dt>標題</dt>
    <dd>描述項</dd>
   </dl>
    通常狀況下,標題dt只有一項。描述項dd能夠有N多項。
    瀏覽器顯示時,標題頂格顯示,dd會縮進顯示。
  -->
  <dl>
  <dt>這是dl的列表</dt>
   <dd>描述項1</dd>
   <dd>描述項2</dd>
   <dd>描述項3</dd>
   <dd>描述項4</dd>
  </dl>
  <!--[圖片組合標籤figure]
   一、<figure></figure>標籤有兩個子標籤;
   <img src="">:一幅圖片,src表示圖片的路徑
   <figcaption></figcaption>:圖片的標題
   二、瀏覽器顯示爲:圖片與標題上下排列,且總體向後縮進一個單位。
  -->
  <figure>
   <img src="tupian/weixin.png" />
   <figcaption>這是圖片的標題。</figcaption>
  </figure>html5

<!--[分區標籤]
   常配合CSS使用,爲網頁中最經常使用的分區標籤,經常使用於網頁佈局使用
  -->
  <div style="width:100%;height=100px;">
   這是div裏面的文字。
   <h1>我是div裏面的標題。</h1>
  </div>web

</body>瀏覽器

 

<body>
  <!--[常見的行級標籤]
   span(文本)
   img(圖片)
   em(強調)
   strong(強調)
   q(短引用)
   a(超連接)
   i(傾斜)
   b(加粗)
   small(縮小字體) 
  -->
  <!--span(文本):用於包裹一部分文字,進行特定樣式的修改。
  -->
  姜老師真<span style="color:blue; font-size: 36px;">醜</span><br/>
  <!--em(強調):瀏覽器會顯示爲傾斜。
   strong(強調):瀏覽器會顯示爲加粗。
   i(傾斜):
   b(加粗):
   [strong/em/i/b標籤的區別]
   一、em和strong都表示強調,並且strong的強調程度要大於em,strong和em標籤都可多層嵌套,表示強調
   程度的遞增。
   二、em和i都能傾斜,strong和b都能加粗。可是strong和em多了一層強調的語義。能夠幫助搜索引擎快速
   抓取網站重點。並且HTML5要求開發者,儘量的實現代碼的語義化。
  -->
  <em>我被em標籤強調了!!!</em><br/>
  <strong>我被strong標籤強調了!!!</strong><br/>
  <!--
   q(短引用):經常使用於一句話的引用,cite屬性表示引用來源。瀏覽器解析時,會在內容的先後插入雙引號。
  -->
  <q cite="http://www.jredu100.com">我是用q標籤聲明的一句引用的話</q><br/>
   <!--
   small(縮小字體):small標籤能夠多層嵌套,表示比默認字體小一號,直到字號小到最小號爲止。
   big(放大字體):同small能夠多層嵌套,直到字號最大爲止。可是,在最新的規範中,small和big標籤
   不被提倡使用。提倡使用style="font-size:11px;"CSS樣式替代。
   -->
   <!--
    [img圖片標籤]
    一、src屬性:表示圖片引用路徑。
     >>>src中常見路徑的寫法:
     ①相對路徑:
      當圖片在當前文件下一層時,文件夾名/圖片名 src="img/abc.jpg"
      當圖片與當前文件在同一層時,圖片名 src="abc.jpg"
            當圖片在當前文件上一層時,../圖片名src="../abc.jpg"
     使用相對路徑時,圖片最外層只能放到網站根目錄(圖片必需要在項目文件夾中)。
     ②絕對路徑:寫法file:///E:/aaa.png 可是,嚴禁使用。
     ③網絡鏈接:直接使用圖片的網絡地址,可是因爲圖片在別人服務器,不可控,因此不建議使用。
    二、title:當鼠標指上時,顯示的提示文字
    三、alt:當圖片沒法加載時,顯示的文字
    四、width/height:圖片的寬度高度,至關於CSS中的style="width:   ; height:  ;"
    五、align:圖片周圍的文字相對於圖片的排列方式,可選值:top/center/bottom
   -->
   <img src="tupian/weixin.png" title="vivoX9,柔光雙攝" />
    <img src="weixin1.png" />
    <img src="../weixin2.png" />
  <!--
   [超連接a]
   一、href:超連接的跳轉地址。能夠寫網絡連接,或者本地html文件的相對路徑,肯定方式同img的src路徑
   二、title:鼠標指上後顯示的文字。
   三、target:設置超連接打開窗口的位置。_self自身頁面打開(默認) _blank新頁面打開
   四、rel:代表即將跳轉的頁面,與當前頁面的關係;
    rel="prev"即將跳轉的頁面,是當前文檔的前一篇文章
    rel="next"即將跳轉的頁面,是當前文檔的後一篇文章
    rel="prefetch"預加載,當前文檔加載完成後,利用空餘網速,預加載即將跳轉的頁面
   [功能性連接]
   mailto://1098223127@qq.com
   tencent://message/?uin=1098223127
   [錨連接]
   一、本頁面錨連接
    ① 設置一個錨點,<a name="top"></a>用name屬性表示錨點名稱
    ② 在超連接的href屬性中,使用#name跳轉到指定的錨點位置:<a href="#top"></a>
   二、其餘頁面錨連接
    ①需跳轉的頁面設置錨連接
    ②在超連接的href屬性,文件名.html#name
    <a href="aaaa.html#name"></a>
    注:因爲谷歌/IE的兼容問題,需在錨點中,插入一個空格&nbsp;才能生效
    <a name="top">&nbsp;</a>
    
    
    因此之後錨點名稱:<a name="top">&nbsp;</a>
    本頁面就是<a href="#top"></a>
    別的頁面就是<a href="文件名.html#name "></a>
  -->
   <a href="唐詩三百首.html#top" title="vivoX9,照亮你的美" target="_blank">這是
    一個超連接</a>
    
    
    
     <!--s有誤文本:刪除線-->
  <s>這是s標籤中的文字</s>
  
  <!--cite標籤:瀏覽器顯示爲傾斜,經常使用於書、畫做、做品的引用-->
  <cite>這是cite標籤</cite>
  
  <!--code:只是表示計算機代碼。可是瀏覽器只會顯示等寬字體,不會保留代碼格式,需配合pre標籤使用-->
  <pre>
  <code>
StringBuffer sb = new StringBuffer();
for(String s : arr){
      sb.append(s);
}
  </code>
  </pre>
  
  <!--bdo:表示文本方向,dir="ltr" 從左往右  dir="rtl" 從右往左-->
  <bdo dir="ltr">1234567</bdo>
  
  <!--kbd:表示須要用戶用鍵盤輸入的內容。瀏覽器顯示爲等寬字體-->
  請輸入「<kbd>Esc</kbd>」退出系統。
  
  <!--sup:上標文本   sub:下標文本-->
  X<sup>2</sup>
  X²
  <!--版權符號  空格-->
   &copy;  空格 &nbsp; 
  
  <!--u:下劃線-->
  <u>這是u標籤</u>
  
  <!--mark:高亮或標記文本  瀏覽器顯示爲黃色背景-->
  <mark>哈哈哈哈哈</mark>緩存

 

<!--[表格table]
   表格<table></table>
   表格的行<tr></tr>
   表格的列<td></td>
   表頭的表頭列<th></th>(將tr中的td,替換爲th,表示本行爲表頭)
      th默認加粗,且在單元格居中顯示安全

 

【table的經常使用屬性】
   一、Border :表格的邊框屬性;當使用border=""設置邊框時,會在因此td一級table上嵌套邊框,
   當border加大時,只有table最外層框線加粗,td單元格上的框線不會變化
   二、Cellspacing:單元格和單元格之間的間隙,當cellspacing="0"時,單元格之間間隙爲0,但邊框線
   並無合併(邊框線仍是兩條線的寬度)
   [合併邊框的寫法] style="border-collapse:collapse;"使用邊框合併後,無需設置cellspacing
   三、Cellpadding:單元格內邊距,單元格中文字與單元格邊框之間的距離。
   四、Width/Height:表格的寬度高度;
   五、Align:設置表格在父容器中的對齊方式:left/居左    center/居中  right/居右
   [注意] 當表格使用align屬性時,至關於使表格浮動,可能會致使表格後面的元素受表格浮動影響,致使佈局錯亂。
   六、Bgcolor:背景色
   七、Background:背景圖片,後接相對路徑。當背景圖和背景色同時生效時候,背景圖會覆蓋背景色。
   八、Bordercolor:邊框顏色服務器

 

-->cookie

 

<!--[<tr><td><th>標籤的屬性]
   >>>當表格屬性與行列屬性衝突時,會以行列屬性爲準
    屬性設置優先級:td>tr>table
   一、width、height:給單個的行、列,設置寬度高度;
   二、bgcolor:背景色
   三、align:設置單元格中的文字,在單元格中的水平對齊方式left/center/right
   四、valign:設置單元格中的文字,在單元格中的垂直對齊方式top/center/bottom
   五、nowrap:nowrap="nowrap"設置單元格文字行末不斷行
  -->
  <!--[表格的跨行與跨列]
   一、跨列:colspan,某單元格跨N列,則該單元格右邊的N-1個td就不須要了。
   二、跨行:rowspan,
  -->

 

 

<!--[form表單]
   一、兩個重要屬性:
    action:表單須要提交的服務器地址。
    method:表單提交數據使用的方法。get/post
    >>>get和post的區別
    ①get傳參使用URL傳遞,全部參數在地址欄可見,不安全;get傳參數據量有限;
    ②post傳參使用http請求傳遞,比較安全,post能夠傳遞大量數據;
    but,get請求的傳輸速率要比post快。
    
    >>>URL傳參的形式:連接URL地址?name1=value1&name2=value2
   
   二、input的經常使用屬性:
    ①type:設置input的輸入類型
    ②name:給input輸入框起名。通常狀況下,name屬性必不可少。由於,傳遞數據時,使用name=value
    (輸入內容)的形式傳遞
    ③value:input輸入框的默認值。
    ④placeholder:輸入框的提示內容。當input有默認的value或者輸入值時,placeholder消失。
   三、input-type屬性的經常使用屬性值:
    ①text:文本輸入框
    ②password:密碼輸入框,輸入內容默認顯示小黑點。
    ③radio:單選框/ checkbox:複選框
    >>>使用radio/checkbox時,value屬性必填。提交時,提交的爲value中的默認值。
    >>>radio/checkbox憑藉name屬性,肯定是否屬於同一組,name相同爲同組,只能選一個
    >>>使用checked="checked"屬性,設置默認選中項
    ④file:文件上傳
    >>>使用accept="類型",設置只能上傳的文件類型,image/*任意格式圖片
    ⑤submit:提交按鈕,將全部表單數據,提交至後臺服務器
    ⑥reset:重置表單數據,將表單數據恢復到默認狀態。
    ⑦image:圖形提交按鈕,跟submit同樣,具備表單提交功能。
    >>>使用src屬性,選擇圖片路徑
    ⑧button:普通按鈕,沒有什麼用處。
   四、屬性名等於屬性值的狀況:
    ①checked="checked"設置radio或checkbox的默認選中項
    ②multiple="multiple" 設置select爲多選控件
    ③selected="selected" 設置select控件,默認選中的option選項
    ④readonly="readonly"設置textarea只讀,不容許編輯
    ⑤disabled="disabled"禁用控件。當input被disabled時,該input的name和value將沒法
    向後臺傳遞
    ⑥hidden="hidden"隱藏控件。等效於<input type="hidden"/>
   五、【下拉選擇控件 select】
     ① 寫法:<select>
     <option></option>  //能夠有N多個
      </select>
   ② name屬性,應該寫在<select>上,全部選項只有一個name
   ③ multiple="multiple" 設置select控件爲多選,可在界面使用Ctrl+鼠標,進行多選。通常不用。
   ④ option經常使用屬性:
     value="":當option沒有value屬性時,日後臺傳遞的是<option></option>標籤中的文字;
          當option有value屬性時,日後臺傳遞的是value屬性的值。
     title="":鼠標指上後顯示的文字。
     selected="selected":默認選中。
   ⑤ <optgroup label="山東省"></optgroup> :用於將option標籤進行分組,label屬性表示分組名。
   六、 【文本域 textarea】
   ① 寫法:<textarea></textarea>
   ② 設置寬高style="width: 200px; height: 150px;"  自身有cols="" rows=""兩個屬性,
   但不經常使用
   ③ readonly="readonly" 設置爲只讀模式,不容許編輯。
   ④ style="resize: none;" 設置爲寬高不容許修改。
   ⑤ style="overflow: ;" 設置當文字超出區域時,如何處理。
   >>> 也能夠經過overflow-x/overflow-y分別設置水平垂直方向的顯示方式。
   >>> 經常使用屬性值:hidden 超出區域的文字,隱藏沒法顯示
      scroll 不管文字多少,均會顯示滾動
      auto 自動,根據文字多少自動決定是否顯示滾動條(默認樣式)
   七、表格的邊框與標題
   <form>
   <fieldset>表格的邊框
    <legend>聯繫方式</legend>表格的標題
    。。。N多個表單元素(input/select/textarea)
   </fieldset>
   </form>
   注:一個表單,能夠有多組邊框+標題

 

-->

 

<!--【HTML5智能表單】
   ①H5新增input的form屬性,用於指向特定form表單的id,實現input無需放在form標籤之中,便可經過
   表單進行提交。
   <form id=foo>
    ...
   </form>
   
   <input...form="foo">
    ②新增N多個type新屬性,詳見表格
    
    ③新增input的屬性:
    Autocomplete:自動完成功能。
    >>>根據記憶以前輸入過的內容在下次輸入時根據之前的內容提示,自動完成。
    >>>絕大部分瀏覽器自動開啓。
    >>>有兩個屬性值:off/on
    >>>能夠在<form>標籤上設置autocomplete,控制整張表單的自動完成開關,但能夠在個別input
     上單獨設置,覆蓋form的總體設置。
    Autofocus:自動得到焦點。autofocus="autofocus"
    Form:所屬表單,經過form表單的id,指向特定表單。
    Required:必填。 required="required"設置input爲必填。
    Pattern:驗證input的模式
    Placeholder:提示

 

-->

 

 

<!--HTML註釋-->
  <style type="text/css">
   /*CSS語法必須寫在<style>標籤中*/
    /*CSS註釋*/
    /*【僞類選擇器】
     一、寫法:選擇器名:僞類狀態{}
     常見的僞類狀態:
     :link  未訪問   :visited 已訪問
     :hover 鼠標指上狀態  :active 激活選定狀態
     注:當超連接同時具備以上四種狀態,則選擇器必須按照上述順序排列。
    
     :focus 得到焦點,經常使用於input*/
    /*【通用選擇器】
     一、寫法:*{}
     二、做用:選中頁面中的全部HTML標籤
     三、優先級:最低!*/
    /*【標籤選擇器】
     *一、寫法HTML標籤名{}
     *二、做用:選中全部對應的HTML標籤,並修改其樣式*/

/*【類選擇器class選擇器】
     *一、寫法:  .class名{}
     *二、調用:在須要修改樣式的HTML標籤上,使用class="選擇器名"
     *三、優先級:看成用於同一層時,class選擇器>標籤選擇器*/
    /*【ID選擇器】
     一、寫法:#選擇器名{}
     二、調用:在須要修改樣式的HTML標籤上,使用id="選擇器名"
     三、優先級:同一層時,id選擇器>class選擇器
     四、ID選擇器是惟一的!同一頁面嚴禁出現同名ID!!!*/
    /*【後代選擇器】
     一、寫法:選擇器1空格選擇器2空格……選擇器N{}
     二、生效規則:選擇器2必須是選擇器1的後代……以此類推
     【子代選擇器】
     一、寫法:選擇器1>選擇器2>……>選擇器N{}
     二、生效規則:選擇器2必須是選擇器1的直接子代!!!!*/
    /*【交集選擇器】
     一、寫法:選擇器1選擇器2……選擇器N{}
     二、生效規則:必須同時知足全部選擇器,纔會生效*/
    /*【並集選擇器】
     一、寫法:選擇器1,選擇器2,……,選擇器N{}
     二、生效規則:知足任意一個選擇器,都可生效*/
    /*【選擇器命名規範】
     一、只能有字母、數字和下劃線組成;
     二、開頭不能是數字。
     */
    /*【選擇器優先級】
     一、就近原則:近者優先。
     二、看成用於同一層時:可用權重計算
     權重劃分:標籤選擇器爲1
        class選擇器爲10
        ID選擇器爲100
        行級樣式表style=""  1000
        */
  </style>
  <!--【三種使用CSS的方式】
   一、行內樣式表:直接在HTML開始標籤中使用style=""的方式引用
   特色:將CSS代碼與HTML代碼徹底揉雜在一塊兒,不符合W3C關於內容與表現分離的要求。不利於樣式複用;
   優先級:最高。
   二、內部樣式表:在<head></head>中,使用<style type="text/css"></style>方式引用;
   特色:將CSS代碼與HTML代碼分離,可是沒有完全分離CSS文件與HTML文件,不利於多頁面複用樣式。
   三、外部樣式表:使用link標籤連接css文件。
   <link rel="stylesheet" type="text/css" href="css/01css.css"/>
   特色:實現了css與HTML的完全分離,有利於樣式複用及後期維護。
  -->

 

/*[顏色經常使用單位]
     十六進制:#ffffff
     顏色名稱:red
     RGB顏色:RGB(255,255,255)  255,255,255是白色   0,0,0是黑色
     RGBA:第四位數表示透明度。可選值0~1*/

 

/* [CSS經常使用文本屬性]

* 一、字體、字號:
   font-weight:字體的粗細,可選屬性值:bold加粗  lighter細體  100~900數值(400正常,700 bold)

font-size:字體大小   **PX  **%(瀏覽器默認字體大小的百分比,絕大部分默認16px)

font-family:字體族,設置字體。
    >>>多個字體樣式間用逗號分隔,瀏覽器解析時,會從左往右依次解析,選擇可用字體。
    >>>通常前面使用具體字體名稱,最後一個使用字體族類名稱。
        (經常使用字體族名稱:襯線體serif 非襯線體sans-serif(經常使用) 等寬體Monospace)
    >>>例如:font-family:Arial, 'Microsoft Yahei', sans-serif;

font-style:字體樣式,正常(normal) 斜體(italic)

* font-variant:small-caps; 將字母轉爲小型大寫字體。

(瞭解)font縮寫形式:font-style font-variant font-weight font-size/line-height font-family
   >>> 使用注意事項 :
     ① 順序必須嚴格按照上述順序;
     ② 多個樣式之間用空格分割,並且font-size/line-height 必須做爲一對用/分割
     ③ font-size和font-family必須指定,其餘樣式不指定將採用默認樣式顯示;
   >>> 例如:font:italic bold 75%/1.8 'Microsoft Yahei', sans-serif;
        斜體 加粗 字號/行高   字體族(微軟雅黑,非襯線字體族)

二、字體顏色:
   color:字體顏色
   opacity:透明度,0~1之間的數字。 調整時控件以及子控件均會透明,而使用rgba調整時,只會時本控件透明,子控
   件不會發生透明度變化。

三、行距、對齊等:
   line-height:行高   ① 像素單位 48px ② 不帶px 正常行高的倍數 ③百分數 同2
    >>> 典型應用,調整控件中文垂直居中的方式:控件的height=控件的line-height

text-align:塊級元素中的行級元素的文字的水平對齊方式 left center right

letter-spacing:字符間距,字與字之間的間距

text-decoration:文本修飾 下劃線underline、刪除線line-through、上劃線overline、none

overflow:控制超出範圍文本的顯示方式(auto 根據文字多少自動顯示滾動條,scroll始終顯示滾動條, hidden
    超出範圍文本隱藏) 能夠經過overflow-x overflow-y分別設置水平垂直方向

text-overflow:設置多餘文字的顯示方式 clip裁剪掉 ellipsis省略號
    >>>【重點】讓每行多餘文字顯示省略號:
    ① white-space: nowrap; 設置行末不斷行
    ② overflow: hidden; 設置控件超出範圍隱藏
    ③ text-overflow: ellipsis; 設置多餘文本省略號顯示

white-space: nowrap; 設置行末不斷行顯示

word-break: 瀏覽器默認在空格處斷行,當一個單詞長度超出範圍時,會不斷行顯示, break-all 容許在單詞內
   換行。

text-shadow:文本陰影,有四個屬性值:
     ①水平陰影距離 必選,數值越大,陰影右移
     ②垂直陰影距離 必選,數值越大,陰影下移
     ③陰影模糊距離 可選,數值越大,陰影越模糊。默認爲0,不模糊
     ④陰影顏色 可選,默認爲黑色

text-indent:首行縮進,可用像素值調整縮進大小

* text-stroke: -webkit-text-stroke: 0.2px #008000; 描邊的粗細,描邊的顏色*/

 

/* 【CSS經常使用背景屬性】
  background
  
  background-color:背景色
  
  background-image:背景圖,background-image: url(圖片地址相對路徑);背景圖和背景色同時存在時,背景圖會覆蓋背景色
  
  background-repeat:背景圖重複方式 ,no-repeat不平鋪 repeat平鋪(默認) repeat-x水平平鋪  repeat-y垂直平鋪
  
  background-size:背景圖大小。

 【指定寬度高度】
   >>> 寬高的寫法,第一個屬性值爲寬度,第二個屬性值爲高度,能夠:①直接寫像素  ②寫百分比(父容器寬高的百分比)
   >>> 當只有一個屬性值時,默認爲寬度。高度等比縮放。
      當有兩個屬性值時,會按照指定的高度寬度進行壓縮/拉伸顯示。
     【其餘屬性值】
   >>> contain:圖片等比縮放,縮放到寬或高的某一邊等於父容器的寬高,另外一邊按照圖片大小縮放(可能致使部分空餘區域沒法覆蓋)
   >>> cover:圖片等比縮放,使背景圖像徹底覆蓋背景區域。(可能致使背景圖部分區域沒法顯示)
   
  background-position:位置座標、偏移量
   >>> 指定位置:left/center/right  top/center/bottom
      當只寫一個屬性值時,另外一個默認居中
   >>> 填寫座標:水平位置 垂直位置 (像素或百分比形式)
     ① 當只寫一個屬性值時,默認寫的爲水平方向,則垂直居中
     ② 當使用像素時:圖片的左上角往各個方向移動的實際距離
      水平方向:正數右移 負數左移  垂直方法:正數下移 負數上移
         (左負有正  上負下正)
     ③ 當使用百分數時,通常只能是正數。表明去掉圖片後,剩餘空白距離的分佈比例。例如 background-position:30%; 水平方向去掉圖片後,剩餘區域3:7分

 */

相關文章
相關標籤/搜索