传统网页布局和H5网页布局的差别

最新推荐文章于 2024-08-24 17:09:25 发布

EddySD

最新推荐文章于 2024-08-24 17:09:25 发布

阅读量417

点赞数 9

文章标签： html 前端

本文链接：https://blog.csdn.net/EddySD/article/details/140617260

版权

HTML5（简称H5）网页布局与传统HTML布局相比，引入了一些新的元素和概念，这些变化旨在提供更好的语义化、结构化和响应式设计。下面写的是一些主要的差别：

语义化标签：
        HTML5 引入了更多语义化的标签，如 <header>、<nav>、<section>、<article>、<aside>、<footer> 等，这些标签提供了更清晰的结构和含义，有助于搜索引擎优化（SEO）和屏幕阅读器等辅助技术。
        传统布局通常依赖于 <div> 和 <span> 等通用标签，这些标签本身没有特定的语义。
结构化：
        HTML5 的布局更加注重结构化，通过使用不同的语义化标签来定义网页的不同部分，使得网页内容的组织更加清晰。
响应式设计：
        HTML5 通过新的视口（viewport）元信息（<meta name="viewport" content="width=device-width, initial-scale=1.0">），使得网页能够更好地适应不同设备的屏幕尺寸，促进了响应式设计的发展。
        传统布局可能需要额外的工作来实现响应式设计。
多媒体支持：
        HTML5 提供了对视频和音频的原生支持，通过 <video> 和 <audio> 标签可以轻松嵌入多媒体内容，不需要依赖第三方插件。
        传统布局通常需要使用 <object>、<embed> 或 <iframe> 标签来嵌入多媒体内容。
表单控件：
         HTML5 增强了表单控件，引入了 <input> 元素的新类型，如 email、url、number、date 等，以及新的属性，如 placeholder、required、pattern 等，这些改进提供了更好的表单验证和用户体验。
        传统布局的表单控件功能较为有限，通常需要使用JavaScript进行额外的验证。
图形和动画：
        HTML5 提供了 <canvas> 标签，允许开发者使用JavaScript进行复杂的图形绘制和动画制作。
        传统布局通常依赖于Flash或其他插件来实现图形和动画效果。
Web存储：
        HTML5 引入了 Web 存储 API，包括 localStorage 和 sessionStorage，提供了比传统Cookie更强大的客户端存储能力。
        传统布局通常使用Cookie来存储用户信息和会话数据。
跨文档消息传输：
        HTML5 支持跨文档消息传输（Cross-document messaging），允许不同源的文档之间进行通信。
离线应用：
        HTML5 支持离线应用，通过应用程序缓存（AppCache）可以使网页在没有网络连接的情况下也能正常工作。
下面是实现同一功能的传统布局和H5布局代码：

传统布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .header{
            width: 1000px;
            height: 120px;
            background-color: pink;
            margin: 0 auto;
        }
        .nav{
            width: 1000px;
            height: 60px;
            background-color: rgb(203, 229, 106);
            margin: 0 auto;
        }
        .section{
            width: 1000px;
            height: 400px;
            background-color: rgb(131, 189, 244);
            margin: 0 auto; 
        }
        .section .aside{
            float: left;
            width: 400px;
            height: 400px;
            background-color: aqua;
        }
        .section .article{
            float: right;
            width: 600px;
            height: 400px;
            background-color: rgb(121, 34, 48);
        }
        .footer{
            width: 1000px;
            height: 80px;
            background-color: rgb(46, 221, 207);
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="nav"></div>
    <div class="section">
        <div class="aside"></div>
        <div class="article"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

H5布局：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        header{
            width: 1000px;
            height: 120px;
            background-color: pink;
            margin: 0 auto;
        }
        nav{
            width: 1000px;
            height: 60px;
            background-color: rgb(203, 229, 106);
            margin: 0 auto;
        }
        section{
            width: 1000px;
            height: 400px;
            background-color: rgb(131, 189, 244);
            margin: 0 auto; 
        }
        section aside{
            float: left;
            width: 400px;
            height: 400px;
            background-color: aqua;
        }
        section article{
            float: right;
            width: 600px;
            height: 400px;
            background-color: rgb(121, 34, 48);
        }
        footer{
            width: 1000px;
            height: 80px;
            background-color: rgb(46, 221, 207);
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <header>头部</header>
    <nav>nav</nav>
    <section>
        <aside>侧边栏</aside>
        <article>文章</article>
    </section>
    <footer>底部</footer>
</body>
</html>

EddySD

关注

9
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
传统网页布局和H5网页布局的差别

HTML5 增强了表单控件，引入了 <input> 元素的新类型，如 email、url、number、date 等，以及新的属性，如 placeholder、required、pattern 等，这些改进提供了更好的表单验证和用户体验。HTML5 引入了更多语义化的标签，如 <header>、<nav>、<section>、<article>、<aside>、<footer> 等，这些标签提供了更清晰的结构和含义，有助于搜索引擎优化（SEO）和屏幕阅读器等辅助技术。
复制链接

扫一扫