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>


目录
相关文章
|
5天前
|
前端开发
html中行内元素、块级元素、行内快元素都有哪些,以及区别
html中行内元素、块级元素、行内快元素都有哪些,以及区别
15 1
|
9天前
|
JavaScript 前端开发 UED
【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
【5月更文挑战第2天】【Web 前端】如何将一个 HTML 元素添加到 DOM 树中的?
|
11天前
|
移动开发 JavaScript 前端开发
【专栏:HTML进阶篇】HTML模板与Web组件:可复用的网页元素
【4月更文挑战第30天】HTML模板和Web组件提升网页开发效率和可维护性。HTML模板,如&lt;template&gt;元素和服务器端模板引擎,用于创建可复用的HTML结构。Web组件是自定义的HTML元素,结合影子DOM和模板,实现封装的可重用组件。两者助力构建高效、现代的网页和网站。
|
11天前
|
前端开发 JavaScript UED
【专栏:HTML基础篇】HTML列表与表格:展示数据的两种方式
【4月更文挑战第30天】本文探讨了HTML中的列表和表格两种元素在网页设计中的重要性。无序列表(`&lt;ul&gt;`)和有序列表(`&lt;ol&gt;`)用于呈现相关项目,前者常用于导航菜单,后者适合有序信息。表格(`&lt;table&gt;`)用于展示结构化数据,通过`&lt;tr&gt;`、`&lt;td&gt;`和`&lt;th&gt;`定义行和单元格。尽管简单,列表和表格在内容呈现和用户体验上起着关键作用。然而,响应式设计趋势下,表格可能被更灵活的布局替代,复杂数据展示则可借助JavaScript库提升交互性。正确使用这些基础元素能有效组织信息,创建优质网页。
|
11天前
|
移动开发 前端开发 JavaScript
【专栏:HTML基础篇】深入HTML元素:理解结构与内容
【4月更文挑战第30天】本文探讨了HTML在构建网页中的核心作用,HTML元素构成网页结构与内容,包括`&lt;!DOCTYPE html&gt;`、`&lt;html&gt;`、`&lt;head&gt;`、`&lt;body&gt;`等基本元素及`&lt;div&gt;`、`&lt;span&gt;`、`&lt;a&gt;`、`&lt;img&gt;`等丰富标签。理解并恰当使用这些元素能创建清晰结构、优化SEO、增强交互性,并实现语义化,为打造功能强大且美观的网站奠定基础。进一步学习CSS和JavaScript将提升网页视觉效果和互动性。
|
移动开发 编解码 HTML5
HTML5媒体(音频/视频)
HTML5媒体(音频/视频)
HTML5媒体(音频/视频)
|
移动开发 HTML5 编解码
HTML5媒体(音频/视频)
摘要:   在HTML5出现之前,web媒体大部分通过Flash来实现。这种方式造成了文件大加载慢,影响网站性能,开发难度高,维护麻烦,不易扩展等。这就导致HTML5自己开始支持媒体功能。HTML5 DOM 为 和 元素提供了方法、属性和事件。
1145 0
|
3天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果,就像一些小颗粒从进度条上散落下来
15 0
HTML5/CSS3粒子效果进度条代码
|
6天前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践
22 1
|
11天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。