- 浏览: 2566103 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (1286)
- js-oop (2)
- js-window (10)
- js-event (19)
- js-string (37)
- js-array (27)
- js-page (4)
- js-dom (62)
- js-lang (8)
- js-number (7)
- js-platform (3)
- js-object (15)
- js-element (3)
- js-browser (7)
- js-url (6)
- js-date (10)
- css基础 (48)
- css优化 (15)
- html基础 (17)
- html标签 (19)
- js基础 (117)
- js-兼容性差异 (33)
- js引擎 (3)
- js性能 (14)
- json (6)
- jQuery源码浅析 (43)
- web mobile开发资料 (78)
- js跨域 (2)
- html5 (74)
- html5-canvas (7)
- css3 (53)
- 浏览器 (5)
- api设计学 (3)
- js-加载 (3)
- linux (37)
- 架构师 (1)
- php (2)
- self开发的脚本库--凤凰 (2)
- web应用名词 (6)
- javascript新特性翻译 (8)
- ajax (6)
- jQuery动画效果 (7)
- prototype的解读 (13)
- 优秀插件翻译 (1)
- css解决方案 (26)
- 数据库 (2)
- english daily (59)
- 浏览器内核探究 (1)
- jQuery插件介绍 (9)
- jquery基础篇 (26)
- chrome浏览器问题整理 (14)
- js选择器那些事 (3)
- 前端框架 (26)
- Firefox私有属性 (11)
- webkit私有属性集合 (17)
- 书籍推荐 (21)
- 数据结构 (1)
- 网站建设相关 (7)
- 好文翻译 (2)
- 个人作品 (3)
- kissy的解读 (4)
- css-layout(布局研究) (5)
- less研究 (1)
- YUI探究 (1)
- hash探究 (1)
- js动画 (7)
- 前端面试题 (37)
- css书写规范 (1)
- js模板引擎 (6)
- js模块化 (19)
- 编写高质量代码 (3)
- 性能探究--应用协议 (2)
- 前端图像处理 (19)
- Mac OS相关 (21)
- 正则表达式 (11)
- 离线应用相关 (0)
- 前端工具 (65)
- nodeJS (55)
- jquery优化篇 (2)
- 设计模式探究系列 (3)
- windows7 (2)
- IE10 (10)
- 微博开放平台探究 (2)
- 常用web服务接口 (1)
- 数据存储相关 (8)
- 零时文件 (2)
- jQuery Mobile (16)
- backbone (15)
- underscore (22)
- sass (11)
- android (3)
- phonegap (10)
- IE私有 (11)
- qwrap (8)
- git (14)
- chrome extensions (5)
- freemarker (11)
- angularJS (3)
- seo (2)
- markdown (3)
- css动画 (4)
- 安卓开发 (2)
- React (7)
- 活动页技术 (1)
- 网络安全 (3)
- grunt (7)
- Lo-Dash (3)
- 前端国际化 (4)
- 版本控制 (2)
- 盒模型 (4)
- 微信开发 (1)
- Mock数据工具 (1)
- sails (1)
- vim (1)
- js-color (1)
- iOS 基础 (43)
最新评论
-
jertom:
<div id="showInfo" ...
addEventListener等事件监听的参数细谈 -
乌托邦国王:
<div class="quote_title ...
css3动画属性系列之transform细讲移动translate -
hvang1988:
能提供附件下载吗,找不到js库,google封了访问不了
Syntaxhighlighter---代码高亮插件介绍 -
sscsacdsadcsd:
我的天 那到底是为什么function是object我看und ...
typeof func ==='function'的疑惑 -
wkjiangwk:
试了,没用,你们从不去测试。
介绍一下x-webkit-speech -------实现语音输入
最近逛博文的时候看见一篇个人觉得比较有创意的博文,学习分享一下。
在页面开发过程中省略html,head,body这三个标签是可以省略的。当然很多人也在别的书上或者http://www.w3.org看过。The html element represents the root of an HTML document.-----其实在标准中html元素是根元素,而且里面的Content model:A head element followed by a body element.----内容模型里面提出只能包含一个head元素和body元素,而且head必须在body之前。
其实看到这里大家也会有一个疑问,如果我在页面完全不写三个元素,那么浏览器会不会报错,或者自动按照标准创建三个元素,或者按照什么原理来解析。呵呵,心动不如行动嘛,我也自己新建了一个html。
主要的结构也是很简单的
<!DOCTYPE html>
<h1>dawd</h1>
<p>ces</p>
下面是我自己用不同的浏览器解析生成的:
(1)Opera
(2)FF
(3)IE8
这边我暂时只是简单地举例了一下3个浏览器,但是结果也是一致的,当然我这边我没有在文档树里面加入一些<style>标签,如果你在测试demo的时候加入了,浏览器解析完会给你正确地放在指定的位置。
浏览器始终创建一个head元素,并自上而下依次检查页面源码中的各标签,能够加入到head元素的标签都加入到head元素中,随后将剩余的元素分配到自动创建的body元素中。(引用了一下原作者的结论)。
---当然在这里可能会有一些人问---什么则称为“正确的放入指定的位置”。
这边我也举个例:
The head
element
The head
element represents a collection of metadata for the Document
.
Here is an example of a longer one:
<!DOCTYPE HTML> <HTML> <HEAD> <META CHARSET="UTF-8"> <BASE HREF="http://www.example.com/"> <TITLE>An application with a long head</TITLE> <LINK REL="STYLESHEET" HREF="default.css"> <LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text"> <SCRIPT SRC="support.js"></SCRIPT> <META NAME="APPLICATION-NAME" CONTENT="Long headed application"> </HEAD> <BODY> ...
head元素的内容模型称为“metadate content”--元数据内容,一般包括:base、command、link、meta、noscript、script、style、title
发表评论
-
X-Frame-Options
2014-08-16 18:15 1183最近客户端内嵌的页面发现了 X-Frame-Opt ... -
HTML实体字符列表
2014-08-08 17:55 873最近在研习he这个Node包,里面提到了一些不错 ... -
object各标签的参数和值
2013-11-09 15:06 1248相比而言,现在flash object用的相对不 ... -
seo相关的meta设置revisit-after
2013-02-27 13:46 1755revisit-after ----- ... -
HTML标签之object
2012-11-06 22:03 1479本文简单记录一下object标签相关内容 1、定义和用 ... -
说说DTD(doctype)
2012-09-24 21:01 1158其实在很多场合说过这个点了,但是没有系统的介绍一下,还是简单说 ... -
关于X-UA-Compatible
2012-07-07 16:28 13381、what is X-UA-Compatible ? ... -
html<td>标签的nowrap属性
2012-07-02 20:50 1568HTML <td> 标签的 nowrap 属 ... -
HTML rel canonical属性值
2012-05-13 15:54 1732这个可能很多专门做seo优化的人应该比较清楚,下面我简单介绍 ... -
autocomplete属性
2012-05-02 10:59 1885简单记录,个人积累。 1、定义: ... -
mailto的介绍
2012-02-28 16:41 2102HTML支持邮件链接,我们可以如下的进行设置a标签: ... -
html字符实体
2011-12-16 11:29 1534HTML 字符实体 1、 什么是字符实体? ... -
从块级元素和内联元素浅谈标签的嵌套规则
2011-12-10 22:14 5842从一个问题说起吧------------div能不能放在p标签 ... -
html浅谈之图像映射
2011-09-25 12:24 3688或许做前端到现在你没有接触过图像映射这个东东,但是如果你是一个 ... -
html页面设计浅谈
2011-09-24 12:37 1575其实做了一段的前端页面开发你就会发现,开始的时候无论是css类 ... -
html之浅谈link标签的奇葩属性和标准规范性
2011-09-22 14:27 1660今天在某一个大型网站的demo里面看到这么一段 ...
相关推荐
第14周-07章节-Python3.5-html的head内标签.avi
<SCRIPT LANGUAGE="javascript" SRC="script/xxxxx.js"></SCRIPT> <br/> 附<body>标签: <body>标签不属于head区,这里强调一下,为了保证浏览器的兼容性,必须设置页面背景 <body bgcolor="#...
一、META META标记用于描述不包含在标准HTML里的一些文档信息。激烈的竞争使浏览器厂商纷纷利用META开发出许多实用的功能,又使这些功能在常用的浏览器中都有效。下面介绍几个很有用的用法:
美工之路系列视频是为那些想从事网页前台设计的设计师们和网页设计爱好者量身定制的,本教程包含4个部分:HTML篇,CSS篇,Javascript篇和XML篇.不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值,使...
elasticsearch-head-chrome插件,谷歌扩展程序,导入即能使用,不需要任何其他配置,方便快捷。
《Head First HTML与CSS(第2版)》对读者来说,将是一个系统学习创建工业标准Web页的体验,而不只简单地阅读:你将玩游戏、解决谜题、探索秘密,并以你从未想过的方式创建Web页。你还能学习HTML如何与CSS协同工作。...
-- 单标签(也称空标签):有头没有尾,结尾会有一个关闭符,可写可不写 --> <!-- charset="UTF-8":声明该文档的字符编码集是UTF-8,如果不写,就会导致中文乱码 --> <!-- mate标签可以描述该文档的作者,项目说明...
先等一下,Web页面?为什么不用HTML5创建成熟的Web应用呢?另外,为什么不使用现代技术,像在移动设备上一样轻松地应用到桌面浏览器呢?当然,你肯定希望使用最新的HTML5技术来完成,比如地理定位、视频、2D绘制、...
elasticsearch-head插件,带有安装说明。
HTML5head头标签.pdf
《Head First HTML与CSS(第2版)》对读者来说,将是一个系统学习创建工业标准Web页的体验,而不只简单地阅读:你将玩游戏、解决谜题、探索秘密,并以你从未想过的方式创建Web页。你还能学习HTML如何与CSS协同工作。...
头操作head标签的元信息,一种简单的方法由激励有关旧版本的语法,用法通过CDN ...< script src =" https://cdnjs.cloudflare.com/ajax/libs/vue/*version*/vue.min.js " > </ script >< script src ...
在前面几节课程中,我们已经完成对首页,jokes查询页,About页面的开发,接下来,我们来看一下每个页面的head标签 内容,我们会发现这三个页面的标签一致,而且和nuxt.config.js配置文件的head配置保持一致; 所以...
北大青鸟s1 HTML 知识点总结 HTML5的优势 世界知名浏览器厂商对HTML5的支持:微软 、Google、苹果、Opera、Mozilla 市场的需求 跨平台 ...没有顺序,每个标签、标签独占一行(块元素) 默认没有标记
linux离线安装es-head插件完整步骤以及安装包:包括先安装nodeJs、grunt;再安装head。都是离线
React Native Head选项卡视图产品特点可滚动的标签所有标签页共享可折叠标题可折叠标题控制Tabview在垂直方向上的滑动可折叠标题可以响应事件在标签页中添加下拉刷新(v2.0〜) 为Tabview添加一个下拉刷新(v2.0.6〜...
《Head First HTML5 Programming 中文版 》内容简介:你可能想创建具有动态性 交互性 包含丰富数据而且互连的Web页面 先等一下 Web页面 为什么不用HTML5创建成熟的Web应用呢 另外 为什么不使用现代技术 像在移动设备...
而ElasticSearch-head就是一款能连接ElasticSearch搜索引擎,并提供可视化的操作页面对ElasticSearch搜索引擎进行各种设置和数据检索功能的管理插件,如在head插件页面编写RESTful接口风格的请求,就可以对Elastic...
如果你曾经读过深入浅出(Head First)系列图书中的任一本,就会知道书中展现的是什么:一个按人脑思维方式设计的丰富的可视化学习模式。本书的编写采用了许多最新的研究,包括神经生物学、认知科学以及学习理论,这...