HTML5

最新推荐文章于 2024-09-30 21:15:00 发布

尔尔er

最新推荐文章于 2024-09-30 21:15:00 发布

阅读量136

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_48341237/article/details/119150623

版权

文档类型设定

快捷方式生成：html:5 或 !

<!DOCTYPE html>

字符设定

<meta charset="UTF-8">

常用的新标签

    <header class="head">顶部</header>
    <nav class="mynav">
        <div>导航栏</div>
    </nav>
    <article>定义文章</article>
    <section>定义区域</section>
    <aside>定义侧边栏</aside>
    <footer class="foot">底部</footer>

datalist：定义选项列表，需要与input结合使用

    <input type="text"  value="输入歌曲" list="song"/>  
    <!-- input使用list属性 ，datalist使用id属性，通过使list属性与id属性的值一致，让datalist与input形成链接 -->
    <datalist id="song">	
        <option>Don't Wanna Wake Up</option>
        <option>你的星环</option>
        <option>绝口不提</option>
        <option>笑柄</option>
        <option>LOVE LOVE</option>
        <option>放空</option>
    </datalist>

fileset：将表单内的相关元素分组打包，与legend搭配使用
legend：外边框的标题

	<fieldset>
        <legend>登录</legend> 
        用户名：<input type="text"><br><br>
        密　码：<input type="password">
    </fieldset>

mark：定义带有记号的文本，高亮显示

<p>这是一个<mark>mark</mark>。</p>

在这里插入图片描述

IE8之前的版本不支持mark标签

progress：定义运行中任务的进度，通常与js结合使用，不可作为度量值使用

<progress value="70" max="100"></progress>

meter：定义度量衡，仅用于已知最大和最小值的度量。比如：磁盘使用情况，查询结果的相关性等。不能当做进度条使用。

min：规定范围最小值
max：规定范围最大值
value：规定度量当前值，必须有的属性。
low：范围界定的最低值
high：范围界定的最大值

	<!-- value值超过high -->
    <meter min="0" max="100" value="95" low="30" high="90"></meter><br>

    <!-- value值在low与high之间 -->
    <meter min="0" max="100" value="60" low="30" high="90"></meter><br>

    <!-- value值低于low的值 -->
    <meter min="0" max="100" value="2" low="30" high="90"></meter>

新增的input的type属性值

email		输入邮箱格式，如：xxx@.com123
url		输入url格式，如：http://www.baidu.com
number		输入数字格式，只能是数字
search		搜索框
类型	使用示例	含义
range		自由拖动滑块
time		小时分钟
date		年月日
datetime		时间
month		年月
week		星期年
color		颜色
hidden/show		定义表单隐藏/显示

	<form action="">
        邮箱：<input type="email" placeholder="请输入邮箱" autocomplete="on" name="useremail"><br><br>
        url： <input type="url" required><br><br>
        数字：<input type="number" accesskey="s"><br><br>
        搜索：<input type="search" autofocus><br><br>
        滑块：<input type="range"><br><br>
        时分：<input type="time"><br><br>
        年月日：<input type="date"><br><br>
        年月：<input type="month"><br><br>
        星期：<input type="week"><br><br>
        颜色：<input type="color"><br><br>
        <input type="submit">
        <input type="file" multiple>
    </form>

常用新属性

属性	作用
placeholder	提示用户输入
autofocus	聚焦
multiple	多文件上传
accesskey	拥有指定快捷键的元素赋予焦点
required	必填
autocomplete	规定输入字段是否应该启用自动完成功能

多媒体标签

1. embed

embed标签可以用来插入各种多媒体元素
支持格式：Midi、Wav、AIFF、AU、MP3等

<embed src="./music/loveyou.mp3"/>
<embed  src="./锋锋-肖战单曲《光点》官方mv(蓝光).mp4"/>

在这里插入图片描述

2.audio

播放音频，支持三种音频格式文件: MP3, Wav, 和 Ogg

controls 属性用于添加播放、暂停和音量控件。

audio元里允许使用多个source元素. source元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。
在audio里需要插入浏览器不支持的audio元素的提示文本。

	<audio controls src="./也可 - LOVE LOVE.mp3" type="audio/mpeg"></source>
    <audio controls>
        <source src="./也可 - LOVE LOVE.mp3" type="audio/mpeg"></source>
        <!-- <source src="./也可 - LOVE LOVE.mp3" type="audio/ogg"></source>
        <source src="./也可 - LOVE LOVE.mp3" type="audio/wav"></source> -->
        您的浏览器不支持 HTML5 audio 标签。
    </audio>

3.video

播放视频，支持的视频格式：MP4、WebM、Ogg

	<video src="./锋锋-肖战单曲《光点》官方mv(蓝光).mp4" controls autoplay muted loop></video>
	<!--controls播放 autoplay自动播放,谷歌禁止自动播放 muted静音，设置muted后可以自动播放， loop循环播放-->
	<video width="420" controls>
        <source src="./锋锋-肖战单曲《光点》官方mv(蓝光).mp4" type="video/mp4">
        <source src="./锋锋-肖战单曲《光点》官方mv(蓝光).mp4" type="video/ogg"> 
        <source src="./锋锋-肖战单曲《光点》官方mv(蓝光).mp4" type="video/webm">
        您的浏览器不支持 HTML5 video 标签。
    </video>