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


Posted in HTML / CSS onAugust 22, 2019

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语义化元素你真的用对了吗,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
浏览器实现移动端高性能css3动画(开启gpu加速)
Dec 23 HTML / CSS
css3实现的多级渐变下拉菜单导航效果代码
Aug 31 HTML / CSS
css3 border旋转时的动画应用
Jan 22 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
推荐10个HTML5响应式框架
Feb 25 HTML / CSS
纯HTML5+CSS3制作生日蛋糕(代码易懂)
Nov 16 HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 HTML / CSS
Html5通过数据流方式播放视频的实现
Apr 27 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
CSS SandBox应用场景及常见问题
Jun 25 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 07 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 #HTML / CSS
手摸手教你用canvas实现给图片添加平铺水印的实现
Aug 20 #HTML / CSS
html5 canvas实现给图片添加平铺水印
Aug 20 #HTML / CSS
导出HTML5 Canvas图片并上传服务器功能
Aug 16 #HTML / CSS
HTML5自定义属性的问题分析
Aug 16 #HTML / CSS
HTML5实现视频弹幕功能
Aug 09 #HTML / CSS
Canvas高级路径操作之拖拽对象的实现
Aug 05 #HTML / CSS
You might like
AMFPHP php远程调用(RPC, Remote Procedure Call)工具 快速入门教程
2010/05/10 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
支持中文、字母、数字的PHP验证码
2015/05/04 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
ThinkPHP实现的rsa非对称加密类示例
2018/05/29 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
脚本吧 - 幻宇工作室用到js,超强推荐share.js
2006/12/23 Javascript
jquery实现每个数字上都带进度条的幻灯片
2013/02/20 Javascript
url参数中有+、空格、=、%、&amp;、#等特殊符号的问题解决
2013/05/15 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
2016/07/12 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
详解在create-react-app使用less与antd按需加载
2018/12/06 Javascript
PyCharm 常用快捷键和设置方法
2017/12/20 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
python实现自主查询实时天气
2018/06/22 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
Django choices下拉列表绑定实例
2020/03/13 Python
python右对齐的实例方法
2020/07/05 Python
python 星号(*)的多种用途
2020/09/21 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
世界最大的票务市场:viagogo
2017/02/16 全球购物
计算机专业学生求职信分享
2013/12/15 职场文书
三爱活动实施方案
2014/03/19 职场文书
班级旅游计划书
2014/05/03 职场文书
爱国演讲稿400字
2014/05/07 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书