HTML页面的布局

小k鏖

已于 2024-10-08 22:13:54 修改

阅读量229

点赞数 2

文章标签： html 前端

于 2024-10-07 19:28:56 首次发布

本文链接：https://blog.csdn.net/2301_79765198/article/details/142744682

版权

一、结构元素

语义化标签用来定义页面的不同部分，使布局更有结构和可读性

以下是一些常用的HTML布局结构元素及其用途：

<header>：用于定义页面或页面内部某个区块的页眉区域，通常包含网站标志、标题和导航链接等信息。
<nav>：用于定义页面的导航链接区域，通常包含网站的主要导航结构。
<main>：用于定义页面的主要内容区域，这个区域应该包含页面的核心信息，并且只出现一次。
<article>：用于定义独立的内容块，如博客文章、论坛帖子或新闻故事。
<section>：用于定义文档中的一个独立部分，通常包含一个共同的主题，可以包含章节标题、文本、图片等。
<aside>：用于定义非主线内容的区块，如侧边栏，通常包含与主要内容相关的额外信息。
<footer>：用于定义页面或页面内部某个区块的页脚区域，通常包含版权信息、联系方式和相关链接等。

二、页面交互元素

<details> 和 <summary>：创建可折叠的详细信息区域，<summary> 提供标题或摘要。

<details>
  <summary>点击展开</summary>
  <p>这里是折叠内容</p>
</details>

折叠效果

展开效果

课堂作业


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <h2 align="center">广东云浮中医药职业学院</h2>
        <p align="center">欢迎来到：<ins>计算机学院</ins></p>   
    </header>
    <hr>

    <nav>
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">关于我们</a></li>
            <li><a href="">学生风采</a></li>
            <li><a href="">联系方式</a></li>
        </ul>
    </nav>
    <hr>

    <main>
        
        <article>
            <h3>最新文章</h3>
            <section>
                <h4>文章标题</h4>
                <p>这里是文章的内容简介。</p>
                <p>可以使用</p>
                <p>标签进行换行</p>
                <img height="50" src="云中医校徽.jpg"  alt="" >
                <p>想了解广东云浮中医药职业学院：<a href="">点击这里</a></p>
            </section>
            
        </article>
    </main>
    <aside>
        <h3>侧边栏</h3>
        <p>侧边栏内容，如快速链接，广告等。</p>
        <table border="1">
        <tr>
            <th>专业</th>
            <th>链接</th>
        </tr>
            <tr>
                <td>计算机应用技术</td>
                <td><a href="">专业A详情</a></td>
            </tr>
            <tr>
                <td>数字媒体技术</td>
                <td><a href="">专业B详情</a></td>
            </tr>
        </table>
    </aside>
    
    <aside>
        <h3>联系我们</h3>
        <table>
            <tr>
                <td>姓名：</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td>邮箱：</td>
                <td><input type="text"></td>
            </tr>
            <tr>
                <td><input type="submit">

                </td>
            </tr>
        </table>
    </aside>
    <hr>

    <footer><p>版权所有©2024广东云浮中医药职业学院</p></footer>
    
</body>
</html>