行内元素

span是inline(行内)元素。

设置宽高无效：

设置padding有效：

一小格是5px，两小格是10px.

padding设置上下左右都有效，即会撑大空间;
行内元素尺寸由内含的内容决定

块元素

例子是div

浅绿色的就是margin区域：

设置高度和宽度起作用。

一个典型的span用法：

<!DOCTYPE html>
<html>
<body><h1>The span element</h1><p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p></body>
</html>

The span tag is an inline container used to mark up a part of a text, or a part of a document.

The span tag is much like the div element, but div is a block-level element and span is an inline element.

和div作用类似，但span是inline元素，div是block元素。

何时应该使用span？

It should be used only when no other semantic element is appropriate.

更多Jerry的原创文章，尽在：“汪子熙”:

HTML span标签学习笔记相关推荐

web前端分享HTML5中的nav标签学习笔记
好程序员web前端分享HTML5中的nav标签学习笔记,nav标签全称navigation,顾名思义,是导航的意思.根据HTML5的相关标准定义如下: "A section of a pag ...
JSP自定义标签学习笔记
http://blog.csdn.net/liangbinny/article/details/6309893 本文是本人学习<JavaWeb学习>书籍所记下的学习笔记一.概述 JSP ...
HTML文档的基本格式/标签/学习笔记
一.HTML文档的基本格式 < !doctype >声明html文档的类型,位于文档的最开头,向浏览器说明文档的规范 < body >主体标签,用于定义网页的主要显示的内容,文 ...
HTML label标签学习笔记
网址:https://www.w3schools.com/tags/tag_label.asp label能够为下列HTML元素定义标签: 使用label的两个收益: Screen reader us ...
Android merge 标签学习笔记
Merge 标签 Android性能优化中有一点就是尽量减少层次结构少用LinearLayout. merge他的作用就是减少一个层次. 1.merge布局和FrameLayout类似,相同的效 ...
基本STRUTS标签-学习笔记-Bean标签
<bean:include> 和标准的JSP标签<jsp:include>很相似,都可以用来包含其他Web资源的内容,区别在于<bean:include>标签把其它 ...
embed标签及object 标签学习笔记
Embed embed标签 -- 定义网页中嵌入除图片外的多媒体使用embed标签可以在网页中嵌入Flash,Mid,MP3等嵌入式内容 embed标签已经被符合标准的object标签代替. 属性: ...
前端获取div里面的标签_web前端教程JavaScript学习笔记DOM
web前端教程JavaScript学习笔记 DOM一DOM(Document Object Model): 文档对象模型其实就是操作 html 中的标签的一些能力我们可以操作哪些内容获取一个元素 ...
SpringMVC:学习笔记(5)——数据绑定及表单标签
SpringMVC--数据绑定及表单标签理解数据绑定为什么要使用数据绑定基于HTTP特性,所有的用户输入的请求参数类型都是String,比如下面表单: 按照我们以往所学,如果要获取请求的所有参数 ...

HTML span标签学习笔记

行内元素

块元素

HTML span标签学习笔记相关推荐

最新文章

热门文章