# 4.content：內容 - 1. 重置 (1) 更新部分瀏覽器的預設值，在可能變動的文字間距上使用rem代替em (2) 避免使用margin-top。垂直邊緣可能發生重疊，產生無法預料的錯誤。 (3) 為了設備之間輕鬆縮放，block元素應該在margin上採用rem (4) 儘可能使用繼承 ...
# 4.content：內容
- 1. 重置 (1) 更新部分瀏覽器的預設值，在可能變動的文字間距上使用rem代替em (2) 避免使用margin-top。垂直邊緣可能發生重疊，產生無法預料的錯誤。 (3) 為了設備之間輕鬆縮放，block元素應該在margin上採用rem (4) 儘可能使用繼承將字體相關屬性的聲明保持在最低限度 - 2. 排版 - 3. 代碼 ```html <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > <title>Document</title> <style> </style> </head> <body> <!--標題：.h1-h6 --> <p class="h1">hello</p>
<!-- 超大標題：.display-1 --> <div class="display-1">hello</div>
<!-- 引言：.lead --> <p class="lead">hello</p>
<!-- 內聯文本：.lead --> <p>可以使用mark標簽來標記<mark>重點</mark>辭彙</p> <p><del>這是一段被刪除的文本</del>，<ins>這是一段新插入的文本</ins></p> <p><small>這段文本字體會小一些</small></p> <p><strong>這是加粗的文本</strong></p> <p><em>這是傾斜的文本</em></p> <p><span class="mark">用.mark代替mark標簽</span>,<span class="small">用.small代替small標簽</span></p>
<!--縮寫--> <p><abbr title="attrbitue" class="initialism">attr</abbr></p><!--.initialism可以讓字體變得小一點-->
<!--引用 與 署名--> <blockquote class="blockquote"> <p>時間就像海綿里的水，只要願擠，總是還有的</p> <footer class="blockquote-footer">來自<cite>魯迅</cite></footer> </blockquote>
<!--對齊--> <p class="text-left">這是一段話，一段不知道說什麼的話</p> <p class="text-center">這是一段話，一段不知道說什麼的話</p> <p class="text-right">這是一段話，一段不知道說什麼的話</p>
<!-- 列表相關 --> <!--無特效列表--> <ul class="listunstyled"> <li>red</li> <li> <ul class="listunstyled"> <li>blue</li> </ul> </li> </ul>
<!--li併列一行--> <ul class="list-inline"> <li class="list-inline-item">red</li><!--3.x版本是不需要在li上添加class的--> <li class="list-inline-item">blue</li> <li class="list-inline-item">green</li> </ul>
<!--text-truncate可以讓超出的內容省略，3.x版本里使用的是text-overflow--> <div class="container-fluid"> <dl class="row"> <dt class="col-sm-3 text-truncate">高，高實在是高，高，高實在是高，高，高實在是高，高，高實在是高</dt> <dd class="col-sm-9">是漢語通用規範一級字。此字始見於商代甲骨文。此字本義為上下距離大，引申指上下的距離，又引申指山陵、高處，由此義又可指在一般標準或平均程度之上的。</dd> <dt class="col-sm-3">富</dt> <dd class="col-sm-9">漢語常用字，讀作fù，最早見於金文，其本義是完備，即《說文解字》所謂的“備也”。後引申為財產多、使富裕等含義。</dd> <dt class="col-sm-3">帥</dt> <dd class="col-sm-9">現代如果用於形容人，則指男性相貌俊朗 ，如：這人長得真帥；軍中之主曰帥。帥（shuài）從垖從巾（1）(形聲)率</dd> </dl> </div>
<!-- 代碼 --> <p>要在這個段落里寫上<code><html></code>的html標簽</p> <pre class="pre-scrollable"> <code> <h1>這是一個標題<h1> <p>這是一段文字<p> <p>這些代碼放在code里，再放到pre標簽里，給pre標簽來上一個pre-scrollable的class，就會顯示成一個340px高的框，超過後就會出現滾動條<p> </code> </pre>
<!--變數--> <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
<!--按鈕--> <p>想保存，請按<kbd>ctrl</kbd>+<kbd>s</kbd></p> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script> </body> </html> ```
- 4. 圖片
```html <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > <title>Document</title> <style> </style> </head> <body> <div class="container"> <div class="row"> <img src="./7.jpg" alt="" class="img-fluid"> </div>
<div class="row"> <!-- 縮略圖：img-thumbnail --> <div class="col-md-4"> <img src="./7.jpg" alt="" class="img-thumbnail"> </div>
<!-- 圓角圖片：rounded --> <div class="col-md-4"> <img src="./7.jpg" alt="" class="rounded img-fluid"> </div> </div> <!-- 圖片對齊方式：自己對齊的話通過浮動 --> <div class="row"> <div class="col"> <img src="./7.jpg" style="height:200px;" class="float-left" alt=""> <img src="./7.jpg" style="height:200px;" class="float-right" alt=""> </div> </div> <!-- 圖片對齊方式：通過父級調整對齊，使用文本的對齊方式 --> <div class="row"> <div class="col text-right"> <img src="./7.jpg" style="height:200px;" alt=""> <img src="./7.jpg" style="height:200px;" alt=""> </div> </div> <!-- 圖片對齊方式：自己居中，先要變成block，然後在使用margin:0 auto; --> <div class="row"> <div class="col"> <img src="./7.jpg" style="height:200px;" class="d-block mx-auto" alt=""> </div> </div>
<!-- picture標簽中可以放置很多圖片，可以配合媒體查詢，在不同的尺寸下載入不同尺寸的圖片 picture標簽支持情況：>= ios9.3 || android4.4 --> <div class="row"> <picture> <source media="(min-width:1200px)" srcset="./1140.jpg"> <source media="(min-width:992px)" srcset="./960.jpg"> <source media="(min-width:768px)" srcset="./720.jpg"> <source media="(min-width:576px)" srcset="./540.jpg"> <img src="./7.jpg" alt=""> </picture> </div> <!-- .webp：圖片的格式。圖片大小很小且是高清圖片 --> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script> </body> </html> ```
- 5. 表格
中文網址鏈接表格部分：http://bs4.vx.link/index.html?tmpui_page=/pages/content
- 6. 圖文區 圖片下麵跟了一行標題 ```html <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" > <title>Document</title> <style> </style> </head> <body> <div class="container"> <div class="row"> <figure class="figure"> <img src="./7.jpg" alt="" class="img-fluid rounded figure-img"> <figcaption class="figure-caption text-center">星漢燦爛</figcaption> </figure> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script> </body> </html> ``` 以上是markdown格式的筆記
