菜单 搜索
首页 前端知识 前端学习——HTML5

前端学习——HTML5

2024-06-08 22:06:00 前端知识 前端哥 55 824 我要收藏

在这里插入图片描述

新增语义化标签

新增布局标签在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
</head>
<body>
    <!-- 头部 -->
    <header>
        <h1>尚品汇</h1>
    </header>
    <hr>
    <!-- 主导航 -->
    <nav>
        <a href="#">首页</a>
        <a href="#">订单</a>
        <a href="#">购物车</a>
        <a href="#">我的</a>
    </nav>
    <!-- 主要内容 -->
    <div class="page-content">
        <!-- 侧边栏导航 -->
        <aside style="float:right;">
            <nav>
                <ul>
                    <li><a href="#">秒杀专区</a></li>
                    <li><a href="#">会员专区</a></li>
                    <li><a href="#">品牌专区</a></li>
                    <li><a href="#">优惠专区</a></li>
                </ul>
            </nav>
        </aside>
        <!-- 文章 -->
        <article>
            <h2>《如何一夜暴富》</h2>
            <section>
                <h3>第一种方式：白日梦</h3>
                <p>你应该......</p>
            </section>
            <section>
                <h3>第二种方式：白日梦</h3>
                <p>你应该......</p>
            </section>
            <section>
                <h3>第三种方式：白日梦</h3>
                <p>你应该......</p>
            </section>
        </article>
    </div>
    <hr>
    <footer>
        <nav>
            <a href="#">友情链接</a>
            <a href="#">友情链接</a>
            <a href="#">友情链接</a>
            <a href="#">友情链接</a>
        </nav>
    </footer>
</body>
</html>

在这里插入图片描述

新增状态标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
    <style>
        progress {
            width: 50px;
        }
    </style>
</head>
<body>
    <span>手机电量：</span>
    <meter max="100" min="0" value="5" low="10" high="20" optimum="90"></meter>
    <br>
    <span>当前进度：</span>
    <progress max="100" value="80"></progress>
</body>
</html>

在这里插入图片描述

新增列表标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
</head>
<body>
    <form action="#">
        <input type="text" list="mydata">
        <button>搜索</button>
    </form>
    <datalist id="mydata">
        <option value="周杰伦">周杰伦</option>
        <option value="周冬雨">周冬雨</option>
        <option value="马冬梅">马冬梅</option>
        <option value="温兆伦">温兆伦</option>
    </datalist>
    <details>
        <summary>如何一夜暴富？</summary>
        <p>好好学习，天天上线</p>
    </details>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

新增文本标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
</head>
<body>
    <ruby>
        <span>魑魅魍魉</span>
        <rt>chī mèi wǎng liǎng</rt>
    </ruby>
    <hr>
    <ruby>
        <span>魑</span>
        <rt>chī</rt>
    </ruby>
    <hr>
    <p>Lorem ipsum <mark>dolor</mark> sit amet consectetur adipisicing elit. Tenetur impedit quasi, minima ullam sequi quaerat veniam fugiat distinctio. Iure temporibus laborum earum tenetur suscipit odit ad excepturi ut eaque ab!</p>
</body>
</html>

在这里插入图片描述

表单相关新增

新增表单控件属性

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<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>Document</title>
</head>

<body>
    <form action="">
        账号：<input type="text" name="account" placeholder="请输入账号" required autofocus autocomplete="on" pattern="\w{6}">
        <br>
        密码：<input type="password" name="pwd" placeholder="请输入密码" required pattern="\w{6}">
        <br>
        性别：
        <input type="radio" value="mail" name="gender" required>男
        <input type="radio" value="femail" name="gender" required>女
        <br>
        爱好：
        <input type="checkbox" value="book" name="hobby">读书
        <input type="checkbox" value="music" name="hobby" required>音乐
        <input type="checkbox" value="movie" name="hobby">电影
        <br>
        其他：<textarea name="other" required></textarea>
        <br>
        <button>提交</button>
    </form>
</body>

</html>

在这里插入图片描述

input新增type属性值

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
</head>
<body>
    <form action="" novalidate>
        <!-- 邮箱：<input type="email" name="email"> -->
        <br>
        <!-- url：<input type="url" requried name="url"> -->
        <br>
        <!-- 数值：<input type="number" name="number" step="2" max="80" min="20"> -->
        <br>
        <!-- 搜索：<input type="search" name="keyword"> -->
        <br>
        <!-- 电话：<input type="tel" name="phone"> -->
        <br>
        <!-- 范围：<input type="range" name="range" max="80" min="20" value="22"> -->
        <br>
        <!-- 颜色：<input type="color" name="color"> -->
        <br>
        <!-- 日期：<input type="date" name="date"> -->
        <br>
        <!-- 月份：<input type="month" name="month"> -->
        <br>
        <!-- 周：<input type="week" name="week"> -->
        <br>
        <!-- 时间：<input type="time" name="time"> -->
        <br>
        <!-- 日期+时间：<input type="datetime-local" name="time2"> -->
        <button>提交</button>
    </form>
</body>
</html>

新增多媒体标签

新增视频标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
    <style>
        video {
            width: 600px;
        }
    </style>
</head>
<body>
    <video src="./资料/resource/小电影.mp4" controls muted loop poster="./资料/封面.png" preload="auto"></video>
</body>
</html>

在这里插入图片描述

新增音频标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
    <style>
        audio {
            width: 600px;
            border: 1px solid skyblue;
        }
    </style>
</head>
<body>
    <audio src="./资料/小曲.mp3" controls muted loop preload="auto"></audio>
</body>
</html>

<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
    <style>
        audio {
            width: 600px;
        }
        .mask {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0,0,0,0.727);
        }
        .dialog {
            position: absolute;
            width: 400px;
            height: 400px;
            background-color: green;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            font-size: 40px;
            text-align: center;
            line-height: 400px;
        }
        span {
            border: 1px solid white;
            color: white;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <audio id="music" src="./资料/小曲.mp3" controls></audio>
    <div class="mask" id="mask">
        <div class="dialog">
            <span>点我登陆</span>
            <span onclick="go()">随便听听</span>
        </div>
    </div>

    <script>
        function go(){
            music.play()
            mask.style.display = 'none'
        }
    </script>
</body>
</html>

在这里插入图片描述

新增全局属性

在这里插入图片描述

兼容性处理

在这里插入图片描述

转载请注明出处或者链接地址：https://www.qianduange.cn//article/11580.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！