码迷,mamicode.com
首页 > Web开发 > 详细

HTML新增的主体结构及应用

时间:2019-07-29 09:59:04      阅读:113      评论:0      收藏:0      [点我收藏+]

标签:book   com   人物   侧边栏   判断   tle   苹果   mit   感受   

1 section元素

用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内而外及其标题组成。但它并非一个普通的容器元素,当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section元素。

 

示例:

<section>

  <h1>苹果</h1>

  <p><b>苹果</b> ,植物类水果,多次花果</p>

</section>

 

通常不推荐为那些没有标题的内容使用section元素,可以使用HTML5轮廓工具来检查页面中是否有没标题的section。

 

2 article元素

代表文档、页面或应用程序中独立的 、完整的、可以独自为外部引用的内容。

除了内容部分,一个article元素通常有它自己的标题(一般放在一个header元素里面),有时还有自己的脚注。

 

示例:

<section>
   <article>
       <h3>情绪产生过程</h3>
       <a class="a1"><img src="C:\Documents\Desktop\杭州实习作业\picture\1527219280392304.jpg" width="200px" height="px"></a>
<p>
从古希腊至今,历代思想家都试图在理论上解释情绪的产生。
当代情绪理论多注重经验主义研究方法,
很多独立的理论并不互相排斥,
大多数研究人员乐于采纳多种视角,融合各种理论。
引起争议的问题主要是认知判断对产生情绪有多重要,特别是和身体反应等其他方面比较。
</p>

</article>
      <h4>构成要素</h3>
<p>
情绪既是主观感受,又是客观生理反应,具有目的性,也是一种社会表达。情绪是多元的、复杂的综合事件。情绪构成理论认为,在情绪发生的时候,有五个基本元素必须在短时间内协调、同步地进行。
认知评估:注意到外界发生的事件(或人物),认知系统自动评估这件事的感情色彩,因而触发接下来的情绪反应(例如:看到心爱的宠物死亡,主人的认知系统把这件事评估为对自身有重要意义的负面事件)。
身体反应:情绪的生理构成,身体自动反应,使主体适应这一突发状况(例如:意识到死亡无法挽回,宠物的主人神经系统觉醒度降低,全身乏力,心跳频率变慢)。
感受:人们体验到的主观感情(例如:在宠物死亡后,主人的身体和心理产生一系列反应,主观意识察觉到这些变化,把这些反应统称为“悲伤”)。
表达:面部和声音变化表现出这个人的情绪,这是为了向周围的人传达情绪主体对一件事的看法和他的行动意向(例如:看到宠物死亡,主人紧皱眉头,嘴角向下,哭泣)。对情绪的表达既有人类共通的成分,也有各地独有的成分。
行动的倾向:情绪会产生动机(例如:悲伤的时候希望找人倾诉,愤怒的时候会做一些平时不会做的事。
</p>

 

3 nav元素

一个可以用作页面导航的链接组。只需要把主要的,基本的链接组发你放进nav元素即可。

 

示例:

<nav>
<ul>
<li><a href="javascript:;">首页</a></li>
<li><a href="https://baike.baidu.com/item/%E5%96%9C/4754?fr=aladdin">喜</a></li>
<li><a href="https://baike.baidu.com/item/%E6%80%92/19912590?fr=aladdin">怒</a></li>
<li><a href="https://baike.baidu.com/item/%E5%93%80%E5%A7%93/10313765?fr=aladdin&fromid=6107073&fromtitle=%E5%93%80">哀</a></li>
<li><a href="https://baike.baidu.com/item/%E4%B9%90/34288?fr=aladdin">乐</a></li>
<li><a href="https://baike.baidu.com/item/%E6%83%8A/5218156?fr=aladdin">惊</a></li>
<li><a href="https://baike.baidu.com/item/%E6%81%90/6500595?fr=aladdin">恐</a></li>
<li><a href="https://baike.baidu.com/item/%E7%88%B1/433?fr=aladdin">爱</a></li>
<li><a href="http://www.sohu.com/a/243573186_100233783">没有情绪</a></li>
<li class="search">
<form action="http://www.baidu.com/s" method="get">
<input type="text" name="wd" placeholder="" value="心情" >
<input type="submit" value="?">
</form>
</li>
</ul>
</nav>

4 aside元素

用来表示当前面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有别于主要内容的部分。

 

示例:

<aside>
<section class="widget">
<h4>最近文章</h4>
<ul>
<li><a href="https://book.douban.com/review/10138454/"><mark>如何才能不焦虑</mark></a></li>
<li><a href="javascript:;">听说你不会情绪管理</a></li>
<li><a href="javascript:;">疾病真的更青睐于悲观的人吗</a></li>
</ul>
</section>
<section>

</section>
<section>
<h4>文章归档</h4>
<ul>
<li><a href="javascript:;">2019/06/28</a></li>
<li><a href="javascript:;">2019/06/29</a></li>
<li><a href="javascript:;">2019/06/30</a></li>
</ul>
</section>
</aside>

HTML新增的主体结构及应用

标签:book   com   人物   侧边栏   判断   tle   苹果   mit   感受   

原文地址:https://www.cnblogs.com/yanyanstyle/p/11261801.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!