1.布局① 使用
元素的 html 布局， 元素常用作布局工具，因为能够轻松地通过 css 对其进行定位。doctype html>html>head>style>#header { background-color:black; color:white; text-align:center; padding:5px;}把div理解成一个盒子，设置了盒子的高和宽，后面的盒子就自动跑到前面盒子没占的地方#nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; }#section { width:350px; float:left; padding:10px; }#footer { background-color:black; color:white; clear:both; 清除前面float(浮动)的影响 text-align:center; padding:5px; }style>head>body>div id=header>h1>city galleryh1>div>div id=nav>londonbr>parisbr>tokyobr>div>div id=section>h2>londonh2>p>london is the capital city of england. it is the most populous city in the united kingdom,with a metropolitan area of over 13 million inhabitants.p>p>standing on the river thames, london has been a major settlement for two millennia,its history going back to its founding by the romans, who named it londinium.p>div>div id=footer>copyright ? w3schools.comdiv>body>html>
② 使用 html5 的网站布局
html5 提供的新语义元素定义了网页的不同部分：
html5 语义元素：
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
doctype html>html>head>style>header { background-color:black; color:white; text-align:center; padding:5px; }nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; padding:5px; }section { width:350px; float:left; padding:10px; }footer { background-color:black; color:white; clear:both; text-align:center; padding:5px; }style>head>body>header>h1>city galleryh1>header>nav>londonbr>parisbr>tokyobr>nav>section>h1>londonh1>p>london is the capital city of england. it is the most populous city in the united kingdom,with a metropolitan area of over 13 million inhabitants.p>p>standing on the river thames, london has been a major settlement for two millennia,its history going back to its founding by the romans, who named it londinium.p>section>footer>copyright w3schools.comfooter>body>html>
③ 使用表格的 html 布局 。
元素不是作为布局工具而设计的， 元素的作用是显示表格化的数据，使用 元素能够取得布局效果，因为能够通过 css 设置表格元素的样式 
复习表格：下面代码所定义的是一个一行一列的表格，
是这一行的表头，是这一行的内容， 定义了这一行。 
doctype html>html>head>style>table.lamp { width:100%; border:1px solid #d4d4d4;}table.lamp th, td { padding:10px;}table.lamp th { width:40px;}style>head>body> table class=lamp>tr> th> img src=/images/lamp1.jpg alt=note style=height:32px;width:32px> th> td> the table element was not designed to be a layout tool. td>tr>table>body>html>
2.html 响应式 web 设计rwd 指的是响应式 web 设计（responsive web design）rwd 能够以可变尺寸传递网页rwd 对于平板和移动设备是必需的① 创建响应式设计的一个方法，是自己来创建它：
doctype html>html lang=en-us>head>style>.city {float: left;margin: 5px;padding: 15px;width: 300px;height: 300px;border: 1px solid black;} style>head>body>h1>w3school demoh1>h2>resize this responsive page!h2>br>div class=city>h2>londonh2>p>london is the capital city of england.p>p>it is the most populous city in the united kingdom,with a metropolitan area of over 13 million inhabitants.p>div>div class=city>h2>parish2>p>paris is the capital and most populous city of france.p>div>div class=city>h2>tokyoh2>p>tokyo is the capital of japan, the center of the greater tokyo area,and the most populous metropolitan area in the world.p>div>body>html>
② 使用 bootstrap，另一个创建响应式设计的方法，是使用现成的 css 框架。bootstrap 是最流行的开发响应式 web 的 html, css, 和 js 框架。bootstrap 帮助您开发在任何尺寸都外观出众的站点：显示器、笔记本电脑、平板电脑或手机：
doctype html>html>head> meta charset=utf-8> meta name=viewport content=width=device-width, initial-scale=1> link rel=stylesheet href=http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css>head>body>div class=container>div class=jumbotron> h1>w3school demoh1> p>resize this responsive page!p> div>div>div class=container>div class=row> div class=col-md-4> h2>londonh2> p>london is the capital city of england.p> p>it is the most populous city in the united kingdom, with a metropolitan area of over 13 million inhabitants.p> div> div class=col-md-4> h2>parish2> p>paris is the capital and most populous city of france.p> div> div class=col-md-4> h2>tokyoh2> p>tokyo is the capital of japan, the center of the greater tokyo area, and the most populous metropolitan area in the world.p> div>div>div>body>html>
★ 后续继续学习bootstrap。
3.框架通过使用框架，可以在同一个浏览器窗口中显示不止一个页面。每份html文档称为一个框架，并且每个框架都独立于其他的框架。
使用框架的坏处：
开发人员必须同时跟踪更多的html文档很难打印整张页面框架结构标签（）框架结构标签（）定义如何将窗口分割为框架每个 frameset 定义了一系列行或列rows/columns 的值规定了每行或每列占据屏幕的面积frame 标签定义了放置在每个框架中的 html 文档。
在下面的这个例子中，我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。html 文档 frame_a.htm 被置于第一个列中，而 html 文档 frame_b.htm 被置于第二个列中：
frameset cols=25%,75%> frame src=frame_a.htm> frame src=frame_b.htm>frameset>
① 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 标签中加入：noresize=noresize。
② 不能将
标签与 标签同时使用！ 
4.内联框架① iframe 用于在网页内显示网页。
iframe src=url>iframe>
②  iframe - 设置高度和宽度
height 和 width 属性用于规定 iframe 的高度和宽度。
属性值的默认单位是像素，但也可以用百分比来设定（比如 80%）。
iframe src=demo_iframe.htm width=200 height=200>iframe>
③ iframe - 删除边框 
frameborder 属性规定是否显示 iframe 周围的边框。设置属性值为 0 就可以移除边框：
iframe src=demo_iframe.htm frameborder=0>iframe>
④ 使用 iframe 作为链接的目标
iframe 可用作链接的目标（target），即在该frame中显示网页。链接的 target 属性必须引用 iframe 的 name 属性：
iframe src=demo_iframe.htm name=iframe_a>iframe>p>a href=http://www.w3school.com.cn target=iframe_a>w3school.com.cna>p>
5.背景背景属性将背景设置为图像。属性值为图像的url。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。
url可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码：
body background=clouds.gif>body background=http://www.w3school.com.cn/clouds.gif>
6.头部①
元素是所有头部元素的容器。 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签都可以添加到 head 部分：、、、、