Front End Development Certification (HTML5 and CSS)

1.    HTML - Hyper Text Markup Language(超文本標記語言)

2.　<h1>~~<h6>標題標籤

3.　<p>文本內容</p>

4.　<!-- 註釋內容 -->

5.　<h2 style= "color: red">該標題是紅色</h2>  [添加 style 內聯樣式] 內聯樣式最簡單有效，當不利於維護，沒法樣式分離

　　<style>
          選擇器{屬性名稱：屬性值;}
          h2 {color : red;}
　　</style>
　　/* 內嵌樣式，便於修改維護  */

6.　font-size : 14px; 字號

7.　font-family: Helvetica , Sans-Serif;  字體; (通常設置2種以上，一種不能使用的時候，自動降級到第二種字體)

　　link標籤引入字體（引入谷歌 Lobster 字體）

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">

<!--引入谷歌字體-->
<style>
選擇器{
    font-family:lobster；
        }
</style>
<!--應用字體-->

8.　<img src="    "> 指向圖片地址 ，img 元素自關閉，無需結束標記

　　<img class = "class1   class2"> 2個類名中間能夠使用空格分開

img{
    border-color: red;
    border-width: 5px;
    border-style: solid;
    border-radius: 10px(50%);  //像素或者百分比，圓角
    }
/* border設置邊框樣式 */

    border-color: red;
    border-width: 5px;
    border-style: solid;
/* 縮寫爲 */
    border: 5px solid red;

9.　<a href=" 指向地址  ">  </a>  anchor（錨點 / 連接）

　　<a href="#">   </a>   當沒法肯定連接地址，能夠將  href 指向 「#」 放置固定連接（不跳轉）

　　<a href="#" alt="   ">   alt 屬性，當圖片沒法加載時，可顯示爲替代文本（對盲人很是重要，搜索引擎也會捕捉）

10.  <ul> ...<li>..</li>    </ul>   無序列表

　　<ol> ...<li>..</li>    </ol>   有序列表

11.　<input type ="text"  placeholder = "this is placeholder text">   自關閉，（文本輸入框）placeholder 文本佔位符

12.　使用HTML 構建能夠跟服務器交互的WEB表單（form），經過給form添加 action 屬性來達成。

<form action="/url地址"> 
    <input type="text" placeholder=" 我要佔位 ">    
</form>

　　action 屬性的值指定了表單提交到服務器的地址

13.　submit（提交）按鈕，點擊，表單中數據會被髮送到經過 action 屬性指定的地址上。

<form action=" ">
  <button type="submit">  這是一個提交按鈕 </button>
</form>

14.　required (必填項) 只有當用戶填寫了該選項後，才能提交表單 （required 屬性在 Safar 瀏覽器無效）

<input type = "text" required> 

<!--給輸入框添加 required 屬性，這樣用戶不填寫輸入框就沒法提交表單-->

15.　radio button (單選按鈕)  每一個單選按鈕應嵌套在本身的 label 元素，* 全部關聯的單選按鈕應使用相同的 name 屬性

<label>
    <input type="radio" name="shaojun">  我是少君  
</label>
<label>
    <input type="radio" name="shaojun">  我不是少君  
</label>

16.　checkbox （複選按鈕）每一個複選按鈕都應嵌套在 label 元素中，* 全部關聯的複選按鈕都應使用相同的 name 屬性

<form action="/ url 指向地址">
  <label><input type="checkbox" name="personality"> door</label>
  <label><input type="checkbox" name="personality"> Indoor</label>
  <label><input type="checkbox" name="personality"> Outdoor</label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>

17.　checked 屬性，設置單選和複選按鈕默認被選中狀態，在 input 元素中添加 checked

<input type="radio" name="test-name" checked> <!--選中狀態-->

18.　div 層元素，盛裝其餘元素的容器  <div>......</div>

19.　background-color: green;    背景顏色

20.　三個影響HTML 元素佈局的重要屬性：padding(內邊距)、margin(外邊距)、border(邊框)

元素padding 控制元素內容 content 和元素邊框 border 之間距離

元素margind 控制元素邊框 border 和元素實際所佔空間的距離（當 margin 值爲負值時，元素會變大）

padding: top right bottom left;

21.　body  HTML頁面都有 body 元素，而且body元素一樣可以應用樣式，全部其餘元素將繼承 body 元素的樣式

　　  class 聲明的順序，第二個聲明比第一個聲明具備更高優先權。<p class="one  two"> two的類樣式更高，會覆蓋one

　　  瀏覽器讀取Css順序是從上到下，在一樣樣式衝突下，瀏覽器會使用最後的CSS聲明（ID屬性 > Class屬性）

22.　!important > 內聯樣式 > ID屬性 > Class屬性