问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501

网页设计中<head>? </head>

发布网友 发布时间:2022-04-28 17:06

我来回答

5个回答

懂视网 时间:2022-04-20 12:46

本篇文章给大家带来的内容是关于head标签中有什么属性?有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

head 标签里有什么?

每一个 HTML 文档中,都有一个不可或缺的标签:<head> ,它作为一个容器,主要包含了用于描述 HTML 文档自身信息(元数据)的标签,这些标签一般不会在页面中被显示出来,大多情况下是给浏览器和搜索引擎看的。

可以用在 <head> 里面的标签有: <title> , <base> , <link> , <style> , <meta> , <script> , <noscript> 。

元信息标签介绍

<title>

定义文档的标题,显示在浏览器的标题栏或标签页上,一般会完整地概括整个网页的内容。

<base>

给页面上所有相对 URL 的提供一个基础。一份文档中只能有一个 <base> 标签。

目前我只观察到「淘宝网」使用了这个标签。

<link>

规定外部资源与当前文档的关系,常于链接样式表,如下所示:

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

当然还有很多其他的作用:

  1. 比如用于 SEO,主要给搜索引擎看的:
<link rel="canonical" href="...">

在网站中常有多个 url 指向同一个页面的情况,上述标签告知搜索引擎页面的主 url 是什么,以便搜索引擎保留主要页面而去除其他重复页面。

  1. 提供 rss 订阅的:
<link rel="alternate" type="application/rss+xml" title="RSS" href="...">

上述标签除搜索引擎可以看懂以外,也能被很多浏览器插件识别。

  1. 表示页面 icon 的:
<link rel="icon" href="https://xxx.png">

多数浏览器会读取这个 link 的资源并展示在页面上。

  1. 对页面提供预处理的:
<link rel="dns-prefetch" href="//xxx.com">

提前对一个域名做 dns 查询。强制对域名进行预读取在有的情况下很有用,。

比如, 在网站的主页上,强制在整个网站上对频繁引用的域名做预解析处理,即使它们不在主页本身上使用。虽然主页的性能可能不受影响,但是会提高站点整体性能。

<style>

包含文档的样式信息。

<meta>

一种通用的元数据信息表示标签,一般以键值对出现,如:<meta name="xxx" content="yyy">

charset 属性

<meta charset="UTF-8">

从 HTML5 开始,上述写法被推荐使用,用于声明当前文档所使用的字符编码,推荐放在 <head> 中的第一位。

http-equiv属性

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

在 HTML4 中,上述代码用于声明字符集,但是现在已不被推荐。

除了 content-type ,还有其他几个值:

content-language (已过时)、set-cookie (已过时)、default-style 、refresh 、content-security-policy

因为不常用,所以就不一一介绍了,也挺容易理解,感兴趣可以点击 这里 了解。

name 属性

其实 <meta> 标签可以被自由定义,只要读取和写入的双方约定好 name 和 content 的格式就可以了。来看一个例子:

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">

上面这种用法并不在 HTML 标准中,但是却移动端开发的事实标准。这里来解释一下 content 中的内容:

width :页面宽度,可以是一个正整数;也可以一个字符串 "device-width" ,表示跟设备宽度相等。height :页面高度,可以是一个正整数;也可以一个字符串 "device-height" ,表示跟设备高度相等。initial-scale :初始缩放比例。minimum-scale : 最小缩放比例。maximum-scale : 最大缩放比例。user-scalable :是否允许用户缩放。

name 属性的值除了可以是 viewport 之外,还有相当多的值:

application-name 、author 、description 、generator 、keywords 、referrer 、robots 等。

同样的,就不一一介绍了,感兴趣可以点击 这里 了解。

<script>

用于嵌入或引用可执行脚本。来看几个 script 标签常见的全局属性:

async

使浏览器使用另一个线程下载脚本,这时不会阻塞页面渲染。当脚本下载完成后,浏览器会暂停渲染,执行脚本,执行完毕后继续渲染页面。

async 无法保证脚本的执行顺序,哪个脚本先下载结束就会先执行。

defer

同样会使浏览器并行下载脚本,但是下载完毕不会立即执行,而是会等到 DOM 加载完成后(即刚刚读取完 </html> 标签)再执行脚本。

defer 可以保证脚本的执行顺序就是它们在页面上出现的顺序。

src

定义引用外部脚本的地址,指定此属性的 script 标签内不应再有嵌入的脚本。如果脚本文件使用了非英语字符,还应该注明字符的编码。如:

<script charset="utf-8" src="https://www.example.com/script.js"></script>
type

默认值是 text/javascript

想了解更多关于 <script> 标签的详细内容可以点击 这里 。

<noscript>

如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本,则在此中定义脚本未被执行时的替代内容。

总结

本文到这里就结束了,其实关于 link 和 meta 标签还有很多没有介绍到,很多相关标签都是有特殊的需求,只有在特定情况下才会使用,比如移动端开发就会用许多在 PC 上并不需要的标签。

当然平时使用也主要是看需求,就拿我目前来说,只是些许用到过一些与 viewport 和 SEO 相关的标签。

鉴于此我推荐一个不错的学习方法,就是去各大网站查看它们的 head 标签里都有什么,遇到没见过的就去搜索一下,熟悉起来会很快。

我这边看过的网站有:「淘宝网」、「阿里巴巴」、「京东」、「网易严选」、「起点中文网」等。

本篇文章到这里就已经全部结束了,更多其他精彩内容可以关注PHP中文网的HTML教程视频栏目!

热心网友 时间:2022-04-20 09:54

1、定义

<head> 标签用于定义文档的头部,它是所有头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分:<base>, <link>, <meta>, <script>, <style>, 以及 <title>。

<title> 定义文档的标题,它是 head 部分中唯一必需的元素。

提示:应该把 <head> 标签放在文档的开始处,紧跟在 <html> 后面,并处于 <body> 标签或 <frameset> 标签之前。

提示:请记住始终为文档规定标题!

2、示例

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
<meta name="viewport" content="uc-fitscreen=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes" >
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 
<meta name="apple-mobile-web-app-title" content="金融APP">
<meta name="screen-orientation" content="portrait">
<meta name="-tc-verification" content="24c4e5ac365b4f01f0258fbbd37d3e13" />
<title>首页</title>
<meta name="keywords" content="关键词">
<meta name="description" content="描述">
<script type="text/javascript" src="js/first.js"></script>
<link href="css/index1080.css"  rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/idangerous.swiper.css"/>
<script src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/cordova-2.6.0.js"></script>
</head>

热心网友 时间:2022-04-20 11:12

整个网页包括<head></head>和<body></body>两个部分,前面是“头”部分,包含函数定义、格式定义、其它说明,后面是“体”部分,是网页的具体内容。

热心网友 时间:2022-04-20 12:47

主要用来包含顶部的一些描述性文字
例如.
页面标题
做SEO的几个META
CSS定义
JS定义等

一般来说, 仅是一个标签而已
就是告诉大家, 这里放这些东西
没有比较实际的意义

换句话说, 有没有head其实都一样
或者说,,head里面的内容是不是放在head里面效果是一样的

只是某些标准要求有head标签而已 :)

当然, 用好标签, 可以提高代码的可读性, 方便SEO等...

热心网友 时间:2022-04-20 14:38

主要用来包含顶部的一些描述性文字

一般来说, 仅是一个标签而已
就是告诉大家, 这里放这些东西
没有比较实际的意义
例如.
页面标题
做SEO的几个META
CSS定义
JS定义等
声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com
福建南安都有哪些市场 端午节去南安旅行的线路有哪些值得分享? 南安有哪些特色商业街 把一个棱长是10厘米的正方体铁块熔铸成一个底面积是20厘米的圆锥形铁块... 把一块棱长10厘米的正方体铁块熔铸成一个底面直径是20厘米的圆柱形零件... 0x0438ef0指令引用的0x0438ef0内存.该内存不能为“read”的错误提示... SONY 索尼 DSC-RX100M5A 1英寸数码相机 黑色(8.8-25.7mm、F1.8) Vl... SONY 索尼 DSC-RX100M5A 1英寸数码相机 黑色(24-70mm、F1.8-F2.8)-购... 索尼RX100 M5A数码相机 索尼RX100 M5A数码相机:小巧便携,成像卓越 用dreamweaver 制作网页出现乱码怎么回事 网站Meta标签都有哪些属性及作用 微信自助解封验证码错误怎么回事 微信被冻结了,然后他把电话号码给换了,我每次申请解冻就说短信验证码错误,怎么办啊 被手机自助冻结,然后解冻一直提醒我短信验证码错误 微信解冻验证码错误 被手机自助冻结,然后解冻一直提醒我短信验证码错误? 老师您好,我的好老师演讲稿600字左右 为什么解冻微信验证码会错误啊? 解冻短信验证码错误怎么办 微信账号解冻提示短信验证码错误,请返回重新尝试怎么回事 正宗慕斯蛋糕做法及配方 被冻结的解冻时短信验证码已经发了,为什么还是显示验证码错误? 微信被冻结了根据提示解冻却显示验证码错误,又不会好有帮忙解冻怎么办? 微信解冻提示验证码错误 微信解冻时短信验证码错误怎么办? 被手机自助冻结,然后解冻一直提醒我短信验证码错误 微信*登录,提示可以自助解封,但是到最后输入验证码之后一直提示验证码操作失败,登不上去,怎样解决 微信被自动冻结了根据提示解冻却显示验证码错误,要怎么解冻呀? 微信解冻时但显示微信验证码错误怎么了? 如何用Angular写界面 手机上全屏显示图片 点击图片后复制一段隐藏文本的代码要怎么写 移动端web开发meta怎么用 amaze ui 支持jsp吗 如何禁用iscroll5的刷新 TypeError: Cannot read property &#39;style&#39; of null怎么解决 域名出售页面 文字怎么写更吸引人? 用html5做一个遥控汽车应用程序 js、jquery 如何隐藏浏览器地址栏(网页优化,手机可以,ipad mini不可以... 用&lt;bgsound src=&quot;...&quot; &#47;&gt;在文件中加背景音乐,电脑上是有声,微信打开或者用手机浏览器打开就没有声了。 首页banner宽度全屏显示的问题,div+css HTML Meta标签知多少 考企业人力资源管理师三级要多少钱 学人力资源管理师 学费便宜证多少 报考助理人力资源管理师的培训费用是多少 企业人力资源管理师的*与二级报考条件和时间与报考费用??无比感谢 我重新装了操作系统windows xp sp2 无法安装显卡驱动程序怎么办? 如何在XP-SP2下安装版本较低的显卡驱动? 系统升级成SP2以后,显卡驱动怎么也装不上 WINXP SP2自带的显卡驱动问题