HTML5新增属性

1、HTML5

1.1 新增布局标签

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

article中可以有多个section；

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

html 复制代码

<!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：当前值。

html 复制代码

<!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中，指定问题或专有名词。

html 复制代码

<!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：标记文字，使其背景变为淡黄色。

html 复制代码

<!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：正则表达式，验证输入的格式，输入不能为空值；

html 复制代码

<!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新增属性

html 复制代码

<!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：下载整个视频文件。

html 复制代码

<!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中与视频的属性基本一致，但是没有poster、width、height

html 复制代码

<!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-*：存储页面私有定制数据。

html 复制代码

<!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文件和一些设置可使得兼容性更好。

html 复制代码

<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>

1、HTML5

1.1 新增布局标签

1.2 新增状态标签

1.3 新增列表标签

1.4 新增文本标签

1.5 表单新增功能

1.6 input新增属性

1.7 video新增属性

1.8 audio新增属性

1.9 新增全局属性

1.10 H5兼容问题

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