从零开始HTML（二 2016/9/20）

1.布局

① 使用 <div> 元素的 HTML 布局，<div> 元素常用作布局工具，因为能够轻松地通过 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 Gallery</h1>

</div>

<div id="nav">

London<br>

Paris<br>

Tokyo<br>

</div>

<div id="section">

<h2>London</h2>

<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.com

</div>

</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 Gallery</h1>

</header>

<nav>

London<br>

Paris<br>

Tokyo<br>

</nav>

<section>

<h1>London</h1>

<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.com

</footer>

</body>

</html>

③ 使用表格的 HTML 布局。<table> 元素不是作为布局工具而设计的，<table> 元素的作用是显示表格化的数据，使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式

复习表格：下面代码所定义的是一个一行一列的表格，<th>是这一行的表头，<td>是这一行的内容，<tr>定义了这一行。

<!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 Demo</h1>

<h2>Resize this responsive page!</h2>

<br>

<div class="city">

<h2>London</h2>

<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>Paris</h2>

<p>Paris is the capital and most populous city of France.</p>

</div>

<div class="city">

<h2>Tokyo</h2>

<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 Demo</h1>

  <p>Resize this responsive page!</p>

</div>

</div>

<div class="container">

<div class="row">

  <div class="col-md-4">

    <h2>London</h2>

    <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>Paris</h2>

    <p>Paris is the capital and most populous city of France.</p>

  </div>

  <div class="col-md-4">

    <h2>Tokyo</h2>

    <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>）

框架结构标签（<frameset>）定义如何将窗口分割为框架
每个 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>

① 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。

② 不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！

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.cn</a></p>

5.背景

背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码：

<body background="clouds.gif">

<body background="http://www.w3school.com.cn/clouds.gif">

6.头部

①<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。

②<title> 标签定义文档的标题。title 元素在所有 HTML/XHTML 文档中都是必需的。

title 元素能够：

定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题

③HTML <base> 元素，<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：

<html>

<head>

<base href="http://www.w3school.com.cn/i/" />

<base target="_blank" />

</head>

<body>

<img src="eg_smile.gif" /><br />

<p>请注意，我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：</p>

<p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>

</body>

</html>

④ HTML <link> 元素，<link> 标签定义文档与外部资源之间的关系。<link> 标签最常用于连接样式表。

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>

7.文档类型

Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。

HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。

<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

HTML5：

<!DOCTYPE html>

到这儿W3C上HTML基础教程就看完啦，用了两天晚上的时间，看的还是比较快，要是之前也能这么静下心慢慢看说不定就能有更好的进步呢。