码迷,mamicode.com
首页 > 其他好文 > 详细

列表,表格与媒体元素

时间:2017-08-27 12:05:27      阅读:166      评论:0      收藏:0      [点我收藏+]

标签:描述   web页面   article   浏览器   表格   方向   为什么   简单   不同   

1.什么是列表?

  列表就是信息资源的一种展示形式

2.列表及其应用

  1)无序列表及其应用

    无序列表由<ul>标签和<li>标签组成,使用<ul>标签作为无序列表的声明,使用<li>标签作为每个列表项的起始

  语法:

  

<ul>
    <li>第一项</li>
    <li>第二项</li>
</ul>

   特性:

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

      (2)默认<li>标签项前面有个实心的小圆点

      (3)一般用于无序类型的列表,如导航,侧边栏新闻等

  2)有序列表及其应用

    有序列表由<ol>标签和<li>标签组成,使用<ol>标签作为有序列表的声明,使用<li>标签作为每个列表项的起始,有序列表嵌套同无序列表一样,只能<ol>标签里嵌套<li>标签

  语法:

<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>

  特性:

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

    (2)默认<li>标签前面有顺序标记

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

  3)定义列表及其应用

    定义列表是一种很特殊的列表形式,它是标题及列表项的结合.定义列表的语法相对于有序和无序列表不太一样,它使用<dl>标签作为列表的开始,使用<dt>标签作为每个列表项的起始,而对于每个列表项的定义则使用<dd>标签来完成

  语法:

<dl>
    <dt>标题一</dt>
    <dd>第一项</dd>
    <dd>第二项</dd>
</dl>

  特性:

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

    (2)默认没有标记

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

  4)列表常用场合及列表使用中的注意事项

    (1)无序列表中的每项都是平级的,没有级别之分,并且列表中的内容一般都是相对简单的标题性质的网页内容,有序列表会依据列表项的顺序进行显示

    (2)在实际的网页应用中,无序列表比有序列表应用得更加广泛,有序列表ol-li一般用于显示带有顺序编号的特定场合

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

3.表格

  1)为什么使用表格?

    (1)简单通用

    (2)结构稳定

  2)表格的基本结构

    (1)单元格

    (2)行

    (3)列

  3)表格的基本语法

  语法:

<tr>
    <th>第一行第一个</th>
    <th>第一行第二个</th>
</tr>


<tr>
    <td>第一列第一个</td>
    <td>第二列第一个</td>
</tr>

    创建表格如下:

      (1)创建表格标签<table>...</table>

      (2)在表格标签<table>...</table>里创建行标签<tr>...</tr>可以有多行

      (3)在第一行标签<tr>...</tr>里创建单元格标签<th>...</th>可以创建表格标题

      (4)在行标签<tr>...</tr>里创建单元格标签<td>...</td>可以有多个单元格

4.表格的跨行与跨列

  1)表格的跨列

    跨列是指单元格的横向合并

  语法:

<table>
    <tr>
        <td colspan="所跨的列数">单元格内容</td>
    </tr>
</table>

  2)表格的跨行

    跨行是指单元格在垂直方向上的合并

  语法:

<table>
    <tr>
        <td rowspan="所跨的行数">单元格内容</td>
    </tr>
</table>

  跨行或跨列操作时,需要以下两步骤:

    (1)在需合并的第一个单元格,设置跨列或跨行属性,如colspan="3"

    (2)删除被合并的其他单元格,即把某个单元格看成多个单元格合并后的单元格

  3)表格跨列与跨行的综合应用

5.HTML5的媒体元素

  1)媒体元素概念

  2)视频元素

    (1)video元素的基本语法(用来播放视频文件的)

   语法:

<video src="视频路径" controls="controls"></video>


    (2)video元素的应用

<body>
<video controls>
    <source src="video/video.webm"/>
    <source src="video/video.mp4"/>
</video>
</body>

  注意:

  1.source元素连接到不同的视频文件,浏览器会自动选择第一个可以识别的格式

  2.在video元素中指定controls属性可以在页面上以默认的方式进行播放控制

  设置auto[lay属性后,不需要与用户进行任何交互,就可以让视频文件加载完成后自动播放,所以人们大部分都不喜欢,所以要慎用

  3)音频元素

    (1)audio元素的基本语法

  语法:

<audio src="音频路径" controls="controls"></video>

    (2)audio元素的应用

6.HTML5的结构元素

  

元素名 描述
header 标题头部区域的内容(用于页面或页面中的一块区域)
footer 标记脚部区域的内容(用于整个页面或页面的一块区域)
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用(常用于侧边栏)
nav 导航类辅助内容

 

7.<iframe>框架

  1)语法:

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

  2)属性使用

    常用属性包括name,width,height

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

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

 

 

    

    
      

 

列表,表格与媒体元素

标签:描述   web页面   article   浏览器   表格   方向   为什么   简单   不同   

原文地址:http://www.cnblogs.com/fl72/p/7439912.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!