html完整教程5.docVIP

HTML div 和 span 可以通过 div 和 span 将 HTML 元素组合起来。 HTML 块元素 大多数 HTML 元素被定义为块级元素或内联元素。编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。 块级元素在浏览器显示时，通常会以新行来开始（和结束）。 例子：h1, p, ul, table 内联元素在显示时通常不会以新行开始。例子：b, td, a, img HTML div 元素是块级元素，它是可用于组合其他 HTML 元素的容器。div 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。 如果与 CSS 一同使用，div 元素可用于对大的内容块设置样式属性。 div 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 table 元素进行文档布局不是表格的正确用法。table 元素的作用是显示表格化的数据。 HTML span 元素是内联元素，可用作文本的容器。span 元素也没有特定的含义。 当与 CSS 一同使用时，span 元素可用于为部分文本设置样式属性。 标签 描述 div 定义文档中的分区或节（division/section）。 span 定义 span，用来组合文档中的行内元素。 网页布局对改善网站的外观非常重要。请慎重设计您的网页布局。 网站布局 大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。可以使用 div 或者 table 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 提示：即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！ div 元素是用于分组 HTML 元素的块级元素。下面的例子使用五个 div 元素来创建多列布局： 实例 !DOCTYPE html html head style type=text/css div#container{width:500px} div#header {background-color:#99bbbb;} div#menu {background-color:#ffff99; height:200px; width:100px; float:left;} div#content {background-color:#EEEEEE; height:200px; width:400px; float:left;} div#footer {background-color:#99bbbb; clear:both; text-align:center;} h1 {margin-bottom:0;} h2 {margin-bottom:0; font-size:14px;} ul {margin:0;} li {list-style:none;} /style /head body div id=container div id=header h1Main Title of Web Page/h1 /div div id=menu h2Menu/h2 ul liHTML/li liCSS/li liJavaScript/li /ul /div div id=contentContent goes here/div div id=footerCopyright W3S/div /div/body /html 上面的 HTML 代码会产生如下结果： HTML 布局 - 使用表格 使用 HTML table 标签是创建布局的一种简单的方式。可以使用 div 或者 table 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 提示：即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！ 下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列： HTML 布局 - 有用的提示 提示：使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局提示：由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。 标签 描述 div 定义文档中的分区或节（division/section）。 span 定义 span，用来组合文档中的行内元素。 HTML 表单用于搜集不同类型的用户输入。 表单 表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选