前台开发入门到实战：HTML5语义化元素你真的用的正确吗?
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>
说明
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 前台开发入门到实战：HTML5语义化元素你真的用的正确吗?
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 前台开发入门到实战：HTML5语义化元素你真的用的正确吗?
