iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >HTML5中的新标签和常用标签详解
  • 627
分享到

HTML5中的新标签和常用标签详解

2024-04-02 19:04:59 627人浏览 八月长安
摘要

本篇内容介绍了“HTML5中的新标签和常用标签详解”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!HTML5

本篇内容介绍了“HTML5中的新标签和常用标签详解”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

HTML5 新增结构元素分为主体结构元素和非主体结构元素

1.主体结构元素包括 article、section、nav、aside、time
2.非主体结构元素包括 header、hgroup、footer、address
一、主体结构元素
article
article 标签,从语义化上看为文档、页面,其用法如下:

通常是一篇文章、一个页面、一个独立完整的内容模块
一般会带个标题,并放在 header 标签中
article 元素可以互相嵌套
使用频率极高,强调独立性,多注意下与 header 标签的使用。

代码如下:


<article>
   <header>
       <h2>是我标签</h2>
   </header>
   <p>我是段落</p>
   <article>
       <div>我的内容</div>
   </article>
</article>


section
section 标签,从语义化上看为部分,其用法如下:

用于页面内容的独立分块,往往是文章的一段
通常由内容和标题组成,没有标题的内容不推荐使用 section
使用频率低,强调分段分块。

注:《html5与css3权威指南》这本书中说明:一个容器需要被定义样式或者脚本定义行为时,推荐用div而非section,不要将section用作设置样式的容器。

代码如下:


<section>
   <h2>水果</h2>
   <article>
       <h3>苹果</h3>
       <div>苹果是撒?</div>
   </article>
    <article>
       <h3>桔子</h3>
       <div>桔子是撒?</div>
   </article>
</section>
<!-- article可以看成是一种特殊种类的section元素,它比section更强调独立性 -->
<article>
   <h2>中国人物</h2>
   <p>三国、两晋、南北朝</p>
   <section>
       <h3>三国</h4>
       <p>猛将猛将猛将猛将</p>
   </section>
   <section>
       <h3>两晋</h4>
       <p>猛将猛将猛将猛将</p>
   </section>
</article>


nav
nav 标签,从语义化上看为导航,其用法如下:

通常作为页面导航的链接组
侧边栏导航
使用频率高。

代码如下:


<nav>
   <ul>
       <li><a href="">菜单1</a></li>
       <li><a href="">菜单2</a></li>
       <li><a href="">菜单3</a></li>
   </ul>
</nav>


aside
aside 标签,从语义化上看为在旁边、侧边,其用法如下:

在 article 标签中使用时,作为主要内容的附属信息部分,如有关的参考资料、名词解释等。
在 article 标签外使用时,作为页面或者站点全局的附属信息部分,如侧边栏、博客的友情链接部分、广告区域等。
使用频率低。

代码如下:


<!-- 在article标签外使用时 -->
<article>
   <h2>马云是谁</h2>
   <p>马云,男,1964年10月15日出生于浙江省杭州市,中国著名企业家,阿里巴巴集团、淘宝网、支付宝创始人..........</p>
   <aside>
       <h2>参考资料</h2>
       <p>百度网、维基百科...</p>
   </aside>
</article></p> <p><!-- 在article标签内使用时 -->
<aside>
   <nav>
       <ul>
           <li><a href="">老赵的博客</a></li>
           <li><a href="">鬼哥的博客</a></li>
           <li><a href="">彪叔的博客</a></li>
       </ul>
   </nav>
</aside>


time
time 标签,从语义化上看为时间,其用法如下:

代表 24 小时中的某个时刻或某个日期
表示时刻时允许带时间差
可定义很多格式的日期和时间
使用频率低。

代码如下:


<time datetime="2013-3-6">2014年3月6日</time>
<!-- datetime属性中日期与时间之间要用“T” 文字分隔,“T”表示时间 -->
<time datetime="2013-3-6T20:00">2014年3月6日20:00</time>
<!-- 时间加上“Z”表示给机器编码时使用UTC标准时间 -->
<time datetime="2013-3-6T20:00Z">2014年3月6日20:00</time>


二、非主体结构元素
header
header 标签,从语义化上看为文档的页眉,其用法如下:

一种具有引导和导航作用的结构元素
通常放置在整个页面或者页面内的一个内容区块的标题
一个网页内并没有限制 header 标签的个数
使用频率极高,比较容易理解。

代码如下:


<header>
   <h2>我是大头</h2>
</header>
<article>
   <header>
       <h2>我是脖子</h2>
   </header>
   <p>我是身体</p>
</article>


hgroup
hgroup 标签,从语义化上看为标题组,其用法如下:

作为 header 标签的子元素
一个内容模块中包括了主标题和至少一个子标题才使用 hgroup
通常会将 h2~h7 元素进行分组
使用频率高。

代码如下:


<article>
   <header>
       <hgrounp>
           <h2>我是刘备</h2>
           <h3>我是关羽</h3>
           <h4>我是张飞</h4>
       </hgrounp>
   </header>
   <p>吕布惊呆了</p>
</article>


footer
footer 标签,从语义化上看为文档的脚注,其用法如下:

一个内容块区的脚注
通常内容为联系信息、相关阅读、版权信息等
使用频率高,比较容易理解。

代码如下:


<article>
   <p>吕布惊呆了</p>
   <footer>
       <ul>
           <li>关于三国</li>
           <li>地图信息</li>
           <li>游戏攻略</li>
       </ul>
   </footer>
</article>


address
address 标签,从语义化上看为地址,其用法如下:

用于文档中呈现的联系信息
通常内容为作者、网站链接、电子邮箱、地址、电话号码等
使用频率低。

代码如下:


<address>
   <a href="">作者:张三丰</a>
   <a href="">地址:武当山</a>
   <a href="">联系方式:1247</a>
</address>

“HTML5中的新标签和常用标签详解”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

--结束END--

本文标题: HTML5中的新标签和常用标签详解

本文链接: https://www.lsjlt.com/news/81840.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • HTML5中的新标签和常用标签详解
    本篇内容介绍了“HTML5中的新标签和常用标签详解”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!HTML5...
    99+
    2024-04-02
  • HTML5中新标签和常用标签有哪些
    今天小编给大家分享一下HTML5中新标签和常用标签有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来...
    99+
    2024-04-02
  • Html5中新标签解释和用法
    Html5中新标签解释和用法 ,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。 它希望能够减少浏览...
    99+
    2024-04-02
  • html5新增的标签和废除的标签有哪些
    这篇文章主要讲解了“html5新增的标签和废除的标签有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“html5新增的标签和废除的标签有哪些”吧!新增的结...
    99+
    2024-04-02
  • HTML5中新增的标签和重新定义的标签属性说明
    HTML5 <!DOCTYPE> 标签所有主流浏览器都支持 <!DOCTYPE> 声明。<!DOCTYPE> 声明非常重要,它是一种标准通用标记语言的文档类型声明,通过该标签,浏览器能够了解HTML5文档...
    99+
    2023-06-03
  • HTML5新增标签的用法
    这篇文章将为大家详细讲解有关HTML5新增标签的用法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。HTML 5 是一个新的网络标准,目标在于取代现有的 HTML 4.01...
    99+
    2024-04-02
  • 常用html5标签大全
    问题:html5的标签种类有哪些?答案:html5的标签种类繁多,包括结构元素、文本元素、表单元素、多媒体元素以及其他元素。具体标签类型:结构元素文本元素表单元素多媒体元素其他元素 H...
    99+
    2024-04-21
  • HTML5的audio标签和video标签怎么使用
    这篇文章主要介绍了HTML5的audio标签和video标签怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇HTML5的audio标签和video标签怎么使用文章都会有所...
    99+
    2024-04-02
  • html5的新增的标签和废除的标签是怎样的
    本篇文章为大家展示了html5的新增的标签和废除的标签是怎样的,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。新增的结构标签section元素 表示页面中的一个内容区...
    99+
    2024-04-02
  • resultMap标签中里的collection标签详解
    目录resultMap标签中的collection标签collection(一对多)collection标签中各属性的说明resultMap标签中的collection标签 coll...
    99+
    2024-04-02
  • HTML5中的新标签有哪些
    这篇文章将为大家详细讲解有关HTML5中的新标签有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。HTML5 中的新标签及描述<article>:定义文章。<aside>:定义页...
    99+
    2023-06-17
  • html5常用标签及属性
    html5 标签可创建丰富网站,包括页眉 ()、导航 ()、内容块 () 和模态对话框 ()。属性用于增强语义和功能,例如唯一标识 (id)、css 类 (class)、提交名称 (na...
    99+
    2024-04-21
    css
  • html5新增的标签如何用
    今天小编给大家分享一下html5新增的标签如何用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。HTML5新增的标签:canv...
    99+
    2023-07-04
  • html5中有哪些新增标签
    html5中新增标签有:1、格式标签:“<bdi>、<mark>、<meter>、<progress>、<rp>、<rt>、<ruby>、<time&...
    99+
    2024-04-02
  • springmvc常用注解标签详解
     1、@Controller在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model ,然后再把该Model 返回...
    99+
    2023-05-31
    spring mvc 注解
  • HTML5怎么新增和废弃标签
    这篇文章主要讲解了“HTML5怎么新增和废弃标签”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“HTML5怎么新增和废弃标签”吧!一、废弃的标签以下的 HTM...
    99+
    2024-04-02
  • html5的新增标签keygen怎么用
    这篇文章主要介绍“html5的新增标签keygen怎么用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“html5的新增标签keygen怎么用”文章能帮助大家解决问题...
    99+
    2024-04-02
  • HTML5新增的标签怎么使用
    这篇文章主要介绍了HTML5新增的标签怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇HTML5新增的标签怎么使用文章都会有所收获,下面我们一起来看看吧。   概念: ...
    99+
    2024-04-02
  • HTML5中有哪些新增和废弃的标签
    这篇文章给大家介绍HTML5中有哪些新增和废弃的标签,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。一、废弃的标签1、能用CSS代替的元素这些元素包含basefont、big、center、font、s、strike、t...
    99+
    2023-06-09
  • embed是不是html5的新标签
    今天小编给大家分享一下embed是不是html5的新标签的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作