zoukankan      html  css  js  c++  java
  • HTML新增的主体结构及应用

    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:DocumentsDesktop杭州实习作业picture1527219280392304.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>

  • 相关阅读:
    菜鸟nginx源码剖析数据结构篇(十一) 共享内存ngx_shm_t[转]
    菜鸟nginx源码剖析数据结构篇(十) 自旋锁ngx_spinlock[转]
    菜鸟nginx源码剖析数据结构篇(九) 内存池ngx_pool_t[转]
    菜鸟nginx源码剖析数据结构篇(八) 缓冲区链表ngx_chain_t[转]
    菜鸟nginx源码剖析数据结构篇(七) 哈希表 ngx_hash_t(下)[转]
    菜鸟nginx源码剖析数据结构篇(六) 哈希表 ngx_hash_t(上)[转]
    菜鸟nginx源码剖析数据结构篇(五) 基数树 ngx_radix_tree_t[转]
    菜鸟nginx源码剖析数据结构篇(四)红黑树ngx_rbtree_t[转]
    菜鸟nginx源码剖析数据结构篇(三) 单向链表 ngx_list_t[转]
    菜鸟nginx源码剖析数据结构篇(二) 双向链表ngx_queue_t[转]
  • 原文地址:https://www.cnblogs.com/yanyanstyle/p/11261801.html
Copyright © 2011-2022 走看看