关于p标签不能嵌套div标签引发的标签嵌套问题总结

问题由来:<p>中嵌套<div>标签,两个都是块级元素,按理应该可以正常显示,但是最后的结果居然是多出来一段<p>的效果,所以就在网上找了许多关于标签嵌套规则的资料,下面做一个个人总结. 1.块级元素(block)与内联元素(inline)的区别: 1.1块元素,独占一行,宽高起作用:如:div , p , ul , ol ,table , menu ,h1~h6,li等 1.2内联元素,可与其他内联元素同一行,宽高不起作用:如:span , q , input , i…

p标签里面不能嵌套div

先申明本人代码水平为零起点,刚开始学习前端,所以就是小白.不过大神也是小白变身的么,所以要专心码代码,潜心钻研,haha~ 今天练习了段代码,发现效果和自己想象的不一样: 想了一下估计是<p>和<div>嵌套的问题,但是两个不都是块级元素,难道不能嵌套么,而且最后的结果居然是多出来一段<p>的效果,感觉HTML包容心好强,代码码错了也能显示出来.所以就在网上找了点资料,涉及到块级元素和内联元素的嵌套问题. 1.块级元素(block)与内联元素(inline)的区别: 简…

为什么p标签不能嵌套div??

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>p标签里面包含div</title> <link rel="stylesheet" href="&qu…

HTML里为什么不能在<p>标签中嵌套<div>标签

学习过HTML语言的人都应该知道,在HTML里,有分块级元素和内联元素:例如我们常用到的div,o,ul,dl,table,h1...h6等,这些都是块级元素:而像a,b,i,em,img,span等就是内联元素了.在开发过程中,我们避免不了各种元素的嵌套,但是有时候我们在不知不觉中就错误地嵌套元素了.为什么说是不知不觉呢.因为就算我们错误地嵌套了,但是在浏览器中显示的时候,其实是没有区别的.咱们今天就具体地分析为什么不能再<p>里嵌套<div>.希望通过这个例子,大家可以自己去学…

p标签内不能嵌套div（注解）

相关知识: 内联元素可以嵌套内联元素,块级元素可以嵌套部分块级元素并也能嵌套内联元素,但内联元素不能嵌套块级元素.块级元素为block,内联元素为inline,拥有“inline”特性的同时又拥有“block”的特性称为replace元素. <p> <div>编码美学</div> <div>编码美学</div> </p> 在上面的代码中,p标签在遇到下一个块级元素的时候就闭合了,它会被浏览器解析为页面中p元素的两倍数量,也就是开始标签…

img标签src=""和background-image:url();引发两次请求页面bug

img标签src=""和background-image:url();引发两次请求页面bug 具体原因是,在img 对象的src 属性是空字符串("")的时候,浏览器认为这是一个缺省值,值的内容为当前网页的路径. 浏览器会用当前路径进行再一次载入,并把其内容作为图像的二进制内容并试图显示. 对于不同的浏览器测试后,发现对于有无src 或者src 是否为空的情况,还不尽相同,测试结果如下表. 代码 Firefox IE6 IE7 <img src=&q…

告别div，可以代替div的几个标签

几个最常用的用来代替DIV的HTML5元素虽说html5中大多数功能性的元素如<video><canvas><audio>等还得不到当前主流浏览器的支持(主要就是指IE浏览器了),但至少那些个与布局相关的元素同html5.js结合起来时我们是可以放心使用的,比如<header>,<footer>,<nav>,<section>,<article>,<aside>,<figure>这几个…

Html - a标签如何包裹Div

a标签如何包裹Div? 其实应该将思路转变为将a标签作为一个遮罩来覆盖div. 做法是将a标签放置在该div下,通过将div进行相对定位[position:relative] 将a标签进行绝对定位[position:absolute] + 层级提升[z-index:199930710] + 高度宽度和div同步[height:100%;width:100%] 示例代码: HTML: <div class="mui-col-xs-10" id="go_set"&…

html之块级标签h系列,div

两个名词含义: 块级标签:内容再少也会占满整行内联标签:有多少内容点多少地方注:块级标签和内联不签不是绝对的,可以通过CSS作任意转换 1.h1-h6 :块级标签请仅仅把标题标签用作标题文本,如想获取粗体字请使用CSS或其它标签. 由于 h 元素拥有确切的语义,因此请您慎重地选择恰当的标签层级来构建文档的结构 <body> <h1>This is page 1</h1> <h2>This is page 2</h2> <h3>T…

解决embed标签显示在div上层【转藏】

解决embed标签显示在div上层,非设置z-index 今天给屌炸了爆笑网增加了视频栏目,但是发现在IE8中,顶部浮动导航的div在移动到embed视频上时,总是被embed的flash文件盖住.分别修改导航div和embed的z-index值仍然无法解决,很是郁闷. 结合之前有过此类遭遇的经验,慢慢摸索了半小时,意识到并非z-index的问题,问题应该是出在embed上,最后Google.百度齐飞,终于找到embed的一个属性“wmode”. 在embed里加入 wmode=”transpa…

Struts 2的iterator标签来遍历一个含有双层List的嵌套

今天碰到一个很有意思的问题,就是需要用Struts 2的iterator标签来遍历一个含有双层List的嵌套. 首先我们从最基础的说起,用iterator标签遍历一个List. 如果Action中有一个这样的不为null的属性: private List<T> list; 那么在JSP中,就可以这样来遍历list: <s:iterator value="list"> <s:property value="propertyNameOfObjectI…

用html给div加类似a标签的超链接（转）

今天项目中遇到用html给div加类似a标签的超链接,回想半天,万幸还是想出来了. 分享一下啊: 1.通过window.open函数 <div onclick="window.open('www.baidu.com')">在新窗口跳转至百度</div> <div onclick="window.open('www.baidu.com','_self')">在当前窗口跳转至百度</div>1232.通过window.lo…

jquery 设置某div里面的内容为此div里面非img标签的内容

$('#div_1').html($('#div_1').children().not("img")); 要注意 <div id="#div_1"> 几个字 <img ....../> </div> 这样的话几个字不会被保存下来解决方式: 把这几个字包在一个什么标签里比如 div 里…

ThinkPHP 3.2.2 在 volist 多重循环嵌套中使用 if 判断标签

今天在 ThinkPHP 3.2.2 的试图模板中使用多重循环,用来把相应类别下对应的文章都依次循环出来,但是无论如何只能循环出类别,类别下的文章无法循环出,( 错误 ) 代码如下: <volist name="list" id="vo"> <tr class='{$vo.help_category_id}'> <td>{$vo.help_category_id}</td> <td class='display_…

JSTL标签,EL表达式,OGNL表达式，struts2标签汇总

一下纯属个人总结摘抄,总结一起方便查看,解决疑问,有遗漏或错误,还请指出. 1,JSTL标签总结: a).JSTL标签有什么用? JSTL是由JCP(Java Community Process)所制定的标准规范,它主要提供给Java Web开发人员一个标准通用的标签函数库. Web程序员能够利用JSTL和EL来开发Web程序,取代传统直接在页面上嵌入Java程序(Scripting)的做法,以提高程序的阅读性.维护性和方便性. b).什么是JSTL标签? …

ul里不能直接嵌套div(在ie7以前版本)

平时为了写某个js效果,从而忽略了标签的嵌套从而导致了IE6-7混乱,在ul下,直接嵌套div,在ie7以前版本,会出现的状况是:div会被离它最近的li包裹住. 请看dome <ul class="clearfix" > <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <div cla…

Web前端开发最佳实践（5）：正确闭合HTML标签，停止使用不标准的标签和属性

正确闭合HTML标签 HTML元素的内容模型定义了元素的结构,表明元素可以包含哪些内容以及元素可以有哪些属性.元素可以包含的内容包括其他元素和字符,但是也有一些元素是空元素,即不能包含任何内容,这些元素对应的HTML标签也称之为自闭合标签,下面列出了HTML中所有的自闭合标签: area.base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr W3C制定了多个版本的H…

JSTL标签库的基本教程之核心标签库(二)

JSTL标签库的基本教程之核心标签库(二) 核心标签库标签描述 <c:out> 用于在JSP中显示数据,就像<%= ... > <c:set> 用于保存数据 <c:remove> 用于删除数据 <c:catch> 用来处理产生错误的异常状况,并且将错误信息储存起来 <c:if> 与我们在一般程序中用的if一样 <c:choose> 本身只当做<c:when>和<c:otherwise>的父标签…

JAVAWEB开发之JSTL标签库的使用、自己定义EL函数、自己定义标签（带属性的、带标签体的）

JSTL JSTL简单介绍: JSTL的全称:JSP Standard Tag Library,JSP标准标签库 JSTL的作用: 提供给Java Web开发者一个标准通用的标签函数库和EL来代替传统直接在页面上嵌入Java程序(Scripting)的做法,以提高程序可读性.维护性和方便性 JSTL的版本号: JSTL的主要版本号是1.0.1.1和1.2(差别不大) 1.0版本号EL表达式还没有纳入官方规范 1.1和1.2版本号EL表达式已经纳入了官方规范 JSTL…

a标签在编辑器中可以整体删除并且a标签为不可编辑的情况下标签依然存在(棒棒哒)

a标签在编辑器中可以整体删除并且a标签为不可编辑的情况下标签依然存在因为给a标签的后面添加了一个空元素,如<i></i>(棒棒哒)<div contentEditable="true"> Type here. <a href="" contentEditable="false" data-uid="333">@ 谁谁谁</a><i></i>…

DOM标签操作与事件与jQuery查找标签

目录 DOM之操作标签创建标签对象标签对象的属性 innerText与innerHTML 标签内部追加内容属性操作事件常用事件事件绑定事件案例 jQuery简介查找标签基本选择器属性选择器基本筛选器筛选器方法 DOM之操作标签创建标签对象创建空标签对象. var pEle = document.createElement('p') // 创建p标签标签对象的属性获取或创建了标签对象后,可以直接给点+属性名的方式设置标签属性值.如: 标签对象.id = 'p1' /…

ie7中ul不能嵌套div和li平级

我要讲一个忧伤的故事,本以为清晰的层次结构,ul里不能嵌套div和li平级,不然会乱乱乱! 代码: <ul class="catshow"> <li> <div class="cattitle">行政区域:</div> <ul class="catlist" id="provin…

什么是H标签？H1，H2，H3标签？以及和strong标签使用的方法及重要性

大家都知道,seo的一个很重要的一点就是要把网站做的条理清晰,让搜索引擎很容易的读明白,这个条理清晰不仅体现在网站的物理路径,url等地方.在<h1><h2><h3>等方面也是这样.并不是<h1>对于关键字排名有帮助,那么在什么有关键词出现的地方我都用<h1>,那么用多了,第一, 有可能会被认为优化过度,第二,到处都是<h1>,你怎么才能让搜索引擎知道哪里才是最重要的呢?稀释了<h1>的作用. 根据w3cschool.c…

JSP标准标签库（JSTL）之核心标签（下）

前面记录了核心标签的前几种,现在来接着记录. 七.<c:import>标签使用<c:import>标签可以包含一个FTP服务器中不同的网页内容.语法格式: <c:import url="待导入资源的URL,可以是相对路径和绝对路径,并且可以导入其他主机资源" var="用于存储所引入的文本的变量" scope="var属性的作用域" varRender="可选的用于提供java.io.Reader对象…

JSP标准标签库（JSTL）之核心标签（上）

在myeclipse中新建web项目时,会自动为我们安装JSTL库,如下图: 核心标签是我们最常用的JSTL标签.在JSP页面中引用核心标签库的语法如下: <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 一.<c:out>标签 <c:out>标签用来显示一个表达式的结果,与jsp中的<%= %>作用相似,语法格式: <c:out v…

Struts2的标签库（五）——表单标签

Struts2的标签库(五) --表单标签几个特殊的表单标签的使用: 1.checkboxlist标签该标签用于创建多个复选框,用于同时生成多个<input type="checkbox".../>的HTML标签.它根据list属性指定的集合来生成多个复选框.其标签有如下几个属性: list属性:指定要产生复选框的集合: listKey属性:该属性指定集合元素中的某个属性作为复选框的value.当集合为Map时,可以使用Key或者value来指定Map对象中的key或者…

div中嵌套div速度将会同样很慢

---恢复内容开始--- div中嵌套了div速度将会同样很慢最近很多老板在我们公司做企业站的时候都会要求说:我要div+css的,不要表格建的那种,那样不利于优化.但我们发现就算给他们用div+css的形式做出的网站也没见他们做过什么优化,甚至连文章都没更新过.这是外话,我们就来谈谈难道真的用div+css制作出来的网站就打开速度就快,对搜索引擎就友好吗?关于div+css的优点其实确实很多,这种布局方式大大精简了页面的代码量,减少了网页的体积,有利于网页的读取.而table的排版方式最…

noscript 标签，一个被忽视的重要标签

打开 Drupal 的新后台,发现显示大面积空白 .本以为是 CSS 的问题,后来折腾好久才发现是我之前因为某些站的安全问题把浏览器的 Javascript 给禁用了.Javascript 的日益强大使我们的网页丰富多彩,交互越来越强大,功能越来越炫.但是有的网页效果完全依赖 Javascript 来实现,一旦离开了 Javascript 的支持,可能连基本的内容都显示不完全,这时候,我们老当益壮的noscript标签就该出场了 . noscript标签是一个相当古老的标签,其被引入的最初目的是…

spring property标签中的 ref属性和ref 标签有什么不同？如下：<property name="a" ref="b" />

spring property标签中的 ref属性和ref 标签有什么不同? 如下:<property name="a" ref="b" /> spring property标签中的 ref属性和ref 标签有什么不同?如下:<property name="a" ref="b" />和<property name="a" > <ref bean="b&qu…

嵌套div的margin-top不生效

之前遇到过嵌套div设置margin-top不生效的情况,一直没去研究,今天又遇到了,查阅资料得知原因,并不是margin-top没生效,只是当外层容器跟内层容器之间没有别的元素的时候,内层容器的margin-top会作用在外层容器上. 解决办法如下: 1.在父层div加上:overflow:hidden. 2.把margin-top外边距改成padding-top内边距. 3.父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border…

【关于p标签不能嵌套div标签引发的标签嵌套问题总结】的更多相关文章