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制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 HTML / CSS
详解css3中 text-fill-color属性
Jul 08 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
HTML5计时器小例子
Oct 15 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 HTML / CSS
浅谈css实现背景颜色半透明的两种方法
Dec 06 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
如何正确理解PHP的错误信息
2006/10/09 PHP
PHP新手上路(十)
2006/10/09 PHP
PHP下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
PHP扩展模块memcached长连接使用方法分析
2014/12/24 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
PHP框架Laravel学习心得体会
2015/10/28 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
2016/10/03 Javascript
vue数据双向绑定的注意点
2017/06/23 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
Javascript实现打鼓效果
2021/01/29 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
广州御银科技股份有限公司试卷(C++)
2016/11/04 面试题
考博自荐信
2013/10/25 职场文书
联片教研活动总结
2014/07/01 职场文书
出国签证在职证明范本
2014/11/24 职场文书
党员倡议书
2015/01/19 职场文书
同意报考公务员证明
2015/06/17 职场文书
2016年社区“6.26”禁毒日宣传活动总结
2016/04/05 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
Python中的 Set 与 dict
2022/03/13 Python