当前位置: 首页 > article >正文

HTML5新增属性

1、HTML5

1.1 新增布局标签
  • header:用于定义文档或者section的页眉;
  • footer:用于定义页面或section的底部信息;
  • nav:用于定位页面上的导航链接部分;
  • article:用于定位文档或者页面中的独立部分,可以在不丢失原本意义的情况下独立存在;
  • section:用于定位文档中的节,代表可以是一个独立的部分,通常包含标题;
  • aside:用于定位和页面主要内容有关但可以被单独引用的内容;
  • main:文档的主要内容,WHATWG中没有语义;
  • hgroup:包裹连续的标题,W3C将其删除。

article中可以有多个section;

section强调将内容分为一块,article强调内容为一个整体,内容比较完整。

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

<head>
    <meta charset="UTF-8">
    <title>新增布局标签</title>
    <style>
        * {
            margin: 10px auto;
            text-align: center;
        }

        aside {
            float: right;
        }
    </style>
</head>

<body>
    <header>个人博客</header>
    <nav>
        <a href="#">首页</a>
        <a href="#">文章分类</a>
        <a href="#">我的</a>
    </nav>
    <main>
        <article>
            <h3>文章1</h3>
            <section>
                <h3>章节1</h3>
                <p>主要内容:.........................</p>
            </section>

            <section>
                <h3>章节2</h3>
                <p>主要内容:.........................</p>
            </section>

            <section>
                <h3>章节3</h3>
                <p>主要内容:.........................</p>
            </section>
        </article>
    </main>
    <aside>
        <nav>
            <ul>
                <li><a href="#">链接1</a></li>
                <li><a href="#">链接2</a></li>
                <li><a href="#">链接3</a></li>
            </ul>
        </nav>
    </aside>
    <footer>
        <p>联系我们</p>
        <p>网站备案号:✖️✖️✖️✖️✖️✖️✖️</p>
    </footer>
</body>
</html>
1.2 新增状态标签
  • meter:展示测量结果在已知范围的位置,如手机电量提示。
    • max:最大值;
    • min:最小值;
    • high:高值;
    • low:低值;
    • optimum:最优值;
    • value:当前值。
  • progress:显示操作进度,如文件上传进度条。
    • max:最大值;
    • value:当前值。
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>新增状态标签</title>
</head>

<body>
    <span>手机电量: </span>
    <meter max="100" min="0" high="20" low="10" optimum="90" value="50"></meter>
    <br>
    <span>上传进度: </span>
    <progress max="100" value="60"></progress>
</body>

</html>
1.3 新增列表标签
  • datalist:用于对搜索框关键字的提示;
  • details:用于展示问题和答案,或对专有名词进行解释;
  • summary:写在details中,指定问题或专有名词。
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>新增列表标签</title>
</head>

<body>
    <input type="text" list="data">
    <button>搜索</button>
    <datalist id="data">
        <option value="d1">d1</option>
        <option value="d2">d2</option>
        <option value="d3">d3</option>
        <option value="d4">d4</option>
    </datalist>
    <details>
        <summary>标题</summary>
        <p>这是标题的解释</p>
    </details>
</body>

</html>
1.4 新增文本标签
  • ruby:包裹需要注音的文字;
  • rt:包裹拼音,写在待注音文字的下面;
  • mark:标记文字,使其背景变为淡黄色。
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>新增文本标签</title>
</head>

<body>
    <ruby>
        <span>注音文字</span>
        <rt>zhù yīn wén zì</rt>
    </ruby>
    <hr>
    <p>这是一个<mark>段落</mark></p>
</body>

</html>
1.5 表单新增功能
  • placeholder:提示文字;
  • required:表示该字段不能为空;
  • autofocus:光标焦点自动锁定,多个该标签光标锁定第一个;
  • autocomplete:自动根据历史记录生成相关关键词;
  • pattern:正则表达式,验证输入的格式,输入不能为空值;
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>新增表单控件属性</title>
    <style>
        #self {
            margin-left: 100px;
            height: 100px;
            width: 200px;
        }

        #button {
            position: relative;
            left: 10px;
            bottom: 10px;
        }

        textarea::placeholder {
            text-align: center;
            line-height: 100px;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <form action="">
        <label for="account">账号:</label>
        <input type="text" name="account" id="account" placeholder="请输入账号" required autofocus autocomplete="on" pattern="\w{6}">
        <br>
        <label for="password">密码:</label>
        <input type="password" name="password" id="password" placeholder="请输入密码" required>
        <br>
        <label for="gender">性别:</label>
        <input type="radio" name="gender" id="gender" required><input type="radio" name="gender" id="gender"><br>
        <label for="hobby">爱好:</label>
        <input type="checkbox" name="hobby" id="hobby" required>爱好1
        <input type="checkbox" name="hobby" id="hobby">爱好2
        <input type="checkbox" name="hobby" id="hobby">爱好3
        <br>
        <label for="self">个人简介:</label>
        <br>
        <textarea name="self" id="self" placeholder="点击输入" required></textarea>
        <button id="button">提交</button>
    </form>
</body>

</html>
1.6 input新增属性
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>input新增属性</title>
</head>

<body>
    <!-- 表单在属性中添加 novalidate 表示去除表单中所有验证 -->
    <form action="" novalidate>
        邮箱:<input type="email" name="email" required>
        <br>
        网址:<input type="url" name="url" required>
        <br>
        数字:<input type="number" name="number" max="80" min="20" step="5" required>
        <br>
        搜索:<input type="search" name="search" required>
        <br>
        电话:<input type="tel" name="tel" required>
        <br>
        滑块:<input type="range" name="range" max="80" min="20" step="5" value="25" required>
        <br>
        颜色选择器:<input type="color" name="color" required>
        <br>
        日期:<input type="date" name="date" required>
        <br>
        月份:<input type="month" name="month" required>
        <br>
        周:<input type="week" name="week" required>
        <br>
        时间:<input type="time" name="time" required>
        <br>
        时间和日期:<input type="datetime-local" name="datetime-local" required>
        <br>
        <button>提交</button>
    </form>
</body>

</html>
1.7 video新增属性
  • controls:媒体控制;
  • loop:循环播放;
  • autoplay:自动播放,必须静音播放属性在时才播放,除非媒体参与度为高;
  • muted:静音播放;
  • poster:视频封面,未点击时为引入图片大小,视频播放为视频大小,最好大小一致;
  • src:引入视频地址;
  • width:视频的宽;
  • height:视频的高。
  • proload:视频预加载;
    • none:不预先加载视频;
    • metadata:仅预先获取视频的元数据(基本信息);
    • auto:下载整个视频文件。
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>新增媒体标签</title>
    <style>
        video {
            height: 300px;
            margin-top: 10px;
        }

        .video {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="video">
        <video src="./videos/video.mp4" controls loop autoplay></video>
        <br>
        <video src="./videos/video.mp4" controls muted loop poster="./videos/touxiang.png" preload="auto"></video>
    </div>
</body>

</html>
1.8 audio新增属性

audio中与视频的属性基本一致,但是没有posterwidthheight

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

<head>
    <meta charset="UTF-8">
    <title>音频新增属性</title>
    <style>
        audio {
            width: 600px;
        }

        .mask {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.592);
        }

        .dialog {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            background-color: aqua;
            right: 0;
            text-align: center;
            width: 400px;
            height: 400px;
            line-height: 400px;
            margin: auto;
            font-size: 40px;

        }

    span {
            border: 1px wheat solid;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <audio id="music" src="./videos/反方向的钟 - 周杰伦.mp3" controls loop preload="auto"></audio>
    <div class="mask" id="mask">
        <div class="dialog" id="dialog">
            <span>登录</span>
            <span onclick="play()">试听</span>
        </div>
    </div>
    <script>
        function play(){
            music.play()
            mask.style.display = "none"
        }
    </script>
</body>

</html>
1.9 新增全局属性
  • contenteditable:是否可被用户编辑;
  • draggable:元素是否可被拖动;
  • hidden:隐藏元素;
  • spellcheck:拼写检查,需要在浏览器设置中打开;
  • contextmenu:规定元素的上下文菜单,用户鼠标右键点击元素时显示;
  • data-*:存储页面私有定制数据。
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增全局属性</title>
    <style>
        .contenteditable {
            border: 1px solid black;
            padding: 5px;
        }

        .draggable {
            cursor: move;
        }

        .hidden {
            display: none;
        }

        .spellcheck {
            border-bottom: 1px dotted red;
        }

        .contextmenu {
            display: inline-block;
            margin: 5px;
        }

        [data-custom] {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div contenteditable="true" class="contenteditable">Contenteditable 属性: 使元素可编辑</div>
    <div draggable="true" class="draggable">Draggable 属性: 使元素可以拖动</div>
    <div class="hidden">Hidden 属性: 隐藏元素</div>
    <div spellcheck="true" class="spellcheck">Spellcheck 属性: 开启拼写检查</div>
    <div contextmenu="exampleMenu" class="contextmenu">Contextmenu 属性: 规定元素的上下文菜单</div>
    <div data-custom="customData">Data-* 属性: 存储页面私有定制数据</div>

    <!-- 示例上下文菜单 -->
    <menu type="context" id="exampleMenu">
        <li><a href="#copy">复制</a></li>
        <li><a href="#paste">粘贴</a></li>
        <li><a href="#cut">剪切</a></li>
    </menu>
</body>

</html>
1.10 H5兼容问题

在一些低版本ie浏览器中有些H5样式不支持,引入谷歌写的js文件和一些设置可使得兼容性更好。

<head>
<!-- 让IE浏览器处于最优渲染模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!-- 针对国产浏览器,让浏览器优先使用webkit内核 -->
<meta name="render" content="webkit">
<!--[if lt ie 9]>
<script src="./html5shiv.js"></script>
<![endif]-->
</head>

相关代码地址:https://gitee.com/justinc666/front-end/tree/master/HTML5


http://www.kler.cn/a/373197.html

相关文章:

  • Linux学习_11
  • 锁升级及线程池相关
  • 微信小程序 setData数据量过大的解决与分页加载的实现
  • ViSual studio如何安装 并使用GeographicLib
  • 【Searxng】Searxng docker 安装
  • https://huggingface.co/上的模型无法用linux服务器clone怎么办(只需要稍微改一下网址,就可以切换到镜像下载)
  • 蓝桥杯练习笔记(十九-质数筛)
  • Github 2024-10-27 php开源项目日报 Top10
  • 【verilog】模十计数器
  • 电商直播带货乱象频出,食品经销商如何规避高额损失?
  • Word 每次打开时都会弹出“要还原的文件”对话框
  • iframe视频宽度高度自适应( pc+移动都可以用,jq写法 )
  • Unity控制物体透明度的改变
  • Matplotlib 网格线
  • PostgreSQL 删除角色
  • 面向对象高级-static
  • 为什么选择 Spring data hadoop
  • 蓝牙BLE开发——红米手机无法搜索蓝牙设备?
  • 编程小白如何成为大神?大学新生的最佳入门攻略
  • QT 12.自定义信号、信号emit、信号参数注册_ev
  • 【Python · Pytorch】人工神经网络 ANN(中)
  • Agile敏捷方法
  • 内存马浅析
  • 关于深度学习方向学习的一些建议
  • 计算机低能儿从0刷leetcode | 33.搜索旋转排列数组
  • 10.30Python_异常文件操作json正则