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

相关文章
|
6天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
42 6
HTML 表格4
HTML 表格标签用于创建和布局表格。主要标签包括:`&lt;table&gt;` 定义表格,`&lt;th&gt;` 定义表头,`&lt;tr&gt;` 定义行,`&lt;td&gt;` 定义单元格,`&lt;caption&gt;` 定义标题,`&lt;colgroup&gt;` 和 `&lt;col&gt;` 定义列属性,`&lt;thead&gt;`、`&lt;tbody&gt;` 和 `&lt;tfoot&gt;` 分别定义表格的页眉、主体和页脚。
HTML 表格2
本示例展示了如何使用 HTML 的 `&lt;table&gt;` 标签和 `border` 属性创建一个带有边框的简单表格。表格包含两行两列,每行有两个单元格,通过设置 `border=&quot;1&quot;` 显示边框。
|
4天前
|
前端开发
HTML 表格1
HTML 表格是用于展示结构化数据的标记语言元素,由 `&lt;table&gt;` 标签定义。表格包含行(`&lt;tr&gt;`)、单元格(`&lt;td&gt;`)和表头(`&lt;th&gt;`)。表格可细分为 `&lt;thead&gt;`(标题部分)和 `&lt;tbody&gt;`(主体部分),支持合并单元格、跨行/跨列操作及 CSS 样式定制。
HTML 表格3
HTML 表格的表头使用 `&lt;th&gt;` 标签定义,通常以粗体居中显示。
|
8天前
CSS_定位_网页布局总结_元素的显示与隐藏
CSS_定位_网页布局总结_元素的显示与隐藏
14 0
|
23天前
|
前端开发
css 块元素、行内元素、行内块元素相互转换
css 块元素、行内元素、行内块元素相互转换
57 0
|
6月前
|
前端开发 JavaScript UED
【专栏:HTML与CSS移动端开发篇】移动端触摸事件与手势识别
【4月更文挑战第30天】本文探讨了移动端触摸事件和手势识别在网页开发中的重要性。介绍了基础触摸事件如`touchstart`, `touchmove`, `touchend`, `touchcancel`及相关属性。文章列举了处理触摸事件的方法,包括单点触摸、多点触摸、滑动、长按、捏合缩放、旋转检测和事件代理。建议使用第三方库如Hammer.js简化手势处理,并分享了最佳实践,如避免意外触摸、提供视觉反馈、考虑性能和跨设备测试。理解并有效利用这些技术能提升用户交互体验。
215 7
|
6月前
|
缓存 前端开发 JavaScript
【专栏:HTML与CSS移动端开发篇】移动端网页性能优化策略
【4月更文挑战第30天】本文探讨了移动端网页性能优化的重要性,并提出了优化策略。HTML方面,建议精简结构、使用语义化标签、异步加载脚本和压缩文件;CSS优化包括精简样式、使用CSS3动画、媒体查询和压缩文件。其他策略涉及图片和字体压缩、缓存利用、数据压缩、减少HTTP请求及根据网络状态调整加载。综合运用这些策略能提升网页性能和用户体验。
93 6
|
6月前
|
编解码 移动开发 前端开发
【专栏:HTML与CSS移动端开发篇】使用Viewport Meta标签优化移动端显示
【4月更文挑战第30天】本文介绍了HTML的Viewport Meta标签在移动端网页优化中的作用。Viewport Meta标签定义了视口属性,如宽度、高度、初始缩放等,解决移动设备因屏幕尺寸差异导致的显示问题。主要属性包括width(常用device-width)、initial-scale、maximum-scale、minimum-scale和user-scalable。
176 4