Html5 标签

叁歲伎倆 2022-06-14 07:50 204阅读 0赞

# 1.新的文档类型声明(DTD) #

HTML 5的DTD声明为:

<!doctype html>
    <!DOCTYPE html>

都是正确的，因为HTML语法是不区分大小写的。

在编写HTML5文档时，要求指定文档类型，以确保浏览器能在HTML5的标准模式下进行渲染。

# 2.新增的HTML5标签 #

## 2.1 新增的结构标签 ##

结构标签：(块状元素) 有意义的div

<table> 
 <thead> 
  <tr> 
   <th>结构标签</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;article&gt;</code></td> 
   <td>标记定义：一篇文章</td> 
  </tr> 
  <tr> 
   <td><code>&lt;header&gt;</code></td> 
   <td>标记定义：一个页面或一个区域的头部</td> 
  </tr> 
  <tr> 
   <td><code>&lt;nav&gt;</code></td> 
   <td>标记定义：导航链接</td> 
  </tr> 
  <tr> 
   <td><code>&lt;section&gt;</code></td> 
   <td>标记定义：一个区域</td> 
  </tr> 
  <tr> 
   <td><code>&lt;aside&gt;</code></td> 
   <td>标记定义：页面内容部分的侧边栏</td> 
  </tr> 
  <tr> 
   <td><code>&lt;hgroup&gt;</code></td> 
   <td>标记定义：文件中一个区块的相关信息</td> 
  </tr> 
  <tr> 
   <td><code>&lt;figure&gt;</code></td> 
   <td>标记定义：一组媒体内容以及它们的标题</td> 
  </tr> 
  <tr> 
   <td><code>&lt;figcaption&gt;</code></td> 
   <td>标签定义：figure 元素的标题，如图片标题</td> 
  </tr> 
  <tr> 
   <td><code>&lt;footer&gt;</code></td> 
   <td>标记定义：一个页面或一个区域的底部</td> 
  </tr> 
  <tr> 
   <td><code>&lt;dialog&gt;</code></td> 
   <td>标记定义：一个对话框(会话框)类似微信</td> 
  </tr> 
 </tbody> 
</table>

新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好。

## 2.2 新增的多媒体标签 ##

<table> 
 <thead> 
  <tr> 
   <th>多媒体交互标签</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>&lt;video&gt;</code></td> 
   <td>标记定义：一个视频</td> 
  </tr> 
  <tr> 
   <td><code>&lt;audio&gt;</code></td> 
   <td>标记定义：音频内容</td> 
  </tr> 
  <tr> 
   <td><code>&lt;source&gt;</code></td> 
   <td>标记定义：媒体资源</td> 
  </tr> 
  <tr> 
   <td><code>&lt;canvas&gt;</code></td> 
   <td>标记定义：图片</td> 
  </tr> 
  <tr> 
   <td><code>&lt;embed&gt;</code></td> 
   <td>标记定义：外部的可交互的内容或插件,比如flash</td> 
  </tr> 
 </tbody> 
</table>

HTML5的多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大地提升了用户体验。

# 3.页面布局对比 #

传统布局与H5布局对比：

![这里写图片描述][SouthEast]

[SouthEast]: /images/20220614/d2e3bb9be1774c87a67b5ffa45064e67.png