📌  相关文章
📜  HTML head标签

📅  最后修改于: 2020-11-04 00:52:40             🧑  作者: Mango

HTML 标签

HTML 标签用作元数据(有关数据的数据)的容器。它用于标签和标签。

HTML文档的头部是其内容在页面加载时不会显示在浏览器中的部分。它仅包含有关HTML文档的元数据，该元数据指定有关HTML文档的数据。

HTML头可以包含很多元数据信息，也可以包含很少或没有信息，这取决于我们的要求。但是头部在创建网站时对HTML文档至关重要。

元数据定义文档标题，字符集，样式，链接，脚本和其他元信息。

以下是元数据中使用的标签的列表：

  • </li> <li><style></li> <li><meta></li> <li><link></li> <li><script></li> <li><base></li> </ul> <h4><html>的HTML<title>元素</ html></h4> <p><html>HTML<title>元素用于定义文档标题。它在所有HTML / XHTML文档中使用。 <title>元素必须放在<head>元素之间，并且一个文档只能有一个title元素。</ html></p> <p><html>是什么<title>元素呢?</ html></p> <ul> <li>它在浏览器选项卡中定义了标题。</li> <li>当页面添加到收藏夹时，它将为页面提供标题。</li> <li>它在搜索引擎结果中显示页面的标题。</li> </ul> <p><strong>注意：title元素必须特定于文档，建议长度为65到70个字符(包括空格)。</strong></p> <p>例：</p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-python" data-lang="Java"><code><span span="" style="font-size: 10pt;"><!DOCTYPE html> <html> <head> <title>This Page Title

    The body's content is displayed in the browser window.

    The content of the title element is displayed in the browser tab, in favorites and in search engine results.

HTML

This is a Heading

This is a paragraph.

HTML元件

HTML元素用于将外部样式表链接到您的网页。的元素包含两个主要属性，分别是“ rel”和“ href”。 rel属性指示它是一个样式表，href给出该外部文件的路径。

例：


 
 
    This is title
    
   
   
    
Web-page with external CSS

    
This is looking a cool page

HTML元件

HTML元素用于指定网页上的字符集，页面描述，关键字，作者和其他元数据。

浏览器，搜索引擎和其他Web服务主要使用元数据来更好地对网页进行排名。

让我们看看如何使用元数据：

定义字符集：

charset属性指定字符编码。在此示例中，我们将其设置为“ UTF-8″，这意味着它可以处理显示任何语言。

例：




  



This is written in English language My friend's name is.......


This is Chinese language Wǒ de péngyǒu jiào

输出：

要定义您的网页描述：

如果您提供元描述，那么搜索引擎执行相关搜索将很有用。

为搜索引擎定义关键字：

关键字值还用于为搜索引擎提供关键字，但是由于垃圾邮件发送者，它可能会被浏览器忽略。

定义网页的作者：

作者值指定撰写页面内容的人员的姓名，通过某些内容管理系统自动提取作者信息很有用。

要每30秒刷新一次文档：

元刷新用于向浏览器提供指令，以在给定的时间间隔后自动刷新页面。如上例所示，它将在30秒后自动刷新





 
   
 
   
    
Meta element Example

   
Kindly wait for 5 seconds and after 5 seconds it will automatically redirect to URL specified in meta tag

以下是显示如何在HTML标头中使用所有Meta元素的示例

例：











All the meta information are set.

使用标记以设置视口

HTML5中引入了此方法，以使用来控制视口标签。

视口是用户在网页上的可见区域。它随设备的不同而变化，并且在手机上的显示尺寸小于计算机屏幕。

的语法视口元素：

在这里viewport元素指定如何控制页面的尺寸和缩放比例。

width = device-width用于设置页面的宽度以跟随设备的屏幕宽度(视设备而定)。

当最初由浏览器加载页面时，initial-scale = 1.0用于设置初始缩放级别。

没有视口的网页示例标签：






To understand this example, you should open this page on a phone or a tablet.


image



Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel 
eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu 
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis 
eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat
facer possim assum.

带有视口的网页示例标签：









To understand this example, you should open this page on a phone or a tablet.


image



Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation 
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel 
eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu 
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum
zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis 
eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat
facer possim assum.

注意：要清楚地看到差异，请在智能手机或平板电脑上打开此页面。

HTML元件

HTML元素用于指定页面中所有相对URL的基本URL和基本目标。

例：




Page Title





We have specified a base URL, the browser will look for the image "html5.png" 
at "https://static.javatpoint.com/htmlpages/images/html5.png"


JavatPoint


The link above will open in a new window because base target is set to "_blank".

的HTML

Script within Head element

This will change the color

如果我们要使用一些外部JavaScript文件，则可以通过以下方式应用它：