HTML總結

sublime

環境配置

• 使用sublime text 3
• 打開百度在搜索框中輸入sublime text 3
• 普通下載
• 安裝,路徑自己選擇
• Preferences-->Package Control 輸入 install
• SublimeLinter 代碼提示插件
• emmet html 自動補全插件
• markdown 插件實現實時預覽和保存Markdown Editing + MarkdownLivePreview
• AutoFileName 快速列出你想引用的文件夾里面所有文件的名字，比如想引用test/img/1.png。只需要輸入/img,該插件就會自動提示/img下面的所有文件名
• JsForma可以自動幫助你格式化JavaScript代碼，形成一種通用的格式，比如對壓縮、空格、換行的js代碼進行整理，使得js代碼結構清晰，易于觀看。在已壓縮的JS文件中，右鍵選擇jsFormat或者使用默認快捷鍵（Ctrl+Alt+F）
• SublimeCodeIntel 這個插件支持以下語言的自動提示功能：PHP, Python, RHTML, JavaScript, Smarty, Mason, Node.js, XBL, Tcl, HTML, HTML5, TemplateToolkit, XUL, Django, Perl, Ruby, Python3.
  • 實現JS代碼自動補全功能:
    • preferences->packages settings ->SublimeCodeIntel ->Settings-User
    • 添加
      {
      "JavaScript": {
      ? "codeintel_selected_catalogs": ["JavaScript"]
      }
      }
• Sublime-HTMLPrettify代碼排版插件,安裝完快捷鍵ctrl+shift+h 一鍵格式化代碼.

sublime常用快捷鍵:

• Ctrl + / ------------------------注釋
• Ctrl + 滾動 -------------------字體變大/縮小
• Ctrl + O -----------------------打開源文件
• Ctrl + N -----------------------新建
• Ctrl + Shift + k --------------刪除一行
• Ctrl+X--------------------------刪除光標所在行
• Ctrl + Shift + ; --------------移除未閉合的容器元素
• Ctrl + D -----------------------就近選擇相同項
• Ctrl + Shift + D -------------復制這行文本插入到下一行
• Ctrl + Shift + V -------------粘貼并復制格式
• Alt + . ------------------------- 快速閉合標簽
• Alt + F3 -----------------------選中文本按下快捷鍵，即可一次性選擇全部的相同文本進行同時編輯。
• Ctrl + L-------------------------選中整行，繼續操作則繼續選擇下一行，效果和 Shift+↓ 效果一樣。
• Ctrl + Shift+ L----------------先選中多行，再按下快捷鍵，會在每行行尾插入光標，即可同時編輯這些行。
• Ctrl + M -----------------------光標移動至括號內結束或開始的位置。
• Ctrl + Shift + [ ---------------選中代碼，按下快捷鍵，折疊代碼。
• Ctrl + Shift + ] ---------------選中代碼，按下快捷鍵，展開代碼。
• Ctrl + K+ 0 --------------------展開所有折疊代碼
• Shift + Tab --------------------回退Tab的縮進.
• Ctrl + Enter------------------- 在當前行下面新增一行然后跳至該行
• Ctrl + Shift + Enter----------在當前行上面增加一行并跳至該行
• Ctrl + ←/→ --------------------進行逐詞移動，
• Ctrl + Shift + ←/→ ----------進行逐詞選擇
• Ctrl + Shift + ↑/↓ -------------移動當前行（文件會被修改）
• Ctrl+KK -------------------------從光標處刪除至行尾
• Ctrl+K Backspace ----------從光標處刪除至行首
• Ctrl+Y ---------------------------恢復撤銷
• Ctrl+J ----------------------------合并行（已選擇需要合并的多行時）
• Ctrl + [ -------------------------- 選中內容向左縮進
• Ctrl + ] ---------------------------選中內容向右縮進
• Ctrl + K+ u ----------------------文本轉換大寫
• Ctrl + K+ i -----------------------文本轉換小寫

form表單

<form>

用于包括輸入框,提交數據

action屬性

提交的地址,暫時不用理解

method

屬性提交數據的方法 get/post,如果不寫,默認是get方式.

<input>

根據tpye的類型,表現不同的形式

type:屬性

必須,確定性質

type:text :

表單輸入框

type:password

密碼輸入框

type:radio

單選框

• name 必須要有,這里表明當前的單選輸入框為一組
• value 必須要有,因為單選按鈕提交的結果是value的值. value一般采用數字編碼的形式表示.
• checked 默認選中

type:checkbox

多選框

• name 同radio
• value 同radio
• checked 默認選中

type:file

上傳

• 當選中的時候 ,實際文件并沒有被上傳上來
• multiple 可以實現多選

type:submit

提交按鈕

• value 按鈕顯示的內容
• 點擊后表單被提交到 form.action 配置的地址

name屬性

當前表單的名稱 目前必須要有,因為提交的時候后臺程序需要通過name屬性獲取表單的內容.

value:屬性

當前表單的內容.value是提交的結果.如果設置了vlaue,則是當前表單的默認值.

<select>

option 下拉框

• name 屬性需要設置
• value 每個option都要設置value
• selected 默認選中

<textarea>

多行文本輸入框

• cols /rows 文本框的寬度和高度
• name值需要設置,value指的是標簽內部的內容

<label>

用于包括輸入框的頭部和輸入框 使之稱為一體。多用于單選和多選。

• readonly 只讀屬性，輸入框內容不能更改。
• disabled 禁用 表單的值再提交時會被舍棄。
• <fieldset> <legend> 可以實現表單的分組。

get提交

• 參數被放到地址提交,比如: /D:/abc?username=張三&pwd=123&sex=0&experience=0
• 不安全
• 地址欄拼接的參數長度有限,一般是<4k
• 一般用于獲取數據

post提交

• 地址欄不顯示提交內容,再請求體顯示
• 相對安全
• 提交的數據量沒有上限
• 一般用于提交保存數據

    <!-- action 是當前表單提交的地址 -->
    <form action="www.bufanui.com" method="get">
        <fieldset>
            <legend>基本信息</legend>
            用戶名: <input type="text" readonly  name="username" value="張三"> <br>
            曾用名： <input type="text" disabled  name="oldname" value="張小三"><br>
            密碼: <input type="password" name="pwd"> <br> 
            性別: 
                <label>
                    男: <input type="radio" name="sex"  value="0"> 
                </label>
                <label>
                    女: <input type="radio" checked  name="sex"  value="1"> <br>
                </label>
        </fieldset>
    
        <fieldset>
            <legend>補充信息</legend>
            愛好: 
            <label>
                籃球: <input type="checkbox" name="like" value="basketball">
            </label>
            <label>
                足球: <input type="checkbox" checked name="like" value="football">
            </label>
            <label>
                乒乓: <input type="checkbox" name="like" value="pingpang"><br>
            </label>
        
        工作年齡: 
            <select name="experience">
                <option value="0">--無--</option>
                <option value="1">1年</option>
                <option value="2" selected>2~3年</option>
                <option value="3">3~5年</option>
            </select> <br>
        上傳頭像: <input type="file" name="avatar" multiple> <br>
        個人描述: <textarea name="desc" cols="30" rows="4">
                    我對工作有極大地熱情,我喜歡寫代碼!
                    我大學時候是一個德智體美勞全面發展的廢柴!
                </textarea> <br>
        </fieldset>
                
        <input type="submit" value="提交">
    </form>

常用轉義字符

<table style="width: 400px;">
<tbody>
<tr><th>顯示</th><th>說明</th><th>實體名稱</th><th>實體編號</th>
</tr>
<tr>
<td class="key">?</td>
<td>半方大的空白</td>
<td>&ensp;</td>
<td>&#8194;</td>
</tr>
<tr>
<td class="key">?</td>
<td>全方大的空白</td>
<td>&emsp;</td>
<td>&#8195;</td>
</tr>
<tr>
<td class="key">?</td>
<td>不斷行的空白格</td>
<td>&nbsp;</td>
<td>&#160;</td>
</tr>
<tr>
<td class="key"><</td>
<td>小于</td>
<td>&lt;</td>
<td>&#60;</td>
</tr>
<tr>
<td class="key">></td>
<td>大于</td>
<td>&gt;</td>
<td>&#62;</td>
</tr>
<tr>
<td class="key">&</td>
<td>&符號</td>
<td>&amp;</td>
<td>&#38;</td>
</tr>
<tr>
<td class="key">"</td>
<td>雙引號</td>
<td>&quot;</td>
<td>&#34;</td>
</tr>
<tr>
<td class="key">?</td>
<td>版權</td>
<td>&copy;</td>
<td>&#169;</td>
</tr>
<tr>
<td class="key">?</td>
<td>已注冊商標</td>
<td>&reg;</td>
<td>&#174;</td>
</tr>
<tr>
<td class="key">?</td>
<td>商標（美國）</td>
<td>?</td>
<td>&#8482;</td>
</tr>
<tr>
<td class="key">×</td>
<td>乘號</td>
<td>&times;</td>
<td>&#215;</td>
</tr>
<tr>
<td class="key">÷</td>
<td>除號</td>
<td>&divide;</td>
<td>&#247;</td>
</tr>
</tbody>
</table>

<a>

target屬性:

屬性規定在何處打開鏈接文檔。

有 4 個保留的目標名稱用作特殊的文檔重定向操作：

提示：這些 target 的所有 4 個值都以下劃線開始。任何其他用一個下劃線作為開頭的窗口或者目標都會被瀏覽器忽略，因此，不要將下劃線作為文檔中定義的任何框架 name 或 id 的第一個字符。

_blank

瀏覽器總在一個新打開、未命名的窗口中載入目標文檔。

_self

這個目標的值對所有沒有指定目標的 <a> 標簽是默認目標，它使得目標文檔載入并顯示在相同的框架或者

窗口中作為源文檔。這個目標是多余且不必要的，除非和文檔標題 <base> 標簽中的 target 屬性一起使用。

_parent

這個目標使得文檔載入父窗口或者包含來超鏈接引用的框架的框架集。如果這個引用是在窗口或者在頂級框

架中，那么它與目標 _self 等效。

_top

這個目標使得文檔載入包含這個超鏈接的窗口，用 _top 目標將會清除所有被包含的框架并將文檔載入整個瀏覽器窗口。在iframe發生嵌套的時候 在頂層的父類標簽刷新頁面

iframe

規定一個內聯框架。

一個內聯框架被用來在當前 HTML 文檔中嵌入另一個文檔。

height && width

規定寬高

frameborder

規定是否顯示 iframe 周圍的邊框。1為顯示,0為隱藏

HTML5 不支持

<!--用CSS代替-->
<iframe src="http://www.w3cschool.cc/" width="200" height="200" style="border:0px solid red">

scrolling

規定如何顯示滾動條

auto自動 yes始終 no不顯示

background

background-color 屬性

設置一個元素的背景顏色。

background-position 屬性

設置背景圖像的起始位置。

background-size 屬性

css3屬性:指定背景圖片大小。

background-repeat 屬性

設置如何平鋪對象的 background-image 屬性。

background-image 屬性

設置一個元素的背景圖像。

background 屬性

背景縮寫屬性可以在一個聲明中設置所有的背景屬性。

可以設置的屬性分別是：background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment,和background-image.

縮寫:

background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
縮寫順序:background: 
        [background-color] 
        [background-image] 
        [background-repeat] 
        [background-attachment] 
        [background-position] / [ background-size] 
        [background-origin] 
        [background-clip];。
例:background: green url(img/avatar.jpg) no-repeat 100px 150px;

標簽形式

塊狀標簽 (石頭)

• 會自動換行
• 寬高有效
• 比如: div p h1~h6 ul>li ol>li dl>dt~dd tr form

行內塊標簽 (果凍)

• 不會自動換行
• 寬高有效
• 比如: img td input select button

行內標簽 (水)

• 不會自動換行
• 寬高無效
• 比如: span a

元素性質改變

• display 我們可以通過修改display來修改元素的性質。
• block：設置元素為塊元素
• inline：設置元素為行內元素
• inline-block：設置元素為行內塊元素–
• none：隱藏元素

盒子模型

盒子邊框屬性 border

盒子邊框和內容填充物 padding

盒子間距 margin

margin

只對行內塊或塊級元素生效.

垂直重疊

當兩個div垂直放置的時候,上面盒子的margin-bottom和下面盒子的margin-top會發生重疊,最終的結果 以大 的為準

嵌套崩塌

當兩個盒子發生嵌套的時候,里面盒子的margin-top會直接作用到外層盒子

解決方法:

• 給父類盒子添加極小的padding/border/
• overflow(推薦) overflow: hidden;

div 和span的屬性:

• div 和span 只是單純的標簽 么有任何樣式和語義化
  • div 一般用于布局,屬于塊狀標簽.
  • span一般用于特殊字段引用,屬于行內標簽.
    • 具有默認屬性會導致字體高度變化
      • 使用display: block;轉換為塊狀標簽解決。

CSS權重:

• 行內樣式(1000) > id選擇器(100) > class選擇器(10) > 標簽選擇器(1) > 通配符(0)
  • 雙重選中可以疊加權重.
  • 就近原則.
  • 同級權重看位置.

float浮動:

• 浮動原則:
  • 同一個父類盒子內部,要浮動都浮動，右浮動很少用,而且會影響標簽原來的順序。
• 當子類盒子浮動,而其高度大于父類盒子的時候,會產生浮動的影響。
  • 清除浮動的影響的方法:
    • 父類 overflow: hidden;
    • 在浮動元素最后面添加空標簽
      • 設置樣式: clear:both;
        .clear{
        ? /阻止前后有浮動元素/
        ? clear: both;
        ? }
• 浮動的另一個作用: 文字環繞圖片.

position元素的定位:

• 固定定位: fixed相對瀏覽器定位,
  • 會脫離文檔流
  • 可以將行內元素轉換為行內塊元素。
• 相對自己原來的位置定位,不會脫離文檔流
• 絕對定位: absolute
  • 相對父類盒子定位,會脫離文檔流.
  • 絕對定位:
    • 沒有嵌套元素,相對body做定位
    • 如果有嵌套元素,而且父類有定位元素,則相對父類做定位.
    • absolute 父類一般都是 relative, "子絕父相".
    • 絕對定位會使行內元素變成塊元素。

常用屬性:

• css初始化

    *{
        margin: 0;
        padding: 0;
    }
    body{
        font: 16px/1.2 '微軟雅黑';
    }
    ul{
        list-style: none;//去除小黑點
    }
    a{
        text-decoration: none;//a標簽去除下劃線
    }

• 半透明,rgba和opacity的區別

  • rgba單獨指的是背景顏色透明度
  • opacity整個元素的透明度
    • 例:background: rgba(0, 0, 0, 0.5);
    • 例:opacity: .5;可以省略0,透明度 0~1.

• font:

  • font:簡寫
    • font:{
      font-style | font-variant | font-weight | font-size / line-height | font-family;
      ? }
    • font-size / line-height | font-family必須一起寫,前面的可以省略.
      • 例: font:italic bold 12px/20px arial,sans-serif;
  • font-weight:
    • normal 默認值。定義標準的字符。
    • bold 定義粗體字符。
    • bolder 定義更粗的字符。
    • lighter 定義更細的字符。
    • 數值 100 ~ 900 100為一單位,定義由粗到細的字符。400 等同于 normal，而700 等同于 bold。
    • inherit 規定應該從父元素繼承字體的粗細。

• 獲取鼠標懸浮是 改變為手

  • cursor: pointer; defalut(默認)|pointer|move

• 文本調整

  • 縮進
    • text-indent: px|em|%; 應用于塊狀元素
  • 行高
    • line-height: px|%; 百分比參照是字體大小.
      • line-height: 1; 即字體的大小等于字體所占高度。

• 層級z-index:

  • 一般為0~9999,默認級別為z-index:0,值越大,層級越靠上.
  • 如果定位元素發生了重疊,那么可以通過z-index控制 定位元素 的層級.
  • ==只對定位元素起作用.==

• overflow: 屬性規定當內容溢出元素框時發生的事情

  • visible //默認值。內容不會被修剪，會呈現在元素框之外。
  • hidden //內容會被修剪，并且其余內容是不可見的。
  • scroll //內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
  • auto //如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
  • inherit //規定應該從父元素繼承 overflow 屬性的值。

• display: 屬性規定元素應該生成的框的類型,即盒子類型轉換.

  • none //此元素不會被顯示。
  • block //此元素將顯示為塊級元素，此元素前后會帶有換行符。
  • inline //默認。此元素會被顯示為內聯元素，元素前后沒有換行符.
  • inline-block //行內塊元素。（CSS2.1 新增的值）
  • 提示:一般用block,inline-block換行會產生空格.
    • 解決方法:設置font-size
      • 在父類元素中設置font-size為0，這樣就是使父類元素中文本就不會占據寬度
      • 重置父類元素的font-size，讓其子元素恢復文字字符，（因為在1）去除了所有的文本，包括子元素的文本和空格回車產生的文本節點）
      • 例:

          .nav {
                  background: #999;
                  font-size:0;
              }
          .nav-item{
                      display:inline-block;
                      width: 100px;
                      background: #ddd;
                      font-size:14px;
      
                  }
      

• visibility: visible|hidden|collapse|inherit

  • visible
    • 默認值。元素是可見的。
  • hidden
    • 元素是不可見的。
  • collapse
    • 當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的布局。被行或列占據的空間會留給其他內容使用。如果此值被用在其他的元素上，會呈現為 "hidden"。
  • inherit
    • 規定應該從父元素繼承 visibility 屬性的值。

• 行內塊元素居中
  + vertical-align 本身很復雜,一般只會作用于行內塊元素,跟其他元素的對齊方式
  + vertical-align: middl

• 超出隱藏顯示省略號:

  • 例:
    • 設置寬度為九個字符超出隱藏
      • width:9em;
    • 禁止換行
      • white-space: nowrap;
    • 超出隱藏
      • overflow:hidden;
    • 超出部分顯示為省略號...
      • text-overflow:ellipsis;

• 錨點 #

  • 號是錨點 在當前頁面跳轉,如果為空則跳到頁面頭部

    • 例: 點擊a標簽會跳到div那一行

      <div class="div"></div>
      <a href="#div"></a>
      
      

• 繪制菱形

     .diamond {
                width: 80px;
                height: 80px;
                margin: 40px 0 0 40px;
                -webkit-transform-origin: 0 100%;
                -moz-transform-origin: 0 100%;
                -o-transform-origin: 0 100%;
                -ms-transform-origin: 0 100%;
                transform-origin: 0 100%;
                -webkit-transform:rotate(-45deg);
                -moz-transform:rotate(-45deg);
                -o-transform:rotate(-45deg);
                -ms-transform:rotate(-45deg);
                transform:rotate(-45deg);
                background: #E5C3B2;
                }

CSS語法規范

• 用兩個空格來代替制表符（tab） — 這是唯一能保證在所有環境下獲得一致展現的方法。
• 為選擇器分組時，將單獨的選擇器單獨放在一行。
• 為了代碼的易讀性，在每個聲明塊的左花括號前添加一個空格。
• 聲明塊的右花括號應當單獨成行。
• 每條聲明語句的 : 后應該插入一個空格。
• 每條聲明語句的 : 后應該插入一個空格。
• 為了獲得更準確的錯誤報告，每條聲明都應該獨占一行。
• 所有聲明語句都應當以分號結尾。最后一條聲明語句后面的分號是可選的，但是，如果省略這個分號，你的代碼可能更易出錯。
• 對于以逗號分隔的屬性值，每個逗號后面都應該插入一個空格（例如，box-shadow）。
• 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的內部的逗號后面插入空格。這樣利于從多個屬性值（既加逗號也加空格）中區分多個顏色值（只加逗號，不加空格）。
• 對于屬性值或顏色參數，省略小于 1 的小數前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。
• 十六進制值應該全部小寫，例如，#fff。在掃描文檔時，小寫字符易于分辨，因為他們的形式更易于區分。
• 盡量使用簡寫形式的十六進制值，例如，用 #fff 代替 #ffffff。
• 為選擇器中的屬性添加雙引號，例如，input[type=”text”]。只有在某些情況下是可選的，但是，為了代碼的一致性，建議都加上雙引號。
• 避免為 0 值指定單位，例如，用 margin: 0; 代替 margin: 0px;。
• 在同級元素中,.classA.classB指的是一個元素，同時滿足classA和classB，即(class="classA classB"),權重大于單個.classA

Via

• 不要直接調用子元素的class,如鄭州的張三,便于查找不會重復. 后代選擇器一般只用三層.
  • 例: .zx .zx-title .close{ ...}
• 會提取公因式簡化代碼,
• 編寫 HTML 代碼時，盡量避免多余的父元素,不要有冗余.<a>標簽能解決的就不要用<div>包裹.
• class 可以有多個特征:
  • 例:<div class="qq zx-type item">
• margin不會脫離文檔流和position的absolute和fixed會脫離文檔流.
• 隱藏元素 - display:none或visibility:hidden
  • display:none //隱藏不占用空間
  • visibility:hidden //隱藏但是占用空間
• 根據用戶習慣,能用圖片就不用背景背景圖片,便于用戶保存,背景圖片便于調整位置.
• 縮寫一般用于bady,CSS初始化等;例:font:14px/40px arial,verdana;
• HTML 屬性應當按照以下給出的順序依次排列，確保代碼的易讀性。
  • class
  • id, name
  • data-
  • src, for, type, href, value
  • title, alt
  • role, aria
• class 用于標識高度可復用組件，因此應該排在首位。id 用于標識具體組件，應當謹慎使用（例如，頁面內的書簽），因此排在第二位。
• 行內標簽設置float后 會自動轉換為行內塊狀元素.但是并不會產生間隙.
  屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
• 規避脫標流
  • 能用標準流（沒有脫標）解決就不用浮動
  • 解決不了就考慮有浮動（頁面布局類型，“不完全脫標”）
  • 浮動解決不了用定位（小圖標，完全脫標，不影響內容）
• 通用樣式:前面不要加父類的選擇器
• line-height: 1;
  • 基于當前字體的高度的行高
  • 即字體的大小等于字體所占高度.
• logo一般用a標簽包裹就可以,寫成背景,可以點擊跳轉首頁.
• P標簽默認具有margin屬性,用margin: 0;重置.
• a標簽不能包含a標簽,p標簽也是如此.
• P標簽默認具有margin屬性,用margin: 0;重置.
• img轉換為塊狀元素后可以解決塊之間的間隙
• 去除span的默認樣式（行高導致高度變化）：display: block;
• 使用 calc() 函數計算 <div> 元素的寬度:
  • calc()函數支持 "+", "-", "*", "/" 運算；
  • 例如：width: calc(100% - 10px)；
• input框提示文字，聚焦時字體消失
  • <input type="text" placeholder="請輸入內容"/>
• 自定義輸入框樣式
  • 設置輸入字體的大小;
    -font-size: 18px;
    ? -width: 135px;
    ? -height: 54px;
  • 去掉輸入框默認邊框
    -border: none;
  • 用于去掉input輸入框獲取焦點的默認樣式
    -outline: none;
  • 把背景色設置為透明.不顯示背景色,可用于輸入框背景透明
    -background-color:transparent;
  • 下邊框的線
    -border-bottom: 1px solid #e3e3e3;