HTML文档基本结构

1.元素与标签

<!--文档声明-->
<!DOCTYPE html>
<!--根元素-->
<html lang="en">
<!--头元素：主要用于浏览器/搜索引擎-->
    <head>
        <meta charset="utf-8" />
        <title>HTML文档基本结构（常用标签1）</title>
    </head>
<!--主体元素-->
    <body>
        <h1>html5语义化布局标签</h1>
        <div class="header">页眉</div>
        <div class="main">
            <div class="article">
                <h2>xxx</h2>
                <p>xxxxxxxx</p>
            </div>
            <div class="aside">广告位</div>
        </div>
        <div class="footer">页脚</div>
    </body>
</html>

语义化标签

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML常用标签2</title>
    </head>
    <body>
        <h1>html5语义化解决方案</h1>
        <header>页眉</header>
        <main>
            <article>
                <h2>xxx</h2>
                <p>xxxxxxxx</p>
            </article>
            <aside>广告位</aside>
        </main>
        <footer>页脚</footer>
    </body>
</html>

元素（图像和链接）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片与超链接</title>
    </head>
    <body>
        <!--图片-->
        <img src="img/1.jpg" alt="" width="300" title="the Dog"> 
        <!--超链接，打开页面-->
        <a href="https://www.php.cn" target="_blank">php.cn</a>
        <!--下载文件 -->
    <a href="demo3.zip" target="_blank">demo3下载</a>
        <!--发送邮件 -->
    <a href="mailto:xx@qq.com" >发邮件</a>
    <!--打电话 -->
    <a href="tel:13612345678" >打电话</a>
    <!--锚点 -->
    <a href="#title1">锚点1</a> 
    <h1 id="title1">标题1</h1>
    </body>
</html>

HTML基础学习笔记

HTML文档基本结构

1.元素与标签

元素（图像和链接）

2.文档结构

3.文档内容结构

相关文章