【HTML系列】第六章 · 框架标签、HTML实体、HTML全局属性和meta元信息

8月前作者：麟-小白分类：Toy博客阅读(51) 违法举报

这篇具有很好参考价值的文章主要介绍了【HTML系列】第六章 · 框架标签、HTML实体、HTML全局属性和meta元信息。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

写在前面

Hello大家好，我是【麟-小白】，一位软件工程专业的学生，喜好计算机知识。希望大家能够一起学习进步呀！本人是一名在读大学生，专业水平有限，如发现错误或不足之处，请多多指正！谢谢大家！！！

如果小哥哥小姐姐们对我的文章感兴趣，请不要吝啬你们的小手，多多点赞加关注呀！❤❤❤ 爱你们！！！

目录

写在前面

1. 框架标签

1.1 框架标签

2. .HTML实体

2.1 HTML实体

3. HTML全局属性

3.1 常用的全局属性

4. meta 元信息

结语

【往期回顾】

【HTML系列】第五章 · 表单

【HTML系列】第四章 · 列表和表格

【HTML系列】第三章 · 图片标签和超链接

【HTML系列】第二章 · HTML基础

【HTML系列】第一章 · HTML入门

【HTML系列】前章 · HTML前序知识

【其他系列】

【Java基础系列】（已更新完）

1. 框架标签

1.1 框架标签

【HTML系列】第六章 · 框架标签、HTML实体、HTML全局属性和meta元信息

iframe 标签的实际应用：
- 在网页中嵌入广告。
- 与超链接或表单的 target 配合，展示不同的内容。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>框架标签</title>
</head>
<body>
    <!-- 利用iframe嵌入一个普通网页 -->
    <iframe src="https://www.toutiao.com" width="900" height="300" frameborder="0"></iframe>

    <!-- 利用iframe嵌入一个广告网页 -->
    <iframe width="300" height="250" src="https://pos.baidu.com/xchm?conwid=300&conhei=250&rdid=5841072&dc=3&di=u5841072&s1=2619619085&s2=735691552&dri=1&dis=0&dai=24&ps=2557x1059&enu=encoding&exps=110283,110277,110273,110261,110254,110011&ant=0&psi=ec321235870ce038&dcb=___adblockplus_&dtm=HTML_POST&dvi=0.0&dci=-1&dpt=none&tpr=1675046784135&ti=%E7%BD%91%E6%98%93%E6%96%B0%E9%97%BB&ari=2&ver=0129&dbv=2&drs=4&pcs=1519x763&pss=1519x11348&cfv=0&cpl=5&chi=2&cce=true&cec=UTF-8&tlm=1675046701&prot=2&rw=763&ltu=https%3A%2F%2Fnews.163.com%2F&ecd=1&fpt=TSqlzRKQUoc9+DbwoBg+b3cB10ATMyxUj3wjiV0jemwIVBo7z2ECouhUiVZq9IXN5cuofEzg/QDLSl5smhScYpTN+HQc3+QhnKv3H8MhzCYvAEcKDXAQAxK1FTXUdEd7J70MlzGWjb5DY6rlVbwmYbud1lCLmHxH5enja3K/dBHQzpLvsZCQqnanh/vBkkBTauX5z2jCEQvudlFgU1sHGA2kmnPoF0fHQA756T+sNKjATCqWL62CuVSrPm52Es2xtwueTF6sREr61IdA4wcZwEObe67hCIHPeGk5UX48Fw06RMTjgGDr6oQhyEpAeW3u9Gi0qHTYg8wBI1yoBmmwhuh0MpxtrJcLm0tGY4ODYGriOVhYwo/vU1cGOPrxvZG39yCve9+xcc7sVW4DBkCezA==|2UoaY428DIL/VGPLaRon4l5i5WbAevIWwjj0W0sj4LU=|10|d42cad75cac5486feb0f88674f9a220a&dft=0&uc=1536x834&pis=-1x-1&sr=1536x864&tcn=1675046784&qn=75c4f389da0f062c&ft=1" frameborder="0"></iframe>

    <!-- 利用iframe嵌入其他内容 -->
    <iframe src="./resource/如何一夜暴富.pdf" frameborder="0"></iframe>

    <!-- 与超链接的target属性配合使用 -->
    <a href="https://www.toutiao.com" target="container">点我看新闻</a>
    <a href="https://www.taobao.com" target="container">点我看淘宝</a><br>
    <!-- 与表单的target属性配合使用 -->
    <form action="https://so.toutiao.com/search" target="container">
        <input type="text" name="keyword">
        <input type="submit" value="搜索">
    </form>


    <iframe name="container" frameborder="0" width="900" height="300"></iframe>

</body>
</html>

【HTML系列】第六章 · 框架标签、HTML实体、HTML全局属性和meta元信息

2. .HTML实体

2.1 HTML实体

在 HTML 中我们可以用一种特殊的形式的内容，来表示某个符号，这种特殊形式的内容，就是 HTML 实体。比如小于号 < 用于定义 HTML 标签的开始。如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。

字符实体由三部分组成：一个 & 和一个实体名称（或者一个 # 和一个实体编号），最后加上一个分号 ; 。

常见字符实体总结：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML字符实体</title>
</head>
<body>
    <div>我 美女</div>
    <div>我&nbsp;&nbsp;&nbsp;&nbsp;美女</div>
    <div>我&#160;&#160;&#160;&#160;美女</div>
    <div>我们学习过很多的标题标签，其中&lt;h1&gt;是最厉害的一个！</div>
    <div>我们今天学习了一个可以表示空格的字符实体，它是：&amp;nbsp;</div>
    <div>我们今天学习了一个可以表示&的字符实体，它是：&amp;amp;</div>
    <div>当前商品的价格是：￥199</div>
    <div>当前商品的价格是：¥199</div>
    <div>当前商品的价格是：&yen;199</div>
    <div>©版权所有</div>
    <div>&copy;版权所有</div>
    <div>2 * 2 = 4</div>
    <div>2 x 2 = 4</div>
    <div>2 × 2 = 4</div>
    <div>2 &times; 2 = 4</div>
    <div>2 / 2 = 1</div>
    <div>2 ÷ 2 = 1</div>
    <div>2 &divide; 2 = 1</div>
</body>
</html>

【HTML系列】第六章 · 框架标签、HTML实体、HTML全局属性和meta元信息

3. HTML全局属性

3.1 常用的全局属性

【HTML系列】第六章 · 框架标签、HTML实体、HTML全局属性和meta元信息

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>HTML全局属性</title>
    <style>
        .student {
            color: red;
        }
    </style>
</head>
<body>
    <div id="hello1">你好啊！</div>
    <div id="hello2">你好啊2！</div>
    <div class="student">张三</div>
    <div class="student">李四</div>
    <div style="color:green">旺财</div>
    <bdo dir="rtl">你是年少的欢喜</bdo>
    <div dir="rtl">你是年少的欢喜</div>
    <div title="英雄联盟">LOL</div>
    <a href="https://www.baidu.com" title="去百度">去百度</a>
    <div lang="en">hello</div>
</body>
</html>

【HTML系列】第六章 · 框架标签、HTML实体、HTML全局属性和meta元信息

4. meta 元信息

配置字符编码
<meta charset="utf-8">
针对 IE 浏览器的兼容性配置。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
针对移动端的配置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
配置网页关键字
<meta name="keywords" content="8-12个以英文逗号隔开的单词/词语">
配置网页描述信息
<meta name="description" content="80字以内的一段话，与网站内容相关">
针对搜索引擎爬虫配置：
<meta name="robots" content="此处可选值见下表">
配置网页作者：
<meta name="author" content="tony">
配置网页生成工具
<meta name="generator" content="Visual Studio Code">
配置定义网页版权信息：
<meta name="copyright" content="2023-2027©版权所有">
配置网页自动刷新
<meta http-equiv="refresh" content="10;url=http://www.baidu.com">

【HTML系列】第六章 · 框架标签、HTML实体、HTML全局属性和meta元信息

结语

本人会持续更新文章的哦！希望大家一键三连，你们的鼓励就是作者不断更新的动力

文章来源地址https://www.toymoban.com/news/detail-401927.html

到了这里，关于【HTML系列】第六章 · 框架标签、HTML实体、HTML全局属性和meta元信息的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

【微信小程序系列02】微信小程序（二）第四章、第五章、第六章

⼩程序中绑定事件，通过bind来实现。如 bindtap bindinput bindchange 等不同的组件⽀持不同的事件，具体看组件的说明即可。 4.1 wxml 4.2 page 4.3 特别注意绑定事件时不能带参数不能带括号以下为错误写法事件传值通过标签⾃定义属性的⽅式和 value 事件触发时获取数据

2024年04月29日
浏览(26)
第六章、用户体验五要素之框架层解析（本文作用是通俗讲解，让你更容易理解）

结构层定义产品运行形式，框架层则用于确定用什么样的功能或者形式来实现。在框架层，功能型和信息型产品都需要信息设计，不同的是功能型还需要界面设计，而信息型产品则是导航设计。 1、界面设计：如果涉及提供给用户做某些事的能力，那就是界

2024年02月09日
浏览(32)
【HTML5】HTML5 多媒体标签 ② ( 视频标签＜video＞ | 视频标签常见属性 | autoplay 属性 | controls 属性 | poster 属性 | 设置多个格式视频 )

HTML 5 的 video 视频标签 , 支持 ogg / mpeg 4 ( mp4 ) / webM 三种格式的音频 , 不同的浏览器支持的音频格式不同 ; IE 浏览器 : 9.0 以上版本支持 mp4 格式 ; Firefox 浏览器 : 3.5 以上版本支持 ogg 格式 ; 4.0 以上版本支持 webM 格式 ; Opera 浏览器 : 10.5 以上版本支持 ogg 格式 ; 10.6 以上版本支持

2024年02月09日
浏览(45)
HTML5-1-标签及属性

页面的组成： HTML（HyperText Markup Language，超文本标记语言）是用来描述网页的一种语言，它不是一种编程语言，而是一种标记语言。 HTML5 是下一代 HTML 标准。 HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。基本结构： HTML中不区分大小写，但

2024年02月10日
浏览(51)
HTML中link标签的那些属性

在HTML中， link 标签是一个自闭合元素，通常位于文档的 head 部分。它用于建立与外部资源的关联，如样式表、图标等。 link 标签具有多个属性，其中 rel 和 href 是最常用的。 rel 属性定义了当前文档与链接资源之间的关系。常见的 rel 属性值有： - stylesheet ：表示链接到一个

2024年02月02日
浏览(69)
[爬虫]1.2.1 HTML标签和属性

HTML（HyperText Markup Language）是一种用于创建网页的标记语言。HTML文档由一系列的HTML标签构成，每个标签都有自己的意义和用途。HTML标签通常成对出现，由一个开始标签和一个结束标签组成，结束标签的名称前有一个斜杠。例如， p 是一个段落标签的开始， /p 是一个段落标签

2024年02月16日
浏览(30)
HTML中meta标签的那些属性

meta 标签是 HTML 中用于描述网页元信息的元素。它位于 head 部分，不会显示在页面内容中，但对于浏览器、搜索引擎等具有重要作用。主要作用有：定义文档的字符编码、提供网页的描述信息、、作者、视口设置等，这些信息有助于搜索引擎理解和索引网页内容。

2024年02月03日
浏览(32)
HTML ＜iframe＞标签的常用属性--详解(附加代码)

iframe 标签用于在网页中嵌入另一个文档（通常是外部网页）或者内嵌内容。以下是 iframe 标签的示例代码和一些常用属性：通过使用 iframe 标签，可以将其他网页的内容嵌入到当前网页中，并提供许多可选属性来控制它们的行为和样式。上述示例演示了基本的使用方法以及一

2024年02月12日
浏览(32)
HTML中script 标签中的那些属性

在HTML中， script 标签用于嵌入或引用JavaScript代码。在 script 标签中，有两个属性可以用来控制脚本的加载和执行方式： async 和 defer 。当然这也是常见的一道面试题， async 和 defer 的作用和区别。 async 和 defer 属性都可以用于异步加载脚本，从而避免了在加载脚本时阻塞浏

2024年02月01日
浏览(39)
如何批量修改删除html文件中的标签属性

最近工作中遇到一个问题，一份html文档因为内容里面的样式标签过多导致文件整体过大。这些描述标签不是必须的，现在需要优化删除掉这些标签从而减小文件体积。对于这种批量修改删除的任务，我们首先想到的就是使用编辑器处理。编辑html文档，我使用的是VS Code，它

2024年02月01日
浏览(50)