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教程(3):border-color网页边框色彩
Apr 02 HTML / CSS
HTML5的Geolocation地理位置定位API使用教程
May 12 HTML / CSS
浅谈cookie和localStorage那些事
Aug 27 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
Jan 21 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 HTML / CSS
html5教程画矩形代码分享
Dec 04 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
Html5原创俄罗斯方块(基于canvas)
Jan 07 HTML / CSS
html5 横向滑动导航栏的方法示例
May 08 HTML / CSS
纯CSS实现酷炫的霓虹灯效果
Apr 13 HTML / CSS
CSS实现单选折叠菜单功能
Nov 01 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/09/13 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
使用PHP similar text计算两个字符串相似度
2015/11/06 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
PHP常用排序算法实例小结【基本排序,冒泡排序,快速排序,插入排序】
2017/02/07 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
可输入的下拉框
2006/06/19 Javascript
改版了网上的一个js操作userdata
2007/04/27 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
Javascript学习指南
2014/12/01 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
微信小程序实现轮播图效果
2017/09/07 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
详解vue v-model
2020/08/31 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
Python和php通信乱码问题解决方法
2014/04/15 Python
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
铭万公司.net面试题笔试题
2014/07/20 面试题
中专毕业生自荐信
2013/11/16 职场文书
班组拓展活动方案
2014/08/14 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
js 实现验证码输入框示例详解
2022/09/23 Javascript