HTML自学作业

HTML自学作业

div / span 的不同

  • 字面理解 div(division): 分割,分离 span: the difference include in something
  • 在html中的解释 div: 整块的划分html内容
    <p>This is some text.</p>
    
    
    

    <div style="color:#0000FF">
    <h3>This is a heading in a div element</h3>
    <p>This is some text in a div element.</p>
    </div>

    <p>This is some text.</p>



    结果如下:

    span: 在文字的行内进行局部的划分

    <p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes!</p>
    

    结果如下:

    class 与 id 的不同

    class: 是把一群设计好的html的element封装在一个class里面,这样就可以同时应用到多个html标签上,少写很多重复代码
    id: 是标记html代码中某一个特定的标签,方便后面对这个单一的元素进行特定的设置或者交互之类的,id具有唯一性,在html代码中只会出现一次

    p 与 br 的不同

    p: 是paragraph,也就是段落的意思,包裹一群蚊子,或者元素,作为一个段落,体现出来应该是,开头和结尾都会换行
    br: 是break,就是换行的意思

    如何使用table排版

    这里面涉及到
    table, caption, thead, tbody, tfoot
    tr, th, td

    • 用table包裹最外面
    • table内分四大块:caption(表的标题), thead(表头块), tbody(表体块),tfoot(表页脚块)
    • 在thead,tbody,tfoot里又可以用:tr(表的一行), th(表的标题单元格),td(表的标准单元格)
      代码示范如下:

      <table>
        <caption>Monthly savings</caption>
        <thead>
            <tr>
              <th>Month</th>
              <th>Savings</th>
            </tr>
        </thead>
      
        <tbody>
            <tr>
              <td>January</td>
              <td>$100</td>
            </tr>
            <tr>
              <td>February</td>
              <td>$50</td>
            </tr>
        </tbody>
      
        <tfoot>
            <tr>
              <td>脚一</td>
              <td>脚二</td>
            </tr>
        </tfoot>
      </table>
      

      结果如下: