我是小又又，住在武汉，做了两年新媒体，准备用 6 个月时间转行前端。
今日学习目标
昨天了解了 html 内容，今天准备学习一下昨天使用到的 <head> 标签内部<title>元素和<meta>元素具体含义，又是适合学习的一天，加油，小又又！！！！
<title>元素学习
昨天学习的<title>标题很不理解，今天要好好学习一下呢~~
基础说明
<title> 标签定义文档的标题，在所有 HTML 文档中是必需的。
- 定义浏览器工具栏中的标题
- 提供页面被添加到收藏夹时的标题
- 显示在搜索引擎结果中的页面标题
注意事项！！！
- 一个 HTML 文档中不能有一个以上的
<title>元素。 - 如果遗漏了
<title>标签，文档作为 HTML 是无效的。
支持属性
| 属性 | 描述 |
|---|---|
| accesskey | 设置访问元素的键盘快捷键。 |
| class | 规定元素的类名（classname） |
contenteditable New |
规定是否可编辑元素的内容。 |
contextmenu New |
指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 |
data-* New |
用于存储页面的自定义数据 |
| dir | 设置元素中内容的文本方向。 |
draggable New |
指定某个元素是否可以拖动 |
dropzone New |
指定是否将数据复制，移动，或链接，或删除 |
| hiddenNew hidden | 属性规定对元素进行隐藏。 |
| id | 规定元素的唯一 id |
| lang | 设置元素中内容的语言代码。 |
spellcheck New |
检测元素是否拼写错误 |
| style | 规定元素的行内样式（inline style） |
| tabindex | 设置元素的 Tab 键控制次序。 |
| title | 规定元素的额外信息（可在工具提示中显示） |
translate New |
指定是否一个元素的值在页面载入时是否需要翻译 |
<meta> 元数据学习
昨天学习的<meta>元数据很不理解，今天要好好学习一下呢~~
基础说明
meta标签描述了一些基本的元数据。元数据不显示在页面上，但会被浏览器解析。
meta元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。<meta>一般放置于<head>区域。
支持属性
| 属性 | 值 | 描述 |
|---|---|---|
charsetNew |
character_set | 定义文档的字符编码。 |
| content | text | 定义与 http-equiv 或 name 属性相关的元信息。 |
| http-equiv | content-type default-style refresh |
把 content 属性关联到 HTTP 头部。 |
| name | application-name author description generator keywords |
把 content 属性关联到一个名称。 |
| scheme | format/URI | HTML5 不支持。 定义用于翻译 content 属性值的格式。 |
使用实例
为搜索引擎定义关键词
<meta name="keywords" content="小又又,学前端">
为网页定义描述内容
<meta name="description" content="小又又的描述测试~~~~~~">
定义网页作者
<meta name="author" content="小又又">
页面缩放配置
比如希望让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
| 属性 | 描述 |
|---|---|
| width | 设置 layout viewport 的宽度，为一个正整数，或字符串"width-device" |
| initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数 |
| minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数 |
| maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数 |
| height | 设置 layout viewport 的高度，这个属性对我们并不重要，很少使用 |
| user-scalable | 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes 代表允许 |
| target-densitydpi | 安卓特有，表示目标设备的密度等级，作用是决定css中的1px代表多少物理像素。值可以为一个数值或 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个 |
每 30 秒钟刷新当前页面
<meta http-equiv="refresh" content="30">
针对手持设备优化，主要是针对一些老的不识别 viewport 的浏览器，比如黑莓
<meta name="HandheldFriendly" content="true">
微软的老式浏览器
<meta name="MobileOptimized" content="320">
uc 强制竖屏
<meta name="screen-orientation" content="portrait">
QQ 强制竖屏
<meta name="x5-orientation" content="portrait">
UC 强制全屏
<meta name="full-screen" content="yes">
QQ 强制全屏
<meta name="x5-fullscreen" content="true">
UC 应用模式
<meta name="browsermode" content="application">
QQ 应用模式
<meta name="x5-page-mode" content="app">
今日学习名词
| 名称 | 名词解析 |
|---|---|
| 元数据 | 用来描述数据的数据（Data that describes other data） ，用来描述具体数据/信息的数据/信息。元数据最大的好处是，它使信息的描述和分类可以实现格式化，从而为机器处理创造了可能。 |
今日小尝试
刚运行的效果
页面刷新的效果
hhhh，小又又太厉害啦~~~~~，页面刷新了。
虽然不清楚为何刷新之后，右侧页面显示的不是小又又写的内容，hhhh
今日学习总结
<title>标签主要是控制页面浏览器选项卡显示内容<meta>标签指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据，不显示在页面上，但会被浏览器解析。
今日心情
今日学习了好多新名词，有些让我有些迷糊，希望明天学习到更多东西~~~
本文使用 mdnice 排版
