博主比较懒也比较菜，学习日记这种东西更新绝对不会太频繁！

Day01 2020.9.6 学习日记1

  1. role属性

    • role属性的作用是告诉Accesibility类应用（如屏幕阅读器等）当前元素的作用，可以增强文本的可读性和语义化
    • 在Html5元素内，标签本身就是有语义的，因此role可以作为可选属性使用，但类似于Bootstrap中都很重视类似的属性和声明，目的是为了兼容老版浏览器
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    <!--role属性的使用-->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div class="container">
        <!--标明页面容器-->
        <header role="banner">
            <nav role="navigation"><a href="http://www.baidu.com">百度</a> </nav>
            <!--标明该处是导航-->
        </header>
        <main role="main">
            <!--标明页面主体-->
            <article>text</article>
            <article>example</article>
        </main>
        <div class="sidebar">
            <aside role ="complementary"></aside>
            <aside role ="complementary"></aside>
        </div>
        <footer role="contentinfo"></footer>
    </div>
    </body>
    </html>

  2. 定义图标的方法

    • 图标：在网页导航栏中显示的网页标签中文字前方的图标
    1
    2
    3
    4
    <!--首先准备一张16*16px的图标（网页专用）-->
    <!--在HTML5文档中输入如下代码即可-->
    <link rel="icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>

  3. 流的定义

    • 流表示图表，照片，图形，插图，代码片段等独立的内容，在HTML5之前没有专门实现这个目的的元素，一些开发人员使用没有语义的div元素来表示
    • HTML5使用figure和figcaption引入流，其中figcaption表示流的标题，流的标题不是必须的，但如果包含它，就必须是figure内嵌的第一个或者最后一个元素
    1
    2
    3
    <figure>
    <figcaption>XXXXXXXX</figcaption>
    </figure>

  4. picture标签及响应式效果的实现

    • picture标签属性：

      1. srcset：必需，设置图片文件路径，如“srcset=”img/minpic.png””，或者是用逗号分隔的用像素密度描述的图片路径，如“srcset=”img/minpic.png,img/maxpic.png 2x””
      2. media ：设置媒体查询，如media=”(min-width:320px)”
      3. sizes:设置宽度，如sizes=”100vw”，或是媒体查询宽度，如sizes=”(min-width:320px) 100vw”,可用逗号分隔形成媒体查询宽度列表
      4. type：设置MIME类型，如type=”image/webp”或者type=”image/vnd.ms-photo”
      1
      2
      3
      4
      5
      6
      <picture>
          <source media="(min-width:650px)" srcset="images/kitten-large.png">
          <source media="(min-width:456px)" srcset="images/kitten-medium.png">
          <!--img标签用于不支持picture元素的浏览器-->
          <img src="images/kitten-small.png" alt="a cute kitten" id="picimg">
      </picture>