HTML之＜p＞＜/p＞标签笔记

最新推荐文章于 2024-04-19 18:52:39 发布

kfepiza

最新推荐文章于 2024-04-19 18:52:39 发布

阅读量1.5k

点赞数 1

分类专栏： HTML CSS JS 文章标签： html5 html

本文链接：https://blog.csdn.net/kfepiza/article/details/116565370

版权

HTML CSS JS 专栏收录该内容

84 篇文章 2 订阅

订阅专栏

p标签不适合做容器

测试代码

<!doctype html><html lang="zh-CH"><head><meta charset="utf-8"/><title>p标签不能作为容器</title><style>
code{font-family:fira code; font-size:18px; color:#0099ff;}
p>*{background-color:purple; color:white;}
.TableStyle001{border-collapse:collapse; width:100%;}
.TableStyle001>tbody>:nth-child(odd){background-color:#eee;}
.TableStyle001>tbody>tr>td{border:1px solid gray;}
</style><script>function dgebi(x){if(x && x.constructor===String)x=document.getElementById(x); return x;} ; function dcept(p,tn){var e=document.createElement(tn); p=dgebi(p).appendChild(e); return e;} ;
const displayVs = ['inherit' , 'initial' , 'unset' , 'revert' , 'inline' , 'block' , 'inline-block' , 'flex' , 'inline-flex' , 'grid' , 'inline-gird'];
function cNavBtn(nav,cssK,cssVs){ nav=dgebi(nav); let son=nav.nextElementSibling.children[0]; let show=nav.previousElementSibling.children[1];
	dcept(nav,"label").innerHTML=cssK+":";
	for(let v of cssVs){
		let btn = dcept(nav,"button"); btn.innerText=v; btn.onclick=function(){son.style.setProperty(cssK,v); show.innerText=son.style.cssText;}
	}
}
function configFieldset(fs){fs=dgebi(fs); let cs=fs.children; let l=cs[0] , n=cs[1] , p=cs[2], ps=p.children[0];

}
</script></head><body>
	<header>
		<h1>p 标签不适合作为容器</h1>
	</header><div>
		<table class="TableStyle001">
			<caption></caption>
			<colgroup><col/>	<col/></colgroup>
			<thead>
				<tr>
					<th></th>	<th></th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>文档加载时能够容纳的子标签</td>	<td>span , label , b , big , i , em , strong , del , s , br , q , 等初始为inline的</td>
				</tr>
				<tr>
					<td>文档加载时不能容纳的子标签</td>	<td>p , div , nav , table , aside ...等初始为block的</td>
				</tr>
			</tbody>
		</table>

<h3>下面不能被p标签容纳的子标签都没有变色</h3>
<p><span>span1</span></p>

<p><label>label</label></p>

<p><b>b标签</b></p>

<p><span> span </span><label> label </label><b> b </b> <big> big </big> <i> i </i><em> em </em> <strong> strong </strong> <del> del </del> <br/> <s> s </s> <q> q </q> <code> code </code> </p>

<p><h1>h1 不能被容纳</h1></p>

<p><p>p 不能被容纳</p></p>

<p><h5>h5 不能被容纳</h5></p>

<p><section>section 不能被容纳</section></p>

<p><div>div 不能被容纳</div></p>

<fieldset><legend>Test1</legend>
	<header><label>当前的内联style.cssText:</label><code></code></header>
	<nav id="Test1Nav" class="Toolbar"></nav>
	<p id="Test1P1"><span id="Test1Son1">这是一个span标签,位于p标签内部,通过上面的按钮设置其display的值,查看是否还在p标签之中</span></p>
	<script>cNavBtn("Test1Nav" , "display" ,displayVs); </script>
</fieldset>

<fieldset id="用appendChild将block元素加入p标签">
	<legend>用appendChild将block元素加入p标签</legend>
	<header><label>当前的内联style.cssText:</label><code></code></header>
	<nav id="用appendChild将block元素加入p标签_nav"></nav>
	<p id="用appendChild将block元素加入p标签_P"></p>
	<script>
		let t=dcept("用appendChild将block元素加入p标签_P" , "div");  t.innerHTML="这是一个用appendChild加入p标签的div标签";
		cNavBtn("用appendChild将block元素加入p标签_nav" , "display" ,displayVs);
	</script>
</fieldset>

<hr/><h2>p当换行用 和br的区别</h2>
<div>后面有一个空p</div><p></p><div>前面有一个空p , 后面有三个空p</div><p></p><p></p><p></p><div>前面有三个空p , 后面有三个br</div><br/><br/><br/><div>前面有三个br</div>


	</div><footer>


	</footer><script>
		var pAr1=document.querySelectorAll("body>p");
		var sonAr1 = document.querySelectorAll("body>div>p>span"); console.info("sonAr1.length",sonAr1.length);
		for(let elem of sonAr1){ console.info(elem);
			elem.addEventListener('click',function(){alert(this);});
		}

	</script><style>

	</style>
</body></html>

测试结果截图

在这里插入图片描述

kfepiza

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML之＜p＞＜/p＞标签笔记

p标签不适合做容器测试代码<!doctype html><html lang="zh-CH"><head><meta charset="utf-8"/><title>p标签不能作为容器</title><style>code{font-family:fira code; font-size:18px; color:#0099ff;}p>*{background-color:purple; color:white;
复制链接

扫一扫