HTML5经典片段

最新推荐文章于 2022-04-13 11:16:31 发布

前端攻城

最新推荐文章于 2022-04-13 11:16:31 发布

阅读量471

点赞数

分类专栏： HTML 文章标签： HTML5 框架

本文链接：https://blog.csdn.net/hhstuhacker/article/details/8789476

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML5视频和fallback

<video width="640" height="360" controls>
    <source src="__VIDEO__.MP4"  type="video/mp4" />
    <source src="__VIDEO__.OGV"  type="video/ogg" />
    <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
        <param name="movie" value="__FLASH__.SWF" />
        <param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
        <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
             title="No video playback capabilities, please download the video below" />
    </object>
</video>

HTML5中新的Input类型及其验证

输入一个URL地址：<input type="url" value="">
输入一个邮件地址：<input type="email" pattern="[^ @]*@[^ @]*" value="">

<input title="至少8位并且至少包含1个数字一个小写字母和一个大写字母" type="text" pattern="(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}" required />
<input type="text" required pattern="(+?d[- .]*){7,13}" title="国际，国家和本地电话号码"/>

HTML5的datalist实现自动补齐功能

<input name="frameworks"list="frameworks" />
 
<datalist id="frameworks">
   <option value="Foundation">
   <option value="Bootstrap">
   <option value="Dojo Toolkit">
   <option value="jQuery">
   <option value="YUI">
</datalist>

元素的自动focus