首页 前端知识 HTML 列表 表格 媒体元素 HTML5结构框架 iframe内联框架

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

2024-07-24 23:07:32 前端知识 前端哥 574 601 我要收藏
无序列表

<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 muted="muted" controls="controls" loop="loop">
        <source src="css/1.mp3" type="audio/mpeg"></source>
</audio>
​
<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>:内联框架滑轮 
转载请注明出处或者链接地址:https://www.qianduange.cn//article/14318.html
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!