第七天_H5新增标签

最新推荐文章于 2024-09-14 18:04:00 发布

余生94ww

最新推荐文章于 2024-09-14 18:04:00 发布

阅读量254

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/ww_Filling_it/article/details/124414913

版权

一、结构标签

article 定义文章使用：论坛帖子，博客文章，新闻故事，评论
aside 定义文章的侧边栏
section 定义文档中的某个区域使用：章节,头部,底部
nav 定义导航部分
header 定义section或者document页眉使用：文章介绍内容导航链接器的容器
footer 定义section或者document页脚使用：文档创建者姓名，文档版权信息，使用条款的链接，联系信心等
details 定义展开详细内容只有Safari和Chrome支持
figure 定义一组媒体元素及文字 figcaption 定义figure的title

二、表单元素

日期和时间 date time
email 必须输入且正确
url 必须输入且正确
number 必须输入 min 最小值 max 最大值
range 输入一定范围的数字值
属性 placeholder 提示文本
required 定义该input为必填项

三、多媒体标签

1.audio音频

支持格式MP3 wav ogg

属性

controls 显示音频控件

autoplay 准备就绪后自动播放

loop自动单曲循环

muted 静音

src 规定音频文件的路径

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

2.video 视频

支持格式 MP4 webM ogg

属性

controls 显示音频控件

autoplay 准备就绪后自动播放

loop自动单曲循环

muted 静音

src 规定音频文件的路径

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

四、为什么使用新标签为了语义化为什么？

1.去掉样式能让页面结构更加清晰的呈现

2.有益于SEO 搜索引擎优化

3.便于团队开发和维护

五、viewport：让网页适应不同分辨率的屏幕

六、新单位

1em=父级标签字体大小

1rem=html标签字体大小

七、案例

<!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>apple</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            padding-top: 48px;
        }

        nav {
            height: 48px;
            background-color: #333;
            width: 100%;
            color: #fff;
            position: fixed;
            top: 0;
        }

        .pc {
            z-index: 1;
        }

        .pc ul {
            width: 1000px;
            height: 48px;
            /* background-color: gold; */
            margin: 0 auto;
            text-align: center;
        }

        .pc ul li {
            display: inline-block;
            height: 48px;
            line-height: 48px;
            /* background-color: pink; */
            margin: 0 8px;
        }

        .mobile ul {
            width: 100%;
            height: 48px;
            line-height: 48px;
            text-align: center;
        }

        .mobile ul li {
            width: 40px;
            height: 48px;
            display: inline-block;
        }

        section {
            text-align: center;
            background-color: lightgray;
        }

        section p {
            height: 70px;
            line-height: 70px;
        }

        .item p {
            text-align: center;
        }

        .pics {
            overflow: hidden;
        }

        .pics div {
            float: left;
        }

        /* .item .bg{

        } */
    </style>
    <link rel="stylesheet" href="css/apple_pc.css" media="only screen and (min-width: 1000px)">
    <link rel="stylesheet" href="css/apple_pad.css" media="only screen and (min-width: 760px) and (max-width:1000px)">
    <link rel="stylesheet" href="css/apple_phone.css" media="only screen and (max-width:760px)">

</head>

<body>
    <nav class="pc">
        <ul>
            <li>adadasdas</li>
            <li>dsadas</li>
            <li>dasdasd</li>
            <li>dasd</li>
            <li>dasdas</li>
            <li>dasdsa</li>
            <li>dasdasd</li>
            <li>dasda</li>
            <li>ddd</li>
            <li>dasdas</li>
            <li>dsadas</li>
            <li>dsadsa</li>
            <li>dasdsad</li>
        </ul>
    </nav>
    <nav class="mobile">
        <ul>
            <li style="float: left;">A</li>
            <li>B</li>
            <li style="float: right;">C</li>
        </ul>
    </nav>
    <section>
        <p>乌衣巷</p>
        <p>窗前明月光</p>
        <p>疑是地上霜</p>
    </section>
    <div class="item">
        <p style="font-size: 2.5em;" class="title">iPhone</p>
        <p style="font-size: 1.8em;" class="word">Oh So Pro</p>
        <p style="font-size: 1.2em;">
            <span>learn</span>
            <span>buy</span>
        </p>
        <div class="bg"></div>
    </div>
    <div class="item">
        <p style="font-size: 2.5em;" class="title">iPhone</p>
        <p style="font-size: 1.8em;" class="word">Oh So Pro</p>
        <p style="font-size: 1.2em;">
            <span>learn</span>
            <span>buy</span>
        </p>
        <div class="bg"></div>
    </div>
    <div class="item">
        <p style="font-size: 2.5em;" class="title">iPhone</p>
        <p style="font-size: 1.8em;" class="word">Oh So Pro</p>
        <p style="font-size: 1.2em;">
            <span>learn</span>
            <span>buy</span>
        </p>
        <div class="bg"></div>
    </div>
    <div class="pics">
        <div style="background-color: aqua;"></div>
        <div style="background-color: gold;"></div>
        <div style="background-color: palevioletred;"></div>
        <div style="background-color: plum;"></div>
    </div>
</body>

</html>

.mobile {
    display: none;
}

section p {
    display: inline-block;
}

.item {
    font-size: 20px;
}

.item .bg {
    height: 380px;
    background-color: red;
}

.pics div {
    height: 580px;
    width: 47%;
    margin-right: 2%;
    margin-top: 10px;
}

.pics div:nth-of-type(2n+1) {
    margin-left: 2%;
}

.pc {
    display: none;
}

section p {
    display: inline-block;
}

.item {
    font-size: 16px;
}

.item .bg {
    height: 370px;
    background-color: gold;
}

.pics div {
    height: 490px;
    width: 47%;
    margin-right: 2%;
    margin-top: 10px;
}

.pics div:nth-of-type(2n+1) {
    margin-left: 2%;
}

.pc {
    display: none;
}

section p {
    display: block;
    height: 50px;
    line-height: 50px;
}

.item {
    font-size: 10px;
}

.item .bg {
    height: 360px;
    background-color: deepskyblue;
}

.pics div {
    height: 510px;
    float: none;
    margin-top: 10px;
}

实现如下：分为三种

1.PC端