HTML文档的基本机构及局部标签的学习-PHP培训10期线上班

以下是对照着作业里面敲的代码（和按照自己的想法敲有很大的差别）

通过今天的练习，发现了自己有很多的错误，例如不写注释，有时候自己都看不清楚，自己写的东西在哪，要一行一行找；不按照常规的格式敲等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<!--    文章标题-->
    <title>局部标签</title>
</head>
<body>
<!--    页眉-->
    <header>
        <!-- 导航-->
        <nav>
            <a href="">about</a>
            <a href="">comment</a>
            <a href="">home</a>
        </nav>
    </header>
    <!--主体-->
    <main>
<!--        内容容器-->
        <article>
        <header>
            <h1>文章标题1</h1>
            <p>文章段落1</p>
            <p>文章段落2</p>
        </header>
            <section>
                <h1>文章标题2</h1>
                <p>文章段落1</p>
                <p>文章段落2</p>
            </section>
            <footer>分页符</footer>
            </article>
        <aside>
            <ul>
                <li>广告信息1</li>
                <li>广告信息2</li>
                <li>广告信息3</li>
                <li>广告信息4</li>
                <li>广告信息5</li>
            </ul>
        </aside>
        <aside>
            <section>
                <h3>广告位招商</h3>
            </section>
            <section>
                <span>标签1</span>
                <span>标签2</span>
                <span>标签3</span>
            </section>
        </aside>
    </main>
      <p>今年双十一，购物车清空了吗？</p>
    <pre>春色满园关不住，一枝红杏出墙来</pre>
    <p>你前女友结婚请你，
    <br>
    你会去吗？
    </p>
    <span style="color: red">必须去，看看那个倒霉蛋娶了她！</span>
    <!--描述时间-->
    <time>2019/12/20 16:01</time>
    <br>
<!--换成span，你会发现是一样的，因为内容是时间。显然用time语义化更强，更容易被搜索引擎理解-->
    <span>2019/12/20 16:01</span>
<p>HTML文档，是指采用超文本标记语言编写的结构化文档</p>
<!--缩写本文下有虚线，说明这是一段内容的缩写，完整信息在标签的title属性中-->
<p>
    <abbr title="Hypertext Markup Language">HTML</abbr>文档，是指采用超文本标记语言编写的结构化文档
</p>
    <!--上标与下标-->
<p>
    2<sup>3</sup>=8
<br>
合肥
<sub style="color: #2d6a88">中国发展最快的城市之一</sub>欢迎你
<br>
</p>
<!--地址会默认换行并用斜体表示-->
<footer>
    联系地址：
    <address>
        合肥市政务新区怀宁路999号</address>
</footer>
<!--删除线-->
<p>
    猪肉原价：
    <s>59.99元</s>，<span>现价：40元</span><br>
    猪肉原价：
    <del>59.99元</del>，<span>现价：40元</span>
</p>
<!--代码通常与pre配合-->
<p><code> var num = 100 ; num  += 5 ; </code></p>
<p>
<!--    如果浏览器不支持该标，则显示内部文件：已完成50%；-->
<progress value="50" max="100">已完成50%</progress>
</p>
<p>
<!--    粗体-->
    <b>多看多写是最快的学习方法</b>；<strong>多看多写是最快的学习方法、   </strong>
</p>
<!--斜体-->
<p>
    <i>程序员是世界上最聪明的一群人</i>；<em>程序员是世界上最聪明的一群人</em>
</p>
<p>
<!--    标注-->
    我是PHP中文网第10期学生
    <mark>小江</mark>
</p>
<p>
<!--    引用-->
    <q>
        引用文本
    </q>
</p>
<blockquote cite="https://www.php.cn">
    超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。 这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便
</blockquote>
</body>
<!--页脚-->
    <footer>
<!--        友情链接，适合div-->
        <div class="link">
            <a href="">链接1</a>
            <a href="">链接2</a>
            <a href="">链接3</a>
        </div>
    </footer>
</html>

以下为手抄作业上传
![![]
(https://img.php.cn/upload/image/735/553/716/1576835077539303.jpg)]
(https://img.php.cn/upload/image/720/676/663/1576835064356902.jpg)

相关文章