HTML嵌套规则

不要再死抠HTML4阶段的规则和基于CSS层面的经验了，意义不大。严格来说就是可以并列的。你的代码也没有嵌套问题。在嵌套规则的世界里，块级和内联元素的区分是过时的，仅仅属于HTML4：https://segmentfault.com/q/1010000002432929/a-1020000002434052内联和块级的并列规则更加过时，现在我们谈及它们只是一个CSS层面的约定而已：https://segmentfault.com/q/1010000000436866/a-1020000002398252

<ul> <li></li> <li></li> <div></div> </ul>这种嵌套是不符合w3c标准的，用 The W3C Markup Validation Service 检测会报错。目前在绝大多数浏览器中都能正常显示，可以理解为浏览器容错能力很强，它认为这种嵌套是可以呈现的，但是在ie7及以前版本中，div会被离它最近的li包裹住。li里面是可以嵌套div标签的，因为二者本身都是块级元素，都是装载内容的容器，地位平等，没有级别之分。（li标签连它的父级ul或者是ol都可以容纳，所以当然也可以容纳div标签啦）HTML5的元素嵌套规则

看HTML嵌套规则，http://www.html5cn.org/forum.php?mod=viewthread&tid=83887

新] 1，使用变量@red:#F00这种，修改大量CSS数据的时候LESS表现最好；而且还会修改到fade(@red,10%);这种规则；使用常规的批量替换，上面的是要一遍遍修改的；其次， .colors{ color:@white;.tmp(@color:@flat){background-color:@color;} &.flat{.tmp(@flat);color:@grayd;} &.red{.tmp(@red)} &.redd{.tmp(@redd)} } 这种方式编写大量皮肤的框架出来；更出色；只需要页面 div.colors.flat、div.colors.red就可以有多套皮肤了； 2，再chrome内调试最好koala生成map文件，chrome开启map调试；这样就可以在chrome调试器里的选择符直接看到规则在LESS文件的行数了；不过个人建议，书写less的时候，页面直接挂载less文件，使用less.js方式实现也页面的css渲染；毕竟少了一步生成的步骤；两种方式任选；PS：koala生成的map可能不是那么准； 3，LESS的嵌套，反正两方面说：一方面，less的嵌套可以减小html的类标签量，让html更小，更加结构化；另一方面，LESS嵌套减小的CSS的适用范围，可能需要书写更多的标签去适用不同的hTML结构；不过好在，有这种写法.red{.tmp(@red)}；甚至还可以中途跳出嵌套； div#slider{ span{ width:300px; } section.sunny & span{ width:200px; } } 这种用法不知道算是bug还是逻辑坑...O(∩_∩)O~ 最后一个PS：写LESS的时候注意考虑一下CSS的大小；LESS因为可以嵌套和引用，很容易LESS16K，生成的CSS却64K了；如图，表吧所有的样式堆到一个less，主LESS只链接小LESS,例如； @charset "UTF-8"; @import "./less/color.less"; @import "./less/reset.less"; @import "./less/rules.less"; @import "./less/grid.less"; @import "./less/size.less"; @import "./less/animate.less"; @import "./less/btn.less"; @import "./less/bar.less"; @import "./less/loader.less"; @import "./less/slider.less"; @import "./less/list.less"; @import "./less/decoration.less"; @import "./less/form.less"; @import "./less/seek.less"; @import "./newyear.less"; 而小LESS，则只负责部分功能或部分区域，但是使用全局变量，比如字体大小啦、颜色啦，这样修改起来更快；如图:

LZ混淆了Doctype定义下分类各个标签的块级、内联概念和CSS的块级、内联概念。Doctype定义中的inline/block第一个跟Doctype定义有关，你看到的这个规则，是XHTML Strict中定义的。那么这个语境下的inline和block是什么意思呢，它们是对html标签进行的分类（比如p、div、form都属于block，而span、a则属于inline），而和它们最终的CSS属性一点关系都没有（你可以把p的display改为inline，浏览器不会打死你，但是接替你的页面重构可能会）。这个在Doctype里定义的规则直接导致了浏览器parse整个文档的时候构建成的树是什么样子的。这里有一篇非常棒的关于元素嵌套规则及其对文档结构影响的说明，你可以读一下。总结：Doctype这个语境下面，inline和block指的是一种分类各个标签的方法，这个方法由各个标签的语义和默认的展现形式得来，区分它们主要是因为它们在不同的doctype里面会有不一样的嵌套约束，会影响到浏览器生成的文档结构。CSS的block和inlineLZ第二个代码规范的建议和CSS中高宽计算模式有关系：1.块级只包含块级的时候，进入的模式是块级∈块级模式，相关计算规则大致是 内层宽自适应于外层的content-box的宽； 外层的content-box自适应于内部所有块级容器的高； 等等等等。2.块级只包含内联元素的时候，进入的模式是内联∈块级模式，相关的规则大致是： 内联构成line-box，line-box的高由内联元素的高、line-height和vertical-align决定； 通过断行算法，内联元素组成N个line-box，line-box的宽由块级元素的content-box的宽决定； 各个line-box撑高块级； 等等等等。3.块级元素同时包含块级元素和内联元素的时候，会为每个内联元素创建匿名块，从而拆解问题为块级/匿名块∈块级模式和内联∈块级/匿名块模式，回到规则1,2去计算各个元素的最终宽、高。LZ第二个代码规范可以这样解释：由于第三个规则的存在，所以为了能够在所有时候都能完美的控制块级元素的高和宽，内联元素和块级元素并列时，在内联元素外包裹一层块级元素。总结：在CSS属性这个语境下面，inline和block指的是元素最终的display属性，区分它们主要是因为它们会导致不一样的高宽计算模式。

HTML要语义化，元素嵌套自然是有规则的。是表格中的单元格，自然不能也不应该放在另外，是inline元素，里面也不应当放、这种块级元素。所以你其实应该在理解HTML的基础上去设计你的模板，而不是逮着啥用啥。 如果你说明你的需求和目的的话，我相信会有很多人帮你设计模板。

大哥，为什么jsp写成和asp一样，在里面嵌套java代码，看看你的那个获取连接的， con=java.sql.DriverManager.getConnection("jdbc:mysql://localhost /pyl_jsp?user=root&password=123456&useUnicode=true& characterEncoding=utf-8");//创建语句对象 jdbc:mysql://localhost:端口号..看看是不是这样出问题了，另外你好歹把错误信息贴出来...###### 引用来自“designer”的答案 大哥，为什么jsp写成和asp一样，在里面嵌套java代码，看看你的那个获取连接的， con=java.sql.DriverManager.getConnection("jdbc:mysql://localhost /pyl_jsp?user=root&password=123456&useUnicode=true& characterEncoding=utf-8");//创建语句对象 jdbc:mysql://localhost:端口号..看看是不是这样出问题了，另外你好歹把错误信息贴出来... org.apache.jasper.JasperException: Unable to compile class for JSP An error occurred at line: 36 in the jsp file: /Connections/connexe.jsp Generated servlet error: D:\WATMServer\Tomcat5\work\Catalina\localhost\_\org\apache\jsp\Connections\connexe_jsp.java:81: variable sql might not have been initialized rs=sql.executeQuery ( "select id,Pid,Pname from pyl_main ");     ^ An error occurred at line: 36 in the jsp file: /Connections/connexe.jsp Generated servlet error: D:\WATMServer\Tomcat5\work\Catalina\localhost\_\org\apache\jsp\Connections\connexe_jsp.java:83: variable sql1 might not have been initialized rs1=sql1.executeQuery( "select id,Pid,Pname from pyl_main where Pid=1");     ^ 2 errors ###### 引用来自“彭哥”的答案 引用来自“designer”的答案 大哥，为什么jsp写成和asp一样，在里面嵌套java代码，看看你的那个获取连接的， con=java.sql.DriverManager.getConnection("jdbc:mysql://localhost /pyl_jsp?user=root&password=123456&useUnicode=true& characterEncoding=utf-8");//创建语句对象 jdbc:mysql://localhost:端口号..看看是不是这样出问题了，另外你好歹把错误信息贴出来... org.apache.jasper.JasperException: Unable to compile class for JSP An error occurred at line: 36 in the jsp file: /Connections/connexe.jsp Generated servlet error: D:\WATMServer\Tomcat5\work\Catalina\localhost\_\org\apache\jsp\Connections\connexe_jsp.java:81: variable sql might not have been initialized rs=sql.executeQuery ( "select id,Pid,Pname from pyl_main ");     ^ An error occurred at line: 36 in the jsp file: /Connections/connexe.jsp Generated servlet error: D:\WATMServer\Tomcat5\work\Catalina\localhost\_\org\apache\jsp\Connections\connexe_jsp.java:83: variable sql1 might not have been initialized rs1=sql1.executeQuery( "select id,Pid,Pname from pyl_main where Pid=1");     ^ 2 errors 错误说的很清楚。。。。sql这个变量没有初始化 =.= ###### 引用来自“虫虫”的答案 引用来自“彭哥”的答案 引用来自“designer”的答案 大哥，为什么jsp写成和asp一样，在里面嵌套java代码，看看你的那个获取连接的， con=java.sql.DriverManager.getConnection("jdbc:mysql://localhost /pyl_jsp?user=root&password=123456&useUnicode=true& characterEncoding=utf-8");//创建语句对象 jdbc:mysql://localhost:端口号..看看是不是这样出问题了，另外你好歹把错误信息贴出来... org.apache.jasper.JasperException: Unable to compile class for JSP An error occurred at line: 36 in the jsp file: /Connections/connexe.jsp Generated servlet error: D:\WATMServer\Tomcat5\work\Catalina\localhost\_\org\apache\jsp\Connections\connexe_jsp.java:81: variable sql might not have been initialized rs=sql.executeQuery ( "select id,Pid,Pname from pyl_main ");     ^ An error occurred at line: 36 in the jsp file: /Connections/connexe.jsp Generated servlet error: D:\WATMServer\Tomcat5\work\Catalina\localhost\_\org\apache\jsp\Connections\connexe_jsp.java:83: variable sql1 might not have been initialized rs1=sql1.executeQuery( "select id,Pid,Pname from pyl_main where Pid=1");     ^ 2 errors 错误说的很清楚。。。。sql这个变量没有初始化 =.= 有的，你看看前面的代码就知道了！ ######确实sql变量没有初始化，而且sql1也没有初始化 因为你初始化这两个变量的过程是在一个try块里，无法保证他们确实被初始化了，Java语言要求你使用变量的时候确定这个变量一定是初始化过的 你可以这样：sql = null;sql1 = null; 还有 那个body标签没开头，head标签没闭合 修改如下： <%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %> <% Connection con; Statement sql = null; Statement sql1 = null; ResultSet rs, rs1; try { Class.forName("org.gjt.mm.mysql.Driver").newInstance(); } catch (ClassNotFoundException e) { out.print("<h3>加载数据库驱动出错<h3>"); } try { con = java.sql.DriverManager.getConnection("jdbc:mysql://localhost/pyl_jsp?user=root&password=123456&useUnicode=true&characterEncoding=utf-8");//创建语句对象 sql = con.createStatement(); sql1 = con.createStatement(); } catch (SQLException e) { out.print("<h3>连接数据库出错<h3>"); } %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>企业网站通用模版1</title> </head> <body> <% rs = sql.executeQuery("select id,Pid,Pname from pyl_main "); while (rs.next()) { rs1 = sql1.executeQuery("select id,Pid,Pname from pyl_main where Pid=1"); while (rs1.next()) { out.println(rs1.getString("Pname")); out.println(" </br> "); } } %> </body> </html> ######java游戏规则也太挑了吧，刚才我试了改了，但错误码率依然如旧！######sql=null,sql1=null;试试在try之前加######java 静态检查不通过

原生XML扩展 我更喜欢使用其中一个原生XML扩展，因为它们与PHP捆绑在一起，通常比所有第三方库更快，并且在标记上给我所需的所有控制权。 DOM DOM扩展允许您使用PHP 5通过DOM API操作XML文档。它是W3C的文档对象模型核心级别3的实现，这是一个平台和语言中立的接口，允许程序和脚本动态访问和更新文件的内容，结构和风格。 DOM能够解析和修改现实世界（破碎）的HTML，并且可以执行XPath查询。它基于libxml。 使用DOM需要一些时间才能提高效率，但这个时间非常值得IMO。由于DOM是一个与语言无关的接口，因此您可以找到多种语言的实现，因此如果您需要更改编程语言，那么您很可能已经知道如何使用该语言的DOM API。 一个基本的用法示例可以在抓取A元素的href属性中找到，一般的概念概述可以在php的DOMDocument中找到 StackOverflow上已经广泛介绍了如何使用DOM扩展，因此如果您选择使用它，您可以确定您遇到的大多数问题都可以通过搜索/浏览Stack Overflow来解决。 XMLReader的 XMLReader扩展是一个XML pull解析器。读取器在文档流上作为光标前进，并在途中停在每个节点上。 与DOM一样，XMLReader基于libxml。我不知道如何触发HTML解析器模块，因此使用XMLReader解析损坏的HTML的可能性可能不如使用DOM，因为您可以明确告诉它使用libxml的HTML解析器模块。 使用php从h1标签获取所有值时，可以找到一个基本用法示例 XML解析器 此扩展允许您创建XML解析器，然后为不同的XML事件定义处理程序。每个XML解析器还有一些您可以调整的参数。 XML Parser库也基于libxml，并实现了SAX样式的XML推送解析器。它可能是比DOM或SimpleXML更好的内存管理选择，但是比XMLReader实现的pull解析器更难以使用。 SimpleXML的 SimpleXML扩展提供了一个非常简单且易于使用的工具集，用于将XML转换为可以使用普通属性选择器和数组迭代器处理的对象。 当您知道HTML是有效的XHTML时，SimpleXML是一个选项。如果你需要解析破碎的HTML，甚至不要考虑SimpleXml，因为它会窒息。 一个基本的用法示例可以在一个简单的CRUD节点程序和xml文件的节点值中找到，PHP手册中还有很多其他的例子。 第三方库（基于libxml） 如果您更喜欢使用第三方库，我建议使用实际上使用DOM / libxml而不是字符串解析的库。 FluentDom - 回购 FluentDOM为PHP中的DOMDocument提供了类似jQuery的流畅XML接口。选择器是用XPath或CSS编写的（使用CSS到XPath转换器）。当前版本扩展了DOM实现标准接口并添加了DOM Living Standard的功能。FluentDOM可以加载JSON，CSV，JsonML，RabbitFish等格式。可以通过Composer安装。 HtmlPageDom Wa72 \ HtmlPageDom`是一个用于轻松操作HTML文档的PHP库。它需要来自Symfony2组件的DomCrawler来遍历DOM树，并通过添加操作HTML文档的DOM树的方法来扩展它。 phpQuery（多年未更新） phpQuery是一个服务器端，可链接，CSS3选择器驱动的文档对象模型（DOM）API，基于用PHP5编写的jQuery JavaScript库，并提供额外的命令行界面（CLI）。 另见：https：//github.com/electrolinux/phpquery Zend_Dom Zend_Dom提供了处理DOM文档和结构的工具。目前，我们提供Zend_Dom_Query，它提供了一个统一的界面，可以使用XPath和CSS选择器查询DOM文档。 的QueryPath QueryPath是一个用于操作XML和HTML的PHP​​库。它不仅适用于本地文件，还适用于Web服务和数据库资源。它实现了许多jQuery接口（包括CSS样式的选择器），但它在服务器端使用时经过了大量调整。可以通过Composer安装。 fDOMDocument fDOMDocument扩展了标准DOM，以便在所有错误情况下使用异常，而不是PHP警告或通知。为方便起见，他们还添加了各种自定义方法和快捷方式，并简化了DOM的使用。 军刀/ XML saber / xml是一个包装和扩展XMLReader和XMLWriter类的库，用于创建一个简单的“xml到对象/数组”映射系统和设计模式。编写和读取XML是单遍的，因此可以快速并且需要大型xml文件的低内存。 FluidXML FluidXML是一个用于使用简洁流畅的API来操作XML的PHP​​库。它利用XPath和流畅的编程模式，既有趣又有效。 第三方（不是基于libxml的） 构建DOM / libxml的好处是，您可以获得良好的开箱即用性能，因为您基于本机扩展。但是，并非所有第三方库都沿着这条路线行进。其中一些列在下面 PHP简单的HTML DOM解析器 用PHP5 +编写的HTML DOM解析器允许您以非常简单的方式操作HTML！ 需要PHP 5+。 支持无效的HTML。 使用选择器在HTML页面上查找标签，就像jQuery一样。 从一行中提取HTML中的内容。 我一般不推荐这个解析器。代码库很糟糕，解析器本身很慢而且内存很耗。并非所有jQuery选择器（例如子选择器）都是可能的。任何基于libxml的库都应该比这更容易。 PHP Html解析器 PHPHtmlParser是一个简单，灵活的html解析器，允许您使用任何css选择器（如jQuery）选择标签。目标是帮助开发需要快速，简单的方法来废弃html的工具，无论它是否有效！这个项目最初是由sunra / php-simple-html-dom-parser支持的，但支持似乎已经停止，所以这个项目是我对他以前工作的改编。 同样，我不推荐这个解析器。CPU使用率很高，速度相当慢。还没有清除已创建DOM对象的内存的功能。这些问题尤其适用于嵌套循环。文档本身不准确且拼写错误，自4月14日以来没有回复修复。 加农 通用标记器和HTML / XML / RSS DOM解析器 能够操纵元素及其属性 支持无效的HTML和UTF8 可以对元素执行类似CSS3的高级查询（比如jQuery - 支持的命名空间） HTML美化器（如HTML Tidy） 缩小CSS和Javascript 排序属性，更改字符大小写，更正缩进等。 扩展 使用基于当前字符/标记的回调解析文档 操作以较小的功能分隔，以便轻松覆盖 快速而简单 从未使用过它。不知道它是否有用。 HTML 5 您可以使用上面的方法来解析HTML5，但由于HTML5允许的标记，可能会有怪癖。因此，对于HTML5，您要考虑使用专用解析器，例如 html5lib 基于WHATWG HTML5规范的HTML解析器的Python和PHP实现，可与主要桌面Web浏览器实现最大兼容性。 HTML5最终确定后，我们可能会看到更多专用解析器。还有一个W3的博客文章，名为How-To for html 5 parsing，值得一试。 网页服务 如果您不想编写PHP，您也可以使用Web服务。一般来说，我发现这些实用程序很少，但那只是我和我的用例。 ScraperWiki。 ScraperWiki的外部界面允许您以您希望在Web或您自己的应用程序中使用的形式提取数据。您还可以提取有关任何刮刀状态的信息。 常用表达 最后也是最不推荐的，您可以使用正则表达式从HTML中提取数据。通常，不鼓励在HTML上使用正则表达式。 您可以在网上找到与标记相匹配的大多数片段都很脆弱。在大多数情况下，它们只适用于非常特殊的HTML。微小的标记更改，例如在某处添加空格，或添加或更改标记中的属性，可以使RegEx在未正确编写时失败。在HTML上使用RegEx之前，您应该知道自己在做什么。 HTML解析器已经知道HTML的语法规则。必须为您编写的每个新RegEx讲授正则表达式。RegEx在某些情况下很好，但它实际上取决于您的用例。 您可以编写更可靠的解析器，但是使用正则表达式编写完整可靠的自定义解析器是浪费时间，因为上述库已经存在并且在此方面做得更好。