前端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
属性,以提供有关框架内容的额外信息,这对屏幕阅读器用户尤其有用。
除了上述属性,还有一些其他的属性如sandbox
、seamless
等,它们提供了更高级的控制和安全性选项。
在使用<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实体的详细信息:
- 定义和作用:HTML实体用于替换那些在HTML中有特殊意义的预留字符**,以便它们能够正确显示在浏览器中而不是被解释为HTML代码。**这些预留字符包括小于号
<
、大于号>
、引号"
、单引号'
等。 - 使用方式:在HTML文档中,可以通过实体编号(如
∀
)或实体名称(如∀
)来使用这些特殊符号。例如,要显示版权符号(©),可以使用©
或©
。 - 大小写敏感性:HTML实体名称对大小写敏感,这意味着
∀
和∀
是不同的实体。 - 支持范围:HTML不仅支持常用的标点符号和字母,还包括数学符号、希腊字母、箭头记号、科技符号以及各种形状等。这使得可以在网页中包含更多种类的符号和字符。
- 查找参考手册:如需查找特定的HTML实体,可以参考HTML实体参考手册,它提供了详细的列表和描述,帮助开发者快速找到所需的字符实体。
综上所述,通过使用HTML实体,可以确保文档的正确显示,同时丰富页面内容的表现力。
以下是一些常见的HTML实体代码示例:
- 小于号
<
:<
- 大于号
>
:>
- 引号
"
:"
- 单引号
'
:'
- 版权符号 ©:
©
- 注册符号 ®:
®
- 商标符号 ™:
™
- 度数符号 °:
°
- 小数点 ·:
·
- 圆括号(左):
((
- 圆括号(右):
)
- 花括号(左):
{
- 花括号(右):
}
- 尖括号(左):
⟨
- 尖括号(右):
⟩
- 省略号 …:
…
- 空格符:
- 不间断空格符:
 
- 半角空格符:
‚
- 全角空格符:
 
这些是一些常见的HTML实体,可以根据需要在HTML文档中使用它们来表示特定的字符。
全局属性
什么标签都能使用的属性
bdo标签里的dir,div里的dir
bdo 标签和 div 标签中的 dir 属性都用于指定文本的方向,其值可以是 ltr(从左到右)或 rtl(从右到左)。
<bdo dir="rtl">你是年少的欢喜</bdo>
<div dir="rtl">你是年少的欢喜</div>
meta元信息
<meta>
元标签在HTML中用于提供有关页面的元信息,它位于文档的头部,不会在页面上显示,但对搜索引擎和浏览器是可见的。一般用于<head>
标签内。
以下是一些常见的<meta>
标签的作用和用法:
- 声明字符编码:通过
charset
属性指定文档的字符编码,如<meta charset="UTF-8">
,这有助于正确显示页面上的特殊字符。 - 描述网页内容:使用
name
属性和content
属性来定义网页的描述,例如<meta name="description" content="免费在线教程">
,这有助于提高搜索引擎优化(SEO)的效果。 - 指定关键字:同样使用
name
和content
属性来定义关键字,如<meta name="keywords" content="HTML, CSS, JavaScript">
,这有助于搜索引擎更好地理解网页内容。 - 定义作者信息:使用
name
属性和content
属性来指定文档的作者,如<meta name="author" content="John Doe">
。 - 模拟HTTP标头字段:
<meta>
标签还可以模拟某些HTTP响应头的行为,例如设置缓存策略或cookie行为。 - 设置视口:对于响应式网站设计,
<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!