文档结构

语义化标签

1.内容结构是指<body>标签中的元素排列规则
2.内容结构主要包括：页眉、页脚，以及它们之间的功能区块，例如导航
3.文档结构，主要是由一系列语义化的布局标签组成
4.文档注释：，仅存在于源码中，页面中并不显示，搜索引擎也会忽略。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML常用标签2</title>
    </head>
    <body>
        <h1>html5语义化解决方案</h1>
        <header>页眉</header>
        <main>
            <article>
                <h2>xxx</h2>
                <p>xxxxxxxx</p>
            </article>
            <aside>广告位</aside>
        </main>
        <footer>页脚</footer>
    </body>
</html>

html常用标签3

列表

语法结构

无序列表：

<ul>

<li>……</li>
</ul>
有序列表：

<ol>

<li>……</li>
</ol>
自定义列表

<dl>

Demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>list/table</title>
    </head>
    <body>
      <h3>购物车：</h3>
      <!--无序列表-->
      <ul>
          <li>1.苹果,3斤,10,30</li>
          <li>2.西瓜,10,8,80</li>
          <li>3.手机,1,5000,5000</li>
      </ul>
        <!--有序列表-->
      <ol>
          <li>苹果,3斤,10,30</li>
          <li>西瓜,10,8,80</li>
          <li>手机,1,5000,5000</li>
      </ol>
        <!--自定义列表-->
      <dl>
          <dt>第二章学习</dt>
          <dd>前端基础与布局实战</dd>
          <dd>php编程</dd>
          <dd>Laravel框架开发</dd>
          <dt>购物车</dt>
          <dd>苹果,3斤,10,30</dd>
          <dd>西瓜,10,8,80</dd>
          <dd>手机,1,5000,5000</dd>
      </dl>
    </body>
</html>

表格

语法格式：

<table>

demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格</title>
    </head>
    <body>
    <h3>购物车：</h3>
      <!--无序列表-->
      <ul>
          <li>1.苹果,3斤,10,30</li>
          <li>2.西瓜,10,8,80</li>
          <li>3.手机,1,5000,5000</li>
      </ul>
      <!-- 表格-->
      <!--table+caption+tr+th/td-->
      <table border="1" width="450" cellpadding="10" cellspacing="0">
          <caption><h2>购物车</h2></caption>
          <thead>
              <tr bgcolor="#add8e6">
                  <th>ID</th>
                  <th>品名</th>
                  <th>数量</th>
                  <th>单价</th>
                  <th>金额</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>1</td>
                  <td>苹果</td>
                  <td>3斤</td>
                  <td>10</td>
                  <td>30</td>
              </tr>
              <tr>
                  <td>2</td>
                  <td>西瓜</td>
                  <td>10</td>
                  <td>8</td>
                  <td>80</td>
              </tr>
              <tr>
                  <td>3</td>
                  <td>手机</td>
                  <td>1</td>
                  <td>5000</td>
                  <td>5000</td>
              </tr>
          </tbody>
          <tfoot>
              <tr>
                  <td colspan="2" align="center">合计：</td>
                  <!--<td></td>-->
                  <td>14</td>
                  <td></td>
                  <td>5110</td>
              </tr>
          </tfoot>
      </table>
    </body>
</html>