HTML笔记 —— 列表，表格，媒体元素，iframe内联框架

最新推荐文章于 2024-10-29 14:54:04 发布
最新推荐文章于 2024-10-29 14:54:04 发布
阅读量486 收藏 2
点赞数 1
分类专栏： 前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44823756/article/details/120934531
版权

本篇博客是根据B站up@遇见狂神说 的视频以及W3school官网文档整理的笔记，里面会有一些视频的截图和官网的概念，以及我个人的注释笔记等
全篇博客包括代码均为自己手打，结果截图均为自己运行的结果。
注：博文中的截图和网络上找到的图，都没有加上csdn的水印，只有我自己的图片才会有水印。这篇博客只是学习交流所用
以下是视频链接
https://www.bilibili.com/video/BV1x4411V75C?spm_id_from=333.999.0.0
W3school官网链接
https://www.w3school.com.cn/html/html_jianjie.asp

目录

列表

在这里插入图片描述
无序列表举例
在这里插入图片描述
有序列表举例
在这里插入图片描述

无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记
无序列表始于 < ul> 标签。每个列表项始于 < li>
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<!--无序列表
    有序列表内容前面是数字,无序列表内容前面是小黑点
-->
<ul>
    <li>java</li>
    <li>hive</li>
    <li>flume</li>
    <li>hadoop</li>
</ul>

浏览器展示结果为
在这里插入图片描述

有序列表

有序列表是一列项目，列表项目使用数字进行标记。
有序列表始于 < ol> 标签。每个列表项始于 < li> 标签。
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

<!--有序列表
    ol是orderlist的缩写
-->
<ol>
    <li>java</li>
    <li>hive</li>
    <li>flume</li>
    <li>hadoop</li>
</ol>

浏览器展示结果为
在这里插入图片描述

自定义列表

自定义列表以 < dl> 标签开始。每个自定义列表项以 < dt> 开始。每个自定义列表项的定义以 < dd> 开始。

<!--自定义列表
    dl:标签
    dt:列表名称
    dd:列表内容
-->
<dl>
    <dt>学习内容</dt>
    <dd>java</dd>
    <dd>hive</dd>
    <dd>fluem</dd>
    <dd>hbase</dd>

    <dt>城市名称</dt>
    <dd>合肥</dd>
    <dd>南京</dd>
    <dd>西安</dd>
    <dd>杭州</dd>
</dl>

在这里插入图片描述

表格

在这里插入图片描述

<!--
    表格table
    行 tr
    列 td
    一个table里面有三个tr,说明表格有三行
    一个tr里面有四个td,说明一行里面有四列
-->

<table>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>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>
        <td>3-4</td>
    </tr>
</table>

在这里插入图片描述

给列表加上边框
<table border="lpx">
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>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>
        <td>3-4</td>
    </tr>
</table>

在这里插入图片描述

跨列
<table border="lpx">
    <tr>
        <!--colspan 跨列,作用是让表格的一个格子占几列-->
        <td colspan="4">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</td>
    </tr>
    <tr>
        <td>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>
        <td>3-4</td>
    </tr>
</table>

在这里插入图片描述
第一行第一列的内容1-1占了第一行的四列

跨行
<table border="lpx">
    <tr>
        <!--colspan 跨列,作用是让表格的一个格子占几列-->
        <td colspan="4">1-1</td>
        <td>1-2</td>
        <td>1-3</td>
        <td>1-4</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>
        <td>3-4</td>
    </tr>
</table>

在这里插入图片描述
第二行第一列的内容2-1独自占据同一列的两行

媒体元素
视频
<!--媒体元素这里指音频和视频-->
<!--video 视频
    src里面写相对路径
    controls的作用是让视频在页面上可以播放,如果不加controls,那么页面是一片空白
    autoplay 视频自动播放,但是部分浏览器为了安全考虑,要求用户互动后才开始播放视频
    因此可以在autoplay后面加上属性muted来让视频立即播放
-->
<video src="../resources/video/练习1.mp4" controls autoplay muted></video>

在这里插入图片描述

音频
<!--audio 音频
    src:资源路径
    controls : 控制条
    autoplay:自动播放
-->
<audio src="../resources/audio/掌声.wav" controls></audio>

在这里插入图片描述

页面结构分析

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>

<header>
    <h2>网页头部</h2>
</header>

<section>
    <h2>网页主体</h2>
</section>

<footer>
    <h2>网页脚部</h2>
</footer>

</body>
</html>

在这里插入图片描述

iframe内联框架

iframe内联框架，在一个网页里面嵌套另一个网页
在这里插入图片描述
举例，B站分享视频时候的嵌入代码就是用的内联框架iframe
< iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"
scrolling=“no” border=“0” frameborder=“no” framespacing=“0” allowfullscreen=“true”>

在这里插入图片描述
在idea中运行一下试试看
在这里插入图片描述
在这里插入图片描述

通过iframe内联框架打开之前编写的网页
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架iframe</title>
</head>
<body>

<iframe src="1.我的第一个网页.html" frameborder="0" width="1000px" height="800px"></iframe>

</body>
</html>

在这里插入图片描述

通过超链接，在网页内嵌的iframe中打开网站
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架iframe</title>
</head>
<body>

<iframe src="" name="标记" frameborder="0" width="600px" height="400px"></iframe>

<!--href表示要打开哪个页面,
    target表示页面要在哪里打开
    这里的target写的是iframe内敛框架的标记名字,因此超链接a标签中的网站会在iframe中打开
-->
<a href="https://www.bilibili.com/" target="标记">点击跳转</a>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

一纸春秋
关注
专栏目录
深入剖析HTML5 内联框架iFrame
01-19
由于现在frame和frameset很少使用，已经过时了，已经被div+CSS代替了，所以，这里只是举例说明一下，当下还在使用的内联框架iFrame 所谓的iFrame内联框架，我的理解就是在网页内部嵌套一个网页，并且可以一级一级地...
HTML(二)——列表，表单，iframe框架
猫与故巷的博客
04-16 296
HTML——列表，表单，iframe框架1.列表(1)有序列表(2)无序列表(无序没有start属性)2.form表单(1)form表单属性(2)常见的form表单3.iframe框架4.块级元素和内联元素5.总结 1.列表 列表是一个组合标签 ：有序列表<ol> <li> / 无序列表<ul> <li> li是列表中的每一个项，<type>属性添加到<ol>或者<ul>里面 可以选择不同的排序方式。去掉默认样式用list-
HTML-iframe标签
Kilig___的博客
10-12 322
iframe标签iframe基本操作进阶操作 iframe基本操作 概念： 在页面上开辟一个小区域显示一个单独的页面（本例为HTML页面之间的相互调用） 代码及解析： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我是iframe</title> </head> <body> <h2 align =
列表标签、图片标签、超链接、iframe框架标签、表格标签、表单
m0_60376759的博客
03-19 542
列表标签 <ul></ul>无序列表，<ol></ol> 有序列表，<ul><ol>标签内不写内容，不能包含其他标签，只能嵌套<li>标签 <li></li>,<li>标签必须包含在<ul>或者<ol>内 自定义列表<dl></dl> <dl> <dt>名词</dt> <dd>解释&
HTML基础学习第三课（列表的创建、有序和无序）
xiaomoge__的博客
09-08 1234
HTML有序列表的无序列表的创建
HTML知识11~15
qq_41995845的博客
09-13 106
11、HTML 超链接（链接） 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。 我们通过使用 <a> 标签在 HTML 中创建链接。 有两种使用 <a> 标签的方式： 1、通过使用 href 属性 - 创建指向另一个文档的链接 2、通过使用 name 属性 - 创建文档内的书签 链接的 HTML 代码很简单。它类似这样： <a href="ur
基于Iframe内联框架的异步文件上传与删除
01-28
针对使用低版本浏览器的用户因安全策略导致无法上传文件的问题，采用一种基于Iframe的内联框架的解决方案能够实现异步文件上传、删除等功能。用这种方式上传图片、音视频等多媒体文件时，能在不跳转页面情况下看到所...
html 内联元素和html 块级元素概述及区别
12-13
有一些元素根据上下文可能表现为块级元素或内联元素，例如`<applet>`、`<button>`、`<del>`、`<iframe>`、`<ins>`、`<map>`、`<object>`、`<script>`。它们的行为取决于它们在HTML文档中的使用方式。 **CSS对元素...
html内联元素和块级元素的基本概念及使用示例
12-13
html标签分为两种，内联元素和块级元素，首先我们先了解一下内联元素和块级元素的概念： 块级元素：一般是其它元素的容器，可容纳内联元素和其它块级元素，块级元素排斥其它元素与其位于同一行，可设置宽度(width)...
html基础语法
qq_53003858的博客
06-30 503
在w3school自学了一下html，整理了一下文档。 html html元素 HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 HTML 元素语法 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容（empty content） 空元素在开始标签中进行关闭（以开始标签的结束而结束） 大多数 HTML 元素可拥有属性 嵌套的 HTML 元素 大多数 HTM
HTML 列表
qq_31781327的博客
05-22 348
HTML 列表
HTML ＜iframe＞标签：内联框架
技术宅拯救世界
01-12 1194
HTMl 标签用来定义一个内联框架，使用它可以将另一个网页嵌入到当前网页中。 标签会在网页中定义一个矩形区域，浏览器可以在这个区域内显示另一个页面的内容。 标签的语法格式如下： ```html ``` ...
03---HTML+CSS---列表、表格及iframe框架
池水深深的博客
01-23 185
一、列表 1、无序列表 ul> li>Coffeeli> li>Milkli> ul> 网页显示： Coffee Milk 相对于有序列表，用的比较多。 2、有序列表 ol> li>Coffeeli> li>Milkli> ol> 网页显示： Coffee Milk 3、定义列表 dl> dt>Coffeedt>
h5 video标签播放任意路径下的视频文件
liuade的专栏
09-18 1万+
html中用video标签播放视频代码如下， &lt;video src="xxx.mp4" controls="controls"&gt;&lt;/video&gt;   xxx.mp4需要放在项目里部署在container里，如果视频文件多或者需要动态上传，全扔在项目里不合适，需要可以读取任意路径下的视频文件供h5的video标签播放。   核心代码如下，简单说就是要在respons...
HTML--video中的自动播放autoplay以及循环播放loop+更多多媒体标签
热门推荐
weixin_45406850的博客
02-17 4万+
问题：视频设置自动播放，页面加载完成时正常播放，但刷新页面后不播放，循环播放失效。 自动播放以及循环播放的代码 <video muted autoplay="autoplay" loop="loop"> <source src="image/01.mp4" type="video/mp4"></source> </video> <!--muted：静音播放 注：高版本浏览器对视频静音后可以保证视频自动播放--> <!--autoplay：
HTML入门教程4：HTML属性
软考鸭
10-29 874
HTML属性是附加在HTML标签上的额外信息，它们以键值对的形式出现，并放置在标签的起始部分内。这些属性为浏览器提供了额外的指令，以更准确地渲染网页内容。通过本文的介绍，相信大家对HTML属性有了更深入的了解。HTML属性是网页开发中的基础且重要的部分，它们能够极大地增强网页的功能和表现力。在实际开发中，我们应该灵活运用HTML属性，结合CSS和JavaScript等技术，创造出更加丰富和动态的网页内容。同时，也希望大家能够在开发过程中不断学习和探索新的HTML属性，以提升自己的网页开发技能。
HTML入门教程18：HTML类
软考鸭
10-29 297
在HTML中，你使用class属性来为元素分配类名。类名可以是任何你选择的名称，但最好使用能够描述元素用途或样式的名称。类名前面用一个点（.）表示，但在HTML中给元素分配类名时不需要这个点。< div class = " my-class " > 这是一个具有类的div元素 < div class = " my-class " > 这是一个具有类的div元素 < div class = " my-class " > 这是一个具有类的div元素
炫酷的登录框!(附源码)
最新发布
m0_50864141的博客
10-29 1799
【代码】炫酷的登录框!(附源码)
HTML 约束验证
liuxiaoqi_123的博客
10-28 806
HTML5引入了表单相关的一些新机制：它为<input>元素和约束验证增加了一些新的语义类型，使得客户端检查表单内容变得容易。基本上，通过设置一些新的属性，常用的约束条件可以无需 JavaScript 代码而检测到；对于更复杂的约束条件的校验可以尝试使用约束验证 API。
Iframe内联框架实现异步文件上传与删除技术解析
"基于Iframe内联框架的异步文件上传与删除技术是为了解决低版本浏览器的安全策略限制，实现文件在不跳转页面的情况下进行上传和删除。该技术利用Iframe创建一个子网页，通过这个子网页来处理文件上传和删除的请求，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一纸春秋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值