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 圆角效果
Jul 15 HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
深入CSS3 动画效果的总结详解
May 09 HTML / CSS
css3学习心得分享
Aug 19 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
Grid 宫格常用布局的实现
Jan 10 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
HTML5本地存储之Database Storage应用介绍
Jan 06 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
HTML5 canvas基本绘图之绘制曲线
Jun 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+mysql写的简单留言本实例代码
2008/07/25 PHP
PHP面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
Linux下PHP连接Oracle数据库
2014/08/20 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
2017/02/24 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
Python实现截屏的函数
2015/07/25 Python
Python基于辗转相除法求解最大公约数的方法示例
2018/04/04 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
谈谈Python中的while循环语句
2019/03/10 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
解释一下ArrayList Vector和LinkedList的实现和区别
2013/04/26 面试题
教育技术学专业职业规划书
2014/03/03 职场文书
现场施工员岗位职责
2014/03/10 职场文书
优秀护士演讲稿
2014/04/30 职场文书
幸福家庭标语
2014/06/27 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
道歉信范文
2015/05/12 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js
JS数组的常用方法整理
2021/03/31 Javascript