新增H5与CSS3知识笔记1

最新推荐文章于 2024-10-20 21:40:17 发布

柯柯来康康

最新推荐文章于 2024-10-20 21:40:17 发布

阅读量92

点赞数

分类专栏：学习知识分享 H5与CSS3

本文链接：https://blog.csdn.net/weixin_42647901/article/details/108803849

版权

学习知识分享同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

H5与CSS3

5 篇文章 0 订阅

订阅专栏

H5部分：

音频audio标签

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频就绪后马上播放
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
loop	loop	如果出现该属性，则每当音频结束时重新开始播放
src	url	要播放的音频的URL

<body>
    <!-- 谷歌，火狐都是禁用自动播放属性的  而且不同浏览器支持不同音乐格式，若要浏览器能播放则可准备多个格式的音乐-->
    <!-- <audio src="/街道办GDC&欧阳耀莹-春娇与志明.mp3" controls="controls" autoplay loop></audio> -->
    <audio controls>
        <source src="/街道办GDC&欧阳耀莹-春娇与志明.mp3" type="audio/mpeg">
        <source src="/街道办GDC&欧阳耀莹-春娇与志明.ogg" type="audio/ogg">
        您的浏览器版本太低，不支持播放音乐!
    </audio>
</body>

视频video标签

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频就绪后马上播放（谷歌浏览器需要添加muted来解决自动播放问题）
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮
loop	loop	如果出现该属性，则每当视频结束时重新开始播放
src	url	要播放视频的URL
poster	imgurl	加载等待的画面图片
muted	muted	静音播放
preload	auto（预先加载视频） none（不应加载视频）	规定是否预加载视频（如果有autoplay就忽略该属性）
width	px	设置播放器宽度
height	px	设置播放器高度

<body>
    <!-- 谷歌浏览器自动把播放功能禁用了，我们可以给视频加静音属性 -->
    <video muted loop poster="/1.jpg" controls>
        <source src="/1.mp4" type="video/mp4">
        <source src="/1.ogg" type="video/ogg">
        你的浏览器版本太低，不支持该视频播放！
    </video>
</body>

H5新增input表单以及表单属性

属性值	说明
type="email"	限制用户输入必须为email类型
type="url"	限制用户输入必须为email类型
type="date"	限制用户输入必须为date类型
type="time"	限制用户输入必须为time类型
type="month"	限制用户输入必须为month类型
type="week"	限制用户输入必须为week类型
type="number"	限制用户输入必须为number类型
type="tel"	手机号码
type="search"	搜索框
type="color"	生成一个颜色选择表单



<body>
    <form action="">
        <ul>
            <li>邮箱：<input type="email" /></li>
            <li>网址：<input type="url" /></li>
            <li>日期：<input type="date" /></li>
            <li>时间：<input type="time" /></li>
            <li>数量：<input type="number" /></li>
            <li>手机号：<input type="tel" /></li>
            <li>搜索框：<input type="search" /></li>
            <li>颜色：<input type="color" /></li>
            <li><input type="submit" value="提交" /></li>
        </ul>
    </form>
</body>

[点击并拖拽以移动]

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder	提示文本	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦指定表单
autocomplete	off、on	当用户在字段开始键入时，浏览器会有历史记录。此时为on；反之off为关闭浏览记录（一般为off）需要放在表单内同时加上name属性同时提交成功
multiple	multiple	可多选文件提交

（1）当autocomplete为on时如下（一般默认为off）

（2）多选文件，multiple，用在文件域里面

<body>
    <form action="">
        用户名：<input type="text" required placeholder="请输入用户名！" autofocus name="username" autocomplete="off">
        <input type="submit" value="提交">
        <br>
        上传头像：<input type="file" name="user" id="" multiple="multiple" />
    </form>
</body>