Java知识点一——列表、表格与媒体元素

显示表格边框:<table border="1"></table>

因为初始的表格是没有边框的

collapse相邻的单元格共用同一条边框(采用 collapsed-border 表格渲染模型)。

separate默认值。每个单元格拥有独立的边框(采用 separated-border 表格渲染模型)

 text-align: center; 让文字居中

语法:

<table><tr><td>第一行第一列</td><td>第一行第二列</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr><tr><td>第三行第一列</td><td>第三行第二列</td></tr></table>

表格的跨列:

<td clospan="xx"></td> clospan的值就等于表格跨列跨几列

<table><!-- 表格的跨列 --><tr><td colspan="2">单元格内容</td></tr><tr><td>第二行第一列</td><td>第二行第二列</td></tr><tr><td>第三行第一列</td><td>第三行第二列</td></tr></table>

表格的跨行:

<td rowspan="n"></td> n等于几跨几行

<p>表格的跨行</p><table><!-- 表格的跨行 --><tr><td rowspan="2">&nbsp;</td><td>第一行第二列</td></tr><tr><td>第二行第一列</td></tr><tr><td>第三行第一列</td><td>第三行第二列</td></tr></table>

表格相关的属性:align,valign,

align是水平方向的:letf ,center,right

valign是竖直方向的:top ,center,bottom

W3C标准表格: <thead><th><tbody><tfoot>
<table><thead><th></th></thead><tbody><tr><td></td></tr></tbody><tfoot><tr><td></td></tr></tfoot></table>

媒体元素:

在html5之前,网页上是不能播放视频的

视频元素:video

音频元素:audio

1.视频元素:video:这种语法是普通的

语法:<video src="视频路径" controls></video>

controls:提供播放、暂停和音量的控件

2.视频元素:video

因为有的格式是不能正常播放的,可以看到下面视频的后缀是不一样的,只会播放其中一个视频,这种语法是确保有视频可以看,

因为有的后缀不能播放,而且在<video></video>里面的<source></source>只会播放一个能播放的

<video controls>
<source src="video/video.webm" type="video/webm"/>
<source src="video/video.mp4" type="video/mp4"/>
</video>

3.视频播放相关属性:loop,muted autoplay,controls

播放组件:controls

<video controls>
<source src="video/video.webm" type="video/webm"/>
<source src="video/video.mp4" type="video/mp4"/>
</video>

自动播放:

现在浏览器升级了,自动播放muted autoplay同时有这两个属性

<video muted autoplay ><source src="../陈梦雨第二章练习/listen/北大青鸟宣传片.mp4" type="video/mp4"/></video>

循环播放:loop

也可以loop="loop"

<video  loop><source src="../陈梦雨第二章练习/listen/北大青鸟宣传片.mp4" type="video/mp4"/></video>

HTML5的结构元素:

作用:可以帮助搜索引擎和辅助技术更好地理解网页的结构

 <header></header><section></section><footer></footer>

一个网页分为页面头部,页面主体,页面底部

header:标记头部区域的内容

fotter:标记脚部区域的内容

section:Web页面中一块独立的区域

article:独立的文章内容

aside:相关内容或应用

nav:导航类辅助内容

问题:这里并不像图片上那样是上中下的,因为这是非语义化标签

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

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

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

<iframe>内联框架

注意:iframe是两个标签,后面那个不能删,必须两个!!

<iframe src="引用页面地址" name="mainFrame" ></iframe>

src属性:可以写引用页面地址,也可以是在线的

name属性:框架标识名

这个内联框架就像是这样,在网页中出现一个小窗口

iframe的其他属性:scrolling,frameborder

scrolling="no" 是否显示滚动条

 frameborder="0" 不显示内联框架边框线

iframe例子:

点哪个跳哪个!!注意:target后面没有#

<h1>使用iframe嵌套网页</h1><a href="https://www.baidu.com/"  target="mainFrame">点击打开百度</a><br/><a href="https://www.bdqn.cn/page/gsjj.shtml"  target="mainFrame">点击打开北大青鸟</a><br/><a href="/HTML/top2-13.html"  target="mainFrame">点击打开一个HTML页面</a><p><iframe name="mainFrame"  /></p>

和锚链接做一个区分:

锚链接有herf值有#,并且锚链接都是a标签

扩展标签:

<pre>原样输出标签,了解即可,但是禁用

<pre>这里是原样输出我换行再换行来几个空格    11</pre>

<abbr>

标记缩写

总结:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/402102.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

什么是实时数据仓库? 优势与最佳实践

在当今数据驱动的世界中&#xff0c;许多企业使用实时数据仓库来满足其分析和商业智能 (BI) 需求。这使他们能够做出更好的决策、推动增长并为客户提供价值。 数据仓库是一种数据存储和管理系统&#xff0c;其设计目标只有一个&#xff1a;管理和分析数据&#xff0c;以实现商…

掌握Jenkins自动化部署:从代码提交到自动上线的全流程揭秘

Jenkins自动化部署是现代软件开发中不可或缺的一部分&#xff0c;它不仅简化了代码的发布过程&#xff0c;还为整个团队带来了无与伦比的效率和协作力。想象一下&#xff0c;开发者们可以专注于编写高质量的代码&#xff0c;而不是为繁琐的手动部署所烦恼&#xff1b;测试人员能…

Python进阶之3D图形

Python进阶之3D图形 在数据可视化中&#xff0c;2D图形通常可以满足大多数需求。然而&#xff0c;对于一些复杂的数据或分析&#xff0c;3D图形可以提供更多的视角和洞察。在Python中&#xff0c;使用 Matplotlib 和 Plotly 等库可以轻松创建各种3D图形。本文将介绍如何使用这…

C++_2_ inline内联函数 宏函数(2/3)

C推出了inline关键字&#xff0c;其目的是为了替代C语言中的宏函数。 我们先来回顾宏函数&#xff1a; 宏函数 现有个需求&#xff1a;要求你写一个Add(x,y)的宏函数。 正确的写法有一种&#xff0c;错误的写法倒是五花八门&#xff0c;我们先来“见不贤而自省也。” // …

SpringCloud的能源管理系统-能源管理平台源码

介绍 基于SpringCloud的能源管理系统-能源管理平台源码-能源在线监测平台-双碳平台源码-SpringCloud全家桶-能管管理系统源码 软件架构

提升体验:UI设计的可用性原则

在中国&#xff0c;每年都有数十万设计专业毕业生涌入市场&#xff0c;但只有少数能够进入顶尖企业。尽管如此&#xff0c;所有设计师都怀揣着成长和提升的愿望。在评价产品的用户体验时&#xff0c;我们可能会依赖直觉来决定设计方案&#xff0c;或者在寻找改善产品体验的切入…

【STM32F4】——DMA初始化结构体详解

一.DMA_InitTypeDef 初始化结构体 typedef struct {uint32_t DMA_Channel; //通道选择 uint32_t DMA_PeripheralBaseAddr;//外设地址uint32_t DMA_Memory0BaseAddr; //存储器 0 地址uint32_t DMA_DIR; //传输方向 uint32_t DMA_BufferSize; /…

opencascade Adaptor3d_CurveOnSurface源码学习

opencascade Adaptor3d_CurveOnSurface 前言 用于连接由Geom包中表面上的曲线提供的服务&#xff0c;以及使用这条曲线的算法所要求的服务。该曲线被定义为一个二维曲线&#xff0c;来自Geom2d包&#xff0c;位于表面的参数空间中 方法 1 默认构造函数 Standard_EXPORT Ada…

Windows设置定时任务进行oracle数据库备份

先找到“定时任务计划” 方法1.开始->所有程序->附件->系统工具->定时任务计划 方法2:控制面板->输入计划 进行查询操作 名称随便定&#xff0c;点击下一步 下一步 设置每天的定时执行时间&#xff0c;点下一步 点下一步选择启动程序&#xff0c;点下一步 点…

Lesson 64 Don‘t ... You mustn‘t ...

Lesson 64 Don’t … You mustn’t … 词汇 play n. 戏剧&#xff08;真人演的&#xff0c;话剧&#xff09;v. 玩耍 搭配&#xff1a;play with 物体 / 人    玩…… / 和……一起玩 例句&#xff1a;我正在和Leo玩。    I am playing with Leo.演奏&#xff08;乐器…

ddos造成服务器瘫痪后怎么办

在服务器遭受DDoS攻击后&#xff0c;应立即采取相应措施&#xff0c;包括加强服务器安全、使用CDN和DDoS防御服务来减轻攻击的影响。rak小编为您整理发布ddos造成服务器瘫痪后怎么办。 当DDoS攻击发生时&#xff0c;首先要做的是清理恶意流量。可以通过云服务提供商提供的防护措…

初步融合snowboy+pyttsx3+espeak+sherpa-ncnn的python代码

在前文《将Snowboy语音唤醒的“叮”一声改成自定义语言》中&#xff0c;我已经实现唤醒snowboy后&#xff0c;树莓派会说一句自定义文本。今天&#xff0c;会在此基础上增加ASR的应用&#xff08;基于sherpa-ncnn&#xff09;。 首先&#xff0c;编写一个asr.py的程序&#xf…

@DateTimeFormat 和 @JsonFormat 注解详解

目录 一、快速入门1.1 准备工作1.2、入参格式化&#xff08;前端传参到后端&#xff09;1.3、出参格式化&#xff08;后端返回给前端&#xff09;1.4、如果是请求体RequestBody传参 二、详细解释这两个注解1、JsonFormat2、DateTimeFormat注意&#xff1a;1、这两者的注解一般联…

大型、复杂、逼真的安全服和安全帽检测:SFCHD数据集和SCALE方法

智能守护工地安全&#xff1a;SFCHD数据集与SCALE模块介绍 在人工智能&#xff08;AI&#xff09;技术飞速发展的今天&#xff0c;其在建筑工地安全领域的应用正逐渐展现出巨大潜力。尤其是高风险行业如化工厂的施工现场&#xff0c;对工人的保护措施要求极为严格。个人防护装…

Vue 生命周期详解含demo、面试常问问题案例

Vue 生命周期详解、面试常问问题案例 含 demo 文章目录 Vue 生命周期详解、面试常问问题案例 含 demo一、Vue 生命周期是什么二、Vue 中如何使用生命周期钩子1. **beforeCreate**2. **created**3. **beforeMount**4. **mounted**5. **beforeUpdate**6. **updated**7. **beforeD…

使用Arduino IDE生成带有bootloader的烧录文件

使用Arduino IDE生成bin&#xff08;烧录&#xff09;文件 1、在“项目”中&#xff0c;选择“导出已编译的二进制文件” 2、在工程目录中&#xff0c;会出现“build”文件夹 3、在build文件夹中&#xff0c;有hex文件&#xff0c;以及包含bootloader的bin和hex文件 bin和h…

小程序营销实战:利用小程序实现精准营销与增长

小程序营销实战&#xff1a;利用小程序实现精准营销与增长 在数字化营销日益重要的今天&#xff0c;小程序以其轻量、便捷的特点&#xff0c;成为了企业实现精准营销与增长的重要工具。本文将从策略规划、用户洞察、内容创新、技术应用以及数据分析等多个维度&#xff0c;特别…

Element-01.快速入门

1.什么是Element 2.快速入门 第二步引入ElementUI组件库&#xff0c;在当前的工程目录下的main.js文件中引入。 import Vue from vue; import ElementUI from element-ui; import element-ui/lib/theme-chalk/index.css; import App from ./App.vue;Vue.use(ElementUI); 第一…

Python深度学习框架库之caffe使用详解

概要 Caffe 是一个由伯克利视觉与学习中心(BVLC)开发的深度学习框架,以其速度快、模块化设计和社区支持而闻名。Caffe 适用于视觉识别任务,广泛应用于学术研究和产业实践中。Caffe 提供了一个强大的 Python 接口,使开发者能够方便地使用 Python 进行深度学习模型的开发和…

前端实现签字效果+合同展示

要做一个这样的功能&#xff0c;后端返回一个合同的整体html&#xff0c;前端进行签字&#xff0c;以下是一些重要思路&#xff01; 获取一个高度会变的元素的高度 script 代码 let bigBoxHeight ref(0); // 获取到元素 let bigBox document.querySelector(".bigBox&…