html文档结构总结 - 李志 - php中文网博客

首页 > 博客列表 > html文档结构总结

博主信息

博文 1

粉丝 0

访问量 913

专题推荐

更多>

html文档结构

<!-- 定义文件格式，浏览器会将此文件自动识别为html文件 -->
<!DOCTYPE html>
<!-- 语言标识 -->
<html lang="en">
  <!-- 头元素，浏览器使用的，一切特定信息 -->
  <head>
    <!-- 字符集 -->
    <meta charset="UTF-8" />
    <!-- viewport:视口，width=device-width：设备宽度，initial-scale：缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 网页名称 -->
    <title>html文档结构</title>
  </head>
  <!-- 主体元素，用户可以看到的页面布局位置 -->
  <body>
    <div>
      <span>
        <p>文档基本结构</p>
      </span>
    </div>
  </body>
</html>

如代码所示，html文档整体包裹在html标签内，head标签内部是给浏览器使用的一些元素，body内部是给用户展示的内容。

内容结构

如图所以，这个html网页所包含主要分为三部分，页眉、页脚、主体内容。
header标签，页眉标识，一般和nav导航标签使用
main标签，主体标识，一般和article、aside、section一起使用
footer标签，页脚标识，一般和address、div一起使用
article标签，内容主体部分
aside标签，侧边栏使用
section标签，广告位等重复性较多时使用
借鉴文章地址：https://segmentfault.com/a/1190000002695791
示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>内容结构</title>
  </head>
  <body>
    <!-- 页眉-导航 -->
    <!-- html5写法 -->
    <header>
      <nav>
        <a href="">首页</a>
        <a href="">分类</a>
        <a href="">购物车</a>
        <a href="">个人中心</a>
      </nav>
    </header>
    <!-- html4写法 对比之后发现，版本更新之后更加简洁，而且语义化更强-->
    <!-- <div id="header">
      <ul style="list-style: none;">
        <li style="float: left;">首页</li>
        <li style="float: left;">分类</li>
        <li style="float: left;">购物车</li>
        <li style="float: left;">个人中心</li>
      </ul>
    </div> -->
    <!-- 主体 -->
    <main>
      <article>
        <header>
          <h1>html学习的第一天</h1>
          <p>
            今天学习了很多html5的知识，也了解了很多html的特性以及语义化的含义
          </p>
          <aside>
            <ul>
              <li>名次1</li>
              <li>名次2</li>
            </ul>
          </aside>
          <p>
            今天学习了很多html5的知识，也了解了很多html的特性以及语义化的含义
          </p>
        </header>
        <section>
          <h2>广告位1</h2>
          <h2>广告位2</h2>
          <h2>广告位3</h2>
        </section>
        <section>
          <h2>广告位4</h2>
          <h2>广告位5</h2>
          <h2>广告位6</h2>
        </section>
        <aside>
          <h2>侧边栏</h2>
          <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
          </ul>
        </aside>
      </article>
    </main>
    <!-- 页脚 -->
    <footer>
      <address>北京市海淀区中关村葫芦岛市</address>
      <a href="baidu">网站地址</a>
      <a href="tc">作者</a>
      <a href="tel:1877877655">电话</a>
      <a href="mailto:19898799@163.com">邮箱</a>
    </footer>
  </body>
</html>

批改老师：

天蓬老师

批改状态：不合格

老师批语：看清作业要求

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

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

0条评论

作者最新博文

html文档结构总结

2020-07-25 21:50:49