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天前
|
编解码 前端开发 UED
CSS进阶 - 响应式设计与媒体查询
【6月更文挑战第17天】响应式设计通过媒体查询适应不同设备,确保网页在桌面、平板、手机上提供优化体验。媒体查询是CSS核心技术,允许根据设备特性应用样式。常见问题包括忽视视口设置、硬编码断点和过度依赖查询。解决办法涉及设置正确的视口元标签、基于内容的断点和模块化设计。通过移动优先策略和灵活的断点管理,可创建高效、易维护的响应式网站。
|
1天前
|
移动开发 前端开发 HTML5
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
有关CSS中排版常见问题(清除默认样式问题 + 元素居中问题 + 元素之间的空白问题 + 行内块的幽灵空白问题)
|
11天前
|
存储 前端开发 JavaScript
HTML元素周期表
HTML元素周期表
16 1
|
16天前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
21 1
|
16天前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
27 1
|
20天前
|
前端开发 UED SEO
HTML基础-链接与图片插入:网页的连接与视觉元素
【6月更文挑战第2天】本文介绍了HTML中`<a>`和`<img>`标签的使用,包括链接的基本结构、目标类型以及图片的插入、尺寸调整和对齐方式。常见问题涉及链接和图片路径、缺失`alt`属性及尺寸不匹配,解决方案包括正确引用资源、使用绝对URL和重视`alt`属性。通过示例代码,展示了创建链接和图片的方法,强调了提升网页用户体验的重要性。
|
17天前
|
前端开发 JavaScript 开发者
HTML基础-块级元素与内联元素
【6月更文挑战第6天】HTML中的元素分为块级和内联元素,两者在网页布局中扮演重要角色。块级元素占用整行,可设置宽高,常用于组织结构;内联元素只占内容宽度,常用于文本样式和链接。理解它们的区别并正确选择是创建清晰布局的关键。常见问题包括错误选择元素、忽视默认样式和不熟悉`display`属性。解决方法包括根据语义选择元素、清除默认样式以及灵活使用`display`属性转换元素行为。熟练掌握这些能提升网页的语义化、可访问性和布局效率。
|
19天前
|
移动开发 前端开发 数据安全/隐私保护
HTML基础-表单元素与属性:深入浅出指南
【6月更文挑战第4天】本文介绍了HTML表单的基础知识,包括`&lt;form&gt;`标签、各种表单元素(如文本输入、密码、单选、复选、下拉菜单和提交按钮)以及相关属性。易错点包括忘记设置`name`属性、不使用`label`、忽视表单验证和不安全的提交方式。建议使用HTML5内置验证属性增强安全性,并使用`POST`方法处理敏感信息。提供的完整注册表单示例展示了这些概念的应用。
|
1天前
|
前端开发
HTML+CSS练习小项目——百叶窗
HTML+CSS练习小项目——百叶窗
|
4天前
|
编解码 前端开发
编写代码中常见问题汇总(html和css)
text-indent用于首行缩进,line-height与height相同实现垂直居中;vertical-align:middle用于行内元素居中;text-align:center做水平居中;list-style:none清除列表符号;overflow:hidden隐藏溢出;background-repeat:no-repeat阻止平铺;float:left实现横排;相对定位父元素,绝对定位子元素;box-sizing调整盒子模型;用边框或overflow解决盒子塌陷;
25 5