从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖

原文链接： https://www.mk2048.com/blog/blog.php?id=h020a20ai1aa&title=%E4%BB%8E%E9%9B%B6%E5%BC%80%E5%A7%8B%E5%AD%A6%E4%B9%A0%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91+%E2%80%94+9%E3%80%81%E6%A0%87%E7%AD%BE%E5%B5%8C%E5%A5%97%E8%A7%84%E5%88%99%E5%8F%8ACSS%E5%B8%B8%E7%94%A8%

1. 块级元素可以包含内联元素或某些块级元素，但内联元素却不能包含块级元素，它只能包含其它的内联元素：

　　<div><h1></h1><p></p></div> —— 对

　　<a href="#"><span></span></a> —— 对

　　<span><div></div></span> —— 不合理

2. 块级元素不能放在<p>里面：

　　<p><ol><li></li></ol></p> —— 不合理

　　<p><div></div></p> —— 不合理

3. 有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：

　　h1、h2、h3、h4、h5、h6、p、dt

4. li 内可以包含 div 标签：

　　li 和 div 标 签都是装载内容的容器，地位平等，没有级别之分，要知道，li 标签连它的父级 ul 或者是 ol 都 可以容纳的。
<li><div></div></li> --对

5. 块级元素与块级元素并列、内嵌元素与内嵌元素并列：

　　<div><h2></h2><p></p></div> —— 对

　　<div><a href="#"></a><span></span></div> —— 对

　　<div><h2></h2><span></span></div> —— 不建议

<a>标签不能包含其他<a>标签

<button>标签不能包 含<input>,<select>,<textarea>,<label>,<button>,<form>,<fieldset>,<iframe> 和<isindex>标签

<label>标签不能包含其他<label>标签

<form>标签不能包含其他<form>标签

附录：

CSS常用样式覆盖：

body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,fieldset,h1,h2,h3,h4,h5,h6,img,input,figure/*h5新增标签*/{
    margin:0;
    padding:0;
}
body{
    font-family: "微软雅黑",Arial;
}
a{
    text-decoration:none;
}
ul,ol{
    list-style:none;
}
img{
    border: 0;
}

 

更多专业前端知识，请上 【猿2048】www.mk2048.com