HTML5语义化元素你真的用对了吗

所属分类: 网页制作 / html5 阅读数: 745
收藏 0 赞 0 分享

HTML5语义元素

语义学是研究语言中单词和短语的含义。语义元素=具有意义的元素。 语义元素清楚地描述了它对浏览器和开发人员的意义。 非语义元素的示例:<div>和<span>- 对其内容一无所知。 语义元素的示例:<form>,<table>和<article>- 清楚地定义其内容。 所有现代浏览器都支持HTML5语义元素。

HTML5新语义元素

许多网站都包含HTML代码,例如:<div id ="nav"> <div class ="header"> <div id ="footer"> 以指示导航,页眉和页脚。 HTML5提供了新的语义元素来定义网页的不同部分:

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

HTML5 <section>元素

<section>元素定义了一个文档中的一个部分。 根据W3C的HTML5文档:“一个部分是内容的主题分组,通常带有标题。” 主页通常可以分为几个部分,用于介绍,内容和联系信息。

<!DOCTYPE html>
     <html>
     <body>
     <section>
       <h1>Java</h1>
       <p>Java是一种广泛使用的计算机编程语言,拥有跨平台、面向对象、泛型编程的特性,广泛应用于企业级Web应用开发和移动应用开发。</p>
     </section>
     <section>
       <h1>PHP</h1>
       <p>PHP(全称:PHP:Hypertext Preprocessor,即“PHP:超文本预处理器”)是一种开源的通用计算机脚本语言,尤其适用于网络开发并可嵌入HTML中使用。</p>
     </section>
     </body>
     </html>

HTML5 <article>元素

<article>元素指定独立的包含内容。 一篇文章本身应该有意义,应该可以从网站的其他部分独立阅读。 <article>可以使用元素的示例:

<!DOCTYPE html>
       <html>
       <body>
       <article>
         <h1>Java</h1>
         <p>Java是一种广泛使用的计算机编程语言,拥有跨平台、面向对象、泛型编程的特性,广泛应用于企业级Web应用开发和移动应用开发。</p>
       </article>
       </body>
       </html>

HTML5 <header>元素

<header>元素指定为一个文件或部分标题。 <header>元素应该用作介绍性内容的容器。 您可以在一个<header>中包含多个元素。 以下示例定义文章的标题:

<!DOCTYPE html>
       <html>
       <body>
       <article>
         <header>
           <h1>Java</h1>
           <p>Java是什么:</p>
         </header>
         <p>Java是一种广泛使用的计算机编程语言,拥有跨平台、面向对象、泛型编程的特性,广泛应用于企业级Web应用开发和移动应用开发。</p>
       </article>
       </body>
       </html>

HTML5 <footer>元素

<footer>元素指定为一个文件或部分页脚。 <footer>元件应包含有关它的包含单元信息。 页脚通常包含文档的作者,版权信息,使用条款的链接,联系信息等。 您可在一个<footer>中有多个元素。

<!DOCTYPE html>
       <html>
       <body>
       <footer>
         <p>版权所有</p>
         <p>联系信息: <a href="mailto:someone@example.com">
         someone@example.com</a>.</p>
       </footer>
       </body>
       </html>

 

HTML5 <nav>元素

<nav>元素定义了一组导航链接。

<!DOCTYPE html>
       <html>
       <body>
       <nav>
         <a href="#">Java</a> |
         <a href="#">CSS</a> |
         <a href="#">HTML</a> |
         <a href="#">jQuery</a>
       </nav>
       </body>
       </html>

HTML5 <aside>元素

<aside>元件从它被放置在(如侧栏)的内容定义了一些内容。 <aside>内容应是周围的内容。

 

<!DOCTYPE html>
       <html>
       <body>
       <p>Java是一种广泛使用的计算机编程语言,拥有跨平台、面向对象、泛型编程的特性,广泛应用于企业级Web应用开发和移动应用开发。</p>
       <aside>
         <h4>PHP</h4>
         <p>PHP是世界上最好的语言。</p>
       </aside>
       </body>
       </html>

以上所述是小编给大家介绍的HTML5语义化元素你真的用对了吗,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

更多精彩内容其他人还在看

html5指南-4.使用Geolocation实现定位功能

今天我们要学习的是使用Geolocation实现定位功能。我们可以通过navigator.geolocation获取Geolocation对象,感兴趣的朋友可以了解下
收藏 0 赞 0 分享

一张图片能隐含千言万语之隐藏你的程序代码

一个HTML5的视频智力游戏,开发的过程很有趣,我喜欢编程,但当实现了游戏逻辑后,我有了一个有趣的想法:为什么不想个办法把代码隐藏起来
收藏 0 赞 0 分享

HTML4和HTML5之间除了相似以外的10个主要不同

HTML5是最新的HTML标准,重新开发一个HTML5的网站,要比把一个网站从HTML4迁移到HTML5上容易的多,这是因为这两个版本之间有很大不同之处
收藏 0 赞 0 分享

HTML5 实现一个访问本地文件的实例

今天,我将向大家分享一个简单的应用,用来演示使用FileReader的方法, FileReader是HTML5里提供的一个文件操作API,需要的朋友可以了解下
收藏 0 赞 0 分享

使用HTML5的链接预取功能(link prefetching)给网站提速

HTML5的链接预取功能(link prefetching)是一个埋在沙里的宝石,至今还很少人知道它的价值,需要的朋友可以了解下
收藏 0 赞 0 分享

基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码

基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能,需要了解的朋友可以参考下
收藏 0 赞 0 分享

HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览

打开一个网页,加载完后,如果突然断网了,那么你刷新后那页面就没了,怎么阻止这种局面的发生呢?html5的出现让我们豁然开朗,接下来将为您详细解读
收藏 0 赞 0 分享

HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题

离线访问对基于网络的应用而言越来越重要,虽然所有浏览器都有缓存机制,但它们并不可靠,HTML5 使用 ApplicationCache 接口解决了由离线带来的部分难题,需要的朋友可以参考下
收藏 0 赞 0 分享

如何使用html5与css3完成google涂鸦动画

今天我们将介绍,如何使用css3完成google涂鸦动画。当你点击demo页面的【开始】按钮之后,页面中的骑手和马匹将会运动起来,需要的朋友可以了解下
收藏 0 赞 0 分享

HTML5重塑Web世界它将如何改变互联网

即将成为新标准的HTML5到底会把我们带向哪里?下面收集了开发者、程序员以及设计师的一些看法,从中可以了解到HTML5如何改变互联网,需要的朋友可以了解下
收藏 0 赞 0 分享
查看更多