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 相关文章推荐
CSS实现鼠标滑过鼠标点击代码写法
Dec 26 HTML / CSS
检测用户浏览器是否支持CSS3的方法
Aug 29 HTML / CSS
CSS3的文字阴影—text-shadow的使用方法
Dec 25 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
Feb 04 HTML / CSS
CSS3盒子模型详解
Apr 24 HTML / CSS
利用CSS3实现的文字定时向上滚动
Aug 29 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
html5组织文档结构_动力节点Java学院整理
Jul 11 HTML / CSS
使用Canvas操作像素的方法
Jun 14 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
video实现有声音自动播放的实现方法
May 20 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 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摘要生成函数(无乱码)
2012/02/04 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
ext监听事件方法[初级篇]
2008/04/27 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
2018/08/28 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
纯异步nodejs文件夹(目录)复制功能
2019/09/03 NodeJs
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
Python远程桌面协议RDPY安装使用介绍
2015/04/15 Python
Python通过future处理并发问题
2017/10/17 Python
详解Python map函数及Python map()函数的用法
2017/11/16 Python
详解Python Matplot中文显示完美解决方案
2019/03/07 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
生物有机护肤品:Aurelia Probiotic Skincare
2018/01/31 全球购物
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
数控机械专业个人的自我评价
2014/01/02 职场文书
小学生元旦广播稿
2014/02/21 职场文书
捐资助学倡议书
2014/04/15 职场文书
银行求职信
2014/05/31 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
您对思维方式了解多少?
2019/12/09 职场文书
浅谈MySQL之select优化方案
2021/08/07 MySQL
MySQL 数据类型详情
2021/11/11 MySQL