【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 框架标签

  • 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>

 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>

3. HTML全局属性


3.1 常用的全局属性

<!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>

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">

结语


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

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

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

相关文章

【前端面试题——微信小程序】

目录1.请谈谈wxml与标准的html的异同&#xff1f;2.请谈谈WXSS和CSS的异同&#xff1f;3.请谈谈微信小程序主要目录和文件的作用&#xff1f;4.请谈谈小程序的双向绑定和vue的异同&#xff1f;5.简单描述下微信小程序的相关文件类型&#xff1f;6.微信小程序有哪些传值(传递数据…

jsp+javaEE+mysql校园物品租赁系统dzkf5294程序

1&#xff0e;物品信息管理&#xff1a;管理员发布物品信息后&#xff0c;普通用户便可以查询到该物品信息&#xff0c;用户选择某个物品信息&#xff0c;查询物品信息&#xff0c;管理员审核添加&#xff0c;或删除物品信息。 2&#xff0e;租赁管理&#xff1a;管理员发布租赁…

ChatGPT大解密:带您探讨机器学习背后的秘密、利用与发展

一、什么是机器学习&#xff1f;二、ChatGPT 的运作原理三、ChatGPT 生活利用1、自然语言处理2、翻译3、自动回复四、ChatGPT vs 其他相关技术五、ChatGPT 的未来1、未来发展2、职业取代3、客服人员4、翻译人员5、语言学家6、机遇与挑战六、结语这篇文章&#xff0c;将带着各位…

ThreeJS-投影、投影模糊(十七)

无投影&#xff1a; 完整的代码&#xff1a; <template> <div id"three_div"></div> </template> <script> import * as THREE from "three"; import { OrbitControls } from "three/examples/jsm/controls/Or…

再不转型为ChatGPT程序员,有遭受降维打击的危险

Open AI在演示GPT-4的时候&#xff0c;有这么一个场景&#xff1a;给一个界面草图&#xff0c;就可以生成网页代码。这个演示非常简单&#xff0c;如果界面原型比较复杂呢&#xff1f;像这样&#xff1a;ChatGPT能不能直接生成HTML, CSS,JavaScript代码&#xff0c;把这个网页给…

MongoDB副本集Command failed with error 10107 (NotMaster):on server

问题 通过DataGrip连接的MongoDB节点&#xff0c;之前可以新增或更新数据。某天突然不能新增或更新数据&#xff0c;报错信息如下&#xff1a; 具体的报错信息&#xff1a; Command failed with error 10107 (NotMaster): not master on server 10.19.21.11:30386. The full…

HNU-电路与电子学-实验3

实验三 模型机组合部件的实现&#xff08;二&#xff09;&#xff08;实验报告格式案例&#xff09; 班级 计XXXXX 姓名 wolf 学号 2021080XXXXX 一、实验目的 1&#xff0e;了解简易模型机的内部结构和工作原理。 2&#xff0e;分析模型机的功能&am…

【Linux】LVM与磁盘配额

文章目录1.LVM1.1 LVM概述1.2 LVM机制1.3 LVM管理命令1.4 LVM应用实例2. 磁盘配额2.1 磁盘配额概述2.2 磁盘配额管理2.3 启用磁盘配额支持2.4 磁盘配额应用实例1.LVM 1.1 LVM概述 Logical Volume Manager&#xff0c;逻辑卷管理 ● 能够在保持现有数据不变的情况下动态调整磁盘…

43掌握自动化运维工具 Puppet 的基本用法,包括模块编写、资源管理

Puppet是一种自动化配置管理工具&#xff0c;可以自动化地部署、配置和管理大规模服务器环境。本教程将介绍Puppet的基本用法&#xff0c;包括模块编写和资源管理。 模块编写 在Puppet中&#xff0c;模块是一组相关的类、文件和资源的集合。模块可以用于部署和配置应用程序、服…

图形编辑器:排列移动功能的实现

大家好&#xff0c;我是前端西瓜哥。这次来实现一下图形编辑器排列&#xff08;arrange&#xff09;功能的实现。 先看效果。 有四种移动方式&#xff1a; 置顶&#xff08;Front&#xff09;&#xff1a;将指定的图形移动到顶部&#xff1b;置底&#xff08;Back&#xff09…

嵌入式学深度学习:1、Pytorch框架搭建

嵌入式学深度学习&#xff1a;1、Pytorch框架搭建1、介绍2、Pytorch开发环境搭建2.1、查看GPU是否支持CUDA2.2、安装Miniconda2.3、使用Conda安装pytorch2.4、安装常用库3、简单使用验证1、介绍 深度学习是机器学习的一种&#xff0c;如下图&#xff1a; 目前深度学习应用场景…

MySQL-四大类日志

目录 &#x1f341;MySQL日志分为4大类 &#x1f341;错误日志 &#x1f343;修改系统配置 &#x1f341;二进制日志 &#x1f343;查看二进制日志 &#x1f343;删除二进制日志 &#x1f343;暂时停止二进制日志的功能 &#x1f341;事务日志(或称redo日志) &#x1f341;慢查…

chatgpt3中文辅助写作-gpt2中文文本生成

GPT-3是一种深度学习模型&#xff0c;具有潜在的巨大计算成本和训练麻烦。根据OpenAI公司的官方消息&#xff0c;训练GPT-3是一项昂贵的和耗时的过程&#xff0c;在OpenAI公司&#xff0c;训练GPT-3的成本已经超过了10亿美元。考虑到GPT-3的架构、规模和训练时间&#xff0c;这…

高分子PEG磷酸盐mPEG-phosphoric acid,Phosphate PEG,甲氧基聚乙二醇磷酸,可用于修饰金属氧化物表面

规格单位&#xff1a;g |货期&#xff1a;按照具体的库存进行提供 | 端基取代率&#xff1a;95% 中英文名&#xff1a;mPEG-phosphoric acid|Phosphate PEG|甲氧基聚乙二醇磷酸​ 一、Phosphate PEG化学结构式&#xff1a; 二、产品详情&#xff1a; 外观&#xff1a;灰白…

[oeasy]python0123_中文字符_文字编码_gb2312_激光照排技术_王选

中文编码GB2312 回忆上次内容 上次回顾了 日韩各有 编码格式 日本 有假名 五十音一字节 可以勉强放下 有日本汉字 字符数量超过20000 韩国 有谚文 数量超过500一个字节 放不下 有朝鲜汉字 字符数量超过20000 作为 汉字源头的中国 究竟应该 如何对汉字 进行编码 呢&#x…

操作系统-AOSOA

一、个人感受 1.1 权衡 在我写这份报告的时候&#xff0c;已经是 6 月 30 号了&#xff0c;经历了一个学期的“折磨”&#xff0c;我面对终点&#xff0c;已经没啥感觉了&#xff0c;就想着赶快呼噜完了就完事了。其实做这个项目最大的体会就是“人力有穷&#xff0c;一切皆权…

视频剪辑:教你如何调整视频画面的大小。

大家应该都会调整图片的大小吧&#xff0c;那你们会调整视频画面的大小吗&#xff1f;我想&#xff0c;应该会有人不还不知道要调整的吧&#xff0c;今天就让小编来教大家一个方法怎样去调整视频画面的大小尺寸。 首先&#xff0c;我们要有以下材料&#xff1a; 一台电脑 【…

列的类型定义——整形类型

文章目录 前言一、整数类型的附带属性 类型名称后面的小括号unsignedauto_increment总结前言 1&#xff09;采用26字母和0-9的自然数加上下互相 ‘_’ 组成&#xff0c;命名简洁明确&#xff0c;多个单词用下划线 ‘_’ 隔开 2&#xff09;全部小写命名&#xff0c;尽量避免…

【SpringBoot】自定义Starter

&#x1f6a9;本文已收录至专栏&#xff1a;Spring家族学习之旅 &#x1f44d;希望您能有所收获 一.概述 在使用SpringBoot进行开发的时候&#xff0c;我们发现使用很多技术都是直接导入对应的starter&#xff0c;然后就实现了springboot整合对应技术&#xff0c;再加上一些简…

【论文导读】Inferring deterministic causal relations

前段时间看Scholkopf教授的《Towards Causal Representation Learning》&#xff0c;看到这篇挺有意思来读读。 这一篇只在Arxiv上挂着&#xff0c;重点主要是研究发掘两变量之间的因果关系&#xff08;无法应用独立性检验等方法&#xff09;&#xff0c;引入了信息论中的正则…