zoukankan      html  css  js  c++  java
  • 【学习笔记】HTML基础:列表、表格与媒体元素

    一、列表是信息资源的一种展现形式,它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能够快速的获取相应的信息。

      1.无需列表

      <ul>

        <li>第一项</li>

        <li>第二项</li>

        <li>第三项</li>

      </ul>

    tips:遵循W3C标准,<ul>标签中只能嵌套<li>标签,不能嵌套其他标签;

    <li>标签里面可以嵌套任意标签。

      无需列表的特性:

        1.没有顺序,每个<li>标签独占一行;

        2.默认<li>标签项前面有一个实心小圆点(使用list-style:none或list-style-type:none去掉标记)

        3.一般用于无序类型的列表,如导航、侧边栏新闻、有规律的图文组合模块等。

      2.有序列表

      <ol>

        <li>第一项</li>

        <li>第二项</li>

        <li>第三项</li>

      </ol>

      有序列表的特性:

        1.有顺序,每个<li>标签独占一行(块元素)

        2.默认<li>标签项前面有顺序标记;

        3.一般用于排序类型的列表,如试卷、问卷选项等。

      3.定义列表:定义列表是一种很特殊的列表形式,它是标题及列表项的结合

      <dl>

        <dt>标题一</dt>

        <dd>第一项</dd>

        <dd>第二项</dd>

        <dt>标题二</dt>

        <dd>第一项</dd>

      </dl>

      定义列表的特性:

        1.没有顺序,每个<dt>、<dd>标签独占一行

        2.默认没有标记

        3.一般用于(一个标题下有一个或多个列表项)*n的情况

    tips:

      1.无需列表中的没想都是平级的,没有级别之分,并且列表中的内容一般都是相对简单的标题性质的网页内容。

    有序列表会依据列表想的顺序进行显示。

      2.无需列表比有序列表应用得更加广泛,有序列表ol-li一般用于显示带有顺序编号的特定场合

      3.定义列表一般适用于带有标题和标题解释性内容的场合。

     二、表格(块元素)初衷用于显示表格数据

      简单通用、结构稳定。

      基本结构:单元格、行、列。

      1.语法:

    <table>

      <tr>

        <th>第一个单元格的表格标题</th>

        <th>第一个单元格的表格标题</th>

        <th>第一个单元格的表格标题</th>

      </tr>

      <tr>

        <td></td>

        <td></td>

        <td></td>

      </tr>

      <tr>

        <td></td>

        <td></td>

        <td></td>

      </tr>

    </table>

      2.表格的跨行:rowspan="所跨的行数";

      3.表格的跨列:colspan="所跨的列数";

    三、媒体元素

      1.视频元素

        video元素的基本语法:<video src="视频路径" controls="controls">如果浏览器不支持video元素,提示:您的浏览器不支持video标签</video>

      <video controls autoplay>以默认方式自动播放loop循环播放

        <source src="*.webm"/>

        <source src="*.ogg"/>

        <source src="*.mp4"/>

      </video>

      2.音频元素

        audio元素的基本语法:<audio src="音频路径" controls="controls"></audio>

      <audio controls>

        <source src="*.ogg"/>

        <source src="*.mp3"/>

        <source src="*.wav"/>

      </audio>

    四、HTML5的结构元素

      1.header:标记头部区域的内容

      2.footer:标记脚部区域的内容

      3.section:Web页面中的一块独立区域

      4.article:独立的文章内容

      5.aside:相关内容或应用(侧边栏)

      6.nav:导航类辅助内容

    五、<iframe>内联框架:使页面中的部分内容用框架实现,一般用于在页面中引用站外的页面内容,使用方便、灵活。

      <iframe src="引用页面地址" name="框架标识名"...></iframe>

      *<iframe>属性的应用

      1.在被打开的框架上加上name属性

      <iframe name="mainFrame" src="subFrame.html"/>

      2.在超链接上设置target目标窗口为希望显示的框架窗口名

      <a href="subFrame.html" target="mainFrame">文字或者图片</a>

      

  • 相关阅读:
    dirname basename 截取路径中的目录以及文件名
    Singleton 单例模板
    人生最后一个10年-白银时代
    自动填充英文字母序列
    关于最近使用文档的几个技巧
    关于最近使用文档的几个技巧
    The King of Excel Geek 0.1版本
    Tkinter 学习
    test
    检测电话号码的python程序(一)
  • 原文地址:https://www.cnblogs.com/tengqiuyu/p/6957477.html
Copyright © 2011-2022 走看看