HTML学习笔记——04：基本的网页架构

ruleslol

已于 2024-01-11 11:18:41 修改

阅读量914

点赞数 25

分类专栏： HTML 文章标签：学习笔记 html

于 2024-01-11 11:17:10 首次发布

本文链接：https://blog.csdn.net/qq_31532983/article/details/135364346

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、基本的网页架构

网页的外观多种多样，但其结构通常倾向于使用类似的标准组件：

页眉：<header>
导航栏：<nav>
主内容：<main>， <div>，主内容中还可以有各种子内容区段，可用<article>、<section> 和 <div> 等元素表示。
侧边栏：<aside>，经常嵌套在 <main> 中。
页脚：<footer>

典型的网站布局：

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <header>
        <!-- 本站所有网页的统一主标题 -->
        <h1>聆听电子天籁之音</h1>
    </header>

    <nav>
        <!-- 本站统一的导航栏 -->
        <ul>
            <li><a href="#">主页</a></li>
            <!-- 共 n 个导航栏项目，省略…… -->
        </ul>

        <form>
            <!-- 搜索栏是站点内导航的一个非线性的方式。 -->
            <input type="search" name="q" placeholder="要搜索的内容" />
            <input type="submit" value="搜索" />
        </form>
    </nav>

    <main>
        <!-- 网页主体内容 -->
        <article>
            <!-- 此处包含一个 article（一篇文章），内容略…… -->
        </article>

        <aside>
            <!-- 侧边栏在主内容右侧 -->
            <h2>相关链接</h2>
            <ul>
                <li><a href="#">这是一个超链接</a></li>
                <!-- 侧边栏有 n 个超链接，略略略…… -->
            </ul>
        </aside>
    </main>

    <footer>
        <!-- 本站所有网页的统一页脚 -->
        <p>© 2050 某某保留所有权利</p>
    </footer>

</body>
</html>

【备注】：

这些元素和div没啥大差别，唯一的作用就是区分功能模块，也没有什么样式。

二、无语义元素

为了应对这种情况，HTML 提供了 <div> 和 <span> 元素。应配合使用 class 属性提供一些标签，使这些元素能易于查询。

2-1、<span>元素：

<span> 是一个内联的（inline）无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时。

2-2、<div>元素：

<div> 是一个块级无语义元素，应仅用于找不到更好的块级元素时，或者不想增加特定的意义时。 <div>是块级元素，他会独占一行，行高和宽度可以修改。

可以把把<div>元素想象成一个矩形，然后再矩形里放置各种各样的内容，因此可以把<div>标签形成的矩形区域称作容器，即container，div也称为容器元素。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .container {
            width: 1400px;
            margin: 0 auto;
        }

        .header {
            height: 80px;
            background-color: aquamarine;

        }

        .nav {
            margin-top: 10px;
            height: 80px;
            background-color: aqua;
        }

        .main {
            height: 600px;
            margin-top: 10px;

        }

        .left {
            float: left;
            height: 600px;
            width: 900px;
            background-color: aqua;
        }

        .right {
            float: right;
            height: 600px;
            width: 480px;
            background-color: aqua
        }

        .footer {
            margin-top: 10px;
            background-color: aqua;
            height: 80px;

        }
    </style>

</head>

<body>

    <div class="container">
        <div class="header">网页头</div>
        <div class="nav">网页导航</div>
        <div class="main">
            <div class="left">主要内容</div>
            <div class="right">侧边栏</div>
        </div>
        <div class="footer">网站底部</div>
    </div>

</body>
</html>

网页显示效果如下：每种颜色的矩形框都是一个容器，即<div>标签。

span可以作为div的子元素，但div不能是span的子元素！！！

2-3、行内元素与块级元素的主要区别：

主要区别在于格式化呈现的方式。

行内元素： 不会以新行开始的元素，它只占据其内容所需的空间。

块级元素： 会以新行开始的元素，它总是占用全宽。除了内容自身的空间，块级元素还会提供前后两个垂直方向上的空白，主要用作其他元素的外边距。

尽管元素的默认状态是行内元素或块级元素，但你可以使用CSS的"display"属性来改变元素的行为。例如，你可以把span设置为块级元素，反之亦然。

Eg:#div{display:inherit;} #span{display:block;}

ruleslol

关注

25
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记——04：基本的网页架构

尽管元素的默认状态是行内元素或块级元素，但你可以使用CSS的"display"属性来改变元素的行为。，然后再矩形里放置各种各样的内容，因此可以把标签形成的矩形区域称作容器，即container，div也称为。除了内容自身的空间，块级元素还会提供前后两个垂直方向上的空白，主要用作其他元素的外边距。无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时。span可以作为div的子元素，但div不能是span的子元素！的元素，它只占据其内容所需的空间。是一个。
复制链接

扫一扫