韦德国际1946英国 > 计算机网络 > 伟德国际苹果app:读书笔记

原标题:伟德国际苹果app:读书笔记

浏览次数:60 时间:2019-05-06

3、details 成立可伸缩控件

details是个美妙的成分,在没有供给任何css、js的情形下,创制张开/收缩的按钮效果。利用summary标签还足以创建内容的概述新闻。

details有三个属性,open,表示暗许是开采的。反之暗中同意是关闭的样式。

summary是个可点击的片段,用来决定缩短或进行。

<details open>
    <summary>查看详细信息</summary>
    <figure>
        <img src="xx" alt="xx">
        <figcaption>生活照片</figcaption>
    </figure>
</details>

details的选用场景就一发多了,举例mac下的查阅文件属性布局,接下去会经过details达成更风趣的作用。

伟德国际苹果app 1

hgroup元素

一般性用来给标题分组,平日位于header中;可是并非强制供给,也不是相对的。

④、mark 成分高亮文本

利用mark要素,文书档案作者可以高亮当前文书档案的少数文本,以高达强烈的功用。

伟德国际苹果app:读书笔记。比方:找寻页面对寻觅够关键字打开高亮展现。不选择strong可能em重申那个主要字,仅仅是为用户提供高亮而已。

伟德国际苹果app 2

新布局的优点

  1. 更讲究于内容而不是情势
  2. 对人的和谐:特别的语义化,中度的描述性,越发的直观,扩大了代码的可读性。
  3. 对计算机的亲善:浏览器更易于解析,寻找引擎更易于抓取文档的内容
  4. 代码尤其的简洁洁

一、figure、figcaption

在HTML5在此以前,插入图片时会通过其它的div来包裹图片备注,那样做的缺点在于图片和图注之间未有其余关联。

在HTML5中,能够用figure成分插入某张图片,用figcaption来增添图片备注。

figure平常用来插入图片,但也足以是壹段代码、图表、音频只怕录制。平时情形下第2用来图片。

<figure>
    <img src="" alt="伟德国际苹果app 3">
    <figcaption>
        图片标题
    </figcaption>
</figure>

建议无论怎么着在哪一类情状下,都要为图片加多alt属性。

figure成分不止能够分包一张图纸,还足以分包多张图片:

<figure>
    <img src="" alt="伟德国际苹果app 4" />
    <img src="" alt="伟德国际苹果app 5" />
    <img src="" alt="伟德国际苹果app 6" />
    <figcaption>
        图片描述
    </figcaption>
</figure>

设若仅仅的显得图片,使用普通的img标签就能够,假若带有了额外消息,那么就活该接纳figure和figcaption。

亟需留意的是,figure只可以分包一个figcaption。

下边练习一下,大家得以兑现最广大的广告布局:

<article>
  <section>
    <h1>More from the Web</h1>
    <figure>
      <img src="test1.jpg" alt="伟德国际苹果app 7">
      <figcaption>You're Killing Your iPhone With These 7 Charging Mistakes</figcaption>
    </figure>
    <figure>
      <img src="test2.jpg" alt="伟德国际苹果app 8">
      <figcaption>What Was Found After Beats Headphones Were Taken Apart</figcaption>
    </figure>
    <figure>
      <img src="test3.jpg" alt="伟德国际苹果app 9">
      <figcaption>Why You Should Wrap Your Keys In Aluminum Foil</figcaption>
    </figure>
    <figure>
      <img src="test4.jpg" alt="伟德国际苹果app 10">
      <figcaption>The Folding Gun That Looks Like a Smartphone is Worrying Police</figcaption>
    </figure>
  </section>
</article>

time元素

微格式的概念

HTML5中的微格式,是一种选取HTML5中的新标签对网页增添附加音信的办法,附加音讯比方新闻事件爆发的日子和岁月,小说刊出的日期等。

HTML5中的微格式是为了简化浏览器对数码的领到,方便搜索引擎的寻觅.

time元素

  1. time是HTML伍新添的成分
  2. time元素代表贰肆钟头中的有个别时刻或某些日期,表示时刻时允许带时差。它能够定义大多格式的日子和时间
  3. datetime属性中国和日本期与时光之间要用"T"文字分隔,"T"表示时间。请小心倒数第一行,时间累加Z文字表示给机器编码时行使UTC规范时间,表示向机器编码另一地面时间,尽管是编码当地时间,则无需增加时差。
  4. pubdate属性是个可选标签,加上它搜索引擎/浏览器就能够很有益的甄别出极度日期是小说、音信的刊登日期。

time元素示例

<time datetime="2016-11-30"> 2016年11月30日</time>
<time datetime="2016-11-30T20:00"> 2016年11月30日晚上8点</time>
<time datetime="2016-11-30T20:00Z"> 2016年11月30日晚上8点</time>
<time datetime="2016-11-30T20:00 09:00">美国时间2016年11月30日8点</time>
<time datetime="2016-11-30" pubdata="pubdata">文章发表于2016年11月30日</time>

五、总结

到近日截至,大家完全能够采取那个新的价签来布局大家的页面,越发语义化越发结构清晰。作为一名前端开拓人员更应该将这几个最基础的事物熟记下来,撸起袖子继续大力,开荒出今后的web应用程序。

伟德国际苹果app,article元素和section成分的分别

语义不同

  1. article成分更重申内容的独立性
  2. section成分更重申内容的关联性
  3. article成分是独自完整的始末,section成分页面内容分块

相同点

  1. 本质上都以富含语义的div块成分
  2. 分别可以看做<div id="section">和<div id="article">

周天继续读《HTML伍费用手册》,并开始展览德姆o演练,今日主要学习多个HTML伍新扩大的因素:figure、time、details、mark。

figure元素

figure/figcaption都以HTML5中新扩张的因素
figure成分是二个媒体结合成分,也便是对别的的传播媒介成分进行组合,举个例子:图像、图表等等

陆、书籍新闻

《HTML五支付手册》
HTML5 Developer's Cookbook
作者:[美]Chuck Hudson [英]Tom Leadbetter
译者:廖望
出版社:人民邮政和邮电通讯出版社

nav元素

  1. 用来定义目录、导航栏、超链接
  2. 决不全体的超链接都放在nav成分中,平日只把四个文书档案中的主导航栏放在nav中
  3. 在小说页面中,nav仍是能够用来给3个文字做3个索引的超链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>x</title>
    <style type="text/css">
        header{width: 100%;height: 10%;background: green;}
        footer{width: 100%;height: 10%;background: yellow;float: left;}
        aside{width: 20%;height: 80%;background: DarkGray;float: left;}
        section{width: 80%;height: 80%;background: Pink;float: left;}
        nav{width: 100%;height: 50%;background: #e0ffff;text-align: center;padding: 1px}
        li{display: inline;}
        a{text-decoration: none;}
    </style>
</head>
<body style="margin:0;height:708px">
    <header>
        header
        <nav>
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">木木</a></li>
            <li><a href="">屎蛋</a></li>
            <li><a href="">逗逗</a></li>
        </ul>
    </header>
    <aside>aside</aside>
    <section>section</section>
    <footer>footer</footer>
</body>
</html>

伟德国际苹果app 11

nav.png

本文由韦德国际1946英国发布于计算机网络,转载请注明出处:伟德国际苹果app:读书笔记

关键词: HTML5

上一篇:手机版伟德娱乐:自定义tableViewCell选中样式,并

下一篇:没有了