HTML以及CSS學習筆記2

<h1>Peaches</h1> h1代表head1 最上級標題

<p>Oh the taste of summer peaches</p>  P代表段落

<h3>Eating Peaches</h3>  h3代表第三級標題
<img src="https://gss3.bdstatic.com/7Po3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=781923b387d6277ffd1f3a6a49517455/b90e7bec54e736d1d0363b009b504fc2d5626995.jpg" width=150> 這裏引用了一個圖片 大小採用150
<p>Here are some of my favorite things to do with peaches</p>
<table> 創建一個表
  <tr> tr代表table row
    <th>Dessert</th> th代表table head
    <th>Salsa</th>
    <th>Drink</th>
  </tr>
  <tr>
    <td>peach salsa</td> td代表任意變量內容
    <td>Salsa</td>
    <td>Drink </td>
  </tr>
  <tr>
    <td><img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=cc1dd2051c178a82da3177f2976a18e8/902397dda144ad3417b9af4ed2a20cf430ad85f0.jpg"width=150/></td>
    <td><img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=cc1dd2051c178a82da3177f2976a18e8/902397dda144ad3417b9af4ed2a20cf430ad85f0.jpg"width=150/></td>
    <td><img src="https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike80%2C5%2C5%2C80%2C26/sign=cc1dd2051c178a82da3177f2976a18e8/902397dda144ad3417b9af4ed2a20cf430ad85f0.jpg"width=150/> </td>
  </tr>
</table>
<h3>Intresting fact about peaches</h3>
<ul> ul代表unordered list 與 ol相對應 ol代表 ordered list 有序表
  <li>Book on peaches</li> li代表 list 
  <ul><em>James and Giant Peach</em> em代表變斜字體 by Roald Dahl</ul>
  <li>Here are the <b>top producers</b> b 代表將字體變弧形of peaches </li>
  <ul>
    <li class="country">China</li> country 是class的一個取值 在CSS中對country進行賦值可以改變class取 country時候的類型或表示形式
    <li class="country">>Itlay</li>
    <li class="country">>Spain</li>
    <li class="country">>USA</li>
    <ul>
      <li>Californa</li>
    </ul>
  </ul>
  <li>Links on peach information</li>
  <ul>
    <li><a href="https://baike.baidu.com/item/%E6%A1%83/64247?  fr=aladdin&fromid=53936&fromtitle=%E6%A1%83%E5%AD%90">   href用於鏈接到另一個網站
    Baidu 
  </a>page on peaches</li>
    <li><a href="https://en.wikipedia.org/wiki/Peach">
    Wikipedia 
  </a>page on peachs</li>
  </ul>
  <li>Peaches are a source of vitamin A and B</li>
</ul>

以下是上述HTML代碼對應描述的CSS代碼

h1{
  color : orange;   color是用於改變字體顏色的變量
  text-align:center; text-align是用於改變文字排布的變量
}
body{  網站整體表現形式的改變
  background-color:#F7FAAA;
}
table{
  border-collapse:collapse;
}
table,td,th{   對多個變量同時改變表現形式
  border:2px solid black
}
th{
  background-color:orange;
  color:white;
}
table li{ table中的li即table中的list進行改變
  color:green;
  font-family:Helvetica;
  text-align:left; 
}
a{
  color:red;
}
.country{   對class的取值對應country的變量表達形式進行改變
  color:blue;
}

運行結果如下圖