HTML<div>和<span>

HTML可以通过


和 将元素组合起来。


HTML区块元素

大多数HTML元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例：<h1>, <p>, <ul>, <table>

HTML内联元素

内联元素在显示时通常不会以新行开始。
实例：<b>, <td>, <a>, <img>

HTML<div>元素

HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>
HTML<span>元素

HTML <span> 元素是内联元素，可用作文本的容器
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

使用<span>元素对文本中的一部分进行着色：

<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>
HTML分组标签
<div>	定义了文档的区域，块级 (block-level)
<span>	用来组合文档中的行内元素， 内联元素(inline)

HTML布局

网页布局对改善网站的外观非常重要。

网站布局

大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。
大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

HTML布局-使用<div>元素

div 元素是用于分组 HTML 元素的块级元素。
下面的例子使用五个 div 元素来创建多列布局：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>菜鸟教程(runoob.com)</title>
</head>
<body>

<div id="container" style="width:1500px">

  <div id="header" style="background-color:blanchedalmond;font-family: 微软雅黑">
    <h1 style="margin-bottom:0;">主要的网页标题</h1></div>

  <div id="menu" style="background-color:aliceblue;height:500px;width:500px;float:left;">
    <b style="font-size: 40px">菜单</b><br>
    HTML<br>
    CSS<br>
    JavaScript</div>

  <div id="content" style="background-color:tomato;height:500px;width:1000px;float:left;">
    内容在这里</div>

  <div id="footer" style="background-color:navajowhite;clear:both;text-align:center;height: 50px">
    @涣涣涣涣酱 </div>

</div>

</body>
</html>

html5区块链 html应用区块_html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>世界最大的同性恋交友网站</title>
</head>
<body>
<table width="1500">
  <tr>
    <td colspan="2">
      <h1 style="text-align: center;background-color: navajowhite">GitHub</h1>
    </td>
  </tr>
  <tr>
    <td style="width:500px;background-color: #b3d4fc;height: 500px;text-align: center"><p>世界最大的同性恋交友网站</p></td>
    <td style="width:1000px;background-color: beige;text-align: center" ><p>网络一线牵，珍惜这段缘</p></td>
  </tr>
  <tr>
    <td colspan="2">
      <p style="background-color: darksalmon;color:wheat;text-align: center">@涣涣涣涣酱</p>
    </td>
  </tr>

</table>

</body>
</html>

html5区块链 html应用区块_CSS_02

HTML布局-有用的提示

Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。
Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。

HTML布局标签
<div>	定义文档区块，块级(block-level)
<span>	定义 span，用来组合文档中的行内元素。