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实现的漂亮的404页面的实例教程
Nov 27 HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 HTML / CSS
使用CSS3来绘制一个月食图案
Jul 18 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
Apr 04 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
推荐WEB开发者最佳HTML5和CSS3代码生成器
Nov 24 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
Html分层的box-shadow效果的示例代码
Mar 30 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 HTML / CSS
css常用字体属性与背景属性介绍
Feb 28 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
php中解析带中文字符的url函数分享
2015/01/20 PHP
PHP7.0版本备注
2015/07/23 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
jQuery随便控制任意div隐藏的方法
2013/06/28 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
Vue render函数实战之实现tabs选项卡组件
2019/04/22 Javascript
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
Python基于scrapy采集数据时使用代理服务器的方法
2015/04/16 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
简要讲解Python编程中线程的创建与锁的使用
2016/02/28 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
python加载自定义词典实例
2019/12/06 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
2016/03/22 HTML / CSS
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
毕业自我评价范文
2013/11/17 职场文书
项目投资意向书
2014/04/01 职场文书
《恐龙》教学反思
2014/04/27 职场文书
贷款委托书怎么写
2014/08/02 职场文书
2015年统战工作总结
2015/05/19 职场文书
入队仪式主持词
2015/07/04 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电
python中 Flask Web 表单的使用方法
2022/05/20 Python
JavaScript正则表达式实现注册信息校验功能
2022/05/30 Java/Android
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers