HTML5新增元素

HTML5

新增元素

<header>：头部标签
<nav>：导航栏
<main>：主体标签
<article>：独立的内容标签
<section>：区段标签
<aside>：侧边栏标签
<footer>：尾部标签

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #header {
            width: 1200px;
            height: 100px;
            margin: 0 auto;
            background-color: coral;
        }

        #nav {
            width: 1200px;
            height: 50px;
            margin: 10px auto;
            background-color: coral;
        }

        #main {
            width: 1200px;
            height: 400px;
            margin: 10px auto;
            background-color: coral;
        }

        #main .aside {
            float: left;
            width: 200px;
            height: 300px;
            margin-right: 10px;
            background-color: pink;
        }

        #main .article {
            float: left;
            width: 990px;
            height: 400px;
            background-color: pink;
        }

        #footer {
            width: 1200px;
            height: 100px;
            margin: 10px auto;
            background-color: coral;
        }
    </style>
</head>

<body>
    <header id="header">头部信息</header>
    <nav id="nav">导航栏</nav>
    <main id="main">
        <aside class="aside">侧边栏</aside>
        <article class="article">主体内容</article>
    </main>
    <footer id="footer">底部信息</footer>
</body>

</html>

多媒体标签

音频：<audio>
视频：<video>

音频 audio

语法：<audio src="音频地址" controls="controls"></audio>

音频属性

属性名	属性值	说明
autoplay	autoplay	如果添加该属性，则音频在加载完成后会立马播放。
controls	controls	添加该属性后会向用户展示控件，如播放按钮等。
scr	音频地址	播放音频的 url。
loop	loop	添加该属性之后，每当音频结束之后会自动重新播放。
preload	preload	如果添加该属性，则在音频在页面加载时进行加载，并预备播放。如果使用 autoplay，则忽略该属性。

音频标签支持格式

mps	ogg	wav

音频标签兼容性写法

<audio src="" controls="controls">
    <source src="test.mp3" type="audio/mpeg">
    <source src="test.ogg" type="audio/ogg">
</audio>

视频 video

视频格式

格式	type	IE	FireBox	opera	chrome	Safari
ogg	video/ogg	❌	3.5+	10.5+	5.0+	❌
mp4	video/mp4	9.0+	❌	❌	5.0+	3.0
WebM	video/webm	❌	4.0+	10.6+	6.0+	❌

音频语法

<video src="音频地址" controls="controls"></video>

音频属性

属性名	属性值	说明
autoplay	autoplay	视频加载就绪自动播放（谷歌浏览器需要添加 muted 来解决自动播放问题）。
controls	controls	展示波播放控件。
scr	音频地址	播放视频的 url。
loop	loop	添加该属性之后，每当视频结束之后会自动重新播放。
preload	auto（预先加载视频）none（不与先加载视频）	如果添加该属性，则在音频在页面加载时进行加载，并预备播放。如果使用 autoplay，则忽略该属性。
width	数值	设置播放器宽度
height	数值	设置播放器高度
poster	ImgUrl	加载等待的动画图片。
muted	muted	静音播放。

视频标签兼容写法

<video src="" controls="controls">
    <source src="test.mp4" type="video/mp4">
    <source src="test.ogg" type="video/ogg">
    您的浏览器版本过低，请更新。
</video>

新增 input 表单

属性值	描述
type="email"	限制用户必须输入 email 格式
type="url"	限制用户必须输入 url 格式
type="date"	限制用户必须输入日期格式
type="tile"	限制用户必须输入时间类型
type=""month	限制用户必须输入月份类型
type="week"	限制用户必须输入周类型
type="number"	限制用户必须输入数字类型
type="range"	数字滑动条
type="tel"	手机号码
type="search"	搜索框
type="color"	颜色选框

新增表单属性

属性值	值	描述
required	required	表示其表单不能为空，必填
placeholder	提示文本	表单的提示信息
autofocus	autofocus	自动聚焦属性，页面加载完成之后自动聚焦到一个表单中，一般一个页面中只有一个
autocomplete	off/on	当用户在表单中输入内容时，应该展示以前的输入内容。默认为 on 表示开启，需要在表单内同时添加 name 属性，同时提交成功。
multiple	multiple	表示可以多选文件提交。

input number/range

number表单属性和range表单属性的内置属性是一样的。
属性：
    value：数值；默认展示数值。
    max：数值；可选择的最大值。
    min：数值；可选择的最小值，可以是负数；
    step：数值；选择数值跨度。

datalist

datalist标签规定了input标签的预选项列表。在datalist中可以定义一组或多组option标签，这些元素表示预定义可选值，在input标签输入中，会自动相应option标签元素的值。
注意：
    1.input标签中的list属性必须和datalist标签中的id属性值一致。
    2.也可以将option标签设置成单标签，只写标签中的value属性。

datalist 语法

<input type=" text" list="data-list">
<datalist id="data-list">
    <option value="北京"></option>
    <option value="上海"></option>
    <option value="广州"></option>
    <option value="深圳"></option>
</datalist>