![]() 1.1.1. 块元素divdiv表示一个区块，是一个无语义的标签。里面可以包含HTML标签元素，起到分段与分块的作用，通常用来排版布局。例如，我们可以把一个页面按照结构分成头部、导航、内容栏、侧栏和底部几个部分。这时，我们就可以把相应的部分分别利用div组装起来。并为其取相应的class或者id名，例如这样： <div class="header"></div> <div class="nav"></div> <div class="content"></div> <div class="sidebar"></div> <div class="footer"></div> 1.1.2. 行元素spanspan表示一小段区域，无特殊语义。如希望区别一下一个段落中的某几个字，可以用span将这几个字框起来，以便于设置样式，如： <p>2013年芜湖市事业单位公开招聘计划正式公布，和往年单独举行招聘考试不同，今年我市招聘考试<span>首次纳入全省事业单位统考</span>。3月4日起开始报名，3月31日笔试。</p> 1.1.3. HTML注释：<!-- 注释文字 -->HTML注释存在的意义是方便我们编写代码的注释或者备忘用的，就像这样： <!--这里是最外层区块的开始--> “<!--”和“-->”之间的任何内容都不会在浏览器中显示，我们可以在源代码中看到它们。 为代码添加相应的注释是一个非常好的习惯，尤其是在非常复杂的页面中，注释可以方便的为我们指示文档的各个部分以及注意事项等。同时，注释也可以帮助自己和其他人理解你所写的代码。 在软件中添加注释可以先选中要被注释掉的文字然后点击软件左侧应用注释图标里的第一个“应用HTML”注释即可，如图2-15所示。 图2-15 1.1. 块元素与行元素的区别及转换到目前为止，我们以及学习了许多HTML标签，现在我们认识下他们的分类，其实在所有的HMTL元素中可分为两类： block块级元素 独占整行的区块，特点是总是沿网页垂直方向另起一行，其宽度默认为100%，如我们学过的p、h1~h6、div、ul、ol、dl、pre、hr元素等。 in-line内联元素 允许后面的对象与之共享一行的对象，特点是总是与其前后其他元素保持在同一行，一般出现在句子中。如我们学过的a、span、img、strong和em等，其宽度取决于元素内部的内容的多少。 下面通过一个小例子来理解块元素与行元素的区别，我们在body中输入我们本章所学的部分HTML代码： <a href="#">我是a链接里的文字</a> <p>我是p段落里的文字</p> <h1>我是h1里的文字</h1> <div>我是div里的文字</div> <span>我是span里的文字</span> <img src="" alt="这是一张图片" /> <strong>我是strong里的文字</strong> <em>我是em里的文字</em>
然后利用样式设置，将他们的边框全部显示出来。关于样式的设置将在第3章详细讲解；关于通配符*将在第4章详细讲解；关于border属性将在第3章详细讲解。 在HTML文档的头部<head></head>标签里面输入代码： <style type="text/css"> body *{ border:#000 solid 1px;} </style> 得到效果如图2-16： 图2-16 从上图可以很清楚的看到p标签、h1标签、div标签他们都是独占一整行，他们不允许其他的元素与之共享一行，因而他们都是块元素，这就是块元素的特点。 而a标签、span标签、img标签、strong标签和em标签，这几个标签都没有独占一整行，他们的宽度都是由里面的内容的多少决定的，他们都允许其他的元素与之共享一行，这是行元素的特点。 我们可以通过CSS中的display属性来将行级元素与内联元素进行互相转换。 值得注意的是，行对象如果没有将其转换为块对象的话，设置宽度和高度是没有作用的，关于display属性设置代码如下： display:inline;（转换为内联元素） display:block;（转换为块级元素） display:none;（隐藏元素） 例如，当我们希望将span元素转换成块元素，可以这样设置： span{ display:block;} 关于样式的设置，我们会在第三章进行详细的介绍. 当你开始使用HTML元素组织页面时，第一个要问的问题都应该是：它是块级元素，还是行内元素？知道了这一点之后，就可以在编写标记的时候，预想到某个元素在初始状态下是如何定位的，这样才能进一步想好将来怎么用CSS重新定位它。
| 
收藏
淘帖
踩
