HTML 列表、表格、媒体元素【快速掌握知识点】

简介: HTML 列表、表格、媒体元素【快速掌握知识点】

一、什么是列表

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

二、无序列表

1. <ul><!--声明无序列表-->
2. <li>新建标签页1</li>
3. <li>新建标签页2</li>
4. <li>新建标签页3</li>
5. <li>新建标签页4</li>
6. <!--声明列表项-->
7. </ul>

三、无序列表的特性

没有顺序,每个<li>标签独占一行(块元素);默认<li>标签项前面有个实心小圆点;

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

四、有序列表

1. <ol><!--声明无序列表-->
2. <li>新建标签页1</li>
3. <li>新建标签页2</li>
4. <li>新建标签页3</li>
5. <li>新建标签页4</li>
6. </ol><!--声明列

五、有序列表的特性

有顺序,每个<li>标签独占一行(块元素);默认<li>标签项前面有顺序标记;一般用于排序类型的列表,如试卷、问卷选项等。

六、定义列表

1. <dl><!--声明定义列表-->
2. <dt>水果</dt><!--声明列表项-->
3. <dd>苹果</dd>
4. <dd>桃子</dd>
5. <dd>李子</dd>
6. <!--声明列表项-->
7. </dl>

七、定义列表的特性

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

八、列表对比

类型

说明

项目符号

无序列表

<ul>标签来实现

<li>标签表示列表项

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

有序列表

<ol>标签来实现

<li>标签表示列表项

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

定义类表

<dl>标签来实现

<dt>标签定义列表项

<dd>标签定义内容

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

九、如何实现在网页上播放视频和音频?

1、视频元素:video

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

2、自动播放属性:autoplay

1. <video autoplay>
2. <source src="video/video.webm" type="video/webm"/>
3. <source src="video/video.mp4" type="video/mp4"/>
4. </video>

1、音频元素:audio

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

2、自动播放属性:autoplay

1. <audio controls>
2. <source src="music/music.mp3" type="audio/mpeg"/>
3. </audio>


目录
相关文章
|
3天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
本文涵盖前端知识点扩展、HTML标签(如video、input、canvas)、datalist和details标签的使用方法,以及CSS布局技巧(如margin、overflow: hidden和动态height)。文章旨在分享作者的学习经验和实用技巧。
14 1
[HTML、CSS]知识点
HTML 列表3
HTML 自定义列表 (&lt;dl&gt;) 用于描述术语或名称的定义。每个术语由 &lt;dt&gt; 标签表示,其定义或描述由 &lt;dd&gt; 标签表示。
|
14天前
HTML 元素
HTML文档由HTML元素定义,元素包括开始标签、内容和结束标签。某些元素内容为空,可在开始标签中关闭。大多数元素可拥有属性,且元素间可相互嵌套,形成复杂结构。
HTML 列表4
HTML 列表标签用于创建不同类型的列表。`&lt;ol&gt;` 和 `&lt;ul&gt;` 分别定义有序和无序列表,`&lt;li&gt;` 定义列表项。`&lt;dl&gt;` 用于定义描述列表,其中 `&lt;dt&gt;` 定义术语,`&lt;dd&gt;` 定义术语的描述。
HTML 列表2
HTML 有序列表使用数字标记列表项,以 `&lt;ol&gt;` 开始,每个项目用 `&lt;li&gt;` 标签表示。
HTML 列表1
HTML支持三种类型的列表:有序列表、无序列表和定义列表。无序列表使用 `&lt;ul&gt;` 标签表示,列表项使用 `&lt;li&gt;` 标签。
|
27天前
|
数据采集 数据安全/隐私保护
html常见的表单元素有哪些,html表单元素有哪些?
html常见的表单元素有哪些,html表单元素有哪些?
15 0
|
3月前
|
前端开发
探索HTML表格的奥秘:学会使用 <table>标签创建精美表格
探索HTML表格的奥秘:学会使用 <table>标签创建精美表格
|
4月前
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
242 0
HTML【详解】表格 table 标签(table的属性,语义化表格,简易表格,合并单元格)
|
6月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML2、table表格标签
H5+CSS3+JS逆向前置——HTML2、table表格标签
57 0