HTML：路径、css white-space属性、字符集、meta标签

最新推荐文章于 2023-02-06 00:14:18 发布

zll_@

最新推荐文章于 2023-02-06 00:14:18 发布

阅读量732

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_45662289/article/details/104128517

版权

本文详细介绍了HTML中图片路径的设定方法，包括相对路径和绝对路径的使用技巧，以及CSS中white-space属性的功能和应用场景，深入解析了字符集的选择与meta标签的运用，为初学者提供了全面的指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、路径（以图片引入为例）

1、相对路径

（1）上一级路径

图像文件位于 HTML 上一级文件夹。

使用"../（选择图片文件）"，如果是上两级则使用".../（选择图片文件）"，以此类推。

（2）同级路径

图像文件和 HTML 文件位于同一文件夹。

此时只需要输入图像文件的名称<img src="logo.jpg" />，或者使用"./（选择图片文件）"即可。

（3）下一级路径

图像文件位于 HTML 下一级文件夹。

输入文件夹名和文件名，之间用"/"隔开。

如："<img src="img/img01/logo.gif" />"或"./img/(选择图片文件)"（ img 文件夹与 HTML 文件处于同级目录）

2、绝对路径

直接写出该图片文件在计算机磁盘的具体路径。

如：<img src="C:\....(文件具体路径)"

二、css white-space属性

转义字符一览表

定义与用法：white-space 属性设置如何处理元素内的空白。

这个属性声明建立布局过程中如何处理元素中的空白符。

语法：Object.style.whiteSpace=normal|nowrap|pre。

（1）默认值： normal。
（2）继承性： yes。
（3）版本： CSS1。
（4）JavaScript 语法：object.style.whiteSpace="pre"。

可能的值：

（1）normal：默认。空白会被浏览器忽略。
（2）pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
（3）nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
（4）pre-wrap：保留空白符序列，但是正常地进行换行。
（5）pre-line：合并空白符序列，但是保留换行符。
（6）inherit：规定应该从父元素继承 white-space 属性的值。

例：规定段落中的文本不进行换行。

<html>
<head>
<script type="text/javascript">
function removeWrapping()
{
document.getElementById("div1").style.whiteSpace="nowrap";
}
</script>
</head>
<body>

<div id="div1">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</div>
<br />
<input type="button" onclick="removeWrapping()" 
value="Do not let the text wrap" />

</body>
</html>

<html>
<head>
<style type="text/css">
p
{
white-space: nowrap
}
</style>
</head>
<body>

<p>
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
这是一些文本。
</p>

</body>
</html>

三、字符集

<meta charset="UTF-8">

（1）gb2312：简体中文 ,包括6763个汉字。
（2）BIG5：繁体中文港澳台等用。
（3）GBK：包含全部中文字符是GB2312的扩展,加入了对繁体字地支持,兼容gb2312。
（4）UTF-8：包含全世界所有国家需要用到的字符。
（5）等等。。。

推荐：统一使用UTF-8字符集,避免出现字符集不统一而引起地乱码情况。

四、meta标签

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。

<meta> 标签永远位于 head 元素内部。

元数据总是以名称/值的形式被成对传递的。

必须含有 content 属性：

（1）值：some_text。
（2）描述：定义与 http-equiv 或 name 属性相关的元信息。

可选属性:

（1）name 属性

name 属性提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。

“keywords” 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：<meta name="keywords" content="HTML,ASP,PHP,SQL">

如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

（2）http-equiv 属性

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：
<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">
这样发送到浏览器的头部就应该包含：
content-type: text/html
charset:iso-8859-1
expires:31 Dec 2008
当然，只有浏览器可以接受这些附加的头部字段，并能以适当的方式使用它们时，这些字段才有意义。

（3）content 属性

content 属性提供了名称/值对中的值。该值可以是任何有效的字符串。

content 属性始终要和 name 属性或 http-equiv 属性一起使用。

（4）scheme 属性

scheme 属性用于指定要用来翻译属性值的方案。此方案应该在由标签的 profile 属性指定的概况文件中进行了定义。

（5）全局属性

<meta> 标签支持 HTML 中的全局属性。

例：

<!-- 设置文档的字符编码 -->
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 以上 3 个 meta 标签 *必须* 放在 head 的最前面；其他任何的 head 内容必须在这些标签的 *后面* -->
 
<!-- 允许控制资源的过度加载 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- 尽早地放置在文档中 -->
<!-- 仅应用于该标签下的内容 -->
 
<!-- Web 应用的名称（仅当网站被用作为一个应用时才使用）-->
<meta name="application-name" content="应用名称">
 
<!-- 针对页面的简短描述（限制 150 字符）-->
<!-- 在*某些*情况下，该描述是被用作搜索结果展示片段的一部分 -->
<meta name="description" content="一个页面描述">
 
<!-- 控制搜索引擎的抓取和索引行为 -->
<meta name="robots" content="index,follow,noodp"><!-- 所有的搜索引擎 -->
<meta name="googlebot" content="index,follow"><!-- 仅对 Google 有效 -->
 
<!-- 告诉 Google 不显示网站链接的搜索框 -->
<meta name="google" content="nositelinkssearchbox">
 
<!-- 告诉 Google 不提供此页面的翻译 -->
<meta name="google" content="notranslate">
 
<!-- 验证 Google 搜索控制台的所有权 -->
<meta name="google-site-verification" content="verification_token">
 
<!-- 用来命名软件或用于构建网页（如 - WordPress、Dreamweaver）-->
<meta name="generator" content="program">
 
<!-- 关于你的网站主题的简短描述 -->
<meta name="subject" content="你的网站主题">
 
<!-- 非常简短（少于 10 个字）的描述。主要用于学术论文。-->
<meta name="abstract" content="">
 
<!-- 完整的域名或网址 -->
<meta name="url" content="https://example.com/">
 
<meta name="directory" content="submission">
 
<!-- 基于网站内容给出一般的年龄分级 -->
<meta name="rating" content="General">
 
<!-- 允许控制 referrer 信息如何传递 -->
<meta name="referrer" content="never">
 
<!-- 禁用自动检测和格式化可能的电话号码 -->
<meta name="format-detection" content="telephone=no">
 
<!-- 通过设置为 “off” 完全退出 DNS 预取 -->
<meta http-equiv="x-dns-prefetch-control" content="off">
 
<!-- 在客户端存储 cookie，web 浏览器的客户端识别 -->
<meta http-equiv="set-cookie" content="name=value; expires=date; path=url">
 
<!-- 指定要显示在一个特定框架中的页面 -->
<meta http-equiv="Window-Target" content="_value">
 
<!-- 地理标签 -->
<meta name="ICBM" content="latitude, longitude">
<meta name="geo.position" content="latitude;longitude">
<!-- 国家代码 (ISO 3166-1): 强制性, 州代码 (ISO 3166-2): 可选; 如 content="US" / content="US-NY" -->
<meta name="geo.region" content="country[-state]">
<!-- 如 content="New York City" -->
<meta name="geo.placename" content="city/town">