菜鳥級別學習

時間  2019-11-21
標籤 菜鳥 級別 學習 简体版
原文   原文鏈接 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"/>
    <meta name="MobileOptimized" content="320"/>
    <meta http-equiv="Cache-Control" content="no-cache,must-revalidate,no-siteapp"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta name="copyright" content="Copyright &copy; nail salon 2015 | All Rights Reserved."/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title></title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/styles.css" rel="stylesheet">
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <style>
        html { font-size: 16px; }/*root fontsize is 16px,then 1rem is  16px*/
        .greenb { border: 1px solid #00dd22; }
        .redb { border: 1px solid #ff1111; }
    </style>
</head>
<body style="background: #ccc; ">
<div class="container">
    <!--Bootstrap HTML編碼規範
    語法
    用兩個空格來代替製表符（tab） -- 這是惟一能保證在全部環境下得到一致展示的方法。
    嵌套元素應當縮進一次（即兩個空格）。
    對於屬性的定義，確保所有使用雙引號，毫不要使用單引號。
    不要在自閉合（self-closing）元素的尾部添加斜線 -- HTML5 規範中明確說明這是可選的。
    不要省略可選的結束標籤（closing tag）（例如，</li> 或 </body>）。
    &lt;!&ndash;排列，注意要另起一個row，先寫push再寫pull。從新排列後原先的內容不受影響

    HTML5 doctype
    爲每一個 HTML 頁面的第一行添加標準模式（standard mode）的聲明，這樣可以確保在每一個瀏覽器中擁有一致的展示。

    語言屬性
    根據 HTML5 規範：強烈建議爲 html 根元素指定 lang 屬性，從而爲文檔設置正確的語言。這將有助於語音合成工具肯定其所應該採用的發音，有助於翻譯工具肯定其翻譯時所應遵照的規則等等。
    <html lang="zh-CN">

    IE 兼容模式
    IE 支持經過特定的 <meta> 標籤來肯定繪製當前頁面所應該採用的 IE 版本。除非有強烈的特殊需求，不然最好是設置爲 edge mode，從而通知 IE 採用其所支持的最新的模式。
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    字符編碼
    經過明確聲明字符編碼，可以確保瀏覽器快速並容易的判斷頁面內容的渲染方式。這樣作的好處是，能夠避免在 HTML 中使用字符實體標記（character entity），從而所有與文檔編碼一致（通常採用 UTF-8 編碼）。
    <head>
        <meta charset="UTF-8">
    </head>

    JavaScript 生成的標籤
    經過 JavaScript 生成的標籤讓內容變得不易查找、編輯，而且下降性能。能避免時儘可能避免。


    Bootstrap 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;。
    /* Good CSS */
    .selector,
    .selector-secondary,
    .selector[type="text"] {
      padding: 15px;
      margin-bottom: 15px;
      background-color: rgba(0,0,0,.5);
      box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
    }

    聲明順序
    相關的屬性聲明應當歸爲一組，並按照下面的順序排列：
    Positioning（position: absolute;  top: 0;  right: 0;  bottom: 0;  left: 0;  z-index: 100;）
    Box model（ display: block;  float: right;  width: 100px;  height: 100px;）
    Typographic（font: normal 13px "Helvetica Neue", sans-serif;  line-height: 1.5;  color: #333;  text-align: center;）
    Visual（background-color: #f5f5f5;  border: 1px solid #e5e5e5;  border-radius: 3px;）

    不要使用 @import
    與 <link> 標籤相比，@import 指令要慢不少，不光增長了額外的請求次數，還會致使不可預料的問題。替代辦法有如下幾種：
    使用多個 <link> 元素
    經過 Sass 或 Less 相似的 CSS 預處理器將多個 CSS 文件編譯爲一個文件
    經過 Rails、Jekyll 或其餘系統中提供過 CSS 文件合併功能

    -->
    <div class="row">
        <div class="col-xs-3 greenb">left</div>
        <div class="col-xs-9 redb">right</div>
    </div>
    <div class="row">
        <div class="col-xs-3 greenb col-xs-push-9">left1</div>
        <div class="col-xs-9 redb col-xs-pull-3">right1</div>
    </div>-->
    <!--排版-->
    <!--若是須要向任何標題添加一個內聯子標題，只須要簡單地在元素兩旁添加 <small>，或者添加 .small class，這樣子您就能獲得一個字號更小的顏色更淺的文本
        爲了給段落添增強調文本，則能夠添加 class="lead"，這將獲得更大更粗、行高更高的文本
    <div class="row">
        <h1>this li head <small>this is small head</small></h1>
        <div class="col-xs-4"></div>
        <div class="col-xs-4"></div>
        <div class="col-xs-4"></div>
    </div>-->
    <!--兩個顏色條
    <div class="row gap" style="height: 0.3rem; background: #f00;"></div>
    <div class="row gap" style=" height: 0.3rem; background: #00f; width: 100%; margin-left: 0; "> </div>-->

    <!--Bootstrap 定義 <abbr> 元素的樣式爲顯示在文本底部的一條虛線邊框，當鼠標懸停在上面時會顯示完整的文本（只要您爲 <abbr> title 屬性添加了文本）。爲了獲得一個更小字體的文本，請添加 .initialism 到 <abbr>。-->
    <!--<div class="row">
        <div class="col-xs-9"><abbr class="initialism" title="text text etxt text text "> text</abbr></div>
    </div>

    <ul class="list-inline greenb">
        <li><b>tesdgfasdgasgafgasgasdg 1</b></li>
        <li>Item 2</li>
        <li>Item 2</li>
        <li>Item 2</li>
        <li>Item 2</li>
        <li>Item 2</li>
        <li>Item 2</li>
        <li>Item 2</li>
        <li>Item 2</li>
        <li>Item 2</li>
        <li>Item 2</li>
        <li>Item 2</li>
        <li>Item 2</li>
        <li>Item 2</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
    <div class="col-xs-12">
        <dl class="dl-horizontal redb">
            <dt>Description 1</dt>
            <dd>Item 1</dd>
            <dt>Description 2</dt>
            <dd>Item 2</dd>
        </dl>
    </div>
    <p> j jn j j j j j j j j j j j j j</p>
    <em>text text text</em>傾斜
    <strong>text text </strong>加粗
    <i>text text</i>傾斜
    <address>
        <strong>Some Company, Inc.</strong><br>
        007 street<br>
        Some City, State XXXXX<br>
        <abbr title="Phone">P:</abbr> (123) 456-7890
    </address>
    <p>
        .lead    使段落突出顯示
        .small    設定小文本 (設置爲父文本的 85% 大小)
        .text-left    設定文本左對齊
        .text-center    設定文本居中對齊
        .text-right    設定文本右對齊
        .text-justify    設定文本對齊,段落中超出屏幕部分文字自動換行
        .text-nowrap    段落中超出屏幕部分不換行
        .text-lowercase    設定文本小寫
        .text-uppercase    設定文本大寫
        .text-capitalize    設定單詞首字母大寫
        .initialism    顯示在 <abbr> 元素中的文本以小號字體展現
        .blockquote-reverse    設定引用右對齊
        .list-unstyled    移除默認的列表樣式，列表項中左對齊 ( <ul> 和 <ol> 中)。 這個類僅適用於直接子列表項 (若是須要移除嵌套的列表項，你須要在嵌套的列表中使用該樣式)
        .list-inline    將全部列表項放置同一行    嘗試一下
        .dl-horizontal    該類設置了浮動和偏移，應用於 <dl> 元素和 <dt> 元素中
        .pre-scrollable    使 <pre> 元素可滾動 scrollable
    </p>-->
    <!--代碼-->
    <!--Bootstrap 容許您以兩種方式顯示代碼：
    第一種是 <code> 標籤。若是您想要內聯顯示代碼，那麼您應該使用 <code> 標籤。
    第二種是 <pre> 標籤。若是代碼須要被顯示爲一個獨立的塊元素或者代碼有多行，那麼您應該使用 <pre> 標籤。
請確保當您使用 <pre> 和 <code> 標籤時，開始和結束標籤使用了 unicode 變體： &lt; 和 &gt;。-->
    <!--<p><code>&lt;header&gt;</code> 做爲內聯元素被包圍。</p>
    <p>若是須要把代碼顯示爲一個獨立的塊元素，請使用 &lt;pre&gt; 標籤：</p>
    <pre>
       &lt;article&gt;
          &lt;h1&gt;Article Heading&lt;/h1&gt;
       &lt;/article&gt;
    </pre>-->
    <!--<table>    爲表格添加基礎樣式。
        <thead>    表格標題行的容器元素（<tr>），用來標識表格列。
            <tbody>    表格主體中的表格行的容器元素（<tr>）。
        <tr>    一組出如今單行上的表格單元格的容器元素（<td> 或 <th>）。
            <td>    默認的表格單元格。
                <th>    特殊的表格單元格，用來標識列或行（取決於範圍和位置）。必須在 <thead> 內使用。
        <caption>    關於表格存儲內容的描述或總結。-->
        <!--<h2>表格</h2>
        <p> .table 爲任意表格添加基本樣式 (只有橫向分隔線):</p>
        <table class="table">
            <thead>
            <tr>
                <th>#</th>
                <th>Firstname</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>Anna</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Debbie</td>
            </tr>
            <tr>
                <td>3</td>
                <td>John</td>
            </tr>
            </tbody>
        </table>-->
    <!--<h2>表格</h2>
    <p> .table-striped 類在 tbody 內添加斑馬線形式的條紋 ( IE8 不支持):</p>
    <table class="table table-striped">
        <thead>
        <tr>
            <th>#</th>
            <th>Firstname</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>Anna</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Debbie</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John</td>
        </tr>
        </tbody>
    </table>-->
    <!--<h2>表格</h2>
    <p> .table-bordered 類爲全部表格的單元格添加邊框:</p>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>#</th>
            <th>Firstname</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>Anna</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Debbie</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John</td>
        </tr>
        </tbody>
    </table>-->
    <!--<h2>Table</h2>
    <p> .table-hover 類啓用表格中 tbody 上的行的懸停效果：</p>
    <table class="table table-hover">
        <thead>
        <tr>
            <th>#</th>
            <th>Firstname</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>Anna</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Debbie</td>
        </tr>
        <tr>
            <td>3</td>
            <td>John</td>
        </tr>
        </tbody>
    </table>-->
   <!-- 垂直或基本表單
    基本的表單結構是 Bootstrap 自帶的，個別的表單控件自動接收一些全局樣式。下面列出了建立基本表單的步驟：
    向父 <form> 元素添加 role="form"。
    把標籤和控件放在一個帶有 class .form-group 的 <div> 中。這是獲取最佳間距所必需的。
    向全部的文本元素 <input>、<textarea> 和 <select> 添加 class .form-control。-->
 <!--   <form role="form">
        <div class="form-group">
            <label for="name">名稱</label>
            <input type="text" class="form-control" id="name"
                   placeholder="請輸入名稱">
        </div>
        <div class="form-group">
            <label for="inputfile">文件輸入</label>
            <input type="file" id="inputfile">
            <p class="help-block">這裏是塊級幫助文本的實例。</p>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"> 請打勾
            </label>
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>-->
    <!--內聯表單
    若是須要建立一個表單，它的全部元素是內聯的，向左對齊的，標籤是並排的，請向 <form> 標籤添加 class .form-inline。-->
    <!--<form class="form-inline" role="form">
        <div class="form-group">
            <label class="sr-only" for="name">名稱</label>
            <input type="text" class="form-control" id="name"
                   placeholder="請輸入名稱">
        </div>
        <div class="form-group">
            <label class="sr-only" for="inputfile">文件輸入</label>
            <input type="file" id="inputfile">
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox"> 請打勾
            </label>
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>-->
    <!--圖片圓角
    <div class="row">
        <div class="col-xs-6">
            <img src="../img/01131_1.jpg" style="border-radius: 50%;">
        </div>
        <div class="col-xs-6">
            <img src="../img/01131_1.jpg" style="border-radius: 0.5rem;">
        </div>
    </div>
    <div style="background: #d43f3a; border-radius: 0.3rem;">
        <img src="../img/01131_1.jpg" style="padding: 2px;">
    </div>-->
   <!-- 原理display: block;max-width: 100%;height: auto;
    <div class="container">
        <h2>圖片</h2>
        <p> .img-responsive類讓圖片支持響應式，將很好地擴展到父元素 (經過改變窗口大小查看效果):</p>
        <img src="../img/01131_1.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
    </div>-->

</div>












































<script type="text/javascript">

</script>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程