HTML之 <p></p>标签 笔记

p标签不适合做容器

测试代码

<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>span1span>p>

<p><label>labellabel>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>Test1legend>
	<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>后面有一个空pdiv><p>p><div>前面有一个空p , 后面有三个空pdiv><p>p><p>p><p>p><div>前面有三个空p , 后面有三个brdiv><br/><br/><br/><div>前面有三个brdiv>


	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>

测试结果截图

HTML之 <p></p>标签 笔记_第1张图片
HTML之 <p></p>标签 笔记_第2张图片

你可能感兴趣的:(HTML,CSS,JS,html5,html)