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中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
CSS3正方体旋转示例代码
Aug 08 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
Jul 05 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 HTML / CSS
CSS3中新增的对文本和字体的设置
Feb 03 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
Feb 19 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
如何给HTML标签中的文本设置修饰线
Nov 18 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文件操作的详解
2013/06/05 PHP
测试PHP连接MYSQL成功与否的代码
2013/08/16 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
php cookie中点号(句号)自动转为下划线问题
2014/10/21 PHP
PHP实现货币换算的方法
2014/11/29 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
Jquery实现页面加载时弹出对话框代码
2013/04/19 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
jQuery实现鼠标经过事件的延时处理效果
2020/08/20 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
2016/03/07 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
BootStrap网页中代码显示用法详解
2016/10/21 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
js实现飞机大战小游戏
2020/08/26 Javascript
Python获取服务器信息的最简单实现方法
2015/03/05 Python
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
国际领先的学术出版商:Springer
2017/01/11 全球购物
Speedo澳大利亚官网:全球领先游泳品牌
2018/02/04 全球购物
static函数与普通函数有什么区别
2015/12/25 面试题
成人毕业生自我鉴定
2013/10/18 职场文书
护理专业自荐书
2014/06/04 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
实习报告范文
2019/07/30 职场文书
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers