HTML5第二章列表表格与媒体元素

最新推荐文章于 2024-08-30 22:48:08 发布

Z z~~

最新推荐文章于 2024-08-30 22:48:08 发布

阅读量862

点赞数 15

文章标签： html5 媒体前端

本文链接：https://blog.csdn.net/ke67855523/article/details/141722290

版权

一、列表

1.无序列表

<ui>:声明无序列表

<li>:声明列表

无序列表中的每项都是平级的，没有级别之分，并且列表中的内容一般都是相对简单的标题性质的网页内容.

<ul>
      <li>范冰冰演藏族女孩</li><!--没有顺序，每个<li>标签独占一行（块元素）-->
      <li>撞死两个人后自拍</li><!--默认<li>标签项前面有个实心小圆点-->
      <li>诗隆甜蜜出游</li>
      <li>一线城市楼市退烧</li>
</ul>

2.有序列表

<ol>:声明有序列表

<li>；声明列表

有序列表ol-----li一般用于显示带有顺序编号的特定场合.

<ol><!--在<ol>里面<li>标签项前面有顺序标记-->
  <li>范冰冰演藏族女孩</li>
  <li>撞死两个人后自拍</li>
  <li>诗隆甜蜜出游</li>
  <li>一线城市楼市退烧</li>
</ol>

3.定义列表

<dl>:声明定义列表

<dt>:生命列表

<dd>:定义列表内容

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

<dl><!--没有顺序，每个<dt>标签、<dd>标签独占一行，默认没有标记-->
    <dt>水果</dt><!--一般用于一个标题下有一个或多个列表项的情况-->
    <dd>苹果</dd>
    <dd>桃子</dd>
    <dd>李子</dd>
</dl>

二、表格

<table>:表格标签

<tr>:行标签

<td>:单元表格标签

<thead>...<th>:头部表格

<tbody>...<tr>...<td>:身体表格

<tfoot>...<tr>...<td>:底部表格

 <body>
        <table border="1"width="500"height="400">
            <thead>
                <th>总页面流量</th>
                <th>共计来访</th>
                <th>会员</th>
                <th>游客</th>
            </thead>
            <tbody>
            <tr>
                <td>9756488</td>
                <td>97656</td>
                <td>7538087</td>
                <td>43364677</td>
            </tr>
            </tbody>
            <tr>
                <td>46776686</td>
                <td>85544</td>
                <td>69357</td>
                <td>568787</td>
            </tr>
            <tr>
                <td>7538087</td>
                <td>546774</td>
                <td>476897</td>
                <td>334545</td>
            </tr>
            <tfoot>
            <tr>
                <td>平均每人浏览</td>
                <td colspan="3">1.58</td>
            </tr>
            </tfoot>
        </table>
    </body>
</html>

<colspan>:所跨的列数

<rowspan>:所跨的行数

<align>:水平对齐 left左对齐 right右对齐 center居中

<valign>:垂直对齐 top上 bottom下 middle居中

<tr align="center">
        <td colspan="3">学生成绩</td>
</tr>
<tr>
        <td rowspan="2">张三</td>
        <td>语文</td>
        <td>98</td>
</tr>

媒体元素

1.视频元素

<video src>:指定要播放的视频文件的路径

<controls>:提供播放、暂停和音量的控件

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

2.音频元素

<audio src>:指定要播放的音频文件的路径

<controls>:提供播放、暂停和音量的控件

3.属性

<autoplay="autoplay">:自动播放

<loop>:循环播放

<muted>:静音播放

三、页面结构分析

<header>:头部标题内容

<footer>：脚部内容

<section>：wed页面中的一块独立区域

<article>：独立的文章内容

<aside>：相关内容与应用

<nav>；导航类辅助内容

四、iframe的使用

<iframe src>:引用页面地址

<body>
        <header>    
        <a href="https://www.baidu.com/"  target="a1">点击打开百度</a></br>
        <a href="https://v.qq.com/channel/choice?channel_2022=1"  target="a1">点击打开腾讯视频</a></br>
        <a href="index7.html"  target="a1">点击打开index7</a></br>
        </header>
        <section><h2>网页主体部分</h2></section>
        <iframe name="a1" src="" /width="1000"height="500">
        <footer><h2>网页底部</h2></footer>

</body>

Z z~~

关注

15
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
HTML5第二章列表表格与媒体元素

:生命列表<dd>:定义列表内容定义列表一般适用于带有标题和标题解释性内容的场合<dl><dt>水果苹果</dd><dd>桃子</dd><dd>李子
复制链接

扫一扫