Day4 HTML新增元素与布局

　　　　　　　　　　　　　　　　Day4 HTML新增元素与布局

HTML新增属性:
一:常见的布局标签(都是块级元素)

<header>头部</header>
<nav>导航</nav>
<aside>侧边栏</aside>
<article>文章，独立的块，帖子</article>
<section>章节，页眉，页脚</section>
<footer>页脚</footer>

    1.header　　页面头部
   2.nav 　　　导航链接
   3.article 　　定义页面独立的内容区域,例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等.
   4.aside　　　定义页面的侧边栏内容
   5.footer 　　   页脚
   6. section 　定义文档中的节。比如章节、页眉、页脚或文档中的其它部分
    7.figure　　用于对元素进行组合。多用于图片与图片描述组合 ( 跟dl自定义列表dd,dt相同 )

　 8.figcaption 　　是figure的标题

<figure>
    <img src="images/img1.png" alt=""/>
    <figcaption>中国队周琦狂砍22分</figcaption>
</figure>
　　　　　　dl自定义列表dd,dt相同,图片不缩进,内容缩进.
　　　　figure图片内容都缩进

9.mark 标记　　(默认黄色背景,字体黑色)
定义带有记号的文本，它会给你要突出显示的文本下加个背景色。

如：你是<mark>大长腿</mark>吗?

10.details 　　标签用于描述文档或文档某个部分的细节 (IE不支持 <details> 标签)

<details>
    <summary>details中的标题</summary>　　　　summary 是details中的标题
    <p>详细的内容</p>　　　　　　　　　
</details>

   11.meter　　用来表示范围已知且可度量的内容。
   <meter> </meter>标签(同电池)
   <meter> 标签定义度量衡。仅用于已知最大和最小值的度量。

<meter min="0" max="100" value="80"></meter>
        low:最低预警值
        high：最高预警值
    <meter min="0" max="100" value="81" low="20" high="80"></meter>
                    低于20,高于80会变颜色,相等颜色不变为绿色

   12.ruby　　加注释

    13.<progress></progress>标签　　(同进度条)
            <progress> 标签定义运行中的进度（进程）

   <progress max="100" value="20"></progress>　　
 　　 max：定义完成值　　　　value：定义当前值

   15.<datalist></datalist>标签
       (给input提供选项列表)定义 input 可能的值.datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表

   16.<video> </video>标签　　 (支持mp4,ogg移动端,webM高清) 行内元素,IE5,6,7,8不支持
<video> 标签定义视频，比如电影片段或其他视频流.

  eg:<video src="movie.mp4" controls>您的浏览器不支持视频。</video>

常用属性:src       路径(必须属性)
   　　　 autoplay 自动播放
   　　　   loop      循环播放
      　　　controls 显示控制面板
   　　　 muted     静音
  　　　    post      视频播放前显示图片   post="img.jpg"
   　　　 width    height 宽度高度

   17.<audio></audio>标签 (支持MP3,ogg,wav) 没有宽高.
<audio> 标签定义声音，比如音乐或其他音频流.

 eg:<audio src="someaudio.mp3">您的浏览器不支持音频.</audio>

18.<source></source> 标签
给浏览器提供多种格式,浏览器根据自己支持的情况选择支持的格式.比如视频音频.

  eg:<audio controls>
       <source src="horse.ogg" >
       <source src="horse.mp3" >
         您的浏览器不支持视频.
    </audio>

19.<embed/>标签　　(行内元素)
<embed> 标签定义嵌入的内容，比如插件，也可以用来引入视频,音频.
<embed> 标签必须有 src 属性

 eg1:<embed src="helloworld.mp4" width="800" height="400"/>
 eg2:<embed src="images/纸短情长.mp3" type=""/>

20.<canvas> </canvas> 标签
canvas只是个图形容器，通过脚本js来绘制图形.(比如图标和其他图像).实现非常复杂的动画效果.

 eg: <canvas id="myCanvas">你的浏览器不支持canvas标签</canvas>
        <script type="text/javascript">
                var canvas=document.getElementById('myCanvas');
             var ctx=canvas.getContext('2d');
                ctx.fillStyle='#FF0000';
                ctx.fillRect(0,0,80,100);
        </script>

   1.document          文档
   2.getElementById    通过ID获取元素
   3.ctx(getcontext)   获取上下文
   4.fillstyle         填充样式
   5.fillRect          填充剂

Day4 HTML新增元素与布局

猜你喜欢