zoukankan      html  css  js  c++  java
  • 第二章 列表、表格与媒体元素



    列表:
    列表就是信息资源的一种展示形式。
    列表的分类:无序列表、有序列表、定义列表
    无序列表语法:
    <ul>
    <li>内容</li>
    </ul>
    无序列表的特性
    没有顺序,每个<li>标签独占一行(块元素)
    默认<li>标签项前面有个实心小圆点
    一般用于无序类型的列表,如导航、侧边栏新闻、有规律的图文组合模块等


    有序列表语法:
    <ol>
    <li>内容</li>
    </ol>
    有序列表的特性
    有顺序,每个<li>标签独占一行(块元素)
    默认<li>标签项前面有顺序标记
    一般用于排序类型的列表,如试卷、问卷选项等


    定义列表语法:
    <dl>(声明定义列表)
    <dt></dt>(声明列表项)
    <dd></dd>(声明列表内容)
    </dl>
    定义列表的特性
    没有顺序,每个<dt>标签、<dd>标签独占一行(块元素)
    默认没有标记
    一般用于一个标题下有一个或多个列表项的情况


    表格:
    跨列:colspan="横向跨的单元格数"
    跨行:rowspan="纵向跨的单元格数"


    表格语法:
    <table>(表格标签)
    <tr>(行标签)
    <td></td>(单元格标签)
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    </table>


    表格的跨列
    <table>(表格标签)
    <tr>(行标签)
    <td   (rowspan)colspan="n"(所跨的列数)></td>(单元格标签)
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    </tr>
    </table>




    媒体元素:
    视频元素(video)、音频元素(audio)
    -----------------------------------------
    视频元素(video):
    <!--controls(video播放视频)   autoplay(自动播放)    controls(提供播放、暂停和音量的控件)-->
    <video controls="controls">
    <source src="video/video.webm" type="video/webm"/>
    <source src="video/video.mp4" type="video/mp4"/>
    </video>
    音频元素(audio):
    <!--controls(提供播放、暂停和音量的控件)-->
    <audio controls="controls">
    <source src="video/music.mp3" type="audio/mp3"/>
    <source src="video/music.ogg" type="audio/ogg"/>
    </audio>


    ----------------------------------------


    HTML5的结构元素:(header、section、article、nav、aside、footer)
    <!--article(独立的文章内容) aside(相关内容或应用-常用于侧边栏)  nav()导航类辅助内容-->
    <header>
    <h1>网页头部</h1>
    </header>
    <section>
    <h1>网页主体部分</h1>
    </section>
    <footer>
    <h1>网页底部</h1>
    </footer>
    永远的新手
  • 相关阅读:
    asp.net 导出excel的一种方法
    微软通过.NET Native为Windows Store应用提速
    .NET基金会成立
    XDomainRequest object
    转 web.config设置之system.webServer 详细介绍,为网站设置默认文档
    P·C·L 了解
    无法对 数据库'XXXXX' 执行 删除,因为它正用于复制
    web性能优化
    web 分享代码片段
    Microsoft OWIN
  • 原文地址:https://www.cnblogs.com/chenzhanxu/p/14771616.html
Copyright © 2011-2022 走看看