内联元素 | 易学教程

HTML

阅读更多关于 HTML

HTML 一个完整的网页是由html（超文本标记语言），css（层叠样式表）JavaScript（动态脚本语言）三部分组成一、html 概念：超文本标记语言， “ 超文本 ” 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素结构构造：超文本标记语言的结构包括 “ 头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容声明<!DOCTYPEhtml> html也有多个不同的版本，只有完全明白页面中使用的确切HTML版本，浏览器才能正确地显示HTML页面，这就是用处什么是标签: 1、有尖括号包围的关键词 2、通常是成对出现的 3、也有单独呈现的标签，如：<img src="百度百科.jpg" />等。 4、标签不区分大小写.<html> 和 <HTML>. 推荐使用小写 5、标签对中的第一个标签是开始标签，第二个标签是结束标签 6、一般成对出现的标签，其内容在两个标签中间。单独呈现的标签，则在标签属性中赋值。如<h1>标题</h1>和 <input type="text" value="按钮" /> 7、有些标签功能比较简单.使用一个标签即可.这种标签叫做自闭和标签.例如: <br/> <hr/> <input /> <img /> 8、标签可以嵌套.但是不能交叉嵌套. <a><b></a></b>

HTML元素嵌套规则

阅读更多关于 HTML元素嵌套规则

一、HTML 标签包括块级元素(block)、内嵌元素（inline）　　 1、块级元素　　一般用来搭建网站架构、布局、承载内容……它包括以下这些标签：　　address、blockquote、center、dir、div、dl、dt、dd、fieldset、form、h1~h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul 　　 2、内嵌元素　　一般用在网站内容之中的某些细节或部位，用以“强调、区分样式、上标、下标、锚点”等等，下面这些标签都属于内嵌元素：　　a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var 　　二、HTML 标签的嵌套规则　　1. 块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素： <div><h1></h1><p></p></div> —— 对　　<a href=”#”><span></span></a> —— 对　　<span><div></div></span> —— 错 2. 块级元素不能放在里面：　　<p>

CSS三种引入方式：内联、页级、外联

阅读更多关于 CSS三种引入方式：内联、页级、外联

1.内联CSS 　　内联CSS也可称为行内CSS或者行级CSS，它直接在标签内部引入，显著的优点是十分的便捷、高效；但是同时也造成了不能够重用样式的缺点，如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用，可以查找代码中bug 。 1 <body> 2 <div style="width: 65px;height: 20px;border: 1px solid;">测试元素</div> 3 </body> 2.页级CSS 　　页级CSS也可称为内部CSS，整体是放在head标签里边的，在style标签里边定义样式，作用范围和字面意思相同，仅限于本页面的元素；如果你写的代码超过了几百行，想想每次把代码页拉到最上边都很烦，所以它在可维护性方面较差。 1 <head> 2 <meta charset="utf-8" /> 3 <title>测试</title> 4 <style type="text/css"> 5 div { 6 width: 65px; 7 height: 20px; 8 border: 1px solid; 9 background: greenyellow; 10 } 11 </style> 12 </head> 3. 外联CSS 　　外联CSS也可称为外部CSS，在实际的项目中通常使用此种方式，它只在页面中使用link或者@import引入即可

IT兄弟连 HTML5教程 “无意义”的HTML元素div和span

阅读更多关于 IT兄弟连 HTML5教程 “无意义”的HTML元素div和span

HTML只是赋予内容的手段，大部分HTML标签都有其意义（例如，标签a创建链接，标签h1创建标题等），然而div和span标签似乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实际上，与CSS结合起来后，它们的应用十分广泛。需要记住的是，div和span是“无意义”的标签，它们的存在纯粹是为了应用CSS样式，所以当样式表失效时，它们就没有了任何作用。它们被用来组合成一大块的HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来。span和div的不同之处在于，span是内联的（行内标记），用在一小块的内联HTML中；而div（division）元素是块级的（简单地说，它等同于其前后有断行），用于组合一大块的代码，为HTML文档内大块的内容提供结构和背景的元素，可以包含段落、标题、表格甚至其他部分，这使得div便于建立不同集成的类。 div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含的元素的特性由div标签的属性来控制，或者通过使用样式表格式化这个块来进行控制。来源： https://www.cnblogs.com/itxdl/p/12008966.html

HTML 段落<p>标签

阅读更多关于 HTML 段落标签

<p> 标签定义段落。 p 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。段间距 IE默认为19px，通过p的margin-top属性设置 FF默认为1.12em，通过p的margin-bottom属性设置 p默认为块状显示，要清除段间距，一般可以设置 p { margin-top:0; margin-bottom:0; } 延伸阅读：允许的段落用法可以只在块（block）内指定段落，也可以把段落和其他段落、列表、表单和预定义格式的文本一起使用。总的来讲，这意味着段落可以在任何有合适的文本流的地方出现，例如文档的主体中、列表的元素里，等等。从技术角度将，段落不可以出现在头部、锚或者其他严格要求内容必须只能是文本的地方。实际上，多数浏览器都忽略了这个限制，它们会把段落作为所含元素的内容一起格式化。 <html> <body> <p>这是段落。</p> <p>这是段落。</p> <p>这是段落。</p> <p>段落元素由 p 标签定义。</p> </body> </html> HTML中 P标签内不可包含DIV标签深究：我们先来认识in-line内联元素和block-line块元素，因为HTML里几乎所有元素都属于内联元素或者块元素中的一种。 in-line这个词有很多种解释：内嵌、内联、行内、线级等，但是，它们都是表示相同的意思

web前端入门到实战：@import和link引入样式的区别

阅读更多关于 web前端入门到实战：@import和link引入样式的区别

关于@import和link引入样式的区别网上有很多种说法。大致有如下几种，不过这其中会有我存疑的地方，我们可以一起来探讨一下。区别 1.从属关系区别 @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。 2.加载顺序区别加载页面时，link标签引入的 CSS 被同时加载； @import 引入的 CSS 将在页面加载完毕后被加载。 3.兼容性区别 @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。 4.DOM可控性区别可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用 @import 的方式插入样式。 5.权重区别 link引入的样式权重大于@import引入的样式。（？？？）我们在网上搜索关于这两者的区别的时候通常会看见有第5条这么一个说法。难道第5条真的是这样吗？有待商榷。所以这里我们就通过几个demo来验证一下第五条再验证之前我们先来说说css权重的相关概念： css的权重指的是选择器的优先级，CSS 选择器的权重高，即选择器的优先级高。 css的优先级表现在，对同一个html元素设置元素的时候，不同选择器的优先级不同

CSS 块级元素、内联元素概念

阅读更多关于 CSS 块级元素、内联元素概念

p、h1、或div等元素常常称为块级元素，这些元素显示为一块内容；Strong。span等元素称为行内元素，它们的内容显示在行中，即“行内框”。（可以使用 display=block 将行内元素转换成块元素， display=none 表示生成的元素根本没有框，也既不显示元素，不占用文档中的空间）。 a、行内就是在一行内的元素，只能放在行内；块级元素，就是一个四方块，可以放在页面上任何地方。 b、说白了，行内元素就好像一个单词；块级元素就好像一个段落，如果不另加定义的话，它将独立一行出现。 c、一般的块级元素诸如段落<p>、标题<h1><h2>...、列表。<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body> 等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........ d、块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。 e、<span>在CSS定义中属于一个行内元素，而<div>是块级元素。对于学过CSS的人来说一听就能明白。可对于新手来说不易理解，我主要对新手说通熟点吧! 用容器这一词会更容易形象理解它们的存在与用途，行内元素相当一个小容器，而<div>相当于一个大容器，大容器当然可以放一个小容器了。<span

IT兄弟连 HTML5教程 “无意义”的HTML元素div和span

阅读更多关于 IT兄弟连 HTML5教程 “无意义”的HTML元素div和span

CSS块级元素和行内元素

阅读更多关于 CSS块级元素和行内元素

块元素一般都从新行开始，它可以容纳内联元素和其他块元素,常见块元素是段落标签'P"。“form"这个块元素比较特殊，它只能用来容纳其他块元素。如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。需要指出的是，table标签也是块元素的一种，table based layout和css based layout从一般使用者（不包括视力障碍者、盲人等）的角度来看这两种布局，除了页面载入速度的差别外，没有其他的差别。但是如果普通使用者不经意点了查看页面源代码按钮后，两者所表现出来的差异就非常大了。基于良好重构理念设计的css布局页面源码，至少也能让没有web开发经验的普通使用者把内容快速的读懂。从这个角度来说，css layout code应该有更好的美学体验吧。你能够把块容器元素div想象成一个个box，或者如果你玩过剪贴文载的话，那就更加容易理解了。我们先把需要的文章从各种报纸、杂志总剪下来。每块剪下来的内容就是一个block。然后我们把这些纸块按照自己的排版意图，用胶水重新贴到一张空白的新纸上。这样就形成了你自己独特的文摘快报了。作为一种技术的延伸，网页布局设计也遵循了同样的模式。. 内联元素(inline element

HTML5-布局篇( 总结 )

阅读更多关于 HTML5-布局篇( 总结 )

1）像<span>这样的行内标记，定义它的margin-top和margin-bottom是无效的，除非你把它设置为块状元素才可以。Display:block 2）对于块状元素，你可以自由的使用外边距来定义版式和元素之间的距离。类似 DIV 等等， 3）无论什么元素，一旦设置为是浮动显示，就拥有了完整的盒模型结构，我们就可以使用外边距，内边距，边框，高和宽来控制的大小以及与其他对象之间的位置关系。 4）浮动是从网页布局的角度来定义元素的显示，而行内和块状属性主要是从元素自身的性质来定其显示的。 5）当元素没有定义边框时，可以把内边距作为外边距使用。有时候外边距会有重叠现象的。 6）当为元素定义背景图像时，内边距区域内可以显示背景图像，而对外边距区域来说，背景图像是达不到的，他永远都是透明状态 7）用div+css设计网页结构时，设计师满脑子都是网页内容，而非内容所呈现的效果。 8）块状元素：不管块状元素宽度是多少，他总会自动占据一行，因为在他末尾附加了一个换行符，而行内元素没有这个特点。块状元素有完整的盒模型结构，可以定义宽度和高度，而行内元素没有这个特性，无法通过高度来改变文本行的行高。块元素的代表标记 div 行内元素的代表标记 span ，行内标记不具备组织结构框架 9）网页布局分为：自然布局，浮动布局，定位布局 10）当一个元素被定义为浮动显示时，即定义为块状元素

订阅内联元素