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>

  • 相关阅读:
    python模块—socket
    mac os系统的快捷键
    教你如何将UIImageView视图中的图片变成圆角
    关于ASP.NET MVC
    iOS 日期格式的转换
    将App通过XCode上传到AppStore 出现这个错误“An error occurred uploading to the iTunes Store”的解决方法
    关于MAC OS下面两个软件的功能改进——Dictionary和Fit 输入法
    分享一下上个星期的香港行程
    【博客园IT新闻】博客园IT新闻 iPhone 客户端发布
    解决Entity Framework Code First 的问题——Model compatibility cannot be checked because the database does not contain model metadata
  • 原文地址:https://www.cnblogs.com/yanyanstyle/p/11261801.html
Copyright © 2011-2022 走看看