第十一期04月03日作业：html语义化结构标签和常见元素的使用

作业：

1、代码演示

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="keywords" content="第一个网页" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>语义化html结构</title>
  </head>
  <body>
    <form
      action=""
      method="post"
      target=""
      enctype="application/x-www-form-urlencoded"
    >
      <label for="username">用户名：</label>
      <input type="text" id="username" placeholder="输入用户名" /><br />
      <label for="pwd">密码</label>
      <input type="password" id="pwd" placeholder="至少输入6位" />
      <button>登陆</button>
    </form>
    <!-- html头部 -->
    <header>
      <nav>
        <a href="http://www.baidu.com" target="_blank" rel="noopener noreferrer"
          >导航1</a
        >
        <a href="http://" target="_blank" rel="noopener noreferrer">导航2</a>
        <a
          href="http://www.zhongyequan.com"
          target="_self"
          rel="noopener noreferrer"
          >导航3</a
        >
        <a href="http://" target="_" rel="noopener noreferrer">导航4</a>
        <a href="http://" target="_blank" rel="noopener noreferrer">导航5</a>
      </nav>
    </header>
    <!-- html主题 -->
    <body>
      <a href="#footer">锚点</a>
      <!-- 侧边栏 -->
      <aside>
        <p>侧边栏</p>
      </aside>
      <!-- 主题部分 -->
      <main>
        <!-- 文章内容 -->
        <article>
          <h2>标题</h2>
          <p>
            <!-- 语义化文本 -->
            <span>文章</span>内容<br />
            第一行<br />
            第二行<br />
          </p>
          <address>地址：河南省郑州市</address>
          <time>时间：2020-04-04</time><br />
          <span>2<sup>4</sup>=16</span><br />
          <span>H<sub>2</sub>O</span><br />
          <mark>高亮输出</mark>
          <s>删除线</s>
          <i>斜体</i>
          <b>加粗</b>
          <q>引用</q>
          <abbr title="china">CH</abbr>
          <!-- 格式化原样输出 -->
          <pre>
          中国抗疫情 
                  取得阶段性胜利
          </pre>
          <!-- 设置下载名称仅限浏览器支持 -->
          <a href="dy.rar" target="_self" download="图片">下载</a>
        </article>
        <!-- 广告，区域块 -->
        <section>
          <div>列表</div>
          <p>无序列表</p>
          <ul>
            <li>第1个</li>
            <li>第2个</li>
            <li>第3个</li>
            <li>第4个</li>
            <li>第5个</li>
          </ul>
          <p>有序列表</p>
          <ol>
            <li>第5</li>
            <li>第6</li>
            <li>第7</li>
            <li>第8</li>
            <li>第9</li>
          </ol>
          <dl>
            <dt>名词解释</dt>
            <dd>什么是名词介绍呢</dd>
            <dd>我也不知道，大致就是用大白话把事情说清楚</dd>
          </dl>
          <img src="dy.png" alt="" width="400px" />
        </section>
        <table
          border="1"
          cellpadding="5"
          cellspacing="0"
          align="left"
          bgcolor="red"
        >
          <colgroup>
            <col bgcolor="lightblue" />
            <col bgcolor="lightyellow" span="2" />
          </colgroup>
          <caption>
            测试表格元素
          </caption>
          <thead>
            <tr>
              <th>标题1</th>
              <th>标题2</th>
              <th>标题3</th>
              <th>标题4</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td rowspan="3">内容1</td>
              <td>内容2</td>
              <td>内容3</td>
              <td>内容4</td>
            </tr>
            <tr>
              <!-- <td>内容1</td> -->
              <td>内容2</td>
              <td>内容3</td>
              <td>内容4</td>
            </tr>
            <tr>
              <!-- <td>内容1</td> -->
              <td>内容2</td>
              <td>内容3</td>
              <td>内容4</td>
            </tr>
          </tbody>
          <tfoot>
            <tr>
              <td>内容1</td>
              <td colspan="3">内容2</td>
            </tr>
          </tfoot>
        </table>
      </main>
    </body>
    <!-- html底部 -->
    <footer id="footer">
      <a href="http://">友情链接01</a>
      <a href="http://">友情链接02</a>
      <a href="http://">友情链接03</a>
      <a href="http://">友情链接04</a>
      <a href="tel:+18039540122">拨打电话</a>
    </footer>
  </body>
</html>

2、演示效果

总结：

1、难点：a标签中打开方式target的属性值：_blank、_self、_top、_parent、#id（访问锚点）等，文件类型无法识别就直接下载，下载属性（download=”文件名”）
2、自定义序列元素标签：dl>dt+dd；
3、表格标签：table>thead+tbody+tfoot;
子标签：tr>th（标题）|td;
表格属性：cellpadding=”内边距（外框和单元格的距离）”；
cellspacing=”设置内容和单元格的距离”；
border=””设置表格线条；
4、表格中单元格合并：
<td rowspan="3"></td>以此单元格位起点，向下合并3个单元格
<td colspan="3"></td>以此单元格位起点，向右合并3个单元格
5、表格中分列操作（设置属性）：<colgroup><col bgcolor="red" span="2"/></colgroup>；span：跨列

作业：

总结：

相关文章