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

news2024/11/13 8:41:59
显示表格边框:<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.coloradmin.cn/o/2046226.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Haskell爬虫中日志记录:监控HTTP请求与响应

在当今信息爆炸的时代&#xff0c;数据抓取成为了获取信息的重要手段。Haskell&#xff0c;以其强大的类型系统和函数式编程特性&#xff0c;成为了编写高效、可靠爬虫的理想选择。然而&#xff0c;随着爬虫的运行&#xff0c;监控其行为变得尤为重要。本文将探讨如何在Haskell…

ROS2从入门到精通2-4:Rviz2插件制作案例(以工具栏和多点导航插件为例)

目录 0 专栏介绍1 Rviz2插件2 项目配置3 案例一&#xff1a;工具栏插件4 案例二&#xff1a;多点导航插件5 综合演示5.1 添加插件5.2 多点巡航 0 专栏介绍 本专栏旨在通过对ROS2的系统学习&#xff0c;掌握ROS2底层基本分布式原理&#xff0c;并具有机器人建模和应用ROS2进行实…

企业图纸防泄密的最佳方案,10款好用的图纸加密软件排行榜

在数字化时代&#xff0c;企业的图纸文件往往包含了极其重要的知识产权和技术秘密&#xff0c;因此保护这些图纸的安全至关重要。有效的图纸加密不仅能防止未授权访问&#xff0c;还能确保图纸在内外部流转过程中的完整性与安全性。本文将介绍十款2024年市场上评价较高的图纸加…

基于Mysql的商业辅助决策系统的设计与实现

TOC springboot295基于Mysql的商业辅助决策系统的设计与实现 第1章 绪论 1.1 课题背景 二十一世纪互联网的出现&#xff0c;改变了几千年以来人们的生活&#xff0c;不仅仅是生活物资的丰富&#xff0c;还有精神层次的丰富。在互联网诞生之前&#xff0c;地域位置往往是人们…

零-STM32与嵌入式

目录 一、嵌入式概述 二、微控制器的关系 三、STM32的学习原因 四、STM32的应用领域 五、STM32的就业前景 六、STM32开发方式 (1) 寄存器开发&#xff08;自己做饭&#xff0c;自己吃&#xff09; (2) 函数库开发&#xff08;别人做饭&#xff0c;自己吃&#xff09; …

喜报 亚信安全再次入选湖北省网络安全应急技术支撑单位

近日&#xff0c;中共湖北省委网络安全和信息化委员会办公室和国家计算机网络应急技术处理协调中心湖北分中心公布了《关于开展第二届湖北省网络安全应急技术支撑单位评选工作的通知》&#xff0c;亚信安全凭优秀的产品技术实力和丰富的安全服务实践经验&#xff0c;连续两届成…

调研适合c++训练和部署的框架

目录 1. caffe 2. TensorFlow 3. Pytorch 4. PaddlePaddle 5. darknet 1. caffe GitHub - BVLC/caffe: Caffe: a fast open framework for deep learning. Caffe (Convolutional Architecture for Fast Feature Embedding) Caffe是一个早期流行的深度学习框架&#xff0…

GreptimeDB融资数百万美元; Oracle提供免费长期MySQL; 谷歌大模型支持云数据库问题洞察

重要更新 1. 开源时序数据库 GreptimeDB宣布完成数百万美元的新一轮融资。GreptimeDB是一款Rust 语言编写的时序数据库&#xff0c;具有分布式&#xff0c;开源&#xff0c;云原生&#xff0c;兼容性强等特点&#xff0c;帮助企业实时读写、处理和分析时序数据的同时&#xff0…

Linux设备驱动——模块的构造、运行与设计 与众不同的hello world与点灯

编写一个Linux下的设备驱动&#xff0c;首先要准备好对应内核版本的内核源码树文件。 该系列的全部文章都以嵌入式系统的ARM-Linux的环境进行阐述&#xff0c;并以交叉编译的方式在主机Ubuntu20.04系统上编译和ARM开发板上跑测 (E2000Q、H616、或者IMX6ULL看情况交叉着使用) 关…

MySQL基础练习题44-只出现一次的最大数字

目录 题目 情况一 准备数据 分析数据 情况二 准备数据 实现一 题目 单一数字 是在 MyNumbers 表中只出现一次的数字。 找出最大的 单一数字 。如果不存在 单一数字 &#xff0c;则返回 null 。 情况一 准备数据 ## 创建库 create database db; use db;## 创建表 Cre…

腾讯云短信正文模板每个变量取值最多支持6个字符出现的问题及应对方法

目录 一、参考链接二、应对方法 一、参考链接 对于长期未使用的账号及 2024 年 1 月 25 日后开通的新账号&#xff0c;腾讯云对短信正文模板的变量进行了限制&#xff1a; 验证码短信&#xff1a;每个变量取值最多支持6位纯数字。 非验证码短信&#xff1a;每个变量取值最多支…

MySQL架构设计

MySQL架构设计 查询语句&#xff1a; select * from users;返回结果为&#xff1a; 问题&#xff1a; 一条SQL查询语句是如何执行的&#xff1f; Server层 MySQL架构可以分为server层和Engine层两部分&#xff1a; 连接器&#xff08;connector&#xff09; 1. 连接管理 …

关于python中的get,set方法

一般在python面向对象中&#xff0c;每个类内都会有其所对应的属性。 而在定义属性值的时候&#xff0c;可能还得会对这些属性值进行修改和获取。为了确保代码的安全性&#xff0c;封装性和可操作性&#xff0c;我们可以使用get&#xff0c;set方式去操控。 get方法用于获取属…

贝莱德与摩根大通的最新季度持仓分析

近期&#xff0c;华尔街的两大投资巨头贝莱德和摩根大通公布了其2024年第二季度的13F报告&#xff0c;揭示了他们在投资组合上的最新动向。通过分析这些持仓数据&#xff0c;我们可以更清楚地了解这些顶级投资机构的投资策略和市场偏好。 贝莱德的科技巨头与能源投资 根据贝莱…

Trilium Notes:你的个人知识库!【送源码】

简介 Trilium Notes是一款功能全面的层次化笔记应用&#xff0c;通过树形结构构建个人知识库&#xff0c;支持Markdown编辑、网页内容剪切、笔记搜索与映射&#xff0c;并特别提供了基于画布的自由涂画功能&#xff0c;极大地提升了笔记的灵活性和创造性&#xff0c;是知识管理…

移动UI:把握好这9点,轻松设计积分兑换页面。

设计移动UI的积分兑换页面需要考虑用户体验和交互设计&#xff0c;以下是一些设计建议&#xff1a; 1. 清晰的积分信息展示&#xff1a; 在页面顶部或者中间位置展示用户当前的积分数量&#xff0c;让用户清晰地了解自己的积分情况。 2. 商品列表展示&#xff1a; 以列表或者…

[数据集][目标检测]违规撑伞检测数据集VOC+YOLO格式341张2类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;341 标注数量(xml文件个数)&#xff1a;341 标注数量(txt文件个数)&#xff1a;341 标注类别…

浅看MySQL数据库

有这么一句话&#xff1a;“一个不会数据库的程序员不是合格的程序员”。有点夸张&#xff0c;但是确是如此。透彻学习数据库是要学习好多知识&#xff0c;需要学的东西也是偏难的。我们今天来看数据库MySQL的一些简单基础东西&#xff0c;跟着小编一起来看一下吧。 什么是数据…

什么是树的先/中/后序遍历

前言 很久没有写c教程&#xff08;有几个月&#xff09;了&#xff0c;今天来讲讲树 为什么之前不讲树因为我不会但我现在能写出一些树的选择题了 首先我们画一棵树&#xff1a; 有些潦草 遍历是什么 我们要研究先/中/后序遍历&#xff0c;我们应该先知道什么叫遍历 遍历…

论文精要:《对静态分析缺陷报告进行聚类,以降低维护成本》

1. 前言 周末找到一篇《对静态分析缺陷报告进行聚类&#xff0c;以降低维护成本》&#xff0c;读了之后受到不少启发&#xff0c;特此将笔记整理出来。 论文出处&#xff1a; Published in: 2013 20th Working Conference on Reverse Engineering (WCRE)Date of Conference:…