前端学习记录14-HTML5新特性-(语义化标签、多媒体标签、新增表单属性)

最新推荐文章于 2025-03-23 20:02:15 发布

SHoadgnaw

最新推荐文章于 2025-03-23 20:02:15 发布

阅读量165

点赞数

分类专栏：学习记录文章标签： html html5

本文链接：https://blog.youkuaiyun.com/weixin_44541948/article/details/114826486

版权

学习记录专栏收录该内容

28 篇文章

订阅专栏

本文介绍了HTML5的新特性，包括增强页面语义化的标签，如<section>和<article>等；多媒体标签<audio>和<video>，并讨论了兼容性问题；还探讨了新增的表单属性，如'autocomplete'和'required'等，以提升表单用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端学习记录14-HTML5新特性-语义化标签、多媒体标签、新增表单属性

HTML5新增特性

HTML5新增特性

标签语义化

<header>头部标签</header>
<nav>导航标签</nav>
<article>内容标签</article>
<section>块级标签</section>
<aside>侧边栏标签</aside>
<footer>尾部标签</footer>

这种语义化标签主要是针对搜索引擎的
这些标签是可以多次使用的
在ie9以下中，这些元素需要转换成块级元素
移动端更喜欢这些标签

举例代码：

<head>
    <style>
        header,
        nav,
        section {
            width: 100px;
            height: 120px;
            background-color: #ccc;
            margin: 10px;
        }
    </style>
</head>

<body>
    <header>header</header>
    <nav>nav</nav>
    <section></section>
</body>

多媒体标签

音频标签

谷歌浏览器禁用了 autoplay

<audio src=""></audio>音频
支持 
ogg vorbis
mp3
wav

一般情况放 ogg+MP3 针对兼容问题

举例代码：

<body>
    <audio src="media/一首非常好听的城市民谣串烧.mp3" controls="controls" autoplay="autoplay" loop="loop"></audio>
    
    <!-- 因为不同浏览器支持不同格式，所以要准备多个格式 -->
    <audio controls="controls">
        <source src="media/一首非常好听的城市民谣串烧.mp3" type="audio/mpeg">
        <source src="media/一首非常好听的城市民谣串烧.ogg" type="audio/ogg">
        您的浏览器太不行了，不支持播放
    </audio>
    
    <!-- 此种写法基本是一个判断结构的意思 先执行第一个路径能打开后边就不进行了 如果第一个不行就第二个
    如果都不行，那就直接输出最后一句话
    -->
</body>

属性	属性值	说明
autoplay	autoplay	音频就绪马上播放
controls	controls	向用户显示控件，播放按钮
loop	loop	循环播放
src	url	音频url

视频标签

<video src=""></video>视频
支持
ogg
mpeg4
webm

一般情况放 ogg+MP4 针对兼容问题

举例代码：

<body>
    <!-- 在使用上经常使用自动播放，不使用controls控件-->
    
    <video src="video/你的小可爱吖.mp4" controls="controls" autoplay="autoplay" loop="loop" muted="muted"></video>
    
    <!-- 因为不同浏览器支持不同格式，所以要准备多个格式 -->
    <video controls="controls">
        <source src="video/你的小可爱吖.mp4" type="video/mp4">
        <source src="video/你的小可爱吖.mp4" type="video/ogg">
        您的浏览器太不行了，不支持播放
    </video>
    
    <!-- 此种写法基本是一个判断结构的意思 先执行第一个路径能打开后边就不进行了 如果第一个不行就第二个
    如果都不行，那就直接输出最后一句话 -->
    
</body>

谷歌浏览器禁用了 autoplay 有解决方案，给视频添加静音属性

属性	属性值	说明
autoplay	autoplay	视频就绪马上播放
controls	controls	向用户显示控件，播放按钮
width	???px	设置播放器宽度
height	???px	设置播放器高度
loop	loop	循环播放
src	url	视频url
poster	img url	等待加载的画面图片
muted	muted	静音播放

新增表单属性

type="email" 限制用户输入必须为邮箱
type="url" 限制用户输入必须为网址
type="date" 限制用户输入必须为日期
type="time" 限制用户输入必须为时间
type="month" 限制用户输入必须为月
type="week" 限制用户输入必须为周
type="number" 限制用户输入必须为数字 并且这个数字可以上下调整 e可以输入 是因为科学计数法
type="tel" 手机号码
type="search" 搜索框
type="color" 生成一个颜色表单

举例代码：

<form action="">
        <ul>
            <li>邮箱：<input type="email" required="required" placeholder="例如xxx@163.com" name="email"></li>
            <li>网址：<input type="url"></li>
            <li>出生日期：<input type="date"></li>
            <li>申请时间：<input type="time"></li>
            <li>申请月份：<input type="month"></li>
            <li>具体周期：<input type="week"></li>
            <li>证件号：<input type="number"></li>
            <li>手机号：<input type="tel"></li>
            <li>查询：<input type="search" autofocus="autofocus"></li>
            <li>选择颜色：<input type="color"></li>
            <li><input type="submit" value="提交"></li>
            <li><input type="file" multiple="multiple"></li>
    	</ul>
</form>

属性	属性值	说明
required	required	不能为空
placeholder	"提示文本"	提示信息(占位符)
autofocus	autofocus	自动聚焦指定表单
autocomplete	"off/on"	用户在字段开始键入时，浏览器基于之前键入的值，显示字段填写选项默认为打开，需要放在表单内同时加上name属性同时成功提交具体解释为：搜索引擎的搜素记录，或者你输入邮箱密码自动帮你填充的那种如果想要提示，必须有name属性
multiple	multiple	可多选文件提交需要file也就是上传文件的表单