Home > Web Front-end > HTML Tutorial > Detailed introduction to the tag and its content in HTML

Detailed introduction to the tag and its content in HTML

巴扎黑
Release: 2017-06-27 10:05:03
Original
3715 people have browsed it




  • ##head

    • title

    • ##base
    • meta
    • link
    • script
    • style
    ##

The tag is used to define the head of the document, which is a container for all head elements. Elements within

can:

- Reference script
- Instruct the browser where to find the style Table
- Provide meta-information
- etc.
The header of the document describes various attributes and information of the document, including the title of the document , location in the Web and relationship with other documents, etc. The data contained in the header of most documents will not actually be displayed to readers as content. The following tags can be used in the head section:

<base>

, <link>, <meta>, <script>, <style>, <title>. <title>

##<title>

Defines the title of the document,

It is the head part The only required element in .

<html><head><title>我的第一个HTML页面</title></head><body><p>body 元素的内容会显示在浏览器中。</p><p>title 元素的内容会显示在浏览器的标题栏中。</p></body></html>
Copy after login
Copy after login
Browsers use titles in a special way, and usually place them on the title bar or status bar of the browser window. Likewise, when a document is added to a user's links list or favorites or bookmarks list, the title becomes the default name for the link to the document. The

<base>

##<base> tag specifies the default address or default target for all links on the page.

Normally, the browser will extract the corresponding elements from the URL of the current document to fill in the blanks in the relative URL. Use the <base>

tag to change this. The browser will then no longer use the URL of the current document, but will use the specified base URL to resolve all relative URLs. This includes URLs in

,
<img>, <link>, <form> tags . <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint">&lt;html&gt;&lt;head&gt;&lt;base href=&quot;http://www.w3school.com.cn/i/&quot; /&gt;&lt;base target=&quot;_blank&quot; /&gt;&lt;/head&gt;&lt;body&gt;&lt;img src=&quot;eg_smile.gif&quot; /&gt;&lt;br /&gt;&lt;p&gt;图像的地址为相对地址。由于我们已经在 head 部分规定了一个基准 URL,浏览器将在如下地址寻找图片:&lt;/p&gt;&lt;p&gt;&quot;http://www.w3school.com.cn/i/eg_smile.gif&quot;&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;&lt;a href=&quot;http://www.w3school.com.cn&quot;&gt;W3School&lt;/a&gt;&lt;/p&gt;&lt;p&gt;请注意,链接会在新窗口中打开,即使链接中没有 target=&quot;_blank&quot; 属性。这是因为 base 元素的 target 属性已经被设置为 &quot;_blank&quot; 了。&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><base>Required attributes: href

href, the value is the URL, specified The base URL for all relative links in the page.

<base> Optional attributes:

target

target, the value is _blank, _parent, _self, _top, framename, etc., indicate where to open all links in the page. For example, "_blank" means open in a new window.

<meta>

##<meta> element provides meta-information about the page ), such as descriptions and keywords for search engines and update frequency. Metadata is always passed in name/value pairs. The

<meta> tag is located at the head of the document and does not contain any content. <meta>

The properties of the tag define the name/value pairs associated with the document.
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="author"content="w3school.com.cn"><meta name="revised"content="David Yang,8/1/07"><meta name="generator"content="Dreamweaver 8.0en"></head>
Copy after login
Copy after login

<meta>Required attributes: content

content, the value is some text, Defines meta-information related to the http-equiv or name attribute. Metadata is always passed in name/value pairs.

eg:

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
Copy after login
Copy after login
<meta>

Main optional attributes:
http-equiv

,

name

http-equiv, the value is content-type, expires, refresh, set-cookie, etc., associate the content attribute to the HTTP header.

http-equiv attribute provides a name for a name/value pair. And instructs the server to include a "name/value" pair in the header of the message sent to the browser before sending the actual document.

eg:

<meta http-equiv="charset" content="iso-8859-1"><meta http-equiv="expires" content="31 Dec 2008">
Copy after login
Copy after login
Redirect (for web page moving):

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /></head>
Copy after login
Copy after login
Description keywords:

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="description"content="HTML examples"><meta name="keywords"content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"></head>
Copy after login
Copy after login

name

, The values ​​are author, description, keywords, generator, revised, others, etc., and the content attribute is associated with a name.

Neither HTML nor XHTML tags are assigned any predefined names. In general, you are free to use names that are meaningful to you and to readers of the source document.

"keywords" is a name that is often used. It defines a set of keywords for the document. Some search engines use these keywords to classify documents when they encounter them. eg:

<meta name="keywords" content="HTML,ASP,PHP,SQL">
Copy after login
Copy after login

<link>

<link>链接一个外部样式表。属于在HTML中插入CSS样式表的三种方法之一。

<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login

<link>的主要属性:hrefreltypecharset

charset,指明被链接文档的字符集,如UTF-8。但是几乎没有主流浏览器支持 link标签的charset 属性

在下面的例子中,charset 属性指示被链接文档是用英文编写的:

<head><link href="shanghai.htm" rel="parent" charset="en" /></head>
Copy after login
Copy after login

href,规定被链接文档的位置(URL)。

这个不解释了。

rel 属性指示被链接的文档是一个样式表。它的属性值只有 “stylesheet” 得到了所有浏览器的支持。其他值只得到了部分地支持。

<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login

type 属性规定被链接文档的 MIME 类型。该属性最常见的 MIME 类型是 “text/css”,该类型描述样式表。

<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login

<script>

<script> 标签用于定义客户端脚本,比如 JavaScript。

script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 的常见应用时图像操作、
表单验证以及动态内容更新。

  • 直接包含脚本语句

<html><body><script type="text/javascript">document.write("<h1>Hello World!</h1>")</script> </body></html>
Copy after login
Copy after login
  • 通过 src 属性指向外部脚本文件

<script type="text/javascript" src="myscripts.js"></script>
Copy after login
Copy after login

<script>必需的属性:type

type,规定脚本的 MIME 类型。

对于不支持脚本的浏览器:

<!DOCTYPE html><html><body><script type="text/javascript">document.write("Hello World!")</script><noscript>Sorry, your browser does not support JavaScript!</noscript><p>不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。</p></body></html>
Copy after login
Copy after login

<style>

<style> 标签用于为 HTML 文档定义样式信息。

在HTML中插入CSS样式表的另外两种方法都是通过style完成的——内部样式表、内联样式。只不过内部样式表用的是style标签<style>,内联样式用的是style属性。

  • 内联样式

<p style="color:blue;margin-left:20px">This is a paragraph.</p>
Copy after login
Copy after login
  • 内部样式表

<html><head><style type="text/css">h1 {color: red}p {color: blue}</style></head><body><h1>header 1</h1><p>A paragraph.</p></body></html>
Copy after login
Copy after login

也可以通过“id选择器”和“class选择器”进行:

  • id选择器

<!DOCTYPE html><html><head><style>#liuhaibo{text-align:center;color:red;} </style></head><body><p id="liuhaibo">Hello World!</p><p>This paragraph is not affected by the style.</p></body></html>
Copy after login
Copy after login
  • class选择器

<!DOCTYPE html><html><head><style>.center{text-align:center;}</style></head><body><h1 class="center">标题居中</h1><p class="center">段落居中。</p> </body></html>
Copy after login
Copy after login

你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class=”center” 让该元素的文本居中,而h1则不可以。

<!DOCTYPE html><html><head><style>p.center{text-align:center;}</style></head><body><h1 class="center">This heading will not be affected</h1><p class="center">This paragraph will be center-aligned.</p> </body></html>
Copy after login
Copy after login

<style>必需的属性:type

type,唯一可能的值是“text/css”,规定样式表的 MIME 类型。

也可以通过style标签创建一个没有下划线的链接:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="zh-cn" /></head><body><a href="/example/html/lastpage.html" style="text-decoration:none">这是一个链接!</a></body></html>
Copy after login
Copy after login

Note:只有title标签<title>、script标签<script>和style标签<style>有完整的关闭标签。



  • head

    • title

    • base

    • meta

    • link

    • script

    • style

##

## The

tag is used to define the head of the document, which is a container for all head elements. Elements within

can: - Reference script
- Instruct the browser where to find the style Table
- Provide meta-information
- etc.
The header of the document describes various attributes and information of the document, including the title of the document , location in the Web and relationship with other documents, etc. The data contained in the header of most documents will not actually be displayed to readers as content.
The following tags can be used in the head section:

<base>, <link>, <meta>, <script>, <style>, <title>.

<title>

##<title>
Defines the title of the document,

It is the head part The only required element in .

<html><head><title>我的第一个HTML页面</title></head><body><p>body 元素的内容会显示在浏览器中。</p><p>title 元素的内容会显示在浏览器的标题栏中。</p></body></html>
Copy after login
Copy after login
Browsers use titles in a special way, and usually place them on the title bar or status bar of the browser window. Likewise, when a document is added to a user's links list or favorites or bookmarks list, the title becomes the default name for the link to the document. The

<base>

##<base>

tag specifies the default address or default target for all links on the page.

Normally, the browser will extract the corresponding elements from the URL of the current document to fill in the blanks in the relative URL. Use the

<base>
tag to change this. The browser will then no longer use the URL of the current document, but will use the specified base URL to resolve all relative URLs. This includes URLs in


, <img>, <link>, <form> tags . <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="prettyprint">&lt;html&gt;&lt;head&gt;&lt;base href=&quot;http://www.w3school.com.cn/i/&quot; /&gt;&lt;base target=&quot;_blank&quot; /&gt;&lt;/head&gt;&lt;body&gt;&lt;img src=&quot;eg_smile.gif&quot; /&gt;&lt;br /&gt;&lt;p&gt;图像的地址为相对地址。由于我们已经在 head 部分规定了一个基准 URL,浏览器将在如下地址寻找图片:&lt;/p&gt;&lt;p&gt;&quot;http://www.w3school.com.cn/i/eg_smile.gif&quot;&lt;/p&gt;&lt;br /&gt;&lt;br /&gt;&lt;p&gt;&lt;a href=&quot;http://www.w3school.com.cn&quot;&gt;W3School&lt;/a&gt;&lt;/p&gt;&lt;p&gt;请注意,链接会在新窗口中打开,即使链接中没有 target=&quot;_blank&quot; 属性。这是因为 base 元素的 target 属性已经被设置为 &quot;_blank&quot; 了。&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><base>Required attributes:

href

href

, the value is the URL, specified The base URL for all relative links in the page.

<base>

Optional attributes:
target

target

, the value is _blank, _parent, _self, _top, framename, etc., indicate where to open all links in the page. For example, "_blank" means open in a new window.

<meta>

##<meta> element provides meta-information about the page ), such as descriptions and keywords for search engines and update frequency. Metadata is always passed in name/value pairs. The

<meta> tag is located at the head of the document and does not contain any content.

<meta>
The properties of the tag define the name/value pairs associated with the document.

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="author"content="w3school.com.cn"><meta name="revised"content="David Yang,8/1/07"><meta name="generator"content="Dreamweaver 8.0en"></head>
Copy after login
Copy after login
<meta>Required attributes: content

content, the value is some text, Defines meta-information related to the http-equiv or name attribute. Metadata is always passed in name/value pairs.

eg:

<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
Copy after login
Copy after login

<meta>
Main optional attributes:

http-equiv

,

namehttp-equiv, the value is content-type, expires, refresh, set-cookie, etc., associate the content attribute to the HTTP header.

http-equiv attribute provides a name for a name/value pair. And instructs the server to include a "name/value" pair in the header of the message sent to the browser before sending the actual document. eg:

<meta http-equiv="charset" content="iso-8859-1"><meta http-equiv="expires" content="31 Dec 2008">
Copy after login
Copy after login

Redirect (for web page moving):
<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /></head>
Copy after login
Copy after login

Description keywords:

<head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta name="description"content="HTML examples"><meta name="keywords"content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript"></head>
Copy after login
Copy after login

name

, The values ​​are author, description, keywords, generator, revised, others, etc., and the content attribute is associated with a name.

Neither HTML nor XHTML tags are assigned any predefined names. In general, you are free to use names that are meaningful to you and to readers of the source document. "keywords" is a name that is often used. It defines a set of keywords for the document. Some search engines use these keywords to classify documents when they encounter them. eg:

<meta name="keywords" content="HTML,ASP,PHP,SQL">
Copy after login
Copy after login

<link>

<link>链接一个外部样式表。属于在HTML中插入CSS样式表的三种方法之一。

<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login

<link>的主要属性:hrefreltypecharset

charset,指明被链接文档的字符集,如UTF-8。但是几乎没有主流浏览器支持 link标签的charset 属性

在下面的例子中,charset 属性指示被链接文档是用英文编写的:

<head><link href="shanghai.htm" rel="parent" charset="en" /></head>
Copy after login
Copy after login

href,规定被链接文档的位置(URL)。

这个不解释了。

rel 属性指示被链接的文档是一个样式表。它的属性值只有 “stylesheet” 得到了所有浏览器的支持。其他值只得到了部分地支持。

<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login

type 属性规定被链接文档的 MIME 类型。该属性最常见的 MIME 类型是 “text/css”,该类型描述样式表。

<head><link rel="stylesheet" type="text/css" href="theme.css" /></head>
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login
Copy after login

<script>

<script> 标签用于定义客户端脚本,比如 JavaScript。

script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 的常见应用时图像操作、表单验证以及动态内容更新。

  • 直接包含脚本语句

<html><body><script type="text/javascript">document.write("<h1>Hello World!</h1>")</script> </body></html>
Copy after login
Copy after login
  • 通过 src 属性指向外部脚本文件

<script type="text/javascript" src="myscripts.js"></script>
Copy after login
Copy after login

<script>必需的属性:type

type,规定脚本的 MIME 类型。

对于不支持脚本的浏览器:

<!DOCTYPE html><html><body><script type="text/javascript">document.write("Hello World!")</script><noscript>Sorry, your browser does not support JavaScript!</noscript><p>不支持 JavaScript 的浏览器将显示 noscript 元素中的文本。</p></body></html>
Copy after login
Copy after login

<style>

<style> 标签用于为 HTML 文档定义样式信息。

在HTML中插入CSS样式表的另外两种方法都是通过style完成的——内部样式表、内联样式。只不过内部样式表用的是style标签<style>,内联样式用的是style属性。

  • 内联样式

<p style="color:blue;margin-left:20px">This is a paragraph.</p>
Copy after login
Copy after login
  • 内部样式表

<html><head><style type="text/css">h1 {color: red}p {color: blue}</style></head><body><h1>header 1</h1><p>A paragraph.</p></body></html>
Copy after login
Copy after login

也可以通过“id选择器”和“class选择器”进行:

  • id选择器

<!DOCTYPE html><html><head><style>#liuhaibo{text-align:center;color:red;} </style></head><body><p id="liuhaibo">Hello World!</p><p>This paragraph is not affected by the style.</p></body></html>
Copy after login
Copy after login
  • class选择器

<!DOCTYPE html><html><head><style>.center{text-align:center;}</style></head><body><h1 class="center">标题居中</h1><p class="center">段落居中。</p> </body></html>
Copy after login
Copy after login

你也可以指定特定的HTML元素使用class。
在以下实例中, 所有的 p 元素使用 class=”center” 让该元素的文本居中,而h1则不可以。

<!DOCTYPE html><html><head><style>p.center{text-align:center;}</style></head><body><h1 class="center">This heading will not be affected</h1><p class="center">This paragraph will be center-aligned.</p> </body></html>
Copy after login
Copy after login

<style>必需的属性:type

type,唯一可能的值是“text/css”,规定样式表的 MIME 类型。

也可以通过style标签创建一个没有下划线的链接:

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><meta http-equiv="Content-Language" content="zh-cn" /></head><body><a href="/example/html/lastpage.html" style="text-decoration:none">这是一个链接!</a></body></html>
Copy after login
Copy after login

Note:只有title标签<title>、script标签<script>和style标签<style>有完整的关闭标签。

The above is the detailed content of Detailed introduction to the tag and its content in HTML. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template