HTML 列表 表格 媒体元素 HTML5结构框架 iframe内联框架

目录

无序列表

有序列表

定义列表

表格

媒体元素

视频播放

音频播放

HTML5结构框架

iframe内联框架

---

无序列表

<ul> </ul>:无序列表

<ul>:声明无序列表

<li>:声明列表项

无序列表的特性：

没有顺序，每个<li>标签独占一行（块元素）

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

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

<ul type="">
            <li>111</li>
            <li>222</li>
</ul>
<type="circle">:空心圆
<type="disc">:实心圆
<type="square">:方形    

有序列表

<ol> </ol>:有序列表

<ol>:声明有序列表

<li>:声明列表项

有序列表的特性：

1.有顺序，每个<li>标签独占一行（块元素）

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

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

<ol>
            <li>111</li>
            <li>222</li>
</ol>

定义列表

<dl> </dl>:定义列表

<dl>:声明定义列表

<dt>:声明列表项

<dd>声明列表项内容

定义列表的特性：

没有顺序，每个<dt>标签、<dd>标签独占一行，默认没有标记

一般用于一个标题下有一个或多个列表项的情况

<dl>
            <dt>水果</dt>
            <dd>苹果</dd>
            <dd>桃子</dd>
</dl>

表格

<table border="1">
            <tbody align="middle">
            <tr>
                <td colspan="3" >aaa</td>
                <td >bbb</td>
                <td >ccc</td>
            </tr>
            <tr>
                <td >ddd</td>
                <td rowspan="3" valign="top" >eee</td>
                <td >fff</td>
                <td colspan="2" rowspan="2" valign="top" >ggg</td>
            </tr>
            <tr>
                <td >hhh</td>
                <td >iii</td>
            </tr>
            <tr>
                <td >jjj</td>
                <td >kkk</td>
                <td >mmm</td>
                <td >nnn</td>
            </tr></tbody>
        </table>
<table>:表格标签 <tr></tr>:行标签 <td></td>:单元格标签
<border>:表格边框 <colspan>:合并列 <rowspan>:合并行
<align>:设置文字位置（left左 middle中 right右）
<valign>:设置文字高低（top顶 middle中 bottom下）
在HTML5中：<thead>表头 <tbody>内容 <tfoot>总结 <th>（自带加粗并居中字体）

媒体元素

视频播放

<video muted="muted" autoplay="autoplay" loop="loop" 
       width="600" height="600" controls>
        <source src="css/bizhishipin.mp4" type="audio/mp4"></source>
        <source src="css/bizhishipin.ogg" type="audio/ogg"></source>
</video>
​
<video>:视频播放器 <muted>:静音播放 <autoplay>:自动播放 <loop>:循环播放
<controls>:播放按钮 <source>:浏览器所支持的视频格式

音频播放

​
<audio>:音频播放器  

<audio muted="muted" controls="controls" loop="loop">
        <source src="css/1.mp3" type="audio/mpeg"></source>
</audio>

HTML5结构框架

header：标题头部区域内容

section：Web页面中的一块独立区域

footer：标题脚部区域内容

nav：导航类辅助内容

iframe内联框架

<h1>使用iframe嵌套网页</h1><br />
        <a href="http://www.baidu.com"  target="baidu">点击打开百度</a><br />
        <a href="http://www.bilibili.com"  target="baidu">点击打开B站</a><br />
        <a href="index7.html"  target="baidu">点击打开了一个HTML页面</a><br />
        <iframe name="baidu" src="http://www.163.com" / width="600" height="600"         frameborder="0" scrolling="no">

​
<iframe>:内敛框架标签 <name>:框架标识名
<frameboder>:内联框架边框 <scroling>:内联框架滑轮