无语义标签：div和span 以及代码案例（代码具体实现）

薛定谔的__猫

已于 2023-06-07 16:01:09 修改

阅读量81

点赞数 1

分类专栏：前端文章标签： javascript 前端 html

于 2023-06-07 15:14:09 首次发布

本文链接：https://blog.csdn.net/m0_64188165/article/details/131086099

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

div 和 span 标签用于网页布局

div：独占一行，块级元素

span：不独占一行，行内元素

案例：

一个简单的简历页面实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简历页面</title>
</head>
<body>
  <h1>姓名</h1>
  <div>
    <h2>基本信息</h2>
    <img src="../day1/cat.jpg" width="100px">
    <p>求职意向：Java开发工程师</p>
    <p>联系电话：xxx-xxxx-xxxx</p>
    <p>邮箱：xxxx@126.com</p>
    <p><a href="#">我的github</a></p>
    <p><a href="#">我的博客</a></p>
  </div>
  <div>
    <h2>教育背景</h2>
    <ol>
      <li>2022-2020大学</li>
      <li>2020-2018高中</li>
      <li>2018-2015初中</li>
    </ol>
  </div>
  <div>
    <div>
      <h3>专业技能</h3>
      <ul>
        <li>基础扎实</li>
        <li>学习能力强</li>
        <li>接收能力强</li>
        <li>心理素质强</li>
      </ul>
    </div>
    <div>
      <h3>我的项目</h3>
      <ol>
        <li>
          <h3>留言墙</h3>
          <p>开发时间：2023-2022</p>
          <p>功能介绍</p>
          <ul>
            <li>支持留言发布</li>
            <li>支持匿名留言</li>
          </ul>
        </li>
        <li>
          <h3>学习小助手</h3>
          <p>开发时间：2023-2022</p>
          <p>功能介绍</p>
          <ul>
            <li>支持错题检索</li>
            <li>支持同学探讨</li>
          </ul>
        </li>
      </ol>
    </div>
  </div>
  <div>
    <h2>个人评价</h2>
    <p>优秀</p>
  </div>
</body>
</html>

结果显示：