HTML5新增的主体结构元素
程序员文章站
2022-05-11 10:50:59
...
HTML5新增的主体结构元素
aside元素
<body>
<header>
<h1>js入门</h1>
</header>
<!--在article内引用的-->
<article>
<h1>语法</h1>
<p>文章的正文..</p>
<aside>
<h1>名词解释</h1>
<p>语法： 这是一个对语言来说很重要的内容体</p>
</aside>
</article>
<!--在article外-->
<aside>
<nav>
<h2>评论</h2>
<ul>
<li><a href="#">2015-3-10</a></li>
<li><a href="#">
大牛： 真希望能好好学一下
</a></li>
</ul>
</nav>
</aside>
</body>pubdate属性
<body>
<!--这是一个可选的,boolean值属性，它可以用到article元素中的time元素上，意思是time元素代表了文章（article元素的内容）或者整个网页的发布日期-->
<article>
<header>
<h1>苹果</h1>
<p>发布日期
<time datatime="2017-12-2" pubdate>2017-12-2</time>
</p>
<p>舞会时间
<time datatime="2017-2-12">2017-2-12</time>
</p>
</header>
</article>
</body>section元素
<body>
<!--1. 不要将section元素作为设置样式的页面容器-->
<!--2. 如果article元素、aside元素、nav元素更符合使用条件，那不要使用section元素-->
<!--3. 没有标题内容不要使用section元素-->
<!--通常不推荐没有标题内容使用section元素-->
<section>
<h1>苹果</h1>
<p>这是一个水果</p>
</section>
<article>
<h1>苹果</h1>
<p>这是一个水果</p>
<section>
<h2>红富士</h2>
<p>这是苹果的一个品种</p>
</section>
<section>
<h2>国光</h2>
<p>这是苹果的一个品种</p>
</section>
</article>
<!--secton强调分段或分块，但acticle强调独立性-->
<section>
<h1>水果</h1>
<article>
<h2>苹果</h2>
<p>内容</p>
</article>
<article>
<h2>苹果</h2>
<p>内容</p>
</article>
<article>
<h2>苹果</h2>
<p>内容</p>
</article>
</section>
</body>nav元素
<body>
<!--标签定义导航链接的部分。-->
<!--html5中不能使用menu元素代替nav元素-->
<nav>
<ul>
<li><a href="#">主页</a></li>
<li><a href="#">开发文档</a></li>
<li><a href="#">文件</a></li>
</ul>
</nav>
<article>
<header>
<h1>HTML5与CSS3的历史</h1>
<nav>
<ul>
<li><a href="#">HTML5历史</a></li>
<li><a href="#">CSS3历史</a></li>
</ul>
</nav>
</header>
<section>
<h1>HTML5历史</h1>
<p>。。。。</p>
</section>
<section>
<h1>CSS3历史</h1>
<p>。。。。</p>
</section>
<footer>
<a href="#">删除</a>
<a href="#">修改</a>
</footer>
</article>
<footer>
<p><small>版权声明:</small></p>
</footer>
</body>article元素
<body>
<!--<article> 标签规定独立的自包含内容。-->
<!--一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。-->
<!--<article> 元素的潜在来源：-->
<!--论坛帖子-->
<!--报纸文章-->
<!--博客条目-->
<!--用户评论-->
<article>
<header>
<h1>广州大学华软软件学院</h1>
<p>广州大学华软软件学院</p>
</header>
<p>Hello</p>
<footer>
<p>这是底部</p>
</footer>
</article>
article可以作为插件内嵌页面
<article>
<h1>这是一个内嵌页面</h1>
<object>
<embed src="#" width="600" height="400"/>
</object>
</article>
</body>time
<body>
<!--<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。-->
<!--该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。-->
<!--time元素代表24小时中的某个时刻和某个日期，表示时刻时允许带时差，它可以定义很多格式的时间-->
<time datatime="2015-10-10">2015-10-10</time>
<!--datetime属性中日期与时间之间需要用T文字分隔，T表示时间；<time datetime="2010-11-13T20:00">我生日是晚上八点</time>-->
<time datatime="2015-10-11T20:00">2015-10-11</time>
<!--时间加上Z文字表示给机器编码时使用UTC时间标准；<time datetime="2010-11-13T20:00Z">我生日是晚上八点</time>-->
<time datatime="2015-10-11T20:00Z">2015-10-11</time>
<!--加上时差，表示向机器编码另一地区时间，如果是编码本地时间，则不需要添加时差<time datetime="2010-11-13T20:00+09：00">我生日是晚上八点</time>-->
<time datatime="2015-10-11T20:00Z+09：00">2015-10-11</time>
</body>上一篇： HTML5(非主体结构元素)
下一篇： HTML5 新增的非主体结构元素