HTML块元素与内联元素嵌套规则
HTML存在许多种类型的标签,有的标签下面只允许特定的标签存在,这就叫HTML嵌套规则。
不按HTML嵌套规则写,浏览器就不会正确解析,会将不符合嵌套规则的节点放到目标节点的下面,或者变成纯文本。
关于HTML嵌套规则,一定要掌握块状元素和内联元素的区别。
块状元素:
一般是其他元素的容器,可容纳内联元素和其他块状元素,块状元素排斥其他元素与其位于同一行,宽度(width)高度(height)起作用。常见块状元素为div和p
内联元素:
内联元素只能容纳文本或者其他内联元素,它允许其他内联元素与其位于同一行,但宽度(width)高度(height)不起作用。常见内联元素为a.
块状元素与内联元素嵌套规则:
(1).块元素可以包含内联元素或某些块元素,但内联元素却不能包含块元素,它只能包含其他的内联元素
例:
<div><h1></h1><p></p></div>
<a href="#"><span></span></a>
(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></div></li>
(5).块级元素与块级元素并列,内联元素与内联元素并列
例:
<div><h2></h2><p></p></div>
<div><a href="#"></a><span></span></div>
HTML块元素与内联元素嵌套规则的更多相关文章
- 4-21 嵌套选择器 、块级元素和内联元素、光标、布局-overflow
1.嵌套选择器 p{ }: 为所有 p 元素指定一个样式.(默认,,也就是说可以被改变样式) .marked{ }: 为所有 class="marked" 的元素指定一个样式. . ...
- CSS--基础块级元素与内联元素
在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素.在HTML和XHTML中,块级元素不能继承自行内元素(即不能嵌套在行内元素),<p&g ...
- 18 12 27 css 盒模型使用 以及相关技巧问题 元素溢出 块元素、内联元素、内联块元素
盒子模型的实际尺寸 盒子的width和height设置的是盒子内容的宽和高,不是盒子本身的宽和高,盒子的真实尺寸计算公式如下: 盒子宽度 = width + padding左右 + border左右 ...
- Code笔记之:CSS块级元素、内联元素概念
文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...
- CSS文档流与块级元素和内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- html块级元素和内联元素小结
Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用的<div>.<p>.<ul>默认状态下都是属于块级元素.块级 ...
- html元素类型 块级元素、内联元素(又叫行内元素)和内联块级元素。
html中的标签元素大体被分为三种不同的类型:块级元素.内联元素(又叫行内元素)和内联块级元素. 块级元素特点: 1.每个块级元素都从新的一行开始,并且其后的元素也另起一行.(霸道,一个块级元素独占一 ...
- CSS文档流与块级元素和内联元素(文档)
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...
- (转) html块级元素和内联元素区别详解
http://blog.csdn.net/chen_zw/article/details/8713205 块级元素(block)特性: 总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显 ...
随机推荐
- springBoot异常统一处理
springBoot异常统一处理 采用@ControllerAdvice注解和@ExceptionHandler注解,可以对异常进行统一处理. 1.结构图: 2.pom.xml文件: <?xml ...
- SVN中忘记上传自己写的工程,但是IP已经变了的解决方案
苦于自己没有养成每天下班上传SVN的好习惯,第二天来又发现IP变了,只得把自己写的删掉,记录一下解决方法: 第一个红框中的svn://192.168.0.103/FH是前一天的IP链接地址,结果发现今 ...
- centos7安装mongodb以及使用
https://blog.csdn.net/sun007700/article/details/100671570
- Java线程的几种状态(基于Oracle jdk 1.8)
Java中线程的状态定义在java.lang.Thread类中的一个枚举中. public enum State { /** * Thread state for a thread which has ...
- spring scope prototype与singleton区别
1.singleton作用域 当一个bean的作用域设置为singleton, 那么Spring IOC容器中只会存在一个共享的bean实例,并且所有对bean的请求,只要id与该bean定义相匹配 ...
- Linux 笔记 - 前三章 CentOS 简介、安装和远程连接
博客地址:http://www.moonxy.com 一.Unix 和 Linux 的区别 目前主流的 Unix 系统有三种,分别是 IBM-AIX.HP-UX.SUN-Solaris,它们分别运行在 ...
- 30 (OC)* 数据结构和算法
在描述算法时通常用o(1), o(n), o(logn), o(nlogn) 来说明时间复杂度 o(1):是最低的时空复杂度,也就是耗时/耗空间与输入数据大小无关,无论输入数据增大多少倍,耗时/耗空间 ...
- [Linux] Vmware 15安装CentOs后显示网络不可用
转载自:https://blog.csdn.net/chenjin_chenjin/article/details/83617186 在虚拟机上安装好centos7后,ping www.baidu.c ...
- Java入门系列之hashCode和equals(十二)
前言 前面两节内容我们详细讲解了Hashtable算法和源码分析,针对散列函数始终逃脱不掉hashCode的计算,本节我们将详细分析hashCode和equals,同时您将会看到本节内容是从<E ...
- 安装sublime text3 、转化为汉化版、安装SublimeREPL使得在交互条件下运行代码,设置快捷键
一.sublime Sublime Text 3是轻量级的,安装包很小,它的大部分功能是依靠丰富的插件实现的,而且占用资源少.目前主流版本是Sublime Text3,在官网就可以下载,http:// ...