HTML的层(div)和块(span)

简介: 大多数 HTML元素被定义为块级元素或内联元素。“块级元素”译为 block level element,“内联元素”译为 inline element。那什么是块级元素,什么又是内联元素呢?它们分别是用来做什么的呢?

大多数 HTML元素被定义为块级元素或内联元素。“块级元素”译为 block level element,“内联元素”译为 inline element。那什么是块级元素,什么又是内联元素呢?它们分别是用来做什么的呢?


一、HTML 块元素


块级元素在浏览器显示时,通常会以新行来开始(和结束)。

  例子:<h1>, <p>, <ul>, <table>


HTML <div>元素


 HTML <div>元素是块级元素,它是可用于组合其他 HTML 元素的容器,我们把它称为一个层。<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。


  如果与 CSS 一同使用,<div>元素可用于对大的内容块设置样式属性。


  <div> 元素的另一个常见的用途是文档布局,它取代了使用表格定义布局的老式方法。但使用 <table>元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。


     <div></div>将内容放到层中,div定义一个矩形,可以将这些内容当成一个整体进行处理,比如,整体隐藏,整体移动。div非常强大和常用,类似于winform 中的panel

二、HTML 内联元素


内联元素在显示时通常不会以新行开始。


  例子:<b>, <td>, <a>, <img>


HTML <span> 元素

 HTML <span> 元素是内联元素,可用作文本的容器。<span> 元素也没有特定的含义。


 当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。


 div是将内容放到一个矩形的区块中,会影响布局,而span知识把一段内容定义成一个整体进行操作,不影响布局显示。可以是任何形状,不改变原始的排版;


三、效果图:

   代码:


20161120204459572.png

20161120204543994.png



四、总结:

  div:定义文章的分区或节

  span:用来组合文档中的行内元素















相关文章
|
30天前
html中div内容居中的方法使用弹性盒子居中
html中div内容居中的方法使用弹性盒子居中
13 0
|
12天前
|
前端开发 容器
HTML <div> 和<span>
【6月更文挑战第2天】HTML <div> 和<span>。
17 5
|
15天前
|
前端开发 容器
HTML <div> 和<span>
HTML <div> 和<span>
|
30天前
|
移动开发 定位技术 HTML5
HTML5 - section、article和div
HTML5 - section、article和div
35 0
|
9月前
|
Serverless
html 页面中动态计算 div 元素的宽度
html 页面中动态计算 div 元素的宽度
103 2
|
11月前
|
前端开发 Android开发
HTML网页制作 Div+CSS
HTML网页制作 Div+CSS
77 0
|
11月前
|
前端开发 JavaScript
html行内标签和块级标签有哪些?css常用的伪类和伪元素有哪些? 什么是作用域?作用域链又是什么?
作用域:作用域是当前的执行上下文,js中作用域分为全局作用域和函数作用域。
|
前端开发 容器
零基础html5+div+css+js网页开发教程第009期 导航栏css美化
零基础html5+div+css+js网页开发教程第009期 导航栏css美化
154 0
|
JavaScript 容器
零基础html5+div+css+js网页开发教程第010期 图片轮播案例
零基础html5+div+css+js网页开发教程第010期 图片轮播案例
|
前端开发 程序员
零基础html5+div+css+js网页开发教程第007期 网页基本代码框架
零基础html5+div+css+js网页开发教程第007期 网页基本代码框架
137 0