程序员经验分享-hwhale

day02-HTML5列表/表格/媒体元素/结构元素

2023-11-15

0目录

  1. 补充知识点
  2. HTML5列表
  3. HTML5表格
  4. HTML5媒体元素
  5. HTML5结构元素

1.行内元素和块元素

行内元素：不独占一行，例如：<a>标签，strong标签，em标签

块级元素：独占一行，例如：<p>标签，h1-h6标签

2.HTML列表

列表定义

  1. 列表定义：列表是一种特别的对象集合
  2. 集合定义：集中在一起，再合二为一（聚集）
  3. 聚集定义：多个列（信息资源）排在一起
  4. 信息资源定义：一堆数据，可能是字符，可能是图片
  5. HTML5如何实现列表：三种方式：

无序列表、有序列表、（自）定义列表

无序列表：unorder

定义：没有顺序

HTML5（H5）代码结构：

    <body>
        <ul>
            <li>日本</li>
            <li>美国</li>
            <li>中国</li>
            
            <li>你</li>
            <li>我</li>
            <li>他</li>
        </ul>
    </body>

无序列表特性：

1.没有顺序，每个<li>标签独占一行（<li>块集元素）

2.默认的<li>标签前面有个实心小圆点

3.应用场景：常用在导航功能中

有序列表：order

定义：有顺序

代码结构：

    <body>
        <ol>
            <li>苹果</li>
            <li>香蕉</li>
            <li>菠萝</li>
        </ol>
    </body>

有序列表特性：

1.有顺序，每个<li>标签独占一行

2.默认的<li>标签前面有顺序标记

3.应用场景：一般用于试卷、问卷等

定义列表:

定义：定义某种关系（包含和被包含）

代码结构：

    <body>
        <dl>
            <dt>水果</dt><dd>苹果</dd><dd>香蕉</dd><dt>水果2</dt><dd>苹果2</dd><dd>香蕉2</dd>
        </dl>
    </body>

定义列表特性：

1.没有顺序，每个<dt>标签，<dd>独占一行（块元素）

2.默认没有标记

3.一般用于：存在包含和被包含的关系

三种类型的列表区别：

 

3.HTML5表格

表格：

1.定义：有行有列，多个单元格组成

2.表格缘由：可以清晰的将多个信息资源组合在一起，如果没有表格则会导致网站中的信息资源杂乱

表格语法结构：

table:表格标签名称（元素）

border：边界    1px：1像素

tr:  表格中的行标签

td：表格中的单元格标签（列标签）

一行一列：

加上表格框：

两行三列：

多行多列：

表格跨列：

2行横跨2列：

3行横跨2列：

综上代码得出结论：跨列多少和几行没有关系

表格跨行：

横跨两行：

 

实战：

 

表格跨行和跨列：

4.HTML5媒体元素

HTML5媒体元素应用场景:

一般应用与网站上的音频文件或视频文件

HTML5媒体元素标签的种类：

1.video视频元素（标签）    2.audio音频元素（标签）

video：

在demo002项目下新建video目录，视频复制到此目录中，编写代码，运行后播放

 

 

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

前端

day02-HTML5列表/表格/媒体元素/结构元素 的相关文章

  • 更改javascript nodejs中所有页面的href url

    我已经实现了具有多种语言下拉菜单的引导导航栏 当我选择语言时 它将翻译页面 如何更改其他页面的 url 和按钮文本 当我选择french 将所有网址更改为 fr about and fr contact 如何使用 JavaScript 进行

  • 如何将 HTML 转换为 Markdown？

    我有一个类似 stackoverflow 的网站 有一个文本区域 人们可以在其中写答案 我用这个 PHP 库 http parsedown org 转换降价 我的意思是我使用该函数来转换 italic to i italic i inclu

  • 古老的“字幕”标签的替代品？

    marquee 标签的标准等效项是什么 我正在寻找 HTML C asp NET 或 ASPX jquery java 脚本的解决方案 marquee 标签未包含在标准中 因为它是 视觉 标签 而不是 语义 标签 因此 您想要的任何语言都没

  • 如何使自定义 Web 组件可聚焦？

    我正在写一个自定义网络组件 https github com denilsonsa html5 knob这意味着是互动的 我如何告诉浏览器这个自定义组件应该获得焦点 我希望我的自定义元素 可以聚焦 通过选项卡导航 集中注意力时可以接收按键信

  • 在 HTML5 Javascript 中将 BlobBuilder 转换为字符串

    function blobToString blob var reader new FileReader var d reader onloadend function d callback reader result console lo

  • 在 Angular html 模板中访问常量枚举

    假设我有一个常量枚举 export const enum MyConstEnum Value1 Value1 Value2 Value2 Value3 Value3 现在我想在我的 Angular 模板中使用它 span This has

  • html 电子邮件内的背景图像 css - Gmail 不支持

    我想向我的用户发送如下所示的带有背景图像 css 的 html 正文电子邮件 div style width 500px height 1000px background color black background image none

  • 如何在其他div id的悬停中使用div显示块

    如何打开div悬停时标记href tag 这是我在悬停 href 标签上显示 div 标签的代码 Services is id of href tag Services is id of div tag Service hover Serv

  • 防止垃圾邮件按钮呼叫功能

    如何防止调用函数时出现垃圾邮件按钮 就像用户只能在按钮上每 1 秒调用一次该函数 有办法做到吗 因为我尝试了 setTimeout 但没有成功 它仍然在发送垃圾邮件 顺便说一句 我使用 Jquery 这是我的代码

  • 固定 div 位于居中 div 旁边

    我有一个网页 其中有可滚动的内容 此内容包含在 content 内 位于页面的中心 现在我希望导航栏出现在内容左侧 50 像素处 该栏应具有固定位置 不应滚动 这是我到目前为止所尝试过的 nav position fixed top 50

  • 转义 h 轮廓

    因此 我一直在尝试找出在被较低级别的标题吸引后添加内容的最佳方法是什么 section h1 Title of Section h1 h2 Related 1 h2 h2 Related 2 h2 p I NEED THIS TO BE P

  • 两列表：一列尽可能小，另一列占据其余部分

    我在 div 中有一个 to columns 表 div table tbody tr td class action a a td td class content p Bigger text variable size p td tr

  • javascript 选择自定义光标 (svg)

    我正在动态地将光标更改为悬停时的本地 svg element on mouseover function this css cursor url svgs pointer svg 9 30 auto 工作正常 但我想选择该 svg 来操纵其

  • 如何使使用 css 调整大小的图像在 IE 中看起来不错？

    当使用 css 宽度 高度或属性宽度 高度缩放图像时 IE6 和 IE7 无法很好地缩放网页中的图像 我不确定它默认使用哪种算法 但这不好 在这些浏览器中缩放时 缩放图像会显示锯齿伪影 幸运的是 有一种方法可以通过简单的 css 规则强制

  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做

  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo

  • 使用 CSS 的响应式图像

    我发现调整图像大小以使其具有响应能力很棘手 我正在开发一个 php 应用程序来自动将网站转换为响应式版本 我有点被图像困住了 我已经成功地为网站上的每个图像添加了一个包装类 并且可以很好地调整图像的大小 我的问题在于自然小于窗口的图像 例如

  • 如何从浏览器向服务器发送“页面将关闭”消息？

    我想向每个 html 文档添加一个脚本 JavaScript 该脚本向服务器发送两条消息 页面确实打开了 页面将关闭 此消息包含页面打开的时间 打开消息应在文档加载时 或加载完成时 发送 这是简单的部分 The close message

  • Webpack 4：如何使用 LESS 获取 CSS 源映射？

    多年来我一直在尝试让 CSS 源映射在 webpack 中工作 但没有成功 我不确定链条中哪里出了问题 我希望有人能指出我正确的方向 这是发生的事情 行号是错误的 实际上文件名也是错误的 main less只是包含一堆 import也就是说

  • css3按钮背景颜色无限过渡

    有没有办法仅使用 css3 使按钮的背景颜色从灰色渐变为蓝色 然后又回到灰色 一个很好的例子是默认操作按钮是可可 我知道这可以在 javascript 中完成 但我宁愿只使用 css 来完成此操作 您好 我已经通过 CSS3 动画制作了按钮

随机推荐

  • 高级应用：内部类的设计模式与内部类与外部类之间的交互

    1 内部类与外部类之间的交互 内部类与外部类之间可以相互访问对方的私有成员 这为程序设计提供了更大的灵活性和可扩展性 public class Outer private int outerVar public Outer int oute

  • 【图像分类】基于卷积神经网络和主动学习的高光谱图像分类（Matlab代码实现）

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码实现 1 概述 文献来源 深度神经网络最近已广泛应用于高光

  • android studio里查看一个类的帮助及其成员的方法

    在Android studio里 按f1仅仅是查看关于这工具本身的帮助 这点与Qt Creator不同 要想查看一个类及其成员的说明时 就不能简单的按 F1 键了 一 增加光标定住在一个类名或一个函数时 自动弹出相应的提供 如下图 光标在

  • 多线程的一些小问题集锦

    1 线程死亡之后不能再次启动 测试线程是否已经死亡 可以调用isAlive 方法 当线程处于就绪 运行 阻塞三种状态时 返回true 当线程处于死亡 新建状态时返回false 实例代码如下 package com thread public

  • Eclipse下通过Maven的Jetty插件运行Web工程的配置

    引用来源 Jetty7 8 的Maven插件配置 http wiki eclipse org Jetty Feature Jetty Maven Plugin Jetty9 最新的Maven插件配置 http www eclipse org

  • 卷积神经网络----无监督特征学习

    卷积神经网络是近年发展起来 并引起广泛重视的一种高效识别方法 20世纪60年代 Hubel和Wiesel在研究猫脑皮层中用于局部敏感和方向选择的神经元时发现其独特的网络结构可以有效地降低反馈神经网络的复杂性 继而提出了卷积神经网络 Conv

  • MyBatis插件的使用：mybatis-generator、mybatis-plugin、mybatis-pagehelper

    使用Intellij Idea2016 3 1 Maven3 3 9 一 mybatis generator的使用 作用 根据数据库自动生成pojo dao和xml文件 1 引入mybatis generator pom xml中引入配置

  • 408知识框架总结——计算机网络

    个人复习用 有用自取 欢迎转载 标明出处即可 不推荐在第一遍复习时使用 第一遍建议还是认认真真看书做题 第二遍复习时可以配合框架来过知识点 哪里不熟翻书来强化记忆 重点难点不构成参考建议 仅为个人想法 第一章 计算机网络体系结构 1 1计算

  • 基于若依对接微信jssdk

    基于若依对接微信jssdk java package com ruoyi system controller import com alibaba fastjson2 JSONObject import com ruoyi common c

  • 电脑键盘练习_电脑初学者指法练习的基本知识

    对于电脑初学者来说 打字无疑是最基本的电脑操作 经常有人问笔者 如何才能提升打字的速度 我每次回答的都是让他多玩玩电脑 多打打字 熟能生巧 此外 打字指法也是提高打字速度的最有效训练基础 朋友们在练习的时候一定要使用正确的手指去按按键 下面

  • 文件管理.

    1 touch 创建测试用的空文件修改文件的时间戳记 格式 touch 选项 文件名 2 echo 创建文件并编辑内容 格式 echo 123 gt 111 3 dd转换和拷贝文件 格式 dd if 拿取容量的文件名 of 要创建的文件名

  • 多路查找树——2-3树和2-3-4树

    目录 2 3树定义 2 3树的插入 2 3树的删除 PS 2 3 4树定义 2 3 4树插入 2 3 4树删除 PS 2 3树定义 定义 多路查找树 其中每一个结点都具有两个孩子 称为2结点 或三个孩子 称为3结点 所有叶节点都在树结构的同

  • IBM MQ开发通用方法，包括客户端连接、服务器端连接、发送接受消息

    1 接口方法 IQueueManager java author weiya public interface IQueueManager 发送消息 param b param queueName roseuid 447BE52F01C2

  • cs寄存器 x86 特权模式_segmentation和保护模式（二）

    segmentation和保护模式 一 上文讲到了segment descriptor 把这些descriptors放在一起 在内存里连续分布 就构成了GDT Global Descriptor Table 所以GDT也可以被称为段 描述符

  • 总离差平方和推导公式

    总离差平方和推导

  • 使用股票程序交易系统应该注意哪些问题？

    尽管使用了程序交易系统 但交易者应该明白 交易的主体是人而不是程序交易系统 交易系统不过是贯彻交易者的思想 执行了交易者的指令而已 交易者仍是交易的主体 这一点不因使用了程序交易系统而改变 交易系统有其高峰期和低谷期 交易系统从大类来分可分

  • stream新特性

    package com jeethink system domain public class Employee public Integer age public String name public Integer getAge ret

  • 十几行代码就可以让你的微信小程序挂掉

    mpvue github 地址请参见 是一个使用Vue js 开发小程序的前端框架 框架基于 Vue js核心 mpvue 修改了 Vue js 的runtime 和compiler 实现 使其可以运行在小程序环境中 从而为小程序开发引入了

  • HTML5

    文章目录 前言 滚动长画幅 实现细节 语义化标签 语言的本地化 前言 本文将分析 AirPods Pro 产品介绍使用的技巧与有趣的第三方库 滚动长画幅 这次AirPods Pro 的产品介绍以一个由用户手动进行滚动推进的长画幅组成 这个长

  • day02-HTML5列表/表格/媒体元素/结构元素

    0目录 补充知识点 HTML5列表 HTML5表格 HTML5媒体元素 HTML5结构元素 1 行内元素和块元素 行内元素 不独占一行 例如 a 标签 strong标签 em标签 块级元素 独占一行 例如 p 标签 h1 h6标签 2 HT

热门标签