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
评论0