HTML5 + CSS3 列表 表格 媒体元素学习笔记(四)

简介: HTML5 + CSS3 列表 表格 媒体元素学习笔记(四)

行内元素和块元素


行内元素和块元素


  • 块元素
  • 无论内容多少,该元素独占一行
  • (p、h1-h6…)
  • 行内元素
  • 内容撑开宽度,左右都是行内元素的可以排在一行
  • (a、strong、em…)
  • 块元素间的呈现有明显的间距,行元素间的呈现会较为紧凑

c004f380f7354d779add05f3132453ff.png

列表标签


列表标签


  • 什么是列表
  • 列表就是信息资源的一种展示形式。它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览者能更快捷的获得相应信息
  • 列表的分类
  • 无序列表
  • 有序列表
  • 自定义列表


无序列表

<!---无序列表
unorder list 简写成 ul
应用范围:导航,侧边栏
-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ul>

7ea6922879d7411b92d9cb744f020ddb.png

有序列表


  1. Java
  2. Python
  3. 运维
  4. 前端
  5. C/c++
<!---有序列表
order list 简写成  order list
应用范围:试卷,问答
-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>运维</li>
    <li>前端</li>
    <li>C/c++</li>
</ol>


自定义列表


学科列表JavaPython运维前端C/c++

<dt> 位置</dt>
<dd> 西安</dd>
<dd> 重庆</dd>
<dd> 新疆</dd>
<img src="" alt="">
<!--自定义列表
dl:标签 ( defintion list 简写成 dl)
dt:列表名称 (defintion title)
dd  列表内容 (defintion description -- 准确的说是定义术描述的意思)
-->
<!---->
<hr>
<dl>
    <dt> 学科列表</dt>
    <dd> Java</dd>
    <dd> Python</dd>
    <dd> 运维</dd>
    <dd> 前端</dd>
    <dd> C/c++</dd>
    <dt> 位置</dt>
    <dd> 西安</dd>
    <dd> 重庆</dd>
    <dd> 新疆</dd>
    <img src="" alt="">
</dl>


表格标签


表格标签


打印基本表格


  • 为什么使用表格
  • 简单通用
  • 结构稳定
  • 基本结构
  • 单元格
  • 跨行
  • 跨列
  • 如图是一个三行三列的表格


10316fe0b2c2433395c971c129483fb7.png


  • 实现跨行跨列操作


<td rowspan="3">2-1</td>  跨行
<td colspan="3">1-1</td>  跨列


测试样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格标签学习</title>
</head>
<body>
<table border="1px">
    <tr>
        <!--colspan 跨列-->
        <td colspan="6">1-1</td>
    </tr>
    <tr>
        <!--rowspan跨行-->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
</body>
</html>

媒体标签


视频和音频


  • 视频元素:video
  • 音频元素:audio
  • 关键词学习
  • autoplay 自动播放
  • controls 控制器 要有控制器才有播放按钮
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素学习</title>
</head>
<body>
    <!--音频和视频
    src:资源路径
    controls:控制条
    autoplay :自动播放
    -->
    <video src="../resources/video/xxx.mp4" controls autoplay></video>
    <audio src="../resources/audio/xxx.mp3" controls autoplay></audio>
</body>
</html>

5eceb45c2b7f496da4043e4ed0d73d1c.png

相关文章
|
4天前
|
前端开发 JavaScript
如何利用 CSS3 动画实现元素的淡入淡出效果?
在上述代码中,定义了一个名为 `fade-in` 的CSS类,其初始透明度为0,并设置了淡入的过渡效果。当通过JavaScript为元素添加 `active` 类时,元素的透明度变为1,实现淡入效果;当再次点击按钮移除 `active` 类时,元素又会逐渐淡出。通过这种方式,可以根据用户的操作灵活地控制元素的淡入淡出效果。
35 3
HTML 速查列表4
本示例包含两个部分:表格和框架。表格部分展示了带有两个列标题和一行数据的简单表格;框架部分通过 `&lt;iframe&gt;` 标签嵌入了一个外部页面 `demo_iframe.htm`。
|
6天前
|
数据安全/隐私保护
HTML 速查列表5
表单示例包括文本输入、密码框、复选框、单选按钮、提交和重置按钮、隐藏输入、下拉菜单及多行文本区。实体表示特殊字符,如 &lt; (&lt;)、&gt; (&gt;) 和 &#169; (©)。
|
19天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
69 6
|
16天前
HTML 列表3
HTML 自定义列表 (&lt;dl&gt;) 用于描述术语或名称的定义。每个术语由 &lt;dt&gt; 标签表示,其定义或描述由 &lt;dd&gt; 标签表示。
HTML 速查列表3
文档排版元素简介:包括图片、替换文本、样式/区块、块级和内联元素、无序列表、有序列表及定义列表等,帮助清晰组织和展示内容。
HTML 速查列表3
本示例展示了HTML中常用的元素:图片、样式与区块、块级与内联元素、以及三种列表(无序、有序和定义列表)的使用方法。通过这些基本标签,可以构建网页的基本结构。
HTML 速查列表2
文本格式化包括多种标签
HTML 速查列表1
HTML速查列表包含基本文档结构、标题、文本、换行和水平线等常用标签,方便日常打印使用。例如:`&lt;html&gt;`, `&lt;head&gt;`, `&lt;title&gt;`, `&lt;body&gt;`, `&lt;h1&gt;`至`&lt;h6&gt;`,`&lt;p&gt;`,`&lt;br&gt;`和`&lt;hr&gt;`。
|
16天前
HTML 列表4
HTML 列表标签用于创建不同类型的列表。`&lt;ol&gt;` 和 `&lt;ul&gt;` 分别定义有序和无序列表,`&lt;li&gt;` 定义列表项。`&lt;dl&gt;` 用于定义描述列表,其中 `&lt;dt&gt;` 定义术语,`&lt;dd&gt;` 定义术语的描述。

热门文章

最新文章