div的语义结构以及主要的文档结构元素

DZ_OP

于 2024-09-26 17:17:18 发布

阅读量324

点赞数 11

文章标签：前端 html vscode

本文链接：https://blog.csdn.net/DZ_OP/article/details/142536069

版权

一、<div>的语义结构

div是一个块级元素，可以将文档分成多个分区。

div标签用<id>和<class>来区分不同块

<div>标签只用于设置网页内容和结构，没有明显的外观和布局效果，所以要为其添加CSS样式属性，才能看到区块的外观和布局

二、主要的文档结构元素

1、header

 <div id="header">
        这是网页的头部模块
    </div>

2、nav

<div id="nav">
       这是网页结构的导航模块
    </div>

3、artcile

<div id="article">
        这是网页结构的文章模块
    </div>

4、section

<div id="section">
商品1
</div>

5、aside

<div id="aside">
这是网页的侧边栏，给用户在线提交意见
</div>

6、footer

 <div id="footer">
这是文档的底部
</div>

三、示例效果

代码如下：

<!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>div的语义结构</title>
</head>
<body>
    <div id="header">
        这是网页的头部模块
    </div>
    <div id="nav">
       这是网页结构的导航模块
    </div>
    <div id="article">
        这是网页结构的文章模块
    </div>
    <div id="section">商品1</div>
    <div id="section">商品2</div>
    <div id="section">商品3</div>
    <div id="section">商品4</div>
    <div id="aside">这是网页的侧边栏，给用户在线提交意见</div>
    <div id="footer">这是文档的底部</div>

<!-- 下面是最新的html5写法 -->
    <hr>
    <header>
        <h2 align="center">广东云浮中医药职业学院</h2>
        <br>
        <h6 align="center">欢迎来到计算机学院</h6>
        
        <hr>
    </header>
    <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>
    <article>
        <h2>最新文章</h2>
        <h3>文章标题</h3>
        <p>这里是文章简介</p>
        <p>可以使用</p>
        <p>标签进行换行。</p>
        <img src="D:\图片\OIP-C.jpg" width="200px" height="200px">
        <p>想了解广东云浮中医药学院</p><a href="https://baike.baidu.com/item/%E5%B9%BF%E4%B8%9C%E4%BA%91%E6%B5%AE%E4%B8%AD%E5%8C%BB%E8%8D%AF%E8%81%8C%E4%B8%9A%E5%AD%A6%E9%99%A2/55963371?fr=ge_ala">点击了解</a>
  </article>
 
 
    <aside>
        <h3>侧边栏</h3>
        <p>侧边栏内容</p>
        <table border="2" width="150px" height="100px">
            <tr>
                <th>专业</th>
                <th>链接</th>
            </tr>
            <tr>
                <th>计算机应用技术</th>
                <td><a href="">专业a详情</a></td>
            </tr>
            <tr>
                <th>数字媒体技术</th>
                <td><a href="">专业b详情</a></td>
            </tr>

        </table>
        <h3>联系我们</h3>
        姓名：<input type="text" id="name">
        <br>
        邮箱：<input type="text">
        <br>
        <input type="submit">
    </aside>
    <hr>
    <footer>
        <h6>版权所有@广东云浮中医药职业学院</h6>
    </footer>
    <hr>
    <br>
    <br>


</body>
</html>

效果如下：