Html之head部分详解

最新推荐文章于 2021-07-03 22:53:46 发布
最新推荐文章于 2021-07-03 22:53:46 发布
阅读量351 收藏 1
点赞数
文章标签： javascript 前端 ViewUI

　　随便打开一个网页，右击查看网页源代码，总能看到<head>…</head>封闭标签，在里面通常会包含5类标签：title、link、script、meta、style。这5类标签看着都挺熟悉的哈，那么在web前端技术中具体要怎么使用，规则是什么，在我学习的时侯，我做了笔记整理，希望有帮助。

      1. title 标签

　　title是一个封闭标签，在head中是成对出现。也就是<title>…</title>。在打开一个网页时，网页上方的文字就是title部分。

　　Title是对整个页面的核心思想的总结，也是seo非常重要的设置部分。Title部分尽量要多次出现关键词：核心关键词和长尾关键词。具体怎么写title部分，根据需求而定。这个没有标准。

　　2. link 标签

　　Link标签放置在<head>…</head>中，作用是链接外部css文件和收藏夹图标。最常用的用法是链接外部样式表，也就是css文件。link写法是“<link … />”

　　例如：

　　引入外部css样式：<link rel=”stylesheet” type=”text/css” href=”http://www....... /style.css” />

　　设置网站小图标（收藏图标）：<link rel=”shortcut icon” type=”image/x-icon” href="http://....../favicon.ico" />

　　Rel：定义的是该文档与被链接文档之间是什么关系“这里是外部css样式表，即stylesheet。”

　　type：规定外部链接文档是什么打开类型，link中的css 这样写法“type=”text/css”。”link中的网站小图标写法“ type=”image/x-icon” 。”

　　href：是外部css地址。

　　3. script标签

　　用在头部head标签内，作用是调用外部js文件。该标签是一个封闭标签，写法和div标签一样。另外，该标签不仅仅可以在头部head标签内使用，在body标签内部任何位置都可以使用。最终实现的效果都是一样的，通常是用在head标签内。

　　例如：<script src=”http://www...../index.js” type=”text/javascript”></script>

　　Src中是调用js文件地址。Type规定调用js文件的打开方式。

　　4. meta标签

　　Meta标签的作用通常是用作网页关键词、网页描述、作者、网页编码、robots、自动跳转等说明性标签。这样写法随处可见，任何一个网页中都有meta标签的使用。

　　4.1 网页显示字符集网页编码

　　中文：<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

　　繁体中文：<meta http-equiv="Content-Type" content="text/html; charset=BIG5" />

　　英 语：<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

　　4.2 网页制作者信息

　　<meta name="author" content="Evance" />

　　4.3网页关键字

　　<meta name="keywords" content="Michael，Blog" />

　　4.4 网页描述

　　<meta name="description" content="Michael，Blog" />

　　4.5 防止别人在框架里调用你的页面<meta http-equiv="Window-target" content="_top" />

　　4.6 自动跳转（此标签用法可以让网页在多少秒后自动从当前页面跳转到另外一个网页页面或网站）<meta http-equiv="Refresh" content="5;URL=http://www.域名.com" />（有用！）

　　Content后跟值为当前页面在多少时间跳转

　　Url值为跳转到具体网页网站

　　4.7. 网页告诉搜索机器人向导对此网页操作（用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引）<meta name="robots" content="all" />

　　content的参数有all,none,index,noindex,follow,nofollow。默认是all。如果在一个页面不加入此标签默认情况下content="all"意思是搜索并收录抓取爬行此网页及此网页指向页面。

　　None：搜索引擎将忽略此网页，等价于noindex，nofollow。

　　Noindex：搜索引擎不索引此网页。

　　Nofollow：搜索引擎不继续通过此网页的链接索引搜索其它的网页。

　　All：搜索引擎将索引此网页与继续通过此网页的链接索引，等价于index，follow。

　　Index：搜索引擎索引此网页。

　　Follow：搜索引擎继续通过此网页的链接索引搜索其它的网页。

　　5. style标签

　　常见Style标签作为放置CSS样式与放置javascript（js）代码标签。

　　首先<style></style>是一对有开始与结束的闭合标签。

　　5.1 放置CSS样式

　　<style type="text/css">…</style>中间用于放CSS样式代码。

　　在HTML中CSS代码只有放置在其<style type="text/css">标签内才能生效。

　　5.2 放置JS代码

　　<style type="text/javascript">…</style>

　　在HTML中JS代码一般放入<style type="text/javascript">标签内。

weixin_34183910
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详解使用asp.net mvc部分视图渲染html
01-03
为了提升用户体验，一般我们采用ajax加载数据然后根据数据渲染html，渲染html可以使用前端渲染和服务器端渲染。 前端渲染 使用前端模版引擎或MVC框架，例如underscore.js的template或者是使用angular.js等框架，当然...
关于html<head>部分怎么写的一些思考
晴晴晴的博客
07-17 1068
关于html部分怎么写的一些思考 在编辑器里直接!+tab键就可以写好一个 html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-
html head标签详解
Joe的博客
04-29 9475
随便打开一个网页，右击查看网页源代码，总能看到<head>…</head>封闭标签，在里面通常会包含5类标签：title、link、script、meta、style。这5类标签看着都挺熟悉的哈，那么在web前端技术中具体要怎么使用，规则是什么，在我学习的时侯，我做了笔记整理，希望有帮助。 1. title 标签 　　title是一个封闭标签，在head中是...
html head区域,Html之head部分详解
weixin_36028920的博客
07-03 859
随便打开一个网页，右击查看网页源代码，总能看到…封闭标签，在里面通常会包含5类标签：title、link、script、meta、style。这5类标签看着都挺熟悉的哈，那么在web前端技术中具体要怎么使用，规则是什么，在我学习的时侯，我做了笔记整理，希望有帮助。1. title 标签title是一个封闭标签，在head中是成对出现。也就是…。在打开一个网页时，网页上方的文字就是title部分。T...
HTML中的＜head＞部分
Gavin Guo的博客
11-19 1753
HTML的头部元素是以<head>为开始标签，以</head>为结束标签的。在HTML语言的头部元素中，一般需要包括标题、基底信息、元信息以及外部链接等等。一般情况下，CSS和JavaScript也都定义在头部元素中的（多数情况是以外部引用的方式引入HTML），HTML语言头部的内容基本不会在网页文档窗口上直接显示。它用于表示文档的相关信息，具有重要意义，不可省略。 常用的头部标记内容如下： <title>：设定网站的标题，该标题将显示在浏览器上方的标题栏中 <m
[转] meta标签的使用方法
NorthSnow HOME
09-13 4051
meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的与中，meta 标签的用处很多。meta 的属性有两种：name和http-equiv。name属性主要用于描述网页，对应于content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。这其中最重要的是description（站点在搜索引擎上的描
详解html头标签的使用
12-13
HTML两部分组成 head和body 　** 在head里面的标签就是头标签 　** title标签：表示在标签上显示的内容 　** meta标签：设置页面的一些相关内容（用的比较少） 　<meta name="keywords" content="熊猫，金丝猴，...
html详解.doc
11-25
<head> 网页标题部分 </head> 正文部分 </html> 2.信息：在服务器和客户之间传递隐含信息 其中最重要的设置： http-equiv：设置和获取Content的内容，并把content的内容添加 http的响应头中。 ...
thinkphp5引入公共部分header、footer的方法详解
12-20
直接上问题：项目中需要用到引入公共导航、头部、底部、右边部分等等 首先要弄清楚thinkphp5的配置项是哪个文件,众所周知：config.php,如下图所示 只需要在配置项里配置里如下内容即可 ‘template‘ => [ // 模板...
django模板语法学习之include示例详解
12-26
前言 在很多网站中，基本上的都会有一个开头...head> <meta charset="UTF-8"> <title>Title</title> </head> <body> 网页公共头部部分 <h2> 网页body部分 网页公共底部部分 </
Html网页页面head区规范知识
前端基础入门学习线路
02-21 2819
head区是指首页HTML代码的<head>和</head>之间的内容。 　　必须加入的标签 　　1.公司版权注释 　　<!--- The site is designed bywebjx.com 06/2006 ---> 　　2.网页显示字符集 　　简体中文：<META HTTP-EQUIV="Content-Type" CONTENT="tex...
HTML5基本成分（网页构成的基础）
TCatTime的博客
03-28 1277
每个HTML5文档都应该包含以下基本成分： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> DOCTYP...
如何优化网站页面提高网页的加载速度
Candy_3的专栏
10-31 2358
网站要想加载快无非就是减少http请求次数，下面说一下具体做法： 1：字符集声明 如果部分未定义字符集，将增加页面渲染次数，速度减慢。 2：Meta信息完善程度 建议网站meta信息填写完整 3：合并域名 4:取消重定向 无论是通过服务器端重定向或者JavaScript代码进行内容重定向。网站都会首先加载一个空白的页面，然后在定向到另外的页面，这样不仅延长了页面的加载时间，还很有可能
HTML的基本结构标签（html，head，title，body）
qq_45405176的博客
05-20 4539
用记事本做第一个HTML ''' <html> </html> HTML标签 根标签 <head> </head> 网页头部 网页head标签中必须要设置title标签 <title> </title> 网页标题 <body> </body> 网页的主体 页面的内容基本都是在body里 ''' <html> <head> <title>网页
HTML5：理解head
宁静致远
12-30 4665
HTML文档的head部分，通常包括指定页面标题，为搜索引擎提供关于页面本身的信息，加载样式表，以及加载JavaScript文件（出于性能考虑，多数时候放在页面底部标签结束前加载JavaScript）。除了title，head里的内容对页面访问者来说都是不可见的。下面是HTML文档head部分的一个例子： Your page title a{ background-co
html中head标签中都放哪些内容
热门推荐
xiaoshi178488920的专栏
05-21 1万+
html中head标签中的内容 定义和用法 标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。 文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 下面这些标签可用在 head 部分： 标签">, , 标签"
header 设置页面编码
kaozjlin的专栏
05-10 3934
php的header来定义一个php页面为utf编码或GBK编码 php页面为utf编码 header("Content-type: text/html; charset=utf-8"); php页面为gbk编码 header("Content-type: text/html; charset=gb2312"); php页面为big5编码 header("Content-type: text/...
HTML标签概述及＜html＞,＜head＞,＜title＞,＜link＞,＜form＞,＜meta＞详细介绍
share something here
09-26 7380
Web概述与创建介绍Web出发创建自己的Web后记三级目录 介绍 web（World Wide Web）是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。 超文本：是计算机处理文本信息的方法，不同空间的电子文档通过超链接组织起来成为一个“网”，这个文档“网”称为“超级文本”，简称“超文本”。 HTTP：全称Hyper Text Transfer Protocol（超文本传输协议）。经过多年的发展，现在HTTP能够传输图片等多媒体文件，是Web世界的中流砥柱，应用非常广泛 W
html页面引用js必须放在body底部与放在head部分是有区别的
zwy122的博客
12-28 6631
html页面引用js必须放在下面与放在上面是有本质区别的，先说放在下面的情况。 放在body底部引用js的时候如果出现了两个版本的jquery文件的话，是按照加载的俄先后顺序去解析的，例如 <script src="js/jquery-1.5.1.js"></script> <script src="js/jquery-1.9.1.js"></script>此时，则执行js部分的时候按照1.
怎么抽取html页面的head部分
最新发布
06-02
可以使用HTML的`<link>`标签中的`rel`属性和`href`属性来引入外部的CSS和JS文件，以及`<meta>`标签来设置页面的元信息，然后在需要引入head部分的页面中直接引用这些外部资源即可。例如： ```html <!-- head.html --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>页面标题</title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> </body> </html> ``` ```html <!-- index.html --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>首页</title> <!-- 引用head.html中的资源 --> <link rel="stylesheet" href="head.css"> <script src="head.js"></script> </head> <body> <p>这是首页的内容</p> </body> </html> ``` 在这种方式下，可以将页面中重复的部分抽取到一个独立的HTML文件中，方便维护和管理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值