×

打开微信“扫一扫”,打开网页后点击屏幕右上角分享按钮

×

打开微信“扫一扫”,关注我们官方微信^_^

爱站云官方微信

【本站通知】:推荐站点30元/月 顶部三栏广告80一个月,买一个月送一个月,其他广告位请联系QQ客服☞ 点击这里给我发消息 欢迎加入站长之家官方QQ交流群
【破解付费软件】
无限流量卡免费送
买一个月送一个月

网站首页 爱站云资源网 技术教程 正文

HTML5的初级技巧 之第六课

奇迹博客 2019-02-13 技术教程 0 评论

19. 使用正则表达式


在HTML5中,我们可以直接使用正则表达式。


<form method=post *““>

<label for=“username“>* a username: </label> 

<input id=“username“ type=“text“ name=“username“ placeholder=“4 <> 10“ required=“required“ autofocus=“autofocus“ pattern=“[A-Za-z]{4,10}“>

<button type=“submit“>Go </button>

</form>


20. 检测浏览器对HTML5属性的支持


由于各浏览器对HTML5属性的支持度不同,这就造成了一些兼容问题。但是可以使用方法来检测该浏览器是否支持这些属性,上例中的代码如果要检测pattern属性是否被浏览器识别,可以使用javascript代码来检测。


alert( ‘pattern‘ in document.*Element(‘input‘) ) // boolean;


其实这是确定浏览器兼容常用的方法,jQuery库就经常使用这种方法。上面的代码中创建了一个input标签,并检测pattern属性是否被浏览器支持,如果能支持的话,浏览器就支持这个功能,否则就不支持。


<script> 

if (!‘pattern‘ in document.*Element(‘input‘) ) { 

// do client/server side validation 

</script>


21. Mark标签


<mark>标签用于高亮显示那些需要在视觉上向用户突出

其重要性的文字,包裹在此标签里的字符串必须与用户当前的行为相关。例如,如果我在一些博客中搜索“Open your Mind” ,我可以使用在<mark>标签里使用JavaScript 来包裹每一次动作。


<h3> search results </h3>

<h6> They were interrupted, just after Quato said, <mark>“Open your Mind“</mark>. </h6>


22. 该如何正确的使用div标签


有些人可能会有疑问,有了<header>和<footer>等这些标签,<div>标签在HTML5中还有用吗?答案是肯定的,比如你想创建一个能包裹特殊内容的容器自由灵活的<div>肯定是首选,而你要创建一篇文章或者一个导航菜单,建议你使用更有语义的<article>和<nav>标签。


很多人认为HTML5可能还是很遥远的事,所以直接无视,其实不然,现在很多网站都已经开始使用HTML5了,事实上,HTML5的一些新增属性和功能是让代码变得更简洁,这总归是一件好事,应该值得我们推崇。最后感谢你阅读了这篇HTML5的入门级文章,希望能为你进一步学习HTML5提供一些帮助。



猜你喜欢

本文暂时没有评论哦(●'◡'●)

欢迎 发表评论:

温馨提示:(登陆后才可以评论哦!点我QQ登录哦,若已登录请忽略)。
搜索
标签列表
关于我们
本人提供网站SEO优化、SEM推广营销(百度/360/搜狗收录优化)、企业建站、搜索引擎教学等服务。
联系我们:给我发QQ消息  加入QQ群

ABOUT US

爱站云网络科技有限公司成立于2017年
创始人:Johnny Kun 由95后的小青年创建
目前公司服务于云计算、网站建设、SEO优化等
团队成员平均3年以上从业经验,核心团队正在不断扩展。

Contact information

Phone:15684092120
E-mail:admin@heikw.com
Website:www.heikw.cn
QQ:2126245521

爱站云博客

Copyright © 2016-2018 www.heikw.cn Reserved.备案号:鲁ICP备16035655号

本站采用 Z-blog 核心程序 感谢 爱站云 赞助北京云服务器

爱站云安全认证