HTML5中新标识和常见标识详解

日期:2021-01-20 类型:科技新闻 

关键词:小程序制作流程,抽奖小程序,微信小程序怎么开店,小程序码生成,小程序模版

今日先详细介绍下 html5 新增的构造元素,有的常常应用到,有的用不上,尽管说它们的出現是更推动网页页面更有词义,更好的 seo,但实际上当网页页面禁用款式后,它们的呈现跟 div 是没撒区别,有同学将会会说,既然1样,又不危害网页页面的最后呈现,无论是 article 還是 section 能用就行了。假如考虑到具体新项目的对于客户,我也是这么觉得的,但做为1个重构仔,大家還是得技术专业点,再考虑到到无阻碍这块,那末 html5 标识的功效就更显著了。因而备考下內容并纪录在blog上,顺带共享给大伙儿,也便捷自身之后搜索。

HTML5 新增构造元素分成行为主体构造元素和非行为主体构造元素

1.行为主体构造元素包含 article、section、nav、aside、time
2.非行为主体构造元素包含 header、hgroup、footer、address
1、行为主体构造元素
article
article 标识,从词义化上看为文本文档、网页页面,其用法以下:

一般是1篇文章内容、1个网页页面、1个单独详细的內容控制模块
1般会带个题目,并放在 header 标识中
article 元素能够相互之间嵌套循环
应用频率极高,强调单独性,多留意下与 header 标识的应用。


拷贝编码
编码以下:

<article>
<header>
<h1>是我标识</h1>
</header>
<p>我是段落</p>
<article>
<div>我的內容</div>
</article>
</article>

section
section 标识,从词义化上看为一部分,其用法以下:

用于网页页面內容的单独分层,常常是文章内容的1段
一般由內容和题目构成,沒有题目的內容不强烈推荐应用 section
应用频率低,强调分段分层。

注:《HTML5与CSS3权威性指南》这本书中表明:1个器皿必须被界定款式或脚本制作界定个人行为时,强烈推荐用div而非section,不必将section用作设定款式的器皿。


拷贝编码
编码以下:

<section>
<h1>新鲜水果</h1>
<article>
<h2>iPhone</h2>
<div>iPhone是撒?</div>
</article>
<article>
<h2>桔子</h2>
<div>桔子是撒?</div>
</article>
</section>
<!-- article能够当做是1种独特类型的section元素,它比section更强调单独性 -->
<article>
<h1>我国角色</h1>
<p>3国、两晋、南北朝</p>
<section>
<h2>3国</h3>
<p>猛将猛将猛将猛将</p>
</section>
<section>
<h2>两晋</h3>
<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 标识外应用时,做为网页页面或站点全局性的附设信息内容一部分,如侧面栏、blog的友谊连接一部分、广告宣传地区等。
应用频率低。


拷贝编码
编码以下:

<!-- 在article标识外应用时 -->
<article>
<h1>马云是谁</h1>
<p>马云,男,1964年10月15日出世于浙江省杭州市市,我国知名公司家,阿里巴巴巴巴团体、淘宝网、付款宝创办人..........</p>
<aside>
<h1>参照材料</h1>
<p>百度搜索网、维基百科...</p>
</aside>
</article></p> <p><!-- 在article标识内应用时 -->
<aside>
<nav>
<ul>
<li><a href="">老赵的blog</a></li>
<li><a href="">鬼哥的blog</a></li>
<li><a href="">彪叔的blog</a></li>
</ul>
</nav>
</aside>

time
time 标识,从词义化上看为時间,其用法以下:

意味着 24 小时中的某个時刻或某个时间
表明時刻时容许带時间差
可界定许多文件格式的时间和時间
应用频率低。

拷贝编码
编码以下:

<time datetime="2013⑶⑹">2014年3月6日</time>
<!-- datetime特性中时间与時间之间要用“T” 文本隔开,“T”表明時间 -->
<time datetime="2013⑶⑹T20:00">2014年3月6日20:00</time>
<!-- 時间再加“Z”表明给设备编号时应用UTC规范時间 -->
<time datetime="2013⑶⑹T20:00Z">2014年3月6日20:00</time>

2、非行为主体构造元素
header
header 标识,从词义化上看为文本文档的页眉,其用法以下:

1种具备正确引导和导航栏功效的构造元素
一般置放在全部网页页面或网页页面内的1个內容区块的题目
1个网页页面内并沒有限定 header 标识的个数
应用频率极高,较为非常容易了解。


拷贝编码
编码以下:

<header>
<h1>我是大头</h1>
</header>
<article>
<header>
<h1>我是脖子</h1>
</header>
<p>我是人体</p>
</article>

hgroup
hgroup 标识,从词义化上看为题目组,其用法以下:

做为 header 标识的子元素
1个內容控制模块中包含了主题目和最少1个子题目才应用 hgroup
一般会将 h1~h6 元素开展排序
应用频率高。


拷贝编码
编码以下:

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

footer
footer 标识,从词义化上看为文本文档的脚注,其用法以下:

1个內容块区的脚注
一般內容为联络信息内容、有关阅读文章、版权信息内容等
应用频率高,较为非常容易了解。


拷贝编码
编码以下:

<article>
<p>吕布惊呆了</p>
<footer>
<ul>
<li>有关3国</li>
<li>地形图信息内容</li>
<li>手机游戏功略</li>
</ul>
</footer>
</article>

address
address 标识,从词义化上看为详细地址,其用法以下:

用于文本文档中展现的联络信息内容
一般內容为作者、网站连接、电子器件电子邮箱、详细地址、电話号码等
应用频率低。

拷贝编码
编码以下:

<address>
<a href="">作者:张3丰</a>
<a href="">详细地址:武当山</a>
<a href="">联络方法:1247</a>
</address>

期待本文对大伙儿在 html5 构造标识上的应用有1定的具体指导,假如发现內容有不正确的地区,欢迎大伙儿纠正~

上一篇:怎样制做1个开学季H5小手机游戏? 返回下一篇:没有了