笔记申明
重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时候开的一个专栏,
天天10分钟,重构你的前端学问系统,笔者重要整顿进修历程的一些要点笔记以及感悟,完全的能够到场winter的专栏进修【原文有winter的语音】,若有侵权请联络我,邮箱:kaimo313@foxmail.com。
一、什么是元信息类标签
元信息
,是指形貌本身的信息。
元信息类标签
,就是
HTML
用于形貌文档本身的一类标签。
二、head 标签
作为盛放别的语义类标签的容器运用。
2.1、注重
1、head 标签
划定了本身必需是 html 标签
中的第一个标签,它的内容必需包括一个 title
,而且最多只能包括一个 base
。
2、假如文档作为 iframe
,或许有其他体式格局指定了文档题目时,能够许可不包括 title 标签
。
三、title 标签
title 标签
示意文档的题目,
title
应当完全地归纳综合全部网页内容的。
四、base 标签
base 标签
作用是给页面上
一切的 URL
相对地点供应一个基本。
<html>
<head>
<base href="https://time.geekbang.org" target="_blank"/>
</head>
<body>
<a href="">极客时候</a>
</body>
</html>
上面的代码内里a标签
的属性href
没有值,然则当你点击极客时候
,它就会新开一个页面翻开base标签
里的href
。
五、meta 标签
meta 标签
是一组键值对,它是一种通用的元信息示意标签。
5.1、具有 charset 属性的 meta
HTML5
最先
meta
标签新增
charset
属性的
meta
标签无需再有
name 和 content
。
charset 型 meta 标签异常症结
,它形貌了 HTML 文档本身的编码情势。发起放在 head
的第一个。
<html>
<head>
<meta charset="UTF-8">
……
5.2、具有 http-equiv 属性的 meta
具有
http-equiv
属性的
meta
标签,示意实行一个敕令,能够不需要
name
属性。
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
其他敕令:
-
content-language
:指定内容的言语 -
default-style
:指定默许样式表 -
refresh
:革新 -
set-cookie
:模仿 http 头set-cookie
,设置cookie
-
x-ua-compatible
:模仿 http 头x-ua-compatible
,声明ua
兼容性 -
content-security-policy
:模仿 http 头content-security-policy
,声明内容平安战略
5.3、name 为 viewport 的 meta
<meta name="viewport" content="width=500, initial-scale=1">
-
width
:页面宽度,能够取值详细的数字,也能够是device-width
,示意跟装备宽度相称。 -
height
:页面高度,能够取值详细的数字,也能够是device-height
,示意跟装备高度相称。 -
initial-scale
:初始缩放比例 -
minimum-scale
:最小缩放比例 -
maximum-scale
:最大缩放比例 -
user-scalable
:是不是许可用户缩放
做好了挪动端适配的网页,应当把用户缩放功用制止掉,宽度设为装备宽度
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
5.4、别的预定义的 meta
application-name
:假如页面是 Web application
,用这个标签示意运用称号。
-
author
: 页面作者 -
description
:页面形貌,用于搜索引擎或许别的场所 -
generator
: 天生页面所运用的东西,重要用于可视化编辑器,假如是手写 HTML 的网页,不需要加这个meta
-
keywords
: 页面症结字,关于SEO
场景异常症结
-
referrer
: 跳转战略,是一种平安考量 -
theme-color
: 页面作风色彩,现实并不会影响页面,然则浏览器能够据此调解页面以外的 UI(如窗口边框或许 tab 的色彩)
补充:
<head>
<!-- 默许运用最新浏览器 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 不被网页(加快)转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp">
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow">
<!-- 删除苹果默许的东西栏和菜单栏 -->
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 设置苹果东西栏色彩 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
</head>
个人总结
关于这一块在营业中确切关注比较少,base标签
也是看了winter这篇文章才晓得的,加油加油才行。。。