html5新增标签与传统html的区别 - html5吧

level 11

四哥讲故事楼主

目前html5在之前html的基础上增加了许多实用的标签，页面文档的声明方式也更加简洁了，下面来具体看一下这些区别。
一、文档声明以及编码声明发生了改变
以前的html声明文档类型的方法：
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
声明文档编码：
1<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
html5声明文档类型的方法：
1<!doctype html>
声明文档编码：
1<meta charset="utf-8">
看，是不是简洁很多，就算是用记事本手写，都不用敲那么多复杂的代码。

2018年03月21日 15点03分 1

level 11

四哥讲故事楼主

二、html5新增结构标签
结构标签是“块状元素” 有语意的div。
<article>标记定义一篇文章；
<header>标记定义一个页面或一个区域的头部；
<nav>标记定义导航链接；
<section>标记定义一个区域；
<aside> 标记定义页面内容部分的侧边栏；
<hgroup> 标记定义文件中一个区块的相关信息；
<figure> 标记定义一组媒体内容以及它们的标题；
<figcaption> 标签定义 figure 元素的标题；
<footer> 标记定义一个页面或一个区域的底部；
<dialog> 标记定义一个对话框(会话框)类似微信。
需要注意的是：如果只是一个简单的布局，通过html5新增的这些标签，就大概可以做出一个外边的框架，如果是很复杂的大型网站，还是用传统的<div>和<p>等标签比较方便。
下面这个简单的布局就是用html5新增标签做的，仅供参考，同样可以给这些标签添加id或class样式。

2018年03月21日 15点03分 3

level 11

四哥讲故事楼主

三、html5新增的其他标签。
（1）多媒体标签：
<video> 页面中插入视频内容；
<audio> 页面中插入音频内容；
<source> 可定义多个媒体资源。
（2）绘图标签：
<canvas> 绘制图片；
<svg> 矢量图。
（3）WEB运用标签：
<meter>状态标签，温度等；
<progress>进度条；
datalist 为input定义下拉列表；
details 定义元素的详细内容。

2018年03月21日 15点03分 4

level 11

四哥讲故事楼主

（4）注释标签：
<ruby> 标记定义注释或音标；
<rp> 告诉那些不支持 Ruby元素的浏览器如何去显示；
<rt> 标记定义对ruby的注释内容文本。
（5）其他标签：
<keygen> 标记定义表单里公钥；
<mark> 标记定义有标记的文本 (默认为黄色背景)；
<output> 标记定义一些输出类型,计算表单结果配合oninput事件；
<time> 标记定义一个日期/时间。

2018年03月21日 15点03分 5

level 11

四哥讲故事楼主

四、html5重新定义的标签
dd:可以同details与figure一同使用，定义包含文本，dialog也可用；
dt:可以同details与figure一同使用，汇总细节，dialog也可用；
hr:表示主题结束，而不是水平线，虽然显示相同；
menu:重新定义用户界面的菜单，配合commond或者menuitem使用；
small:表示小字体，例如打印注释或者法律条款；
strong:表示重要性而不是强调符号。
总结：html5新增的标签，有些并不是像div那样经常用到，大家只要先记住h5有这样的标签，到时候在具体的项目中知道怎么用就行，最重要的是多练习！

2018年03月21日 15点03分 6

level 11

四哥讲故事楼主

2018年03月23日 00点03分 7

四哥讲故事

1

2018年03月24日 00点03分

level 11

四哥讲故事楼主

最重要的是多练习！

2018年03月25日 01点03分 8

level 11

四哥讲故事楼主

喜欢吗

2018年03月28日 00点03分 9

level 11

四哥讲故事楼主

是简洁很多

2018年03月29日 00点03分 10

level 11

四哥讲故事楼主

html5新增结构标签

2018年03月30日 01点03分 11

level 11

四哥讲故事楼主

增加了许多实用

2018年03月30日 12点03分 12

level 11

四哥讲故事楼主

文档声明以及编码

2018年04月02日 14点04分 13

level 11

四哥讲故事楼主

不是特别了解，可以随时来咨询我，留

2018年04月03日 00点04分 14

level 11

四哥讲故事楼主

<video> 页面中插入视频内容

2018年04月04日 14点04分 15

level 11

四哥讲故事楼主

看一下这些区别

2018年04月05日 13点04分 16