所有分类
  • 所有分类
  • 后端开发
HTML5 新增标签的使用方法及作用解析

HTML5 新增标签的使用方法及作用解析

这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如audio和video标记。下面我们就和大家一起学习html5新增标签使用方法。进度条标签我们用的比较多。

HTML5给咱带来了很多新东西,比方说nav(就是导航啦)和footer之类的。用上这些标签,对搜索引擎来说可更方便索引,还能让小屏幕或视力不好的人也能用得舒适。当然,它们还有别的作用,比如audio和video标签,也提供了新的功能。接下来咱们就一起来学学怎么用这些新鲜的html5标签!

nav标签的使用

欢迎来到Html5的学习之路,我是header标签。

让我先说说nav标签。这个东西很实用,可以帮你轻松搞定网站的导航部分。举个例子,比如你的网站上有首页、关于我们和联系我们之类的页面,用nav标签把它们聚合在一起,页面看起来更加清爽,而且也方便搜索引擎理解你的网站架构。这么一弄,你网站的SEO效果肯定会提高不少!

另外,nav标签在手机平板这类小屏幕的机器上用得特别开心。现在移动设备用户那么多,好用的导航能帮他们快点儿找到要找的东西,提高网友们的使用感受!

footer标签的使用

下边,咱们来聊聊footer标签。这个东西是用来定页面或者章节底栏部分的,里头可能会放上版权信息啊、联系方式之类的。用了footer标签,这些信息就能看得更清楚,还方便搜索引擎抓取。对网站长久运营和建立自己的牌子都挺有用的。


    
    IPhone
    华为 
    小米 
    三星
    
这里我发现了两者一个不同之处在于,datalist只有在输入框为空的时候才会有自己定义下拉的内容!

实话说,footer这个标签在排版上挺好用的。设计师用它能更方便地安排网页底端部分,让你的整个页面既规整又清晰。

datalist标签的使用

好,咱们说说那个datalist标签。这货真心有点牛逼,把text文本框和select标签揉合到一块儿,给人感觉就是既有打字选字的自由,也有直接挑的方便。试想一下,当你填表的时候,能看到下面列着一堆可能想打的字,这得多顺手!

用dataList标签,比如选个國家、城市啥的,用户体验好极了!它可以减轻用户输入的负担,帮他们快速准确地填表。

IPhone
华为 
小米 
三星

------------------------



details标签的使用

接着是details标签,它主要就是放一些文档里的小细节,用户想知道的话就点开看看!举个例子,如果你在写教程,里边有些比较复杂的技巧或详细解释时,就可以用这个标签围起来。这样用户就能根据自己需要来决定看不看!

要说info标签的好处,就是很任性,想显示啥就显示啥,还能帮我们省下不少网页空间~

menu标签的使用

接下来说说menu标签!这个标签能帮我们创建一个命令清单或菜单。虽然用这种标签做网站可能不多,但很实用!试想一下,当你手头有一堆繁琐的命令和操作时,用menu标签把它们整理好,岂不方便多了?

这是一个detail标签,下面就是他的使用方法

detail标签是什么?

detail标签有什么作用?

detail标签能干什么?

detail标签我改怎么用它?


detail标签常与sunmmary标签用在一起。比如这个标签是高亮标签mark比重不一样。

菜单标签真的能让网页的互动部分看起来更直观,特别适合那种经常要操作的页面,效果拔群!

progress标签的使用

说到progress标签,它就像个小仪表盘,告诉你文件传了多少、网页还差多少才能加载完成等等。用上这个,就能让大家看清进度,心里有底,省得干着急!

Progress标签超级好用,它能直接在网页上画出一个进度条,告诉你还有多长时间得等。这样做大大提高了我们的上网体验!

audio和video标签的使用


    
  • 西游记
  • 水浒传
  • 红楼梦
  • 三国演义


  • 不光有那些标签,HTML5还加了audio和video两种新标签!audio就是给你放音频的,video,自然就是给视频准备的。现在都不用再找别的插件,像是那个Flash啥的,直接用html5就能搞定网页上的多媒体咯~

    利用audio和video标签,你的网页就能变得更有趣,吸引更多人来看。而且,这俩玩意儿对搜索引擎也很亲民,能帮着提高网站排名。

    总结

    这篇就是如何用好HTML5新增标签的攻略,对于新手来说应该挺实用。也许对你会有帮助~这种新的HTML5标签,让做网页变得更省力,同时还给用户带来更好的体验,还能提高网站排名!

    最后,咱聊聊吧:你觉得HTML5里哪些新东东最能帮到你搞网页?记得来评论区说说看,一定要给俺点下赞转发下这个文章

    progress
    value=5 max=10
    
    我是底部footer标签

    原文链接:https://www.icz.com/technicalinformation/web/2024/07/20294.html,转载请注明出处~~~
    0

    评论0

    请先
    注意:请收藏好网址www.icz.com,防止失联!站内免费资源持续上传中…!赞助我们
    显示验证码
    没有账号?注册  忘记密码?