html并不简单读书笔记-6

经常出现在收尾的html元素

meta元素

meta元素多出现在HTML 页面的头部,一般习惯把它设置在head 元素中
大家根本无法想象这个元素所包含的规则和细节多么庞大、涵盖的内容多么丰富, 其中不仅有标准特性, 有私有特性, 如果要展开详细介绍, 怕是几万字都讲不清楚。
为什么会如此复杂呢? 个人揣测, 应该是好用吧, 它就像一个万金油元素
用 name 属性定义一个新的类型,用 content 属性写一下规则, 一个浏览器新特性就诞生了.
没错, 就是这么随意,其应用范围涵盖交互、SEO、安全等各个领域。
说一个大概率你不知道的特性, meta元素有自动刷新网页的功能。 比如,下
面的 HTML 代码可以实现 2 秒钟后网页自动跳转。

<meta http-equiv="refresh" url="地址"> </meta>

• 1.seo中最重要的元素之一

对于一个页面来说。最重要的元素就是标题，描述和关键字，简称TDK
搜索引擎会将这些信息展示在搜索结果列表页。

• 2.robots策略

   <meta name="robots" content="noindex">

robots的意思是机器人，就是搜索引擎的爬虫程序。以上在之前都有介绍过。

• 3.移动权重平移

这是一个私有规则，有百度来制定的，很多网站既有移动也有网页。
在大型的网站，对于两端的子域名相同，而移动端想共享网页端的权重，可以进行设置

<meta http-equiv="mobile-agent" content="format=html5;url=地址" />

网站风格和颜色主题设置

下面是theme-color和color-scheme两种类型介绍

• theme-color

用来设置网站的主题色，在此设置下，在移动端可以看到顶部状态栏甚至标题栏的背景色变成制定的颜色

<meta name="theme-color" contont="#ffffff">

体验地址

• color-scheme

可以用来设置网站的浅色和深色模式

<meta name="color-scheme" contont="dark">

体验地址
实际上，很少使用强制深色的模式。毕竟，很多时候都是倾向于浅色

<meta name="color-scheme" contont="light dark">
// 只使用浅色模式
<meta name="color-scheme" contont="only light">
//only dark 是不被允许的

下面两个相关的css属性
color-scheme，在css中和meta中一样，作用于元素上。
prefers-color-scheme,用于css的媒体查询，区分是不是在浅色还是深色。