HTML5语义化元素怎么用-创新互联

这篇文章主要介绍HTML5语义化元素怎么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联公司长期为上千余家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为鼓楼企业提供专业的成都网站设计、成都做网站，鼓楼网站改版等技术服务。拥有十年丰富建站经验和众多成功案例,为您定制开发。

HTML5语义元素

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

HTML5新语义元素

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

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

HTML5 <section>元素

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

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

HTML5 <article>元素

<article>元素指定独立的包含内容。一篇文章本身应该有意义，应该可以从网站的其他部分独立阅读。 <article>可以使用元素的示例：
论坛帖子
博客文章
报纸文章

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

HTML5 <header>元素

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

<!DOCTYPE html>
       <html>
       <body>
       <article>
         <header>
           <h2>Java</h2>
           <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>
         <h5>PHP</h5>
         <p>PHP是世界上最好的语言。</p>
       </aside>
       </body>
       </html>

以上是“HTML5语义化元素怎么用”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

本文名称：HTML5语义化元素怎么用-创新互联
文章转载：https://www.cdcxhl.com/article2/cedcic.html

成都网站建设公司_创新互联，为您提供App设计、动态网站、标签优化、做网站、网站制作、微信小程序

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容