任务02-01-HTML5

最新推荐文章于 2024-09-14 17:54:00 发布

weixin_46137837

最新推荐文章于 2024-09-14 17:54:00 发布

阅读量52

点赞数

文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_46137837/article/details/119248866

版权

1. 知识总结

在这里插入图片描述

2.HTML5新结构标签案例实现

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>结构标签案例</title>
	<style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        nav {
            height: 60px;
            background-color: grey;
        }
        ul {
            height: 100%;
            text-align: center;
        }
        li {
            display: inline-block;
            width: 80px;
            height: 60px;
            line-height: 60px;
            color: #eee;
        }
        header {
            height: 100px;
            background-color: pink;
            text-align: center;
        }
        main {
            width: 100%;
            height: 600px;
            background-color: #eee;
        }
        aside {
            width: 15%;
            height: 600px;
            margin-left: 10%;
            background-color: white;
            text-align: center;
            float: left;
        }
        aside a {
            display: block;
            height: 100px;
            line-height: 100px;
            color: #9c9c9c;
            text-decoration: none;
        }
        aside a:nth-of-type(3) {
            background-color: #d4ebf8;
        }
        #info {
            width: 56%;
            height: 600px;
            padding: 0 10px;
            margin-left: 10%;
            background-color: rgba(255,255,255,0.5);
            text-align: center;
            font-size: 30px;
            float: left;
            font-size: 16px;
        }
        article {
            margin-top: 100px;
        }
        footer {
            height: 60px;
            text-align: center;
            line-height: 60px;
            background-color: #333;
            color: #999;
        }
    </style>
</head>



<body>
	<header>
		<h1>818预售开启</h1>
	</header>
	<nav>
		<ul>
			<li>网站导航</li>
            <li>商家入驻</li>
            <li>客户服务</li>
            <li>请登录</li>
            <li>注册有礼</li>
            <li>我的订单</li>
            <li>我的特卖</li>
            <li>会员俱乐部</li>
            <li>手机版</li>
            <li>更多</li>
		</ul>
	</nav>
	<!-- 主要内容展示区域 -->
	<main>
		<!-- 侧边栏  内容导航 -->
		<aside>
			<a href="###">限时秒杀</a>
            <a href="###">领劵中心</a>
            <a href="###">直播拼购</a>
            <a href="###">频道广场</a>
            <a href="###">猜你喜欢</a>
            <a href="###">顶部</a>
		</aside>
		<div id="info">
            <article>
                <h3>全球领先</h3>
                <p>实力保障·中国乃至全球的领先企业唯品会成立于2008年，基于极具生命力的特卖模式，迅速在众多电商企业中脱颖而出，成为全国、乃至全球最大的特卖电商。当前，唯品会所代表的“特卖”模式已经成为当今三大主流电商业态之一。自2012年3月在纽交所上市以来，已经实现28个季度连续盈利，据美国权威财经杂志《财富》（中文版）发布的2018中国500强榜单显示，唯品会连续第五年入榜，位列榜单第108位。</p>
            </article>
            <article >
                <h3>正品货源</h3>
                <p>目前，唯品会已累计合作超过3万个品牌。供应商类型包括品牌生产商、品牌官方授权总代理商、品牌分公司及国际品牌驻中国的办事处等合法渠道。唯品会更与多家行业巨头达成战略合作关系，签订战略正品采购协议，从源头确保正品。
                </p>
            </article>
        </div>
	</main>
	<!-- 底部信息栏 -->
    <footer>
    	Copyright © 2008-2021 vip.com，All Rights Reserved  使用本网站即表示接受 唯品会用户协议 版权所有
    </footer>
</body>
</html>

3.表单元素案例实现

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单元素</title>
</head>
<body>
    <form action="http://www.baidu.com">
        日期:<input type="date">
        <br>
        时间:<input type="time">
        <br>
        邮箱:<input type="email" name="email">
        <br>
        网址:<input type="url" name="url">
        <br>
        数字:<input type="number" name="n" value="0" min="-3" max="3">
        <br>
        滑动块:<input type="range" name="range" min="0" max="100" value="97">
        <br>
        <input type="submit">
    </form>
</body>
</html>

4.媒体标签

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>媒体标签</title>
</head>
<body>
	<audio controls>
		<source src="friendship.mp3" type="audio/mp3">
	</audio>
	<video controls width="320" height="240">
		<source src="111.mp4" type="video/mp4">
	</video>
</body>
</html>