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;
}

运行结果如下图