html之head部分详解

我来乔23      2022-02-07     398

关键词:

  随便打开一个网页,右击查看网页源代码,总能看到<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">标签内。

html之head,base,meta,title

...的数据都不会直接显示给读者。下面这些标签可用在head部分:base,link,meta,script,style,title head标签支持html中的全局属性1、base全局属性  所有浏览器都支持,为页面上的所有链接规定默认地址或目标,设置了baseurl之后 查看详情

elasticsearch之插件扩展

...arch之插件介绍及安装Elasticsearch之head插件安装之后的浏览详解Elasticsearch之kopf插件安装之后的浏览详解Elasticsearch-2.4.3的3节点安装(多种方式图文详解)(含head、kopf和marvel插件安装)Elasticsearch之marvel(集群管理、监控)插件安... 查看详情

html5中head内标签详解:meta标签(代码片段)

引言:我发现自己最近有点走偏了,越来越多的将学习的精力放在编程上,而渐渐的忽略了HTML这个简单又不简单的标记语言上。相信大家应该也有这样的经历。觉得HTML这种东西很简单不需要花费太多精力就能使用,但是时间久... 查看详情

head标签中的常用标签(代码片段)

...标签知识点详解0x01HTML的主体结构HTML的主体结构分为两大部分:最顶部声明和HTML标签。其中,HTML标签又包含HEAD与BODY两个标签。<!DOCTYPEhtml><!--//最顶部声明,告诉浏览器所使用的HTML规范--><html 查看详情

前端技术之_css详解第二天

前端技术之_CSS详解第二天1、css基础选择器html负责结构,css负责样式,js负责行为。css写在head标签里面,容器style标签。先写选择器,然后写大括号,大括号里面是样式。<styletype="text/css">body{background-color:pink;}</style>常见... 查看详情

javascript---dom详解(代码片段)

...dy是兄弟关系。p和h1是兄弟关系。)2、DOM节点类型从上图部分,我用四种颜色区分了不同节点的类型,每个节点对应的node 查看详情

一天一个linux基础命令之查看文件开头部分内容head

head查看文件开始部分的内容1、命令格式head [option]...[File]...2、命令功能显示文件内容,默认显示文件的前十行,可以用[-n]#|[-#],#代表显示的行数,选项指定显示多少行,如果没有“文件file”时,从标准输入中读取输入3、常... 查看详情

前端技术之_css详解第一天

前端技术之_CSS详解第一天一html部分 略。。。。二、列表列表有3种2.1无序列表无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的。ul就是英语unorderedlist,“无序列表”的意思。li就是... 查看详情

python基础详解

python基础部分python基础一python基础二Python最详细,最深入的代码块小数据池剖析深浅copypython文件操作python函数部分python函数初识python函数进阶python装饰器python迭代器,生成器python内置函数,匿名函数python递归函数python二分查找算法... 查看详情

nginx详解十三:nginx场景实践篇之防盗链

  防盗链:目的:防止资源被盗用 防盗链设置思路首要方式:区别哪些请求是非正常的用户请求 基于http_refer防盗链配置模块(判断refer(上一步的链接)信息是否为允许访问的网站)配置语法:valid_refernone|bloked|s... 查看详情

排序算法之快速排序详解(代码片段)

...的基本思想是通过一次排序将等待的记录分成两个独立的部分,其中一部分记录的关键字小于另一部分的关键字。C部分的快速排序一直持续到整个序列被排序。任取一个元素(如第一个)为中心提出所有小于它的元素,并将大于它... 查看详情

spring之aop详解

...数式编程的一种衍生范型。利用AOP可以对业务逻辑的各个部分进行隔离,从而使得业务逻辑各部分之间的耦合度降低,提高程序的可重用性,同时提高了开发的效率。 查看详情

javascript基础之运算符,表达式及语句详解(代码片段)

JavaScript基础02运算符算数运算符数学运算符也叫算数运算符,包括加(+)、减(-)、乘(*)、除(/)、取余(%)(求模)。()可以提升优先级,其优先级与数学中计算的优先级相同,先乘除后加减,括号优先算<!DOCTYPEhtml><htmllang&#... 查看详情

html-head标签详解(代码片段)

一、博主介绍💒首页:水香木鱼🛫专栏:HTML✍简介:博主姓:陈,名:春波。花名“水香木鱼”,星座附属“水瓶座一枚”来自于富土肥沃的"黑龙江省"-美丽的“庆安小镇”🔰格言:生活是一... 查看详情

html-head标签详解(代码片段)

一、博主介绍💒首页:水香木鱼🛫专栏:HTML✍简介:博主姓:陈,名:春波。花名“水香木鱼”,星座附属“水瓶座一枚”来自于富土肥沃的"黑龙江省"-美丽的“庆安小镇”🔰格言:生活是一... 查看详情

html中css之去除li前面的小黑点,和ulli部分属性方法

...写法特别是在一些CMS中最常见。2、在相关的页面找到head部分写入下面的代码<styl 查看详情

狂神说java笔记--多线程详解部分笔记(代码片段)

传送门==>B站遇见狂神说Java多线程详解做笔记时有的知识点并没有整理;ml1.线程创建之继承Thread类图片下载练习2.线程创建之实现Runnable接口买票案例模拟龟兔赛跑3.线程创建之实现Callable接口4.静态代理模式5.Lambda表达式6.... 查看详情

html5之section元素案例详解

什么是Section元素Section元素是对网站、网页进行内容分块的元素。一个section元素通常是由内容和它的标题组成,section元素并非是一个普通的容器元素,当一个容器需要被直接定义样式的时候,我们还是推荐大家是div,下面我们... 查看详情