HTML5 响应式

最新推荐文章于 2025-08-15 11:01:37 发布

原创最新推荐文章于 2025-08-15 11:01:37 发布 · 558 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html5

本文介绍了HTML5中响应式设计的重要性和语义化标签的使用，如article、aside、section等，强调了语义化对SEO和团队开发的益处。还详细讲解了新的表单元素，如date、time、url等，以及audio和video多媒体标签的属性。此外，提到了新的计量单位em、rem、vw和vh，并讨论了viewport在适应不同设备中的作用，以及@media查询在响应式设计中的应用。

为什么使用新标签？

为了语义化。

语义化好处：去掉样式能让页面结构清晰呈现

有益于SEO

便与团队开发和维护

一、结构标签

article 定义文章

aside 定义文章的的侧边栏

section 定义文档中的某个区域

nav 定义导航部分

header 头部信息

footer 底部信息

details 定义展开详细内容

figure 定义一组媒体元素及文字

<!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>新的结构标签</title>
</head>
<body>
    <nav>
        <ul>
            <li>105个男人与3个女人的故事</li>
            <li>一群男人的故事</li>
            <li>一群女人与一个男人的故事</li>
            <li>一个和尚的故事</li>
        </ul>
    </nav>
    <article>
        <h1>105个男人与3个女人的故事</h1>
        <aside>
            <ul>
                <li>风雪山神庙</li>
                <li>大郎，该吃药了！</li>
                <li>智取生辰纲</li>
            </ul>
        </aside>
        <section>
            <header>
                林冲，鲁智深，武松，宋江，李逵，戴宗，燕青，柴进
            </header>
            <main>
                有很多段故事
            </main>
            <footer>
                总结
            </footer>
        </section>
    </article>

    <em></em> 
    <strong></strong> 

    <details>
        <p>欲知详情，请见下回分晓！</p>
    </details>
    <figure>
        <img src="img/qq.png" alt="">
        <figcaption>这个是qq</figcaption>
    </figure>
    <!-- H5新标签：标签语义化 -->
    <!-- 为什么，作用，好处？ -->
</body>
</html>

二、表单元素

date 日期

time 时间

url

number

range 输入一定范围内的数字值

属性： placeholder 提示文字

required 定义该input为必填项

<!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>new form</title>
</head>
<body>
    <form action="">
        日期
        <input type="date"> 
        <br>
        时间
        <input type="time">
        <br>
        邮箱
        <!-- required 必须填写 -->
        <input required type="email" name="" id="">
        <br>
        网址
        <input type="url">
        <br>
        数字
        <input type="number" min="16" max="50">
        <br>
        <input type="range">


        <br>
        <input type="submit">
    </form>
</body>
</html>

三、多媒体标签

1、 audio 音频

支持格式：MP3、wav、ogg

属性：controls 显示音频控件

autoplay 准备就绪后自动播放

loop 自动单曲循环

muted 静音

src 规定音频文件的路径

source：定义资源类型，由浏览器进行选择

2、radio 视频

支持格式：MP4、webM、ogg

属性：

controls 显示音频控件

autoplay 准备就绪后自动播放

loop 自动单曲循环

muted 静音

src 规定音频文件的路径

source：定义资源类型，由浏览器进行选择

<!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>audio</title>
</head>
<body>
    <audio controls>
        <source src="audio/Sugar.amr" type="audio/amr">
        <source src="audio/Sugar.mp3" type="audio/mp3">
        <source src="audio/Sugar.wav" type="audio/wav">
        <source src="audio/Sugar.ogg" type="audio/ogg">
    </audio>
    <video controls>
        <source src="video/1.ogg" type="video/ogg">
        <source src="video/1.webm" type="video/webm">
    </video>
</body>
</html>

四、新的计量单位

em rem vw vh

1em = 父级标签字体的大小

1rem = html标签字体的大小

<!DOCTYPE html>
<html font-size="62.5%" 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>新的计量单位</title>
</head>
<body>
    <!-- em  rem   vw   vh -->
    <!-- 1em = 父级标签字体的大小
    1rem = html标签字体的大小 -->

    <div font-size="2em">
        <ul> 
            <li font-size="1.5rem">
                <p></p> ?
            </li>
        </ul>
    </div>
</body>
</html>

五、viewport

viewport作用：使元素适用于不同的设备

<!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, maximum-scale=1.0, user-scalable=0">
    <title>viewport</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: cyan;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div></div>
    <!-- viewport作用：使元素适用于不同的设备(10遍) -->
</body>
</html>

六、media

@media only screen and (条件)

<!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>媒体查询</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: gold;
        }
        @media only screen and (min-width: 1200px) {
            /* width > 1200 */
            div {
                width: 200px;
                height: 200px;
                background-color: pink;
            }
        }

        @media only screen and (min-width: 800px) and (max-width: 1200px) {
            /* 800 < width < 1200 */
            div {
                width: 150px;
                height: 150px;
                background-color: cyan;
            }
        }

        @media only screen and (max-width: 800px) {
            div {
                width: 100px;
                height: 100px;
                background-color: skyblue;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

案例1

星巴克

<!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>start bark</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/pc.css" media="only screen and (min-width: 1200px)">
    <link rel="stylesheet" href="../css/pad.css" media="only screen and (min-width: 800px) and (max-width: 1200px)">
    <link rel="stylesheet" href="../css/phone.css" media="only screen and (max-width: 800px)">
    <style>

    </style>
</head>
<body>
    <nav>
        <div class="star">
            <img class="logo" src="../img/logo.png" alt="">
            <ul>
                <li><a href="#">门店</a></li>
                <li><a href="#">我的账户</a></li>
                <li><a href="#">菜单</a></li>
            </ul>
            <img src="../img/more.png" alt="" class="more">
        </div>
        <div class="cafe">
            <p class="coco">心情惬意，来杯咖啡吧</p>
        </div>
        <div class="cub">
            <img src="../img/person.png" alt="" class="person">
            <p class="dl">登录</p>
            <p class="zc">注册</p>
        </div>
    </nav>
    <img src="../img/ad.jpg" alt="" class="ad">
    <div class="pic">
        <img src="../img/1.jpg" alt="">
        <img src="../img/2.jpg" alt="">
        <img src="../img/3.jpg" alt="">
    </div>
    <div class="word">
        <div class="club">
            <p class="xing">星享俱乐部</p>
            <p class="kai">开启您的星象之旅，星星越多、会员等级越高、好礼越丰富。<span>了解更多</span></p>
            <div class="dz">
            <p class="zhu">注册</p>
            <p class="deng">登录</p>
            </div>
        </div>
        <!-- <img src="../img/club.png" alt="" class="cb"> -->
    </div>
    <div class="pics">
        <p class="title">星巴克精选</p>
        <p class="content">在星巴克天猫旗舰店发现更多咖啡心意</p>
        <ul>
            <li>
                <img src="../img/download.png" alt="">
                <p>会员星礼包</p>
                <p>星享卡新升级更多新意好礼</p>
                <p>了解更多</p>
            </li>
            <li>
                <img src="../img/download-1.png" alt="">
                <p>星礼卡</p>
                <p>用一份心意让心意相连</p>
                <p>了解更多</p>
            </li>
            <li>
                <img src="../img/download-2.png" alt="">
                <p>电子产品券</p>
                <p>心意从这一杯开始</p>
                <p>了解更多</p>
            </li>
            <li>
                <img src="../img/download-3.png" alt="">
                <p>咖啡生活</p>
                <p>星巴克用心制作</p>
                <p>了解更多</p>
            </li>
        </ul>
    </div>
    <div class="pai">
        <p class="title">1912派克街 | 咖啡星讲堂</p>
        <p class="content">了解更多星巴克咖啡文化</p>
        <div class="tu">
            <div class="ce">
                <p>咖啡知识</p>
                <p>咖啡星讲堂</p>
            </div>
            <div class="ce">
                <p>咖啡知识</p>
                <p>咖啡星讲堂</p>
            </div>
            <div class="ce">
                <p>咖啡知识</p>
                <p>咖啡星讲堂</p>
            </div>
        </div>
    </div>
    <p class="foot">户公网安备 310104020000253 | 户ICP备17003747号</p>
    <footer>
        <div class="item">
            <img src="../img/item1.png" alt="">
            <p>主页</p>
        </div>
        <div class="item">
            <img src="../img/item2.png" alt="">
            <p>门店</p>
        </div>
        <div class="item">
            <img src="../img/item3.png" alt="">
            <p>我的账户</p>
        </div>
        <div class="item">
            <img src="../img/item4.png" alt="">
            <p>菜单</p>
        </div>
        <div class="item">
            <img src="../img/item5.png" alt="">
            <p>更多</p>
        </div>
    </footer>
</body>
</html>

案例2

活力广东

<!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>活力广东</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        body{
            height: 100vh;
            /* background-color: aqua; */
            background-image: url(https://blog.csdn.net/img/bg.png);
            background-size: cover;
            background-position: center center;
        }
    </style>
    <link rel="stylesheet" href="../css/pc.css" media="only screen and (min-width: 800px)">
    <link rel="stylesheet" href="../css/phone.css" media="only screen and (max-width: 800px)">
</head>
<body>
    <header>
        <img src="../img/logo.png" alt="">
        <img src="../img/welcome.png" alt="">
    </header>
    <main>
        <ul class="top-left">
            <li><img src="../img/visit.png" alt=""></li>
            <li><img src="../img/contract.png" alt=""></li>
            <li><img src="../img/admin.png" alt=""></li>
            <li><img src="../img/guide.png" alt=""></li>
            <li><img src="../img/expo.png" alt=""></li>
            <li><img src="../img/axam.png" alt=""></li>
        </ul>
        <ul class="bottom-right">
			<li><img src="../img/sjzx.png" alt=""></li>
			<li><img src="../img/sina.png" alt=""></li>
			<li><img src="../img/hall.png" alt=""></li>
			<li><img src="../img/tencent.png" alt=""></li>
			<li><img src="../img/visit.png" alt=""></li>
			<li><img src="../img/weico.png" alt=""></li>
		</ul>
    </main>
</body>
</html>