HTML-head头部浅析
HTML结构
在sublime或HBuildr新建HTML文件,输入html:5,按下tab键后,自动生成的代码大致如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body></body>
</html>
文档声明头
标准的HTML页面,第一行以
<!DOCTYPE...
开头,而这一行就被称为文档声明头。
DocType Declaration,简称DTD。
此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
HTML4.01一共有6种DTD,也就是说HTML第一行语句一共有6种:
上图中的三种小规范进行解释:
- strict:表示“严格的”,这种模式里面的要求更为严格。
- Transitional:表示“普通的”,这种模式就是没有一些别的规范。
- Frameset:表示“框架”,在框架的页面使用。
strict这种严格体现在哪里?有一些标签不能使用。 比如,u标签,就是给一个本文加下划线,但是这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而u这个下划线是样式。所以,在strict中是不能使用u标签的。那怎么给文本增加下划线呢?可以使用css属性来解决。XHTML1.0更为严格,因为这个体系本身规定比如标签必须是小写字母、必须严格闭合标签、必须使用引号引起属性等等。
在sublime输入的html:xt,x表示XHTML,t表示transitional。
HTML5中极大的简化了DTD,也就是说HTML5中就没有XHTML了。
头标签(head)
head标签是所有头部元素的容器。
<head>内的元素可包含脚本,指示浏览器在何处可以找到样式表,提供元信息等。
可添加到head部分的标签:<title>、<base>、<meta>、<link>、<script>、<style>:
<title>:指定整个网页的标题,在浏览器最上方显示。
<base>:为页面上的所有链接规定默认地址或默认目标(target)。
<meta>:提供有关页面的基本信息。
<link>:定义文档与外部资源的关系。
<script>:定义客户端脚本,如JavaScript。
<style>:定义内部样式表与网页的关系。
meta标签
可提供有关页面的原信息(mata-information),
针对搜索引擎和更新频度的描述和关键词。
元数据(metadata)是关于数据的信息。
<meta> 标签提供关于 HTML 文档的元数据。
元数据不会显示在页面上,但是对于机器是可读的。
典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
- http-equiv属性
- 用来向浏览器传达一些有用的信息,帮助浏览器正确地显示网页内容。
- 与之对应的属性值为content,content中的内容其实就是各个参数的变量值。
<!--重定向 2秒后跳转到对应的网址,注意分号-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文档的内容类型和编码类型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告诉IE浏览器以最高级模式渲染当前网页-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
- name属性
- 用于页面的关键字和描述,是写给搜索引擎看的,
- 关键字可以有多个,用 ‘,’号隔开。
- 与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
<meta name="Description" content="网易是中国领先的互联网技术公司,为用户提供免费邮箱、游戏、搜索引擎服务,
开设新闻、娱乐、体育等30多个内容频道,及博客、视频、论坛等互动交流,网聚人的力量。" />
<!-- 只要设置Description页面描述,那么百度搜索结果,就能够显示这些语句,
这个技术叫做SEO(search engine optimization,搜索引擎优化) -->
<meta name=viewport content="width=device-width, initial-scale=1">
<!-- 让网页支持移动端,移动设备优先 -->
title 标签
<title> 标签定义文档的标题。
title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够:
* 定义浏览器工具栏中的标题
* 提供页面被添加到收藏夹时显示的标题
* 显示在搜索引擎结果中的页面标题
* 告诉用户和搜索引擎这个网页的主要内容是什么,
* 搜索引擎可以通过网页标题,迅速的判断出当前网页的主题。
base 标签
<base> 标签为页面上的所有链接设置默认的地址或默认的目标(target):
例:
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>实例2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<base href="http://www.w3cschool.cn/statics/images/w3c/" target="_blank">
</head><body>
<img src="logo.png"> - 注意这里我们设置了图片的相对地址。
能正常显示是因为我们在 head 部分设置了 base 标签,
该标签指定了页面上所有链接的默认 URL,
所以该图片的访问地址为 "http://www.w3cschool.cn/statics/images/w3c/logo.png"
<br><br>
<a href="http://www.w3cschool.cn">W3Cschool教程</a> -
注意这个链接会在新窗口打开,即便它没有 target="_blank" 属性。
因为在 base 标签里我们已经设置了 target 属性的值为 "_blank"。
</body>
</html>
link 标签
<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表:<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
style 标签
<style> 标签用于为 HTML 文档定义样式信息。
您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式:<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
注:link和style详细会在讲到样式和css时再详解和列实例。
script标签
script 标签用于定义客户端脚本,比如JavaScript。
HTML头部元素 标签描述
<head> 定义关于文档的信息。
<title> 定义文档标题。
<base> 定义页面上所有链接的默认地址或默认目标。
<link> 定义文档与外部资源之间的关系。
<meta> 定义关于 HTML 文档的元数据。
<script> 定义客户端脚本。
<style> 定义文档的样式信息。
参考:
1、w3cschool
2、小马哥
HTML-head头部浅析相关推荐
- amqp协议与pika库浅析
AMQP协议 简介 高级消息队列协议使得遵从该规范的客户端应用和消息中间件服务器的全功能互操作成为可能. 为了完全实现消息中间件的互操作性,需要充分定义网络协议和消息代理服务的功能语义. 一套确定的消 ...
- 浅析图片XSS中的哪些技术问题
本文讲的是浅析图片XSS中的哪些技术问题,跨站请求漏洞是web漏洞中最普遍的漏洞,在特定的场景下可以造成很严重的破坏.可以让攻击者在受害者浏览器上执行一个恶意脚本,网络上关于这方面的文章已经很多了. ...
- python 字符编码处理_浅析Python 字符编码与文件处理
Python字符编码 目前计算机内存的字符编码都是Unicode,目前国内的windows操作系统采用的是gbk. python2默认的字符编码方式是ASCII python3默认的字符编码方式是Un ...
- LinkedList 的实现原理浅析
转载自 LinkedList 的实现原理浅析 LinkedList内部结构 查看LinkedList的源码,发现其继承自AbstractSequentialList,实现了List,Deque,Clo ...
- mysql协议重传,MySQL · 源码分析 · 网络通信模块浅析
MySQL 网络通信浅析 MySQL的网络通信协议主要包含以下几个层次,从最上层的MySQL数据包协议层到最底层的socket传输: | THD | Protocol | NET | VIO | SO ...
- TUN/TAP设备浅析(一) -- 原理浅析
TUN/TAP设备浅析 TUN设备 TUN 设备是一种虚拟网络设备,通过此设备,程序可以方便地模拟网络行为.TUN 模拟的是一个三层设备,也就是说,通过它可以处理来自网络层的数据,更通俗一点的说,通过 ...
- ZAO 背后的深度学习算法原理浅析
ZAO最近火爆,成为现象级产品之一,引起大家的广泛关注,ATA上面已经有同学做了一些说明分析,链接如下: https://www.atatech.org/articles/148375?spm=ata ...
- mysql冷热数据LRU_浅析MySQL的lru链表
一.简述传统的lru链表 lru:least recently used 相信大家对lru链表是不陌生的,它算是一种基础的数据结构吧,而且想必面试时也被问到过什么是lru链表,甚至是让你手写一个lru ...
- 谷歌浏览器外贸版_外贸 网站移动端优化 浅析
外贸 网站移动端优化 浅析 自2015年推出所谓的Mobilegeddon以来,移动设备的重要性一直在不断增长, 网站移动端优化 就成了不得不引起重视的问题,同学们从事谷歌SEO优化工作就必须考虑不断 ...
最新文章
- SQL语句实现取消自增列属性
- Codeforces Round #528 (Div. 2, based on Technocup 2019 Elimination Round 4) C. Connect Three 【模拟】...
- QluOJ2018NewCode计算几何(寄蒜几盒)
- python 网页上显示数据_用Python实现网页数据抓取
- Java类和对象初始化
- vim匹配特定的行并删除它
- SQL Server 文件规划 -位置规划
- YUV422(UYVY)转RGB565源代码及其讲解.md
- java partialfunction,Java Relation.partialFunction方法代碼示例
- ubuntu中文设置
- kali-TheFatRat木马生成工具安装及简单使用
- tomcat乱码问题解决集合
- 计算机提示运行错误,每次电脑一开机就会提示脚本运行错误
- 实验一计算机网络基础知识,计算机网络实验基础知识 集线器的使用
- LVS+PIRANHA测试
- 2016年,你要学习这些移动开发技术
- 开发 mirai QQ机器人起步教程
- arcgis显示后台错误_ArcGIS后台服务器抛出异常的解决方法
- 服务器虚拟机光驱,vSphere client中的光驱配置方式
- Groovy(Java笨狗)系列--Class,Scripts
热门文章
- 山东大学nlp实验--词向量
- 时间序列数据可视化:Pyecharts日历图
- 中忻嘉业:因抖音ccr指标异常的惩罚
- 计算机软考高级职称论文,关于计算机软考,这里可以解决你所有的问题
- 《Pytorch 模型推理及多任务通用范式》_第3节课
- grid布局浏览器兼容_使用 CSS Grid:以兼容不支持栅格化布局的浏览器
- Imagination宣布推出基于RISC-V的CPU产品系列
- 雅虎创始人杨致远简介
- TensorFlow实践(16)——tf.enable_eager_execution方法
- Django创建加法计算器