HTML 块元素
可以通过 <div> 和 <span> 将 HTML 元素组合起来。
大多数 HTML 元素被定义为块级元素或内联元素。
“块元素”译为 block level element,“内联元素”译为 inline element。
块级元素在浏览器显示时,通常会以新行来开始(和结束)。
例如:<h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。
例如:<b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外,由于它属于块级元素,浏览器会在其前后显示折行。
如果与 CSS 一同使用,<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
例如,文档中的颜色是绿色:
<div style=“color:#00FF00”>
<h3>This header's color is greenColor.</h3>
<p>This paragraph's color is greenColor.</p>
</div>
定义和用法
<div> 可定义文档中的分区或节(division/section)。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。
用法
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
注释:<div> 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。
提示:请使用 <div> 元素来组合块级元素,这样就可以使用样式对它们进行格式化。
例如1,模拟了新闻网站的结构
<div class="news">
<h2>First News Headline.</h2>
<p>Today is a good day.</p>
</div>
<div class="news">
<h2>Second News Headline.</h2>
<p>Today is sunny.</p>
</div>
上面这段 HTML 模拟了新闻网站的结构。其中的每个 div 把每条新闻的标题和摘要组合在一起,也就是说,div 为文档添加了额外的结构。同时,由于这些 div 属于同一类元素,所以可以使用 class="news" 对这些 div 进行标识,这么做不仅为 div 添加了合适的语义,而且便于进一步使用样式对 div 进行格式化,可谓一举两得。
例如2,使用div元素和table元素添加网页布局
<!--使用div元素添加网页布局-->
<head>
<metacharset="utf-8">
<styletype="text/css">
div#container{width:500px;}
div#header{background-color: royalblue;}
div#menu{background-color: yellowgreen;height:200px;width:150px;float:left;}
div#content{background-color: palevioletred;height:200px;width:350px;float:left;}
div#footer{background-color: palegoldenrod;clear:both;text-align: center;width:500px;}
h1 {margin-bottom:0;}
h2 {margin-bottom:0;font-size:18px;}
ul {margin:0;}
li {list-style:none;}
</style>
</head>
<body>
<div id="container">
<divid="header"><h1align="center">网站题目</h1></div>
</div>
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
<div id="content">Content goes here.</div>
<div id="footer">Footer of Web Page</div>
</body>
实现效果:
<!--使用table元素添加网页布局-->
<tablewidth="500"border="0">
<tr>
<tdcolspan="2"style="background-color:royalblue;">
<h1align="center">网站题目</h1>
</td>
</tr>
<trvalign="top">
<tdstyle="background-color:yellowgreen;width:150px;text-align:top;">
<b>Menu</b><br>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</td>
<tdstyle="background-color:palevioletred;height:200px;width:350px;text-align:top;">Content goes here.</td>
</tr>
<tr>
<td colspan="2"style="background-color:palegoldenrod;text-align:center;">Footer of Web Page.</td>
</tr>
</table>
实现效果:
HTML 块元素
可以通过 <div> 和 <span> 将 HTML 元素组合起来。
大多数网站会把内容安排到多个列中(就像杂志或报纸那样)。
可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。
提示:即使可以使用 HTML 表格来创建漂亮的布局,但设计表格的目的是呈现表格化数据 - 表格不是布局工具!
HTML <span> 元素
HTML <span> 元素是内联元素,可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时,<span> 元素可用于为部分文本设置样式属性。
定义和用法
<span> 标签被用来组合文档中的行内元素。
提示:请使用 <span> 来组合行内元素,以便通过样式来格式化它们。
注释:span 没有固定的格式表现。当对它应用样式时,它才会产生视觉上的变化。
例如,使用span元素实现对网站内的“注释”使用粗体黑色:对这个span元素的父元素,即p元素应用class,这样就可以对这个类的子元素span应用相应的样式了。
<p class="note"><span>注释:</span></p>
CSS:
p.note span {
font-weight:bold;
color:blackColor;
}