HTML学习笔记:HEAD

2018-01-13 10:59:16来源:https://www.biaodianfu.com/html-head.html作者:标点符人点击

分享
Doctype(文档类型)

目前的主流浏览器基本上都支持了HTML,所以只需使用


<!-- Doctype HTML5 -->
<!doctype html>


更多信息:https://www.biaodianfu.com/doctype.html


Language attribute(语言属性)

在设置页面语言的时候,需要特别注意,对于简体中文页面,应该设置为lang=”zh-cmn-Hans”,而不是lang=”zh-CN”。


<!-- 中文 -->
<html lang="zh-Hans">
 
<!-- 简体中文 -->
<html lang="zh-cmn-Hans">
 
<!-- 繁体中文 -->
<html lang="zh-cmn-Hant">
 
<!-- English -->
<html lang="en">


更多信息:https://www.biaodianfu.com/langtag.html


Charset(字符格式)

在HTML5场景下,只需使用如下代码即可。


<!-- Set character encoding for the document -->
<meta charset="utf-8">

如果是非HTML5场景,使用:


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

需要注意,为避免造成解析的错误,最好的HTTP的HEAD中“Content-Type”字段指定charset。


X-UA-Compatible(浏览器兼容模式)

由于目前IE使用的量越来越少,先前IE的怪异模式也越来越少见,所以浏览器兼容模式也没有什么设置的必要性。


<!-- Instruct Internet Explorer to use its latest rendering engine -->
<meta http-equiv="x-ua-compatible" content="ie=edge">


更多信息:https://www.biaodianfu.com/x-ua-compatible.html


Viewport(视窗)
<!-- Viewport for responsive web design -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">


viewport详细介绍见:https://www.biaodianfu.com/viewport.html



viewport-fit是Apple新加的属性,目的是控制iPhone X的刘海显示,详见:剖析 iOS 11 网页适配问题


Title(标题)

页面标题需要注意长度,在能够反应页面的内容的情况不宜过长,英文控制在55字符以内,中文则控制在23个文字以内。


<!-- Document Title -->
<title>Page Title less than 55 characters</title>
Description(描述)
<!-- Meta Description -->
<meta name="description" content="Description of the page less than 150 characters">

同样需要控制页面描述的长度。


Favicons(图标)

非常建议将favicon.ico放在网站的根目录,原因是IE10及以下会自动请求网站根目录的favicon.ico文件。对于For IE 11, Edge, Chrome, Firefox, Safari, Opera推荐使用.png格式的图片来代替.ico文件(推荐尺寸32x32px)


<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
 
<!-- Recommended favicon format -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">

其他参考链接:


https://bitsofco.de/all-about-favicons-and-touch-icons/
https://github.com/audreyr/favicon-cheat-sheet
https://css-tricks.com/favicon-quiz/
https://www.favicon-generator.org/
https://realfavicongenerator.net/
Meta标签


更多meta标签:https://www.biaodianfu.com/html-meta.html


其他参考链接
https://frontendchecklist.io/
https://github.com/joshbuchea/HEAD
https://github.com/Amery2010/HEAD

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台