HTML5的新增标签有哪些？

们都知道，想要成为一名合格的前端开发人员，掌握好HTML5是一个重要的先决条件，相比较于HTML，HTML5中新增了许多功能标签，那么这么标签都有哪些呢？

青岛HTML5

格式：

<bdi>定义文本的文本方向，使其脱离其周围文本的方向设置。

<mark>定义有记号的文本。

<meter>定义预定义范围内的度量。

<progress>定义任何类型的任务的进度。

<rp>定义若浏览器不支持 ruby 元素显示的内容。

<rt>定义 ruby 注释的解释。

<ruby>定义 ruby 注释。

<time>定义日期/时间。

<wbr>定义可能的换行符。

表单：

<datalist>定义下拉列表。

<keygen>定义生成密钥。

<output>定义输出的一些类型。

图像：

<canvas>定义图形。

<figcaption>定义 figure 元素的标题。

<figure>定义媒介内容的分组，以及它们的标题。

音频和视频：

<audio>定义声音内容。

<source>定义媒介源。

<track>定义用在媒体播放器中的文本轨道。

<video>定义视频。

链接：

nav>定义导航链接。

列表：

<command>定义命令按钮。

样式：

<header>定义section或page的页眉。

<footer>定义section或page的页脚。

<section>定义section。

<article>定义文章。

<aside>定义页面内容之外的内容。

<details>定义元素的细节。

<dialog定义对话框或窗口。

<summary>为 <details> 元素定义可见的标题。

编程：

HTML5的优势：

1、做出更多好看的动画效果，让前端开发人员实现更好的页面交互

HTML5实现的网页更加的精美，这些动画是基于HTML5标签和CSS3样式共同实现的效果。

2、解决了跨浏览器问题

跨浏览器问题在HTML5出现之前，对于前端开发人员来说，绝对是一个噩梦级的问题。明明在一个浏览器中完全正常运行的HTML、CSS和JavaScript页面，但换一个浏览器之后，就会出现很多问题，比如：JavaScript运行出错、页面布局混乱等。改变了这种局面的正是HTML5编程语言，目前主流浏览器如Internet Explorer、Chorme、Firefox、Safari都表现出对HTML5的极大热情。

3、跨平台、离线使用

HTML5 可以做到跨平台，多数核心代码不用重写，JavaScript的代码用得好的话，在许多地方都可以用到，包括移动应用、移动网站、PC网站、各种浏览器插件，甚至可以用WebKit封装作为跨平台的应用程序。虽然这种方式在严格意义上来讲并非是完全跨平台，但这样也在后期的维护上可以节省出量的时间和精力。

用户可以离线使用、访问应用，这对于无法随时保持联网状态的移动终端用户来说是很重要的，且用户访问本地的缓存文件，通常意味着更快的访问速度，从这个角度来说，可谓是大大提高了用户的体验度。

航切换设计到CSS中标签属性设置：隐藏、显示

涉及html5异步传输的特性

更需要知道js多标签时候元素选择的写法

再啰嗦一下：classLIst属性返回元素的类名，可以用方法add()、remove()添加class属性

setAttribute(name,value)设置新属性及其值，或者修改已有属性的值

正文

上导航切换的示意图

js代码：

window.onload = function () { //window.onload:就是等整个页面内容全部加载完毕

//填写js逻辑

//获取ul里li的个数

var tab_ui = document.getElementsByTagName("ul");

var tab_li= tab_ui[0].getElementsByTagName("li")

//获取要显示的div的个数

var content = document.getElementById("content");

var content_div = content.getElementsByTagName("div");

//给li添加鼠标点击事件

for(var i= 0;i<tab_li.length;i++){

tab_li[i].index = i; //异步传输，不设置的话，得到的都是i的最大值

tab_li[i].onclick = function () {

//清除之前的样式

for(var j=0;j<tab_li.length;j++){

//没有点击事件，j=0,1,2

tab_li[j].classList.remove("active");

content_div[j].setAttribute("class","hidden");

}

//设置自己本身的样式:添加class=active

this.setAttribute("class","active");

//content_div[i].classList.remove("hidden"); 无效，i=3导致

//将对应的内容显示出来

content_div[this.index].classList.remove("hidden");

}

//给li添加鼠标点击事件

var tab_ui = document.getElementsByTagName("ul");

var tab_li1= tab_ui[1].getElementsByTagName("li")

//var tab_li1= document.getElementsById("li")

var content1 = document.getElementById("content1");

var content1_div = content1.getElementsByTagName("div");

for(var i= 0;i<tab_li1.length;i++){

tab_li1[i].index = i; //重点，为了让i在循环体内

tab_li1[i].onmouseover = function () {

//这里的i永远=3，如果不设置 tab_li[i].index = i

//清除之前的样式

for(var j=0;j<tab_li1.length;j++){

//没有点击事件，j=0,1,2

tab_li1[j].classList.remove("active");

content1_div[j].setAttribute("class","hidden");

}

//设置自己本身的样式:添加class=active

this.setAttribute("class","active");

//content_div[i].classList.remove("hidden"); 无效，i=3导致

//将对应的内容显示出来

content1_div[this.index].classList.remove("hidden");

}

</script>

css代码

<style>

.hidden{

display: none;

}

.tabdemo>.active{

background: red;

border-bottom-color:white ;

}

#wrap{

height: 58px;

background-color: #c7eafa;

}

.tabdemo {

width: 100%;

list-style: none;

margin: 0 auto;

background-color: blue;

}

.tabdemo1 {

width: auto;

list-style: none;

margin: 0 auto;

background-color: pink;

float:left;

}

li{

color: rgb(0, 0, 0);

display:inline-block;

}

ul.tabdemo1 li {

color: rgb(224, 9, 9);

display:block;

}

li:hover{

background-color: lavender;

}

一定注意要把a转成行内块元素，

如果转的是块元素那么短竖线会掉下去，

因为块级元素是独占一行的

display:inline-block;

padding: 0 20px;

line-height: 58px;

text-decoration: none;

color: black;

}

</style>

html代码

<!DOCTYPE html>

<html>

<head>

<title>多导航切换</title>

</head>

//js代码、css代码放在这里

<body>

<div>

</ul>

</div>

</div>

</div>

</div>

<div>

</ul>

</div>

</div>

</div>

</div>

</body>

</html>

们上一篇文章已经对HTML5有了一定了解。（了解HTML5语义化标签——小白们看过来）

今天我们总结一些常用的语义化标签，刚学完HTML标签的童靴们赶紧趁热打铁吧！

<header></header> 页眉

页眉通常包括网站标志、主导航、全站链接以及搜索框。

也适合对页面内部一组介绍性或导航性内容进行标记。

如下例子中，页眉中包含了一个导航：

<nav></nav> 导航，仅对文档中重要的链接群使用。

html5规范不推荐对辅助性页脚链接使用nav，除非页脚再次显示顶级全局导航、或者包含招聘信息等重要链接。

例子参考上面。

<footer></footer> 页脚

页脚通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。如果
元素包含了整个节，那么它们就代表附录，索引，提拔，许可协议，标签，类别等一些其他类似信息。

<footer> © 2018 toutiao.com All Rights Reserved </footer>

<section></section>

具有相似主题的一组内容，比如网站的主页可以分成介绍、新闻条目、联系信息等条块。类似于div。

如下例子中，关于section的介绍放在了一个<section>里面：

<article></article>

可以作为文章的标签。 article可以嵌套article，只要里面的article与外面的是部分与整体的关系。

爱学习的孩子运气不会差哦~

关注小白前端，持续收到文章推送！

在线咨询

上一篇：Jenkins操作手册 - 巨详细，一篇足矣
下一篇：HTML <hr> 标签

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML5的新增标签有哪些？

<header></header> 页眉

<nav></nav> 导航，仅对文档中重要的链接群使用。

<footer></footer> 页脚

<section></section>

<article></article>

您的项目需求