前端HTML入门基础6(框架标签,实体,全局属性,meta元信息)

前端HTML入门基础6(框架标签,实体,全局属性,meta元信息)

  • 框架标签iframe
  • HTML实体
  • 全局属性
  • bdo标签里的dir,div里的dir
  • meta元信息

框架标签iframe

框架标签是HTML中用于创建网页布局的标签。常见的框架标签有

<frameset>和<iframe>

<iframe> 标签是HTML中用于嵌入其他网页文档的元素,它具有多种属性来定义其行为和外观。以下是一些常用的 <iframe> 属性:

  • src: 这个属性指定了要在iframe中显示的网页的URL。例如,<iframe src="https://www.example.com"></iframe>将会在iframe中加载https://www.example.com这个页面。
  • width 和 height: 这两个属性用于设置iframe的宽度和高度。它们的值可以是像素或百分比。例如,<iframe width="500" height="300"></iframe>会创建一个宽度为500像素,高度为300像素的iframe。
  • frameborder: 这个属性用于设置是否显示边框,它可以设为1(显示)或0(不显示)。
  • name: 该属性为iframe定义一个名称,这可以被其他页面中的元素如链接或脚本引用。
  • scrolling: 此属性决定是否在iframe内显示滚动条,可设置为auto(根据内容自动显示)、yes(总是显示)或no(不显示)。
  • title: 虽然不是所有浏览器都支持,但建议为<iframe>添加title属性,以提供有关框架内容的额外信息,这对屏幕阅读器用户尤其有用。

除了上述属性,还有一些其他的属性如sandboxseamless等,它们提供了更高级的控制和安全性选项。

在使用<iframe>时,需要注意它可能会影响网页的性能和可访问性,因此应当谨慎使用,并确保其内容对用户是有价值的。同时,考虑到SEO和用户体验,避免使用<iframe>来加载主要内容,因为这可能导致搜索引擎难以抓取其中的内容。

<iframe src="https://pic3.zhimg.com/50/v2-
32155a3ca643e7f6a907329df4e8a39b_720w.jpg?source=1940ef5c" 
width="600" height="400" frameborder="1"></iframe>

在这里插入图片描述
iframe 和超链接中的 target 属性可以配合使用,以在当前页面中嵌入其他网页或在新窗口/标签页中打开链接。

以下是一个例子:

<a href="https://www.example.com" target="_blank">点击这里在新窗口中打开链接</a>

在这个例子中,超链接的 href 属性指定了要打开的网址,而 target 属性设置为 _blank,表示在新的浏览器窗口或标签页中打开链接。

如果你想要在当前页面中使用 iframe 来显示链接的内容,而不是在新窗口中打开,你可以这样做:

<iframe src="https://www.example.com" width="600" height="400"></iframe>

在这个例子中,iframe 的 src 属性指定了要加载的网址,而宽度和高度属性定义了 iframe 的大小。

通过将超链接的 target 属性设置为 iframe 的 name 属性值,可以将链接的内容加载到指定的 iframe 中,而不是在新窗口中打开。例如:

<iframe name="myFrame" width="600" height="400"></iframe>
<a href="https://pic3.zhimg.com/50/v2-
32155a3ca643e7f6a907329df4e8a39b_720w.jpg?source=1940ef5c" target="myFrame">点击这里在iframe中加载链接内容</a>

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

HTML实体

HTML实体是用于在HTML中表示预留字符的编码,它们由一个&符号开头,后跟一个或多个字符的名称或数字编码,最后以分号;结束。以下是一些关于HTML实体的详细信息:

  1. 定义和作用:HTML实体用于替换那些在HTML中有特殊意义的预留字符**,以便它们能够正确显示在浏览器中而不是被解释为HTML代码。**这些预留字符包括小于号<、大于号>、引号"、单引号'等。
  2. 使用方式:在HTML文档中,可以通过实体编号(如&#8704;)或实体名称(如&forall;)来使用这些特殊符号。例如,要显示版权符号(©),可以使用&copy;&#169;
  3. 大小写敏感性:HTML实体名称对大小写敏感,这意味着&ForAll;&forall;是不同的实体。
  4. 支持范围:HTML不仅支持常用的标点符号和字母,还包括数学符号、希腊字母、箭头记号、科技符号以及各种形状等。这使得可以在网页中包含更多种类的符号和字符。
  5. 查找参考手册:如需查找特定的HTML实体,可以参考HTML实体参考手册,它提供了详细的列表和描述,帮助开发者快速找到所需的字符实体。

综上所述,通过使用HTML实体,可以确保文档的正确显示,同时丰富页面内容的表现力。
以下是一些常见的HTML实体代码示例:

  1. 小于号 <&lt;
  2. 大于号 >&gt;
  3. 引号 "&quot;
  4. 单引号 '&apos;
  5. 版权符号 ©:&copy;
  6. 注册符号 ®:&reg;
  7. 商标符号 ™:&trade;
  8. 度数符号 °:&deg;
  9. 小数点 ·:&middot;
  10. 圆括号(左):(&lpar;
  11. 圆括号(右):&rpar;
  12. 花括号(左):&lbrace;
  13. 花括号(右):&rbrace;
  14. 尖括号(左):&lang;
  15. 尖括号(右):&rang;
  16. 省略号 …:&hellip;
  17. 空格符:&nbsp;
  18. 不间断空格符:&ensp;
  19. 半角空格符:&sbquo;
  20. 全角空格符:&emsp;
    来自尚硅谷笔记

这些是一些常见的HTML实体,可以根据需要在HTML文档中使用它们来表示特定的字符。
在这里插入图片描述

全局属性

什么标签都能使用的属性
在这里插入图片描述

bdo标签里的dir,div里的dir

bdo 标签和 div 标签中的 dir 属性都用于指定文本的方向,其值可以是 ltr(从左到右)或 rtl(从右到左)。


<bdo dir="rtl">你是年少的欢喜</bdo>

<div dir="rtl">你是年少的欢喜</div>

在这里插入图片描述

meta元信息

<meta>元标签在HTML中用于提供有关页面的元信息,它位于文档的头部,不会在页面上显示,但对搜索引擎和浏览器是可见的。一般用于<head>标签内。
以下是一些常见的<meta>标签的作用和用法:

  1. 声明字符编码:通过charset属性指定文档的字符编码,如<meta charset="UTF-8">,这有助于正确显示页面上的特殊字符。
  2. 描述网页内容:使用name属性和content属性来定义网页的描述,例如<meta name="description" content="免费在线教程">,这有助于提高搜索引擎优化(SEO)的效果。
  3. 指定关键字:同样使用namecontent属性来定义关键字,如<meta name="keywords" content="HTML, CSS, JavaScript">,这有助于搜索引擎更好地理解网页内容。
  4. 定义作者信息:使用name属性和content属性来指定文档的作者,如<meta name="author" content="John Doe">
  5. 模拟HTTP标头字段<meta>标签还可以模拟某些HTTP响应头的行为,例如设置缓存策略或cookie行为。
  6. 设置视口:对于响应式网站设计,<meta>标签可以用来设置视口的宽度和缩放级别,例如<meta name="viewport" content="width=device-width, initial-scale=1.0">,这有助于改善网站在不同设备上的外观。

总的来说,<meta>标签在HTML中扮演着重要的角色,它不仅为搜索引擎提供了有关网页的重要信息,还帮助浏览器正确地渲染和显示网页内容。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!--配置字符编码-->
    <meta charset="UTF-8">
    <!--针对移动端的一个配置-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--针对IE浏览器的一个兼容性设置-->
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <!--网页关键字的配置-->
    <meta name="keyword" content="欧买噶,前端学习">
    <!--网页描述信息的配置-->
    <meta name="description" content="欧买噶前端部分的HTML的学习笔记记录">
    <!--自动刷新-->
    <meta http-equiv="refresh" content="4">
    <title>欧买噶的第2个网页</title>
</head>
<body>
</body>
</html>

完结撒花,接下来CSS!

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

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

相关文章

vue2响应式原理----发布订阅模式

很多人感觉vue2的响应式其实用到了观察者发布订阅。我们先来看一下简单的发布订阅的代码&#xff1a; // 调度中心 class Dep {static subscribes {}// 订阅所有需求static subscribe (key, demand) {// 对需求分类收集if (!Dep.subscribes[key]) Dep.subscribes[key] []Dep…

C语言-详解内存函数

文章目录 1.memcpy使用和模拟实现1.1 memcpy函数的使用规则1.2 memcpy函数的使用1.2 模拟实现memcpy函数 2.memmove 函数的使用和模拟实现2.1 memmove 函数使用规则2.2 memmove函数的使用2.3 模拟实现memmove函数2.3.1 从后往前移2.3.2 从前往后移 2.4 算法实现2.4.1 从前往后移…

基于Springboot+Vue的Java项目-旅游网站系统(附演示视频+源码+LW)

大家好&#xff01;我是程序员一帆&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &am…

JavaScript中的Blob、Buffer、ArrayBuffer和TypedArray详解

文章的更新路线&#xff1a;JavaScript基础知识-Vue2基础知识-Vue3基础知识-TypeScript基础知识-网络基础知识-浏览器基础知识-项目优化知识-项目实战经验-前端温习题&#xff08;HTML基础知识和CSS基础知识已经更新完毕&#xff09; 正文 摘要&#xff1a;本文详细介绍了JavaS…

我是如何快速上线项目文档的

Hello , 我是"小恒不会java" 本文适合有使用Markdown&#xff0c;HTML&#xff0c;nginx经验的读者阅读 其中每一个小标题代表作者的突破点&#xff0c;每个技巧都是小tip 说说我的上线流程 使用mkdocs生成模板写入写好的Markdown文件mkdocs build生成静态文件&…

C语言基础(四)

C语言基础 一维数组数组初始化全部初始化部分初始化数组的默认值冒泡排序 字符数组 二维数组初始化行数是否可省略列数是否可以省略部分初始化 访问二维字符数组 函数分类库函数自定义函数调用自定义函数函数声明 一维数组 概念&#xff1a;一组数据类型相同的元素的集合 <…

计算点到线的距离(友元)

计算点到直线的距离。类定义的基本要求&#xff1a; 定义一个点类Point&#xff0c;包含有2 个私有数据成员x和y,表示点的坐标&#xff1b;一个构造函数。定义一个直线类Line&#xff0c;包含有3 个私有数据成员a,b和c&#xff0c;表示直线方程axbyc 0&#xff1b;一个构造函数…

[大模型]# Yi-6B-Chat Lora 微调

Yi-6B-Chat Lora 微调 概述 本节我们介绍如何基于 transformers、peft 等框架&#xff0c;对 Yi-6B-Chat 模型进行 Lora 微调。Lora 是一种高效微调方法&#xff0c;深入了解其原理可参见博客&#xff1a;知乎|深入浅出Lora。 本节所讲述的代码脚本在同级目录 04-Yi-6B-Chat…

ThignsBoard通过服务端订阅共享属性

MQTT基础 客户端 MQTT连接 通过服务端订阅属性 案例 1、首先需要创建整个设备的信息&#xff0c;并复制访问令牌 ​​2、通过工具MQTTX连接上对应的Topic 3、测试链接是否成功 4、在MQTT上订阅对应的Topic 5、在客户端添加共享属性信息 6、查看整个设备的遥测数据 M…

数据库(2)

目录 6.buffer pool,redo log buffer和undo logo&#xff0c;redo logo,bin log概念以及关系&#xff1f; 7.从准备更新一条数据到事务的提交的流程描述&#xff1f; 8.能说下myisam和innodb的区别吗&#xff1f; 9.说下MySQL的索引有哪些吧&#xff1f; 10.什么是B树&…

基于Pytorch实现图像分类——基于jupyter

分类任务 网络基本构建与训练方法&#xff0c;常用函数解torch.nn.functional模块nn.Module模块 MNIST数据集下载 from pathlib import Path import requestsDATA_PATH Path("data") PATH DATA_PATH / "mnist"PATH.mkdir(parentsTrue, exist_okTrue)U…

vue3中使用webstocket

1.在项目中创建webstocket.ts文件 export default class SocketService {// 单例static instance null;static get Instance() {if (!this.instance) {this.instance new SocketService();}return this.instance;}// 和服务端连接的socket对象ws null;// 存储回调函数callB…

202206青少年软件编程(scratch图形化) 等级考试试卷(四级)

第1题&#xff1a;【 单选题】 执行下列程序&#xff0c; 说的内容是&#xff1f; &#xff08; &#xff09; A:使 B:命 C:初 D:心 【正确答案】: D 【试题解析】 : 注意标点符号也是一个字符&#xff0c; 连接后字符串是“牢记使命&#xff01; 不忘初心&#xff0c; …

宝藏免费音乐软件LX music

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 宝藏免费音乐软件LX music 前言LX Music的特色功能&#xff1a;音乐播放的新境界安装与配置&#xff1a;在不同平台上使用LX Music下载页面 主题定制 本文将深入研究LX Music&#xff0c;一款备受欢迎…

pytorch车牌识别

目录 使用pytorch库中CNN模型进行图像识别收集数据集定义CNN模型卷积层池化层全连接层 CNN模型代码使用模型 使用pytorch库中CNN模型进行图像识别 收集数据集 可以去找开源的数据集或者自己手做一个 最终整合成 类别分类的图片文件 定义CNN模型 卷积层 功能&#xff1a;提…

opencv基础图行展示

"""试用opencv创建画布并显示矩形框&#xff08;适用于目标检测图像可视化&#xff09; """ # 创建一个黑色的画布&#xff0c;图像格式(BGR) img np.zeros((512, 512, 3), np.uint8)# 画一个矩形&#xff1a;给定左上角和右下角坐标&#xff0…

Redis入门到通关之Hash命令

文章目录 ⛄介绍⛄命令⛄RedisTemplate API❄️❄️添加缓存❄️❄️设置过期时间(单独设置)❄️❄️添加一个Map集合❄️❄️提取所有的小key❄️❄️提取所有的value值❄️❄️根据key提取value值❄️❄️获取所有的键值对集合❄️❄️删除❄️❄️判断Hash中是否含有该值 ⛄…

文献阅读:猕猴的单个基底外侧杏仁核神经元表现出与额叶皮层不同的连接模式

文献介绍 「文献题目」 Single basolateral amygdala neurons in macaques exhibit distinct connectional motifs with frontal cortex 「研究团队」 Peter H. Rudebeck&#xff08;美国西奈山伊坎医学院&#xff09; 「发表时间」 2023-10-18 「发表期刊」 Neuron 「影响因…

Springboot+Vue项目-基于Java+MySQL的母婴商城系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…

Ubuntu去除烦人的顶部【活动】按钮

文章目录 一、需求说明二、打开 extensions 网站三、安装 GNOME Shell 插件四、安装本地连接器五、安装 Hide Activities Button 插件六、最终效果七、卸载本地连接器命令参考 本文所使用的 Ubuntu 系统版本是 Ubuntu 22.04 ! 一、需求说明 使用 Ubuntu 的过程中&#xff0c;屏…