html5语义化标签

时间: 2019-05-06阅读: 623标签: 标签

在html5没出来之前,一直用html的div+css进行布局,通篇div+span,确实不优雅。html5新增了很多语义化的标签,帮助我们写出更优雅的html结构。


1.<article>

可以是页面任何独立的内容区域,比如文章/博客/新闻/故事/论坛帖子/评论等等任何独立的内容。

<article>
    <header>
        <h1>文章标题</h1>
        <p>发布时间:<time pubdate='2019-05-06'>2019-05-06</time></p>
        <p>作者:xxx</p>
    </header>
    <p>文章内容.........</p>
    <p>文章内容.........</p>
</article>


2.<section>

定义文档中的节、区段,比如章节、页眉或文章中的其他部分。比如我们对一篇文章进行分章节。

<article>
    <header>
        <h1>文章标题</h1>
        <p>发布时间:<time pubdate='2019-05-06'>2019-05-06</time></p>
        <p>作者:xxx</p>
    </header>
    <section>
        <h2>章节一的标题</h2>
        <p>文章内容.........</p>
    </section>
    <section>
        <h2>章节二的标题</h2>
        <p>文章内容.........</p>
    </section>
</article>

<section>应包含一组内容及其标题。如果内容没有标题,不推荐使用<section>。


3.<nav>

定义页面的导航区域。

<nav>
    <a href='/a'>页面a</a>
    <a href='/b'>页面b</a>
    <a href='/c'>页面c</a>
</nav>


4.<aside>

定义页面主区域内容之外的内容(比如侧边栏)

5.<header>

描述文档头部区域,用于定义内容的介绍展示,可以使用多个<header>。

6.<footer>

描述文档底部区域,通常包含文档作者,著作权,使用条款,联系信息等,可以使用多个<footer>,文档的大致结构可以分为


下面是更细致的语义化标签,也是更容易被忽略的标签。


7.<figure>和<figcaption>

<figure>定义独立的流内容(图像、图表、照片、代码等等)。
<figcaption>定义<figure>的标题,通常置于figure元素的第一个或最后一个子元素


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/3211

组合 a 标签与 canvas 实现图片资源的安全下载

普通用户下载图片时只需一个「右键另存为」操作即可完成,但当我们做在线编辑器、整个 UI 都被自定义实现时,如何解决不同域问题并实现页面中图片资源的安全下载呢?本文就解决该问题过程中所涉及的正则表达式、Web API 和 canvas 操作进行记录。

HTML a标签打开新标签页避免出现安全漏洞,请使用“noopener”

这里我们有一个指向恶意网站的 href 属性,并以 _blank 属性为 target,使其在新标签页中打开。该流程看起来如此简单明了,用户在这里可能面临的安全风险是什么?

HTML的<Object>标签怎么用?

<object>标签是一个HTML标签,用于在网页中显示音频,视频,图像,PDF和Flash等多媒体;它通常用于嵌入由浏览器插件处理的Flash页面元素,如Flash和Java项目。它还可以用于在HTML页面内显示另一个网页。

a标签中防止跳转的href=javascript:;、void(0);等都是什么意思

a标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL(路径),包括片段标识符和 JavaScript 代码段。javascript: 是表示在触发默认动作时,执行一段JavaScript代码,而 javascript:; 表示什么都不执行

vue自定义标签和单页面多路由实现

比如说要将Header.vue插入Home.vue中显示:定义好Header.vue,然后在Home.vue的script中导入Header.vue:

html中meta标签及Keywords

关键字 meta(标签)及 Keywords(关键词),曾经在网页中很重要的,但现在已经被很多搜索引擎完全忽略。但是,如果加上这个标签也对网页的综合表现没有坏处,不过,如果使用不恰当的话,对网页非但没有好处

video标签的属性

HTML5是下一代HTML,新增了许多新的标签,这些标签实现了许多新的功能。并且还减少了对外部插件的要求同时也可以更好的处理错误。比如HTML5中的video标签就可以很好的实现了在页面上播放视频的效果。

小程序如何写动态标签

动态配置标签的好处一是所有逻辑在JS端控制,二是使得我们的模板非常规范,方便后续维护更新,碎片模板可以很好的控制,三是我们可以根据使用场景很方便的配置props的属性

什么是网页标签?

网页标签即HTML标签是网页浏览器识别符,是浏览器程序默认系统默认许可标签。HTML标签是HTML语言中最基本的单位,HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分。

浏览器是如何将标签转成 DOM ?

进入主话题之前,先罗列一下浏览器的主要构成:用户界面- 包括地址栏、后退/前进按钮、书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分;浏览器引擎- 用来查询及操作渲染引擎的接口

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广