day21网页布局

文章目录

    • 块元素和行内元素
    • 列表标签
    • 表格标签
    • 媒体元素
    • 页面结构分析
    • iframe内联框架

块元素和行内元素


块元素:无论内容多少,该元素独占一行。(p标签、h1~h6…)

行内元素:内容撑开宽度,左右都是行内元素的可以排在一行。(a、strong、em…)

列表标签


什么是列表

列表就是信息资源的一种展示形式,它可以使信息结构化和条理化,并以列表的样式显示出来,以便浏览你者能更快捷的获得相应的信息。

列表的分类:

  • 无序列表 ul、li
  • 有序列表 ol、li
  • 定义列表 dl、dt、dd
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!-- 无序列表
应用范围:导航、侧边栏
-->
无序列表:
<ul>
  <li>java</li>
  <li>C/C++</li>
  <li>运维</li>
  <li>前端</li>
  <li>测试</li>
</ul>

<hr>

<!-- 有序列表
应用范围:试卷、问答……
-->
有序列表:
<ol>
  <li>java</li>
  <li>C/C++</li>
  <li>运维</li>
  <li>前端</li>
  <li>测试</li>
</ol>


<hr>

<!-- 定义列表
dl:标签
dt:列表标题
dd:列表内容

应用范围:公司网站底部……
-->
定义列表:
<dl>
  <dt>学科</dt>

  <dd>java</dd>
  <dd>C/C++</dd>
  <dd>python</dd>
  <dd>web</dd>
  <dd>linux</dd>

  <dt>地点</dt>

  <dd>重庆</dd>
  <dd>广州</dd>
  <dd>深圳</dd>
  <dd>北京</dd>
  <dd>上海</dd>
</dl>


</body>
</html>

在这里插入图片描述

表格标签


为什么使用表格

  • 简单通用
  • 结构稳定

表格基本结构:

  • 单元格
  • 跨行
  • 跨列

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<!--表格table
行 tr
列 td
-->
<table border="1px">
  <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>
  <tr>
    <td>4-1</td>
    <td>4-2</td>
    <td>4-3</td>
    <td>4-4</td>
  </tr>
</table>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<!--表格table
行 tr
列 td
-->
<table border="1px">
  <tr>
<!--    colspan跨列-->
    <td colspan="4">1-1</td>
<!--    <td>1-2</td>-->
<!--    <td>1-3</td>-->
<!--    <td>1-4</td>-->
  </tr>
<!--  跨行-->
  <tr>
    <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>
  <tr>
    <td>4-1</td>
    <td>4-2</td>
    <td>4-3</td>
    <td>4-4</td>
  </tr>
</table>
</body>
</html>

媒体元素


视频和音频

视频元素:video

音频元素:audio

controls:控制条
autoplay:自动播放

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>音频视频</title>
</head>
<body>
<!--
src:资源路径
controls:控制条
autoplay:自动播放-->
<audio src="../resource/audio/私奔到月球.mp3" controls autoplay>私奔到月球</audio>

<video src="../resource/video/BACKSEAT.mp4" controls></video>

</body>
</html>

页面结构分析


元素名描述
header标题头部区域的内容(用于页面或页面中的一块区域)
footer标记脚部区域的内容(用于整个页面或页面的一块区域)
sectionweb页面中的一块独立区域
article独立的文章内容
aside相关内容或应用(常用于侧边栏)
nav导航栏辅助内容

iframe内联框架


<iframe src="path" name="mainFrame"></iframe>
  • src:引用页面地址
  • name:框架标识名
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe内联框架</title>
</head>
<body>
<!--iframe内联框架
src:地址
width:宽度
height:高度
-->
<iframe src="" name="turn" frameborder="0" width="600px" height="300px"></iframe>
<a href="https://blog.csdn.net/m0_51635935?spm=1011.2415.3001.5343" target="turn">点击跳转</a>

<iframe src="https://yiyan.baidu.com/" frameborder="0" width="900px" height="500px"></iframe>

<!--bilibili中分享视频中的嵌入代码-->
<iframe src="//player.bilibili.com/player.html?aid=496605776&bvid=BV1mK411a7v6&cid=1415345803&p=1"
        scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>

</body>
</html>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java基础---IO知识以及常用的API整理

Java 中的 I/O&#xff08;输入/输出&#xff09;是一个核心概念&#xff0c;涉及数据的读取和写入。Java I/O API 提供了丰富的类和接口&#xff0c;用于处理不同类型的数据流。了解 Java I/O 的基础知识对于面试和日常编程都非常重要。所以今天来整理一下&#xff1a; 1. Fi…

day42_jdbc

今日内容 0 复习昨日 1 JDBC概述 2 JDBC开发步骤 3 完成增删改操作 4 ResultSet 5 登录案例 0 复习昨日 1 写出JQuery,通过获得id获得dom,并给input输入框赋值的语句 $(“#id”).val(“值”) 2 mysql内连接和外连接的区别 内连接只会保留完全符合关联条件的数据 外连接会保留表…

LeetCode、746. 使用最小花费爬楼梯【简单,动态规划 线性DP】

文章目录 前言LeetCode、746. 使用最小花费爬楼梯【简单&#xff0c;动态规划 线性DP】题目与分类思路 资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝2W&#xff0c;csdn博客专家、Java领域优质创作者&#xff0c;博客之星、阿里云平台优质作者、专注于Java后端技术领域。…

idea 快捷键ctrl+shift+f失效的解决方案

文章目录 搜狗输入法快捷键冲突微软输入法快捷键冲突 idea的快捷键ctrlshiftf按了没反应&#xff0c;理论上是快捷键冲突了&#xff0c;检查搜狗输入法和微软输入法快捷键。 搜狗输入法快捷键冲突 不需要简繁切换的快捷键&#xff0c;可以关闭它&#xff0c;或修改快捷键。 微…

Linux Shell编程系列--开篇

一、目的 从本篇开始介绍Linux Shell脚本编程&#xff0c;为简单起见&#xff0c;本篇中以一个显示当前时间的shell脚本来帮助大家理解shell脚本的组成。 SHELL脚本中可以包含变量、函数、命令等部分。 二、介绍 我们通过vim新建一个myshell.sh的脚本&#xff0c;然后输入以下…

工作与生活平衡:在生活中寻找和谐

工作和生活是我们生活中不断交织的两个重要方面。对许多人来说&#xff0c;找到两者之间的完美平衡已经成为一个持久的挑战。然而&#xff0c;与其专注于平衡&#xff0c;更重要的是要认识到工作和生活并不是可以相互平衡的两个分离实体&#xff0c;而是一个相互影响的循环。正…

C++之程序内存分配方式

程序内存布局 现在的应用程序都运行在一个虚拟内存空间里&#xff0c;以32位系统为例&#xff0c;其寻址空间为 4G&#xff0c;大部分的操作系统都将4G内存空间的一部分挪给内核调用&#xff0c;应用程序无法直接 访问这一段内存&#xff0c;这一部分内核地址成为内核态空间&am…

LeetCode:13.罗马数字转整数

13. 罗马数字转整数 - 力扣&#xff08;LeetCode&#xff09; 目录 思路&#xff1a; 官解代码&#xff1a; 作者辣眼代码: 每日表情包&#xff1a; 思路&#xff1a; 思路已经很明了了&#xff0c;题目已经给出一般规则和特殊规则&#xff08;而且题目确保给定的是正确的…

利用 ASP.NET Core 开发单机应用

前言 现在是分布式微服务开发的时代&#xff0c;除了小工具和游戏之类刚需本地运行的程序已经很少见到纯单机应用。现在流行的Web应用由于物理隔离天然形成了分布式架构&#xff0c;核心业务由服务器运行&#xff0c;边缘业务由客户端运行。对于消费终端应用&#xff0c;为了应…

Nginx使用详解

简介Nginx的优缺点Nginx的应用场景Nginx支持的模块Nginx模块配置示例1. **HTTP Access Log 模块**2. **HTTP SSL 模块**3. **HTTP Gzip 模块**4. **HTTP Rewrite 模块** Nginx支持的反向代理协议Nginx反向代理配置Nginx反向代理优点Nginx反向代理配置示例Nginx常用配置参数Ngin…

一文搞懂 springboot 如何融合数据源

1、简介 springboot 支持关系型数据库的相关组件进行配置&#xff0c;包括数据源、连接池、事务管理器等的自动配置。降低了数据库使用的难度&#xff0c;除了 mysql 还支持 Derby、H2等嵌入式数据库的自动配置&#xff0c;MongoDB、Redis、elasticsearch等常用的 NoSQL 的数据…

uWSGI、灰度发布、网站数据指标分析、网站限速

1 案例1&#xff1a;部署Python网站项目 1.1 问题 配置Nginx使其可以将动态访问转交给uWSGI&#xff1a; 1.2 方案 安装Python工具及依赖 安装uWSGI并编写配置文件 1.3 步骤 实现此案例需要按照如下步骤进行。 步骤一&#xff1a; 首先$教学资料目录/python拷贝到虚拟…

Python程序设计 函数

简单函数 函数&#xff1a;就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。 函数的使用包含两个步骤&#xff1a; 定义函数 —— 封装 独立的功能 调用函数 —— 享受 封装 的成果 函数的作用&#xff0c;在开发程序时&#xff0c;使用…

Unity3d Shader篇(一)— 顶点漫反射着色器解析

文章目录 前言一、顶点漫反射着色器是什么&#xff1f;1. 顶点漫反射着色器的工作原理 二、编写顶点漫反射着色器1. 定义属性2. 创建 SubShader3. 编写着色器程序段4. 完成顶点着色器5. 完成片段着色器 三、效果四、总结 前言 在 Unity 中&#xff0c;Shader 可以用来实现各种…

jmeter设置关联

一、为什么要设置关联&#xff1f; http协议本身是无状态的&#xff0c;客户端只需要简单向服务器请求下载某些文件&#xff0c;无论是客户端还是服务端都不去记录彼此过去的行为&#xff0c;每一次请求之间都是独立的。如果jmeter需要设置跨线程组脚本&#xff0c;就必须设置…

【问题篇】activiti工作流转办并处理备注问题

当处理activiti转办问题时&#xff0c;需要做的就是处理审批人和备注问题。 处理的思路是&#xff0c;先将当前环节标志成转办标签&#xff0c;再通过BUSINESS_KEY_找到流程实例的历史记录&#xff0c;找到最新的一条复制一份出来&#xff0c;表示需要转办到的人的历史记录并设…

APP专项测试方法总结

APP专项测试 1、网络测试 可使用抓包工具辅助网格测试推荐&#xff1a;fiddler&#xff0c;Charles 网络切换&#xff1a; 2G-3G-4G-wifi-网络信号差–无网 网络信号弱&#xff1a; 关注是否出现ANR、crash 2、中断测试 意外中断&#xff1a; 来电&#xff1b;短信&am…

不需英文基础也可以轻松学编程,中文编程开发工具免费版下载,编程工具构件箱之扩展控制面板构件用法

不需英文基础也可以轻松学编程&#xff0c;中文编程开发工具免费版下载&#xff0c;编程工具构件箱之扩展控制面板构件用法 一、前言 编程入门视频教程链接 https://edu.csdn.net/course/detail/39036 编程工具及实例源码文件下载可以点击最下方官网卡片——软件下载——常…

ShardingSphere 5.x 系列【3】分库分表中间件技术选型

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Spring Boot 版本 3.1.0 本系列ShardingSphere 版本 5.4.0 源码地址&#xff1a;https://gitee.com/pearl-organization/study-sharding-sphere-demo 文章目录 1. 前言2. My Cat3. ShardingSphe…

C++ 类与对象(下)

目录 1. 再谈构造函数 1.1 构造函数体赋值 1.2 初始化列表 1.3 explicit关键字 2. static成员 2.1 概念 2.2 特性 3.友元 3.1友元函数 3.2 友元类 4. 内部类 5.匿名对象 6.拷贝对象时的一些编译器优化 7. 再次理解类和对象 【本节目标】 1. 再谈构造函数 2. Static成员…
最新文章