列表,表格与媒体元素

一.列表   列表就是信息资源的一种展示形式  1.列表及其应用    1)无序列表      无序列表由<ul>标签和<li>标签组成,使用<ul>标签作为无序列表的声明,使用<li>标签作为每个列表项的起始     语法:

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

   特性:     >没有顺序,每个<li>标签独占一行(块元素)       >默认<li>标签项前面有个实心的小圆点       >一般用于无序类型的列表,如导航,侧边栏新闻等    2)有序列表      有序列表由<ol>标签和<li>标签组成,使用<ol>标签作为有序列表的声明,使用<li>标签作为每个列表项的起始,有序列表嵌套同无序列表一样,只能<ol>标签里嵌套<li>标签     语法:

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

    特性:       >有顺序,每个<li>标签独占一行(块元素)       >默认<li>标签前面有顺序标记       >一般用于排序类型的列表,如试卷,问卷选项等    3)定义列表      定义列表是一种很特殊的列表形式,它是标题及列表项的结合.定义列表的语法相对于有序和无序列表不太一样,它使用<dl>标签作为列表的开始,使用<dt>标签作为每个列表项的起始,而对于每个列表项的定义则使用<dd>标签来完成     语法:

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

    特性:       1)没有顺序,每个<dt>标签,<dd>标签独占一行(块元素)       2)默认没有标记       3)一般用于(一个标题下有一个或多个列表项)*n的情况   2.列表常用场合及列表使用中的注意事项     1)无序列表中的每项都是平级的,没有级别之分,并且列表中的内容一般都是相对简单的标题性质的网页内容,有序列表会依据列表项的顺序进行显示     2)在实际的网页应用中,无序列表比有序列表应用得更加广泛,有序列表ol-li一般用于显示带有顺序编号的特定场合     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>可以有多个单元格    为了显示表格的轮廓,一般还需要设置<table>标签的border边框属性,指定边框的高度  4.表格的跨行与跨列    1)表格的跨列:      跨列是指单元格的横向合并     语法:

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

   col为column(列)的缩写,span为跨度,所以colspan的意思为跨列    2)表格的跨行:      跨行是指单元格在垂直方向上的合并     语法:

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

   row为行的意思,rowspan即跨行   跨行或跨列操作时,需要以下两步骤:      >在需合并的第一个单元格,设置跨列或跨行属性      >删除被合并的其他单元格,即把某个单元格看成多个单元格合并后的单元格    3)跨行and跨列:    >有时表格中既有跨行又有跨列的情况,从而形成了相对复杂的表格显示    >跨行和跨列以后,并不改变表格的特点,同行的总高度一致,同列的总宽度一致    >表格中各单元格的宽度或高度互相影响,结构相对稳定,但缺点是不能灵活地进行布局控制 三.HTML5的媒体元素   1.视频元素     1)video元素的基本语法:    用来播放视频文件,支持Ogg(Ogg Vorbis的缩写),MPEG4,WebM等视频格式      语法:

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

   语法解析:     1)src属性用于指定要播放的视频文件的路径     2)controls属性用于提供播放,暂停和音量控件     3)也可以使用width和height设置视频的宽度和高度    注:如果浏览器不支持video元素,可以在video元素中间插入一段文字用于提示,这样就可以显示这段文字给用户:     <video src="视频路径" controls="controls">你的浏览器不支持video标签</video>     2)video元素的应用:    示例:

<body>
    <video controls>
       <source src="video/video.webm"/>
       <source src="video/video.mp4"/>
       你的浏览器不支持video标签
    </video>
</body> 

    注:      1)source元素连接到不同的视频文件,浏览器会自动选择第一个可以识别的格式:      >在video中虽然可以使用src属性链接视频路径,可是只能链接一种格式的视频,很难让每种浏览器都支持这种格式.所以就出现了source元素来解决这一问题,source元素嵌套在video里面,并且可以出现多次,每个source元素对应一种格式的视频,这样,浏览器会在这些格式中选择自己可以识别的一种来进行播放      2)在video元素中指定controls属性可以在页面上以默认的方式进行播放控制.如果不加这个属性,那么视频就不能直接播放   `  还有一种方法解决在页面内播放视频的问题即在video元素里设置另一个属性autoplay       设置auto[lay属性后,不需要与用户进行任何交互,就可以让视频文件加载完成后自动播放,所以人们大部分都不喜欢,所以要慎用   2.音频元素     1)audio元素的基本语法:    用来播放音频文件,支持Ogg,MP3,WAV等音频格式     语法:

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

   语法解析:     1)src属性用于指定要播放的视频文件的路径     2)controls属性用于提供播放,暂停和音量控件     3)也可以使用width和height设置视频的宽度和高度    注:如果浏览器不支持audio元素,可以在audio元素中间插入一段文字用于提示,这样就可以显示这段文字给用户:     <audio src="音频路径" controls="controls">你的浏览器不支持audio标签</audio>     2)audio元素的应用:    示例:

<body>
    <audio controls>
       <source src="music/music.mp3"/>
       <source src="music/music.ogg"/>
    </audio>
</body> 

   视频元素和音频元素的语法及使用都一样,source用来链接到不同的音频文件,浏览器会自动选择第一个可以识别的格式  3.经验:   1)通过source引入的视频文件的格式至少包括WebM和MPEG4 或 Ogg和MPEG4   2)通过source引入的音频文件的格式至少包括WAV和MP3 或 Ogg和MP3 四.HTML5的结构元素

元素名

描述

header

标题头部区域的内容(用于页面或页面中的一块区域)

footer

标记脚部区域的内容(用于整个页面或页面的一块区域)

section

Web页面中的一块独立区域

article

独立的文章内容

aside

相关内容或应用(常用于侧边栏)

nav

导航类辅助内容

五.<iframe>框架  <iframe>框架的主要作用是使页面中的部分内容用框架实现,一般用于在页面中引用站外的页面内容,使用比较方便,灵活   1.语法:

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

  2.使用:     <iframe>内联框架的常用属性包括name,width,height.其中name属性可以和锚链接结合起来实现页面间的互相跳转

    <!--1)在被打开的框架上加name属性-->
           <iframe name="mainFrame" src="subframe/the_second.html" />
  <!--2)在超链接上设置target目标窗口属性为希望显示的框架窗口名-->
       <a herf="subframe/the_second.html" target="mainFrame">下边显示第二页</a>    

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学 Web 前端

从零开始学 Web 之 BOM(二)定时器

多次点击“摇起来”按钮的时候,timeId 的值会有多个,而停止的时候,只会清理最后一个值,其他的值对应的定时器没有清理。

791
来自专栏何俊林

打造狂拽炫酷的主流自定义侧滑控件(仿酷狗和QQ5.0)

前言:自定义侧滑控件是一直是很多在app端的软件用的比较多的方式,本文来自 Mero技术博客授权本公众号独家发布文章,Mero技术博客blog地址:http:/...

19110
来自专栏HTML5学堂

2016.06 第三周 群问题分享

HTML+CSS 怎么让一个容器里面不管存在2个子元素还是1个子元素都能垂直居中 2016.06.20~2016.06.24 核心内容 弹性布局 参考答案 实例...

2999
来自专栏地方网络工作室的专栏

css3 做一个会动的菜单 menu 按钮动画效果

css3 做一个会动的菜单 menu 按钮动画效果 需要做一个会的动画按钮效果,小前端部知道如何实现,我看了一眼需要的效果,给他写了一个简单的 demo。 设计...

27110
来自专栏从零开始学 Web 前端

从零开始学 Web 之 Vue.js(五)Vue的动画

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧!

1343
来自专栏十月梦想

bootstrap表格

条纹表格.table-striped(作用在table的class类名),实现隔行换色

682
来自专栏偏前端工程师的驿站

CSS魔法堂:display:none与visibility:hidden的恩怨情仇

 还记得面试时被问起"请说说display:none和visibility:hidden的区别"吗?是不是回答完display:none不占用原来的位置,而vi...

1493
来自专栏yang0range

html常用标签

title也是有助于SEO搜索引擎优化的 HTML不是依靠缩进来表示嵌套的,就是看标签的包裹关系。 HTML中所有的文字之间,如果有空格、换行、tab都将被...

1242
来自专栏ppjun专栏

Android十八章:帧动画

下面我们来说什么是帧动画。小时候有一种书的右下角把每一个动作画好,再快速的翻看,就可以看到一连串的动画了,这就是帧动画。 帧动画只要几张图片就能加载出动画效果...

791
来自专栏编程

CSS布局之垂直居中一

CSS中的水平居中是非常容易实现的,比如对于行内元素,将它的父级元素设置text-align为center既可。 ? 对于块级元素,设置它的margin:aut...

1867

扫码关注云+社区