关于html<head>部分怎么写的一些思考

最新推荐文章于 2024-03-17 11:50:58 发布

向来缘浅奈何晴深

最新推荐文章于 2024-03-17 11:50:58 发布

阅读量1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lzq_20150715/article/details/75227244

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

关于html部分怎么写的一些思考
在编辑器里直接!+tab键就可以写好一个<head>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

或者把bootstrap的模板拿过来，然后就可以开始写了

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

有时候也看到别人这样子写~

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <link rel="apple-touch-icon" href="#">
    <link rel="icon" href="#">

    <!-- External CSS -->
    <!-- Bootstrap -->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <!-- 禁止自适应 -->
    <link rel="stylesheet" href="css/non-responsive.css">
    <link rel="stylesheet" href="css/alonepage.css">
</head>

于是，接下来，我开始思考为什么要这样子写~

< meta http-equiv = “X-UA-Compatible” content = “IE=edge,chrome=1” />的意义

X-UA-Compatible是神马？

X-UA-Compatible是IE8的一个专有<meta>属性，它告诉IE8采用何种IE版本去渲染网页，在html的标签中使用。可以在微软官方文档获取更多介绍。

为什么要用X-UA-Compatible？

在IE8刚推出的时候，很多网页由于重构的问题，无法适应较高级的浏览器，所以使用X-UA-Compatible标签强制IE8采用低版本方式渲染。
使用下面这段代码后，开发者无需考虑网页是否兼容IE8浏览器，只要确保网页在IE6、IE7下的表现就可以了。

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

使用下面这段代码使用的是Edge 。模式Edge 模式告诉 IE 以最高级模式渲染文档，也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。简单的说，就是什么版本 IE 就用什么版本的标准模式渲染。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

使用以下代码强制 IE 使用 Chrome Frame 渲染

<meta http-equiv="X-UA-Compatible" content="chrome=1">

最佳的兼容模式方案：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

ps：

为防止失效，X-UA-Compatible最好紧跟在head之后，之前不要有任何不标准的标签。

更细，更基本的介绍可以参考一下网址：

http://www.cnblogs.com/nidilzhang/archive/2010/01/09/1642887.html

本文转载自http://www.cnblogs.com/chendc/p/5423337.html

<meta name=”viewport” content=”width=device-width, initial-scale=1”>

该标签放置于<head></head>标签之中，常见于响应式网站布局的页面中。简单说来就是解决在手机（iPhone Safari）上访问网页时它默认会对网页进行缩放，尽可能多地在屏幕上展示整个页面的内容。

而缩放之后的效果可想而知，一个在电脑上正常展示的页面被缩放进手机屏幕（通常是240*320）里面后，很难阅读。由于默认使用缩放，那么你事先设计好的在小屏幕上使用的样式将不起作用，也就是说手机上展示的是电脑版本的一个缩小版。

而在代码中指定viewport，则可以让开发者指定网页视图区域及缩放比例等。这样就能修正由浏览器自动缩放带来的影响。

而在使用Bootstrap框架时候，会自动帮你针对不同的屏幕尺寸调整你的页面，使其在各个尺寸的屏幕上表现良好，也就是响应式布局。
如果要写非响应式布局实例页面，则需要
移除此 CSS 文档中提到的设置浏览器视口（viewport）的标签：。
即移除这一代码

<meta name="viewport" content="width=device-width, initial-scale=1">

网页头部的声明应该是用 lang=”zh” 还是 lang=”zh-cn”？

<!DOCTYPE html>
<html lang="？">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">
    <link rel="apple-touch-icon" href="#">

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/non-responsive.css">
    <link rel="stylesheet" href="css/style.css">

</head>

单一的 zh 和 zh-CN 均属于废弃用法。问题主要在于，zh 现在不是语言code了，而是macrolang，能作为语言code的是cmn（国语）、yue（粤语）、wuu（吴语）等。我通常建议写成 zh-cmn 而不是光写 cmn，主要是考虑兼容性（至少可匹配 zh），有不少软件和框架还没有据此更新。zh-CN 的问题还在于，其实多数情况下标记的是简体中文，但是不恰当的使用了地区，这导致同样用简体中文的 zh-SG（新加坡）等无法匹配。更典型的是 zh-TW 和 zh-HK。所以其实应该使用 zh-Hans / zh-Hant 来表示简体和繁体。那么完整的写法就是 zh-cmn-Hans，表示简体中文书写的普通话/国语。一般而言没有必要加地区代码，除非要表示地区特异性，一般是词汇不一样（比如维基百科的大陆简体和新马简体）。所以回答题主，两种都不对。

如何标记的例子：

1. 简体中文页面：html lang=zh-cmn-Hans
2. 繁体中文页面：html lang=zh-cmn-Hant
3. 英语页面：html lang=en

作者：贺师俊
链接：https://www.zhihu.com/question/20797118/answer/16809331
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

<link rel=”？” href=”#”>

 <link rel="apple-touch-icon" href="#">
 <link rel="icon" href="#">

现今移动设备越来越多，苹果为iOS设备配备了apple-touch-icon私有属性，添加该属性，在iPhone,iPad,iTouch的safari浏览器上可以使用添加到主屏按钮将网站添加到主屏幕上，方便用户以后访问。实现方法是在HTML文档的<head>标签加入下面代码即可。

 <link rel="apple-touch-icon" href="/custom_icon.png"/>  
 <link rel="icon" type="image/vnd.microsoft.icon" href="浏览器地址栏里显示的图片.ico"/>

<link rel="icon" type="image/vnd.microsoft.icon" href="浏览器地址栏里显示的图片.ico"/>用于在浏览器地址栏里显示图片。

这样写了后，在浏览器的地址栏里，图片会显示成你给的路径的这个图片。

如果不写,直接在空间根目录下存一个文件浏览器地址栏里显示的图片.ico,一般情况下浏览器也会显示。

【<meta name=”description” content=”>】作用讲解

一、语法：

二、参数解析：
1）name项：常用的选项有Keywords(关键字) ，description(网站内容描述)，author(作者)，robots(机器人向导)等。
2）http-equiv项：可用于代替name项，常用的选项有Expires(期限)，Pragma(cache模式)，Refresh(刷新)，Set-Cookie(cookie设定)，Window-target(显示窗口的设定)，content-Type(显示字符集的设定)等。
3）content项：根据name项或http-equiv项的定义来决定此项填写什么样的字符串。
三、应用
1、告诉浏览器网页所识别的文件类型及语言类型，比如说，我们要让浏览器识别HTM/HTML类型的简体中文网面，我们可以这样写：
< Meta http-equiv=”Content-Type” content=”text/html; charset=gb2312” >
2、让一些搜索引擎搜索到你的网页，代码可以这样写：
< Meta Name=” Keywords” Content=”网页关键字” >
< Meta Name=” description” Content=”网页描述文字” >
要达到自动搜索引擎真正能方便地搜索到你的网页还得注意以下几点：
A、既要定义meta标记项，又要将首页正文的前200个字符定义成反映主页主题的文字。因为有些导航台在标引meta项中的关键词的同时，还要标引正文中的前200个字符。如：altavista。所以，有些人在注册完导航台后去检查注册结果时，发现导航台中的描述并不是你所希望的，而是诸如版权说明之类的文字。产生这一现象的原因就是没有注意到这一点。
B、将定义关键词的meta标记项放在定义描述的meta项之前。如：

C、将最重要的关键词放在最前面，让相关的关键词相邻。全小写与首字母大写并存，因为有的导航台在标引时对字符的大小写是敏感的。包括标点符号不要超过250个单词
D、首页最好不用frame结构，因为frame将屏幕划分成多个窗口后，导航台不能智能地选择正确的窗口中的主页去标引。
3、让一个页面过上一定的时间，自动转到另一个页面或者站点去，如：
< Meta HTTP-EQUIV=”refresh” content=”6; url=http://hi.baidu.com/tesalo/” >
content中的6表示时间，单位为秒，url=后面是你要转向的网址，若是与你当前网页在同一目录下，可以直接写上文件名，如：
< Meta HTTP-EQUIV=”refresh” content=”6; url=page1.htm” >
4、让网页每隔一段时间刷新一次，若要10秒刷新一次，代码这样写：

5、通过Meta可以让你进入页面时产生一些特殊效果，具体应用如下：
< meta http-equiv=”Page-Enter” content= “revealTrans(Duration=5.0,Transition=n)” > 其中，n的取值范围为0-23，具体的意义如下：
0 矩形缩小 1 矩形扩大 2 圆形缩小
3 圆形扩大 4 下到上 5 上到下
6 左到右 7 右到左 8 竖百叶窗
9 横百叶窗 10 错位横百叶窗 11 错位竖百叶窗
12 点 13 左右到中间 14 中间到左右
15 中间到上下 16 上下到中间 17 右下到左上
18 右上到左下 19 左上到右下 20 左下到右上
21 横条 22 竖条 23 以上 24种随机选择一种

6、标注作者：

7、控制页面缓冲，如不要页面缓冲的代码这样写：

https://segmentfault.com/q/1010000002523289/a-1020000002524199

http://blog.csdn.net/chenguang79/article/details/46721971

啦啦啦，先思考到这里吧，借用了很多别人的想法~以后再慢慢思考吧~

向来缘浅奈何晴深

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于html<head>部分怎么写的一些思考

关于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-
复制链接

扫一扫

专栏目录