HTML基础(3)

1、内联框架

iframe用于在网页内显示网页,语法如下:

<iframe src="URL"></iframe>

URL指向隔离页面

hight,weight设置高宽,删除边框将frameborder设置为0

<td>
<iframe frameborder="0" name="myIframe" id="myIframe" src="b.jsp" height="100%" width="100%" scrolling="auto" align="middle"></iframe>
</td>

上述代码将在当前页面的<td>元素中嵌入一个名为"myIframe"的iframe,并通过src属性指定了要嵌入的网页地址为"b.jsp"。

2、文件路径

文件路径描述了网站文件夹结构中某个文件的位置。
文件路径会在链接外部文件时被用到:
    网页
    图像
    样式表
    JavaScript

①绝对文件路径:指向一个因特网文件的完整URL:

如:

<img src="https://www.csdn.net/images/picture.jpg" alt="csdn">

②相对路径

指向了相对于当前页面的文件,三个例子:

下例文件路径指向了位于当前网站根目录中 images 文件夹里的一个文件:

<img src="/images/picture.jpg" alt="csdn">
<img src="images/picture.jpg" alt="csdn">

上例文件路径指向了位于当前文件夹中 images 文件夹里的一个文件。

<img src="../images/picture.jpg" alt="csdn">

上例文件路径指向了位于当前文件夹的上一级文件夹中 images 文件夹里的一个文件。

——————

3、HTML头部元素

<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。
以下标签都可以添加到 head 部分:

<title>标题、

<base>用于指定页面中所有相对链接的默认链接地址、

<link>用于在HTML文档中引入外部资源,如CSS样式表、图标、

<meta>用于在HTML文档中定义元数据,即描述文档的数据、

<script>用于在HTML文档中嵌入或引用JavaScript代码、

<style>样式。

——————

4、布局使用<div>来实现,通过在<div>内部添加<h1>、<p>等元素来实现,使用css中float来控制每个<div>块的浮动来实现多列。

如下代码表示了一个多列的实现,第一个div是标题“三篇文章”,第二个div用于选择三篇文章中某一篇,用float让其靠左,第三个div是文章内容,紧靠第二个div,也是用了float=“left”,最后一个是页脚,单独一列。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="./C.css">
</head>
<body>
<div id="header">
    <h1>三篇文章</h1>
</div>

<div id="nav">
    文章1<br>
    文章2<br>
    文章3<br>
</div>

<div class="section">
    <h1>文章1</h1>
    <p>
        这是文章1的内容
    </p>
</div>
<div id="footer">
    这是页脚
</div>
</body>

CSS文件:

#header {
    background-color:khaki;
    color:black;
    text-align:center;
    padding:10px;
}
#nav {
    line-height:30px;
    background-color:forestgreen;
    height:300px;
    width:150px;
    float:left;
    padding:10px;
}
.section {
    width:350px;
    float:right;
    padding:10px;
}
#footer {
    background-color:black;
    color:wheat;
    clear:both;
    text-align:center;
    padding:5px;
}

得到的结果:

定义网页的一些语义元素(图片来自w3school网站):

————————

5、响应式web设计,目的是使网页能够自适应手机、平板、电脑,能够以正确的分辨率来显示。

可以自己设计,也可以使用现成的CSS框架。

——————

6、计算机代码元素

①<code>标签用于表示计算机代码,可以在其中包含任何计算机编程语言的代码。它会以等宽字体显示,并且会自动转义特殊字符,使其在浏览器中正确显示:

<p>下面是一个简单的Python程序:</p>
<code>
def hello_world():
    print("Hello, World!")

hello_world()
</code>


②<kbd>标签用于表示键盘输入,HTML中的<kbd>元素用于表示键盘输入或命令。它的实际作用是将文本标记为键盘输入或命令,以便与其他文本区分开来。<kbd>元素通常以等宽字体显示,并且可以使用CSS样式进行自定义。
③<samp>标签用于表示示例文本,通常用于显示计算机程序的输出结果或示例代码的执行结果。它会以等宽字体显示,并且会自动转义特殊字符,使其在浏览器中正确显示。
④<var>标签用于表示计算机变量,通常用于显示变量名或占位符。它会以斜体字体显示,并且会自动转义特殊字符,使其在浏览器中正确显示。
⑤<pre>标签用于定义预格式化的文本块,通常用于显示计算机源代码或其他需要保留原始格式的文本。它会以等宽字体显示,并且会保留文本中的空格、换行符等格式。

————————

7、语义

即一些元素从字面上能够判断其作用,常见的有:

  • article>:定义文章
  • <aside>:定义页面内容外的内容
  • <details>:定义用户能够查看或隐藏的额外细节
  • <figcaption>:定义 <figure> 元素的标题。
  • <figure>:规定自包含内容,比如图示、图表、照片、代码清单等。
  • <footer>:页脚
  • <header>:页眉
  • <main>:文档的主内容
  • <mark>:重要的或强调的文本
  • <nav>:导航链接
  • <section>:文档中的节
  • <summary>:<details> 元素的可见标题
  • <time>:日期/时间

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

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

相关文章

用C代码实现环形缓冲区(ring buf)

用C代码实现环形缓冲区&#xff08;ring buf&#xff09; 概述环境介绍launch.json(没改&#xff09;tasks.json注意 代码ringbuf.cringbuf.hmain.c 测试说明工程代码下载 概述 因嵌入式项目需要&#xff0c;串口接收的数据有很高的周期性发送频率&#xff0c;原方式通过查询接…

VideoGPT:Video Generation using VQ-VAE and Transformers

1.introduction 对于视频展示&#xff0c;选择哪种模型比较好&#xff1f;基于似然->transformers自回归。在没有空间和时间溶于的降维潜在空间中进行自回归建模是否优于在所有空间和时间像素级别上的建模&#xff1f;选择前者&#xff1a;自然图像和视频包括了大量的空间和…

java程序生成exe文件启动时,在没有java环境计算机运行

1.idea项目配置工件 2. 开始构建java程序成jar包 3. 生成exe启动程序 注&#xff1a;下面的输入框中写错了&#xff0c;应该是.\jre才对 4. 在已经选择的生成exe存放文件夹找到已经生成exe启动程序

一文详解静态图和动态图中的自动求导机制

01 静态图与动态图的区别 之前在[1]中提到过&#xff0c;自动求导&#xff08;AutoDiff&#xff09;机制是当前深度学习模型训练采用的主要方法&#xff0c;而在静态图和动态图中对于自动求导的处理是不一样的。作为前置知识&#xff0c;这里简单进行介绍。 我们都知道静态图…

Vue.js------vue基础

1. 能够了解更新监测, key作用, 虚拟DOM, diff算法2. 能够掌握设置动态样式3. 能够掌握过滤器, 计算属性, 侦听器4. 能够完成品牌管理案例 一.Vue基础_更新监测和key 1.v-for更新监测 目标&#xff1a;目标结构变化, 触发v-for的更新 情况1: 数组翻转情况2: 数组截取情况3…

QT:信号与槽

作业&#xff1a; 完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转到其他界面 如果账号和…

Platforms Jumping(贪心,处理策略)

文章目录 题目描述输入格式输出格式样例输入1样例输出1样例输入2样例输出2样例输入3样例输出3提交链接提示 解析参考代码 题目描述 有一条宽度为 n n n 的河流。河的左岸是 0 0 0 单元格&#xff0c;右岸是 n 1 n1 n1 单元格(更正式地说&#xff0c;这条河可以表示为一串从…

MySQL基础练习题:习题2-3

这部分主要是为了帮助大家回忆回忆MySQL的基本语法&#xff0c;数据库来自于MySQL的官方简化版&#xff0c;题目也是网上非常流行的35题。这些基础习题基本可以涵盖面试中需要现场写SQL的问题。上期帮助大家建立数据库&#xff0c;导入数据&#xff0c;接下来让我们继续练习。 …

代码随想录35期Day08-字符串

344.反转字符串 位运算 func reverseString(s []byte) {l : 0r : len(s) - 1for l < r {s[l] ^ s[r]s[r] ^ s[l]s[l] ^ s[r]lr--} }541. 反转字符串II 没技巧 func reverseStringRange(s []byte, l int, r int) {if r > len(s) {r len(s) - 1}for l < r {s[l] ^…

c++的学习之路:22、多态(1)

摘要 本章主要是说一些多态的开头。 目录 摘要 一、多态的概念 二、多态的定义及实现 2.1、多态的构成条件 2.2、虚函数 2.3、虚函数的重写 2.4、C11 override 和 final 2.5、重载、覆盖(重写)、隐藏(重定义)的对比 三、思维导图 一、多态的概念 多态的概念&#…

Harmony鸿蒙南向驱动开发-Regulator

Regulator模块用于控制系统中各类设备的电压/电流供应。在嵌入式系统&#xff08;尤其是手机&#xff09;中&#xff0c;控制耗电量很重要&#xff0c;直接影响到电池的续航时间。所以&#xff0c;如果系统中某一个模块暂时不需要使用&#xff0c;就可以通过Regulator关闭其电源…

Vue3---基础2(component)

主要讲解 component 的创建 以及vue插件的安装 Vue.js Devtools 为谷歌浏览器的Vue插件&#xff0c;可以在调试工具内查看组件的数据等 下载 有两种下载方式 1. 谷歌应用商店 打开Chrome应用商店去下载&#xff0c;这个方法需要魔法 2. 极简插件 极简插件官网_Chrome插件下载_…

【图论】详解链式前向星存图法+遍历法

细说链式前向星存图法 首先要明白&#xff0c;链式前向星的原理是利用存边来进行模拟图。 推荐左神的视频–建图、链式前向星、拓扑排序 比方说有这样一张图&#xff0c;我们用链式前向星来进行模拟时&#xff0c;可以将每一条边都进行编号&#xff0c;其中&#xff0c;红色的…

SQL注入sqli_labs靶场第五、六题

第五题 根据报错信息&#xff0c;判断为单引号注入 没有发现回显点 方法&#xff1a;布尔盲注&#xff08;太耗时&#xff0c;不推荐使用&#xff09; 1&#xff09;猜解数据库名字&#xff1a;&#xff08;所有ASCII码值范围&#xff1a;0~127&#xff09; ?id1 and length…

数字化浪潮下,制造业如何乘势而上实现精益生产

随着数字化技术的迅猛发展&#xff0c;制造业正迎来前所未有的变革机遇。本文将探讨如何利用数字化手段助推制造业实现精益生产&#xff0c;从而在激烈的市场竞争中脱颖而出。 1、构建智能化生产系统 借助物联网技术&#xff0c;实现设备之间的互联互通&#xff0c;构建智能化…

【Qt踩坑】ARM 编译Qt5.14.2源码-QtWebEngine

1.下载源码 下载网站&#xff1a;Index of /new_archive/qt/5.14/5.14.2/single 2.QWebEngine相关依赖 sudo apt-get install flex libicu-dev libxslt-dev sudo apt-get install libssl-dev libxcursor-dev libxcomposite-dev libxdamage-dev libxrandr-dev sudo apt-get …

3. Spring 注解存储对象 Bean的命名规范

从Java5.0开始&#xff0c;Java开始支持注解。Spring做为Java生态中的领军框架&#xff0c;从2.5版本后也开始支持注解。相比起之前使用xml来配置Spring框架&#xff0c;使用注解提供了更多的控制Spring框架的方式。 SpringFramework版本对应jdk版本重要特性SpringFramework 1…

Linux——fork复制进程

1)shell: 在计算机科学中&#xff0c;Shell俗称壳&#xff08;用来区别于核&#xff09;&#xff0c;是指“为使用者提供操作界面”的软件&#xff08;command interpreter&#xff0c;命令解析器&#xff09;。它类似于DOS下的COMMAND.COM和后来的cmd.exe。它接收用户命令&…

练习题(2024/4/10)

1. 删除有序数组中的重复项 给你一个 非严格递增排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯一元…

安装VMware ESXi虚拟机系统

简介&#xff1a;ESXi是VMware公司开发的一款服务器虚拟化操作系统。它能够在一台物理服务器上运行多个虚拟机&#xff0c;每个虚拟机都可以独立运行操作系统和应用程序&#xff0c;而且对硬件配置要求低&#xff0c;系统运行稳定。 准备工具&#xff1a; 1.8G或者8G以上容…