搭建网页结构
<div>标签(块级):是一个区块容器标记,<div></div>之间是一个容器,可以包含段落、表格、图片等各种html元素
<span>标签(行内):没有实际意义,为了应用样式
-
块级标签:占据一行,换行
<div> <ul> <ol> <li> <dl> <dt> <dd> <h1> <p> <form> <hr>
-
行内(内联)标签:在一行,不换行
<b> <em> <img> <input> <a> <sup> <sub> <textarea> <span>
-
行内元素(Inline Element):指在页面中水平排列,并且不会独占一行的元素。常见的行内元素有
<span>
、<a>
、<strong>
、<em>
等。行内元素的特点是它们不会自动换行,并且其宽度和高度由其内容决定。 -
行内块元素(Inline-Block Element):行内块元素结合了行内元素和块级元素的特点。它们在页面中水平排列,但是可以设置宽度、高度、内边距和外边距等属性,且可以包含其他块级元素。常见的行内块元素有
<img>
、<input>
、<button>
等。 -
块级元素(Block Element):指在页面中独占一行,并且会自动换行的元素。常见的块级元素有
<div>
、<p>
、<h1>
到<h6>
、<ul>
、<ol>
、<li>
等。块级元素的特点是它们会独占一行空间,并且可以设置宽度、高度、内边距和外边距等属性。 -
内联标签(Inline Tag):这个术语通常用来描述 HTML 元素,指的是不会独占一行的元素,其内容可以与其他内容在同一行上显示,不会破坏当前文本的排列。行内元素就是内联标签的一种常见形式。
-
块级标签(Block Tag):通常用来描述 HTML 元素,指的是独占一行的元素,其内容会从新的一行开始显示。大多数块级元素都是块级标签。
标签嵌套规则:
-
块级元素可包含行内元素和某些块级元素
-
行内元素不能包含块元素,只能包含其他行内元素
-
块级元素不能放在<p>标签内
-
特殊块级元素只能包含行内元素,不能再包含块级元素。如:h1~h6、p、dt
-
块级元素与块级元素并列,行内元素与行内元素并列
熟悉网页结构:
查看html结构:火狐浏览器的webdeveloper插件