1. HTML的基本组成文档结构

1.1. 网页的基本组成

内容	备注	举例
文本内容	用户可以看到的，呈现在网页的文本内容	<p>z这里是文本</P>
其他文件的引用	图片，音频，视频，CSS,JS等	<img width="200" alt="" src="timg.jpg">
标记	对文本及引用文件的描述备注	标签<p></p>,<input></input>等

1.2. HTML的文档结构

<!--  告诉浏览器这是一个html5的文档  -->
<!DOCTYPE html>
<!-- <html>....</html>: 根标签，根元素,代表整个html文档 -->
<!-- lang="en"： 属性, 表示当前页面的主要语言 -->
<html lang="en">
  <!-- 头元素: 它的内容不在页面中显示，这是给浏览器和搜索引擎使用 -->
  <head>
    <!-- 当前文档字符编码集 -->
    <meta charset="UTF-8" />
    <!-- viewport： 视口,当前文档在浏览器中可以被用户看到的部分 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我的第一个页面</title>
  </head>
  <!-- 主体元素: 这才是用户正在看到和感兴趣-->
  <body>
    <h2 style="color: red;">欢迎大家选择php中文网来学习Web开发技术</h2>
    <!-- 1. 所有标签全部小写,html不区分大小写标签 -->
  </body>
</html>

2. 元素与属性的关系

每一个类似于<p></p>的闭合标签称为元素，每个元素里面可以定义属性如：<P class="mydear"></P>中，class=”mydear”就是元素的属性
元素中有3大通用属性：style, id, class

3. 传统的结构元素和HTML5的语义化结构元素

3.1. 传统的结构元素，一般采用div标签，然后利用class属性定义网页的头部，导航，侧边栏等，如：

<body>
    <!-- 页眉 -->
    <div id="header">
      <!-- 导航 -->
      <ul>
        <li><a href="">index</a></li>
        <li><a href="">about</a></li>
        <li><a href="">news</a></li>
        <li><a href="">concant</a></li>
      </ul>
    </div>
    <!-- 主体 -->
    <div id="main">
      <div class="left">广告</div>
      <div class="content">内容区</div>
      <div class="right">推荐</div>
    </div>
    <!-- 页脚 -->
    <div id="footer">
      <!-- 导航 -->
      <ul>
        <li><a href="">baidu.com</a></li>
        <li><a href="">taobao.com</a></li>
      </ul>
    </div>
  </body>

3.2. HTML5的语义化标签，设置了很多一目了然的标签，如：

<body>
    <!-- 页眉 -->
    <header>
      <!-- 导航 -->
      <nav>
        <a href="">index</a>
        <a href="">about</a>
        <a href="">news</a>
        <a href="">concant</a>
      </nav>
    </header>
    <!-- 主体 -->
    <main>
      <section class="ads">广告</section>
      <article class="content">内容区</article>
      <section class="recommend">推荐</section>
    </main>
    <!-- 页脚 -->
    <footer>
      <!-- 导航 -->
      <nav>
        <a href="">baidu.com</a>
        <a href="">taobao.com</a>
      </nav>
    </footer>
  </body>

其他语义化标签

<abbr title="中华人民共和国">定义缩写</abbr>
<address>定义地址</address>
<article>定义文章</article>
<caption>定义表格标题，放在table中</caption>
<code>定义计算机代码文本</code>
<mark>定义记号文本，包在便签的文本会有黄色底色</mark>
<progress>定义进度条</progress>

批改老师：

天蓬老师

批改状态：合格

老师批语：完成的非常的认真, 坚持

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

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

0条评论

作者最新博文

HTML的文档结构和HTML5语义化标签详解

2020-07-27 15:34:58