[学习笔记] 静态网页开发基础之列表、表格与媒体元素

# 学习 # · 2020-04-11

列表

1、列表:列表就是信息资源的一种展示形式,它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷地获得相应的信息。

2、无序列表:

(1)基本语法:

<!--
<ul type="circle">:空心圆形
<ul type="disc">:实心圆形
<ul type="square">:实心方形
若不加类型,则默认实心圆形。
-->
<ul>
    <li>第一项</li>
     <li>第二项</li>
     <li>...</li>
</ul>

(2)特性:没有顺序,每个<li>标签独占一行(块元素), 默认<li>标签项前面有个实心小圆点,一般用于无序类型的列表。

3、有序列表:

(1)基本语法:

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

(2)特性:有顺序,每个<li>标签独占一行(块元素) ,默认<li>标签项前面有顺序标记,一般用于排序类型的列表。

4、定义列表:

(1)基本语法:

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

(2)特性:没有顺序,每个<dt>标签,<dd>标签独占一行(块元素),默认没有标记, 一般用于(一个标题下有一个或多个列表项)*n的情况。


表格

1、表格是块状元素,发明该标签的初衷是用于显示表格数据。

2、表格的优点:简单通用,结构稳定。

3、表格的基本结构:

(1)单元格:是表格的最小单位,一个或多个单元格纵横排列组成了表格。

(2)行:一个或多个单元格横向堆叠形成了行。

(3)列:由于表格单元格的宽度必须一致,因此单元格纵向排列形成了列。

4、表格的基本语法:

<table>
    <tr>
         <th>第一个单元格的内容</th>
         <th>第二个单元格的内容</th>
     </tr>
     <tr>
         <td>第一个单元格的内容</td>
         <td>第二个单元格的内容</td>
     </tr>
</table>

5、表格的跨列与跨行:

(1)colspan:跨列。

(2)rowspan:跨行。

(3)跨行和跨列以后,并不改变表格的特点,同行的总高度一致,同列的总宽度一致。


HTML5的媒体元素

1、视频元素:

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

<video autoplay><!--autoplay:自动播放-->
    <source src="video/video.webm" type="video/webm"/>
    <source src="video/video.mp4" type="video/mp4"/>
    你的浏览器不支持video元素
</video>

2、音频元素:

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

<audio controls>
    <source src="music/music.mp3" type="audio/mpeg"/>
    <source src="music/music.ogg" type="audio/ogg"/>
    你的浏览器不支持audio元素
</audio>

HTML5的结构元素

1、header:标题头部区域的内容。

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

3、section:Web页面中一块独立区域。

4、article:独立的文章内容。

5、aside:相关内容或应用(常用于侧边栏)。

6、nav:导航类辅助内容。


iframe框架

1、iframe框架的作用:使页面中的部分内容用框架实现,一般用于在页面中引用站外的页面内容,使用方便。

2、iframe框架的基本语法:

<iframe src="引用页面地址" name="框架标识名"...></iframe>
如无特殊说明,本博所有文章均为博主原创。

如若转载,请注明出处:一木林多 - https://www.l5v.cn/archives/256/

评论