HTML5 语义元素



  • HTML5语义元素

    语义学是研究语言中单词和短语的含义。语义元素=具有意义的元素。 语义元素清楚地描述了它对浏览器和开发人员的意义。 非语义元素的示例:<div><span>- 对其内容一无所知。 语义元素的示例:<form><table><article>- 清楚地定义其内容。 所有现代浏览器都支持HTML5语义元素。
    Internet Explorer Chrome FireFox Safari Opera
    支持 支持 支持 支持 支持
    此外,您可以“教”旧浏览器如何处理“未知元素”。
  • HTML5新语义元素

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

    图标题的目的是为图像添加可视化解释。 在HTML5中,图像和标题可以在<figure>元素中组合在一起:
    <!DOCTYPE html>
           <html>
           <body>
    
           <h2>风景胜地</h2>
    
           <p>这是一个美丽的地方</p>
    
           <figure>
             <img src="/images/f1.jpg" alt="风景1" style="width:100%">
             <figcaption>风景图的说明标题</figcaption>
           </figure>
    
           </body>
           </html>
    
    
    尝试一下
    <img>元素定义了图像,<figcaption>元素定义了字幕。
  • 选择语言元素的意义

    使用HTML4,开发人员使用自己的id/class名称来设置元素样式:页眉,顶部,底部,页脚,菜单,导航,主要内容,容器,内容,文章,侧边栏,导航等。 这使得搜索引擎无法识别正确的网页内容。 使用新的HTML5元素(<header> <footer> <nav> <section><article>),这将变得更容易。 根据W3C,语义网:“允许跨应用程序,企业和社区共享和重用数据。”