首页 前端知识 HTML5的新特性(语义化标签、多媒体标签、input表单和表单属性)

HTML5的新特性(语义化标签、多媒体标签、input表单和表单属性)

2024-07-29 00:07:35 前端知识 前端哥 747 558 我要收藏

目录

  • 1. 新增的语义化标签(header、nav、article、section、aside、footer)
  • 2. 多媒体标签
    • 2.1 视频标签
    • 2.2 音频标签
  • 3. 新增input表单,和表单属性

1. 新增的语义化标签(header、nav、article、section、aside、footer)

功能和<div>标签一样,在页面中可以使用多次。主要是针对搜索引擎的。常用标签如下

  • <header>:头部标签
  • <nav>:导航栏标签
  • <article>:内容标签
  • <section>:定义文档某个区域
  • <aside>:侧边栏标签
  • <footer>:尾部标签

在网页布局中使用的位置如下所示
语义化标签

示例如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>

    </style>
</head>
<body>

<header>我是头部标签</header>
<nav>我是导航栏标签</nav>

</body>
</html>

显示效果如下
语义化标签

2. 多媒体标签

2.1 视频标签

<video>标签使用的视频文件尽量使用mp4格式的,兼容性好

常见属性如下

属性描述
autoplayautoplay视频是否自动播放(谷歌浏览器还需要添加muted属性实现自动化播放)
controlscontrols显示播放控件
widthpx像素设置播放画面宽带
heightpx像素设置播放画面高度
looploop是否循环播放
preloadauto(预先加载视频)、none(不预先加载视频)是否预先加载视频(使用了autoplay会自动忽略该属性)
srcurl视频url地址
posterimg-url视频未加载好时,显示的图片
mutedmuted静音播放

示例如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>
        video {
            width: 100%;
        }

    </style>
</head>
<body>

<video src="media/test.mp4" autoplay="autoplay" controls="controls" loop="loop" poster="media/test.png" muted="muted"></video>

</body>
</html>

2.2 音频标签

<audio>标签使用的音频文件尽量使用mp3格式的,兼容性好

常见属性如下

属性描述
autoplayautoplay音频是否自动播放(谷歌浏览器并不会自动播放,可以使用Javascript进行解决)
controlscontrols显示播放控件
looploop是否循环播放
srcurl音频url地址

示例如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>

    </style>
</head>
<body>

<audio src="media/test.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio>

</body>
</html>

显示效果如下,谷歌浏览器并不会自动播放
audio

3. 新增input表单,和表单属性

新增的input表单,会对用户输入的内容进行一定的限制

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>

    <style>
        /*元素的属性选择器*/
        input::placeholder {
            color: red;
        }
    </style>
</head>
<body>

<form action="test.php" method="get" name="test_form">

    <!--HTML5新增的input表单-->
    请选择日期:<input type="date" name="date" value=""/> <br />
    请选择月份:<input type="month" name="month" value=""/> <br />
    请选择周:<input type="week" name="week" value=""/> <br />
    请选择时间:<input type="time" name="time" value=""/> <br />
    请输入数字:<input type="number" name="number" value=""/> <br />
    请选择一个颜色:<input type="color" name="color" value=""/> <br />

    <!--HTML5新增的input表单,和表单属性-->
    请输入正确格式的邮箱, 页面打开光标自动定位到这里:<input type="email" name="email" value="" autofocus="autofocus"/> <br />
    请输入正确格式的URL, 默认会记录输入过的URL:<input type="url" name="url" value="" autocomplete="on"/> <br />
    请输入手机号码, 必填:<input type="tel" name="tel" value="" required="required"/> <br />
    请根据提示, 输入要搜索的内容:<input type="search" name="search" value="" placeholder="搜索提示内容"/> <br />

    <!--HTML5新增的表单属性-->
    请选择文件,可以一个或多个:<input type="file" name="file" value="上传文件" multiple="multiple"/> <br />

    <input type="submit" name="submit" value="提交"/> <br />

</form>

</body>
</html>

显示效果如下
新增input表单和表单属性

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14499.html
评论
发布的文章

Unity数据持久化之Json

2024-08-10 22:08:00

simdjson 高性能JSON解析C 库

2024-08-10 22:08:00

npm常用命令详解(一)

2024-08-10 22:08:34

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!