当前位置:  教程>Html教程

HTML <head>头标签的作用及用法详细介绍

 
分享到:
    发布时间:2017-2-19  


    本文导语:  HTML <head>头标签有什么作用?HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染,SEO等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网...

    HTML <head>头标签有什么作用? HTML head 头部分的标签、元素有很多,涉及到浏览器对网页的渲染SEO等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代,head 头部结构,移动端的meta素,显得更为重要。了解每个标签的意义,写出满足自己需求的head 头标签,是本文的目的。本文将详细介绍常用的head中各个标签、元素的意义以及使用场景


HTML <head>


<title> - 定义了HTML文档的标题

使用 <title> 标签定义HTML文档的标题

<base> - 定义了所有链接URL
使用 <base> 定义页面中所有链接默认的链接目标地址

<meta> - 提供了HTML文档的meta标记
使用 <meta> 元素来描述HTML文档的描述,关键词,作者,字符集等。


HTML <head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本scripts), 样式文件CSS),及各种meta信息

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.


HTML <title> 元素

<title> 标签定义了不同文档的标题。

<title> 在 HTML/XHTML 文档中是必须的。

<title> 元素:

  • 定义了浏览器工具栏的标题

  • 当网页添加到收藏夹时,显示在收藏夹中的标题

  • 显示在搜索引擎结果页面的标题

一个简单的 HTML 文档:

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>文档标题</title></head><body>文档内容......</body></html>



HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:

<head>
<base href="http://www.169it.com/images/" target="_blank">
</head>



HTML <link> 元素

<link> 标签定义了文档与外部资源之间的关系。

<link> 标签通常用于链接到样式表:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>



HTML <style> 元素

<style> 标签定义了HTML文档的样式文件引用地址.

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>



HTML <meta> 元素

meta标签描述了一些基本的元数据

<meta> 标签提供了元数据.元数据也不显示在页面上,但会被浏览器解析

META元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。

元数据可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务

<meta>一般放置于 <head>区域

<meta> 标签用法- 使用实例

为搜索引擎定义关键词:

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

为网页定义描述内容:

<meta name="description" content="Free Web tutorials on HTML and CSS">

定义网页作者:

<meta name="author" content="Hege Refsnes">

每30秒中刷新当前页面:

<meta http-equiv="refresh" content="30">



HTML <script> 元素

<script> 元素在以下章节会详细描述。


HTML head 元素

标签描述
<head>定义了文档的信息
<title>定义了文档的标题
<base>定义了页面链接标签的默认链接地址
<link>定义了一个文档和外部资源之间的关系
<meta>定义了HTML文档中的元数据
<script>定义了客户端的脚本文件
<style>定义了HTML文档的样式文件


  • 本站(WWW.169IT.COM)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.169IT.COM)站内文章除注明原创外,均为转载,整理或搜集自网络.欢迎任何形式的转载,转载请注明出处.
    转载请注明:文章转载自:[169IT-IT技术资讯]
    本文标题:HTML <head>头标签的作用及用法详细介绍
相关文章推荐:
  • Web前端设计:html上标<sup>标签与下标<sub>标签详解
  • 留言板问题,如何过滤掉html标签 防止别人引用html的标签呢??如<font color=red>测试</font>
  • html<pre>标签自动换行实现方法
  • C#实现过滤html标签并保留a标签的方法
  • HTML 5 <!DOCTYPE> HTML文档规范声明标签
  • jquery删除指定的html标签并保留标签内文本内容的方法
  • PHP去除html标签,php标记及css样式代码参考
  • 删除html标签得到纯文本可处理嵌套的标签
  • HTML5 <audio> 标签-在html中定义声音的标签
  • php转换html标签小例子
  • Html checkbox标签如何设置默认选中以及用js操作checkbox代码示例
  • 移除HTML标签的正则表达式
  • HTML 5 <body> 标签-定义文档的主体
  • html小技巧之td,div标签里内容不换行
  • HTML5 <bdo> 标签:覆盖默认的文本方向
  • PHP删除HTMl标签的代码
  • HTML 5 <br> 标签-插入简单的换行符
  • PHP中HTML标签过滤技巧
  • HTML中的<select>标签如何设置默认选中的选项
  • php 判断字符串是否包含html标签
  • HTML 5 <base> 标签-规定页面中所有链接的基准 url
  • 多媒体HTML标签生成类 AutoEmbed


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2017,169IT.COM,E-mail:www_169it_com#163.com(请将#改为@)

    浙ICP备11055608号