如何将一个html页面html5 div嵌套页面在另一个页面中

> HTML5的元素嵌套规则
HTML5的元素嵌套规则
先来看以下这样一段代码:
&li&&h4&&a href=&&&&div&&/div&&/a&&/h4&&/li&
当然,我是不会告诉你这段代码来自于FACEBOOK的 ,各位认为以上元素的嵌套有没有问题呢?我们会在后面讨论这个。
HTML4/XHTML的嵌套规则
在我们的印象中会有这样的嵌套规则:
内联元素不能嵌套块元素&p&元素和&h1~6&元素不能嵌套块元素
那么到底什么是块元素,什么是内联元素?
以下是规范中对块元素和内联元素的定义:
Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the 'display' property make an element block-level: 'block', 'list-item', and 'table'.
Inline-level elements are those elements of the source document that do not form n the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the 'display' property make an element inline-level: 'inline', 'inline-table', and 'inline-block'. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.
我们可以这样理解:块元素一般都从新行开始,内联元素在一行内显示,我们也可以通过CSS属性display的'inline' 或 ' block' 来改变元素为内联元素或块元素,当然这是CSS中对元素的分类,显然用 'display' 的属性值来对html元素进行分类是不严谨的。
如果按照上述规则来讲,那么FACEBOOK的做法就是一种错误的做法,因为他在内联元素&a&元素中嵌套了块元素元素&div&,但是细心的读者应该会发现上述规则是基于HTML4/xHTML1的strict模式,而FACEBOOK现在已经统一使用了html5的doctype,那么这个规则到底还是是否适用?
HTML5的元素嵌套规则
元素的嵌套规则和页面头部申明的DTD有着千丝万缕的关系,DTD基础请查看我之前写的文章《》,那么在最新的HTML5规范中是否对元素嵌套有着新的规范呢?
让我们先了解下W3C在最新的HTML5规范中对元素的分类方式:
如上图,元素的分类不再是块元素或内联元素这样来分类(其实从来就没有这样分),而是按照如下分类来分:Flow(流式元素)、Heading(标题元素)、Sectioning(章节元素)、Phrasing(段落元素)、Embedded(嵌入元素)、Interactive(交互元素)、Metadata(元数据元素)。
Flow(流式元素)
在应用程序和文档的主体部分中使用的大部分元素都被分类为流式元素。
a, abbr, address, area(如果它是map元素的后裔), article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl,em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter,nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style(如果该元素设置了scoped属性), sub, sup, svg, table,textarea, time, u, ul, var, video, wbr, text
Heading(标题元素)
标题式元素定义一个区块/章节(section)(无论是明确的使用章节式内容的元素标记,或者标题式内容自身所隐含的)的标题。
h1, h2, h3, h4, h5, h6, hgroup
Sectioning(章节元素)
章节式元素是用于定义标题及页脚范围的元素。
article, aside, nav, section
Phrasing(段落元素)
段落式元素是文档中的文本、标记段落级文本的元素。
a(如果其只包含段落式元素), abbr, area(如果它是map元素的后裔), audio, b, bdi, bdo, br, button, canvas, cite, code, command, datalist, del(如果其只包含段落式元素), dfn, em, embed, i,iframe, img, input, ins(如果其只包含段落式元素), kbd, keygen, label, map(如果其只包含段落式元素), mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script,select, small, span, strong, sub, sup, svg, textarea, time, u, var, video, wbr, text
Embedded(嵌入元素)
嵌入式元素是引用或插入到文档中其他资源的元素。
audio, canvas, embed, iframe, img, math, object, svg, video
Interactive(交互元素)
交互式元素是专门用于与用户交互的元素。
a, audio(如果设置了controls属性), button, details, embed, iframe, img(如果设置了usemap属性), input(如果type属性不为hidden状态), keygen, label, menu(如果type属性为toolbar状态),object(如果设置了usemap属性), select, textarea, video(如果设置了controls属性)
Metadata(元数据元素)
元数据元素是可以被用于说明其他内容的表现或行为,或者在当前文档和其他文档之间建立联系的元素
base,command,link,meta,noscript,script,style,title
各分类会有交叉或重叠的现象,这说明在中,元素可能属于上述所有分类中的一个或多个。
例子(1):&h1&~&h6&元素:
Categories:
Flow content.
Heading content.
Palpable content.
Contexts in which this element can be used:
As a child of an hgroup element.
Where flow content is expected.
Content model:
Phrasing content.
其中的「Categories」说明该元素的类别,「Contexts in which this element can be used」说明该元素能在何种场景下被使用,也就是它的父元素是什么,「Content model」说明该元素可以包含的内容是什么,由于页面中的元素是层层嵌套的,一个元素有可能既是父元素同时也是子元素的角色,所以下面我们以「Content model」也就是可包含的子元素做讨论。
那么对于h1~h6元素:
它们同时属于Flow content 、Heading content 和 Palpable content三个分类
它们的父元素可以是&hgroup&,同时那些子元素是流式元素的元素也可以作为h1-h6元素的父元素
它们允许的子元素是段落式元素
例子(2):&div&元素
Categories:
Flow content.
Palpable content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Flow content.
对于&div&元素:
同时属于Flow content 、 Palpable content分类
父元素必须是那些子元素为段落式元素的元素
允许的子元素是流式元素
&div&元素允许的子元素是流式元素,流式元素基本涵括了页面中的大部分元素,所以我们在用&div&时可以不用担心嵌套错误的问题。
但对于&h1&~&h6&元素,它们允许的子元素为段落式元素,而段落式元素并不包含诸如&div&、&p&、&ul&&ol&之类的元素,这就说明按照html5的规范,是不允许在标题元素内部嵌入&div&、&p&、&ul&&ol&之类的元素。
例子(3):&a&元素
Categories:
Flow content.
Phrasing content.
Interactive content.
Palpable content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Transparent, but there must be no interactive content descendant.
对于&a&元素:
同时属于Flow content 、 Phrasing content、Interactive content、Palpable content分类
父元素必须是那些子元素为段落式元素的元素
允许的子元素是以它的父元素允许的子元素为准,但不能包含交互式元素
这样看&a&元素还是挺有意思的,允许的子元素要看它的父元素所能包含的子元素。
再来看文章开头中提到的代码
&li&&h4&&a href=&&&&div&&/div&&/a&&/h4&&/li&
这时&a&的父元素为&h4&,对于&h1&~&h6&的标题元素上面已经提过,允许的子元素是段落式元素,那么此时对于&a&允许的子元素即为段落式元素,而段落式元素中是不包含&div&元素的,所以FCAEBOOK这样的嵌套方法是错误的!
让我们来把代码做一下修改:
&li&&div&&a href=&&&&div&&/div&&/a&&/div&&/li&
这时&a&的父元素为&div&,而&div&元素允许的子元素是流式元素,流式元素中包含&div&元素,所以这样的情形下在&a&里面嵌套&div&就是正确的做法!> 怎么将一个HTML页面嵌套在多个动态页面(asp)
怎么将一个HTML页面嵌套在多个动态页面(asp)
xumingwordbook & &
发布时间: & &
浏览:7 & &
回复:0 & &
悬赏:0.0希赛币
如何将一个HTML页面嵌套在多个动态页面(asp)
  正 文:
  很多时候,由于程序设计需要,要求在asp的include包含文件里调用动态的文件。如&!--#include file="map1.asp"--&其中的1是个动态参数,需要request获取。但可惜的是,include语句里并不能含有变量,否则将提示找不到文件错误。本文将提供3种方法解决该问题。
  首先,我们需要了解,包含文件的提示和警告信息:被包含的文件可以包含其他文件。只要“#include”命令不导致循环,.asp 文件也可以多次包含同一文件。例如,如果文件 First.asp 包含文件 Second.inc,则 Second.inc 不能反过来包含 First.asp。文件也不能包含其自身。ASP 检测这样的循环或嵌套错误,生成错误消息,并停止处理请求的 .asp 文件。
  解决方法一:FSO调用方法
  ASP语言是强大易用的语言,我们不要把自己的思维局限固定在一个角落里,“条条大道通罗马”,一个思路不通,换个思路吧。
  本方法采用变通的方法实现同样的包含功能。即FSO调用。代码如下:
  &%Function getFileContents(strIncludeFile) '函数:读取包含文件内容Dim objFSO,objText,strPageSet objFSO = Server.CreateObject("Scripting.FileSystemObject") '调用FSO对象Set objText = objFSO.OpenTextFile(Server.MapPath(strIncludeFile))getFileContents = objText.ReadAllobjText.CloseSet objText = NothingSet objFSO = NothingEnd Function
  dim pp=request("p") '2种方式:request.form ,request.querystringresponse.write getFileContents("map"&p&".asp")%&
  这样,利用fso函数读取包含文件的内容,然后用response.write把包含文件的内容输出,即实现和include命令同样的功能了,轻松实现自由输出诸如 map1.asp,map2.asp… 等文件内容了。
  解决方法二:if...elseif...
  此方法适用于要包含的文件数量不多的情况下,也是懒人+笨人的方法,呵呵。代码如下:
  &%if a=1 then%&&!--#include file="map1.asp"--&&%elseif a=2 then%&&!--#include file="map2.asp"--&&%elseif a=3 then%&&!--#include file="map3.asp"--&&%end if%&
  解决方法三:select case
  方法和第二种差不多,稍微好点。代码如下:
  &%select case pcase 1%&&!--#include virtual='inc/****1.asp'--&&%case 2%&&!--#include virtual='inc/****2.asp'--&&%case 3%&&!--#include virtual='inc/****3.asp'--&&%case 4%&&!--#include virtual='inc/****4.asp'--&&%end select%&
  如果你有其他更好的方法,欢迎与我们交流。您可以把你您的想法留在博客评论里,我们期待与您的探讨。
  补充:关于asp的include包含命令,需要注意以下方面。
  ASP程序在执行脚本命令之前就已经包含文件。因此,不能使用脚本命令来建立被包含的文件名。举例来说,因为 ASP 试图在将文件名指派给变量 name 之前执行“#include”命令,所以下面的脚本无法打开文件 Header1.inc。
  &!-- 该脚本将失败 --& &% name= header1.inc %& &!-- #include file="&%= name %$>$ --&
  脚本命令和过程必须完全包含在脚本分隔符 &% 和 %& 内,即 HTML 标签 &SCRIPT& 和 &/SCRIPT&,或 HTML 标签 &OBJECT& 和 &/OBJECT& 内部。也就是说,不能在包含 .asp 文件中打开脚本分隔符,并在被包含的文件中关闭分隔符;脚本或脚本命令必须是一个完整的单元。例如,下面的脚本将不起作用:
  &!-- 该脚本将失败 --& &% For i = 1 To n 主文件中的语句&!-- #include file="header1.inc" --& Next %&
  但下面的脚本会起作用:
  &% For i = 1 to n 主文件中的语句 %& &!-- #include file="header1.inc" --& &% Next %&
  如果 ASP 脚本包含的文件中存在包含脚本不需要的大量函数和变量,则这些无用的结构反而会影响性能,并最终降低 Web 应用程序的伸缩性。因此,通常将包含文件分成多个小文件,并且只包含那些服务器端脚本必需的文件,而不是包含那些带有冗余信息的一个或多个大型包含文件。
  如果是用if else那还算什么动态?case也一样,所以我想用fso的方法,可惜我最后失败了。文章来源:
  最后我是用的js的方法的XMLHttpRequest send ,responseText到div的innerHtml中得到了解决方法:
  &%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%&
&meta http-equiv="Content-Type"
content="text/ charset=utf-8" /&
window.onload =
function () {
="text"+Math.floor(Math.random()*10+1)+".asp";
// Safari, Firefox, 及其他非微软浏览器
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} catch (e) {
} else if (window.ActiveXObject) {
// For Internet Explorer on Windows
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
var element = document.getElementById("includefooter");
if (!element) {
alert("函数clientSideInclude无法找到id " + id + "。" +"你的网页中必须有一个含有这个id的div 或 span 标签。");
if (req) {
// 同步请求,等待收到全部内容
req.open('GET', url, false);
req.send(null);
element.innerHTML = req.responseT
element.innerHTML ="对不起,你的浏览器不支持" +"XMLHTTPRequest 对象。这个网页的显示要求" +"Internet Explorer 5 以上版本, " +"或 Firefox 或 Safari 浏览器,也可能会有其他可兼容的浏览器存在。";
&span id="includefooter"$>$/span&
  代码来源:
本问题标题:
本问题地址:
温馨提示:本问题已经关闭,不能解答。
暂无合适的专家
&&&&&&&&&&&&&&&
希赛网 版权所有 & &&请教下,怎么把一个html页面的某一个部分内容加哉到另一个html页面的一个div里面呢
我想把a.html里面的某一部份的内容加载到b.html的一个div里。
比如,我要加载a.html里面的&div id=“aContent&&&/div&这个div里面的所有内容加载到b.html的这个div里&div id=&rightCon&&&/div&
请问要怎么写呢。
用javascript:
get a内容:
var content = document.getElementById('aContent').innerHTML;
document.getElementById('rightCon').innerHTML =
jquery load&
b页面用http 方式请求a 页面,得到html 代码后过滤出需要的部分,然后填充到相应位置
引用来自“java_cmm”的答案jquery load&
&我用load不知道为什么还是没有出来。
我再去看看。
谢谢各位了哈。
load 或 用iframe
rightCon&).load('a.html #
aContent');HTML &frame& 标签

我要回帖

更多关于 网页嵌套另一个页面 的文章

 

随机推荐