html文档结构、元素与属性的关系、语义化的结构元素、语义化的文本元素、链接元素、列表元素

首页 > 博客列表 > html文档结构、元素与属性的关系、语义化的结构元素、语义化的文本元素、链接元素、列表元素

博主信息

博文 2

粉丝 0

访问量 1275

专题推荐

更多>

<!-- 告诉浏览器是一个html文档 -->
<!DOCTYPE html>
<!-- 当前语言 -->
<html lang="en">
  <!-- 头元素: 它的内容不在页面中显示，这是给浏览器和搜索引擎使用 -->
  <head>
    <!-- 当前文档编码集 -->
    <meta charset="UTF-8" />
    <!-- viewport：视口,当前文档在浏览器中可以被用户看到的部分-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 文档头部元素title -->
    <title>HTML文档结构</title>
    <!-- 所有元素都要大小写，元素都要有结束元素，个别元素除外，例如：<a>、<img> -->
  </head>
  <!-- 文档主体元素body -->
  <body>
    <!-- 页眉header -->
    <header>
      <!-- 导航nav -->
      <nav>
        <!-- 链接元素a:可用于不同页面的跳转、下载文件、打电话、发邮件、锚点等地方使用 -->
        <a href="">网站首页</a>
        <a href="">合作案例</a>
        <a href="">新闻资讯</a>
        <a href="">关于我们</a>
      </nav>
    </header>
    <!-- 主体main -->
    <main>
      <!-- 图片引用元素img -->
      <img src="" alt="轮播图" />
      <!-- 时间元素time -->
      <time>时间</time>
      <!-- 地址元素address -->
      <address>地址</address>
      <!-- 删除线元素del -->
      <del>删除线</del>
      <!-- 进度条元素peogress -->
      <progress value="30" max="100"></progress>
      <!-- 通用块元素div：容器、盒子 -->
      <div>
        <!-- P是段落元素，
          id是唯一的，能不用就不用，但在两种情况下非要有用：锚点、表单元素控件
          三大通用属性：p、id、class -->
        <p style="color: blue;">PHP中文网</p>
        <p id="name">PHP中文网</p>
        <p class="user">PHP中文网</p>
      </div>
      <div>
        <!-- 无序列表 列表可以嵌套-->
        <ul>
          <li>这是广告</li>
          <li>这也是广告</li>
          <li>这还是广告</li>
        </ul>
        <!-- 有序列表 列表可以嵌套-->
        <ol>
          <li>阿里巴巴</li>
          <ol>
            <li>阿里云</li>
            <li>淘宝</li>
            <li>天猫</li>
          </ol>
          <li>腾讯</li>
          <li>百度</li>
        </ol>
      </div>
    </main>
    <!-- 页脚footer -->
    <footer>
      <!-- 导航nav -->
      <nav>
        <p>
          <!-- 行内元素span，不能直接暴露，应该放在一个块元素中 -->
          <span>关于我们：</span>
          <a href="">baidu.com</a>
          <a href="">taobao.com</a>
        </p>
      </nav>
    </footer>
    <!-- 自定义列表：通常用来写页脚 -->
    <dl>
      <dt>地址:</dt>
      <dd>四川省成都市</dd>
      <dt>邮箱:</dt>
      <dd>445627221@qq.com</dd>
    </dl>
  </body>
</html>

运行效果图

批改老师：

天蓬老师

批改状态：合格

老师批语：希望坚持

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

html文档结构、元素与属性的关系、语义化的结构元素、语义化的文本元素、链接元素、列表元素

2020-07-29 22:19:11