HTML(2)
HTML框架
<frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> </frameset> <!--我们设置了一个三列的框架集。包括分别占用的比例，各个框架显示的HTML文档 如果属性换为：rows = "25%,50%,25%",则表示按照水平划分三个框架--> <html> <frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> <noframes> <body>您的浏览器无法处理框架！</body> </noframes> </frameset> </html> <!--为不支持框架的浏览器添加 <noframes> 标签。 重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于 <body></body> 标签内。--> <html> <frameset cols="50%,*,25%"> <frame src="/example/html/frame_a.html" noresize="noresize" /> <frame src="/example/html/frame_b.html" /> <frame src="/example/html/frame_c.html" /> </frameset> </html> <!--假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize"。--> <html> <body> <iframe src="/i/eg_landscape.jpg"></iframe> <p>一些老的浏览器不支持 iframe。</p> <p>如果得不到支持，iframe 是不可见的。另外：内联框架是可以包含在body中的</p> </body> </html> <iframe src="demo_iframe.htm" width="200" height="200"></iframe> <!--设置内联框架的高度和宽度--> <iframe src="demo_iframe.htm" frameborder="0"></iframe> <!--frameborder 属性规定是否显示 iframe 周围的边框。设置属性值为 "0" 就可以移除边框：--> <iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe> <p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p> <p><b>注释：</b>由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开。</p> <!--使用iframe作为链接的目标-->
HTML块
HTML/<div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。/<div> 元素可用于对大的内容块设置样式属性。
HTML <span> 元素是内联元素，可用作文本的容器。当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
<div style="color:#00FF00"> <h3>This is a header</h3> <p>This is a paragraph.</p> </div> <!--整个块内都会变色-->
div用法
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
<p><span>some text.</span>some other text.</p>
span用法
如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span 元素仍然为 p 元素增加了额外的结构。
可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。
可以对同一个 <span> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
HTML类
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="cities">
<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>
</body>
</html>
<!--margin属性设置外边距，有四个值，上右下左，如果给一个说明四个值都一样
padding属性设置四个内边距，用法同上-->
<!DOCTYPE html>
<html>
<head>
<style>
span.red {
color:red;
}
</style>
</head>
<body>
<h1>我的<span class="red">重要的</span>标题</h1>
</body>
</html>
<!--HTML <span> 元素是行内元素，能够用作文本的容器。
设置 <span> 元素的类，能够为相同的 <span> 元素设置相同的样式-->
<!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>
<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>
<!--div使用class和id的区别-->
HTML路径
| 路径 | 描述 |
|---|---|
| picture.jpg 位于与当前网页相同的文件夹 | |
| picture.jpg 位于当前文件夹的 images 文件夹中 | |
| picture.jpg 当前站点根目录的 images 文件夹中 | |
| picture.jpg 位于当前文件夹的上一级文件夹中 |
使用相对路径是个好习惯（如果可能）。
如果使用了相对路径，那么您的网页就不会与当前的基准 URL 进行绑定。所有链接在您的电脑上 (localhost) 或未来的公共域中均可正常工作。
HTML头部
/<title>元素
/<base>元素
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>
<!--base标签为页面上的所有链接规定默认地址或默认目标-->
<!--在body中链接标签不用加地址了，并且默认新窗口打开但是要加href,写成这样：-->
<!--<a href = "">balabala</a>-->
<!--另外，也可以在head中写一般的url，在a标签内写另一半！-->
/<link>元素
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
<!--定义文档与外部资源的关系，rel属性规定当前文档与被链接文档之间的关系-->
/<style>元素
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
<!--定义样式信息-->
/<meta>元素
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" /> <!--定义页面的描述，name属性说明类型，content属性具体内容--> <meta name="keywords" content="HTML, CSS, XML" /> <!--定义页面的关键字-->
meta标签内的数据不会显示在页面上，但浏览器可以读，一般用来规定页面的描述、关键词、文档作者、最后修改时间等等，比如浏览器会通过关键词来索引您的页面
/<script>元素
定义脚本，详细见javascript
HTML多媒体
多媒体涉及到浏览器支不支持的复杂问题，以下只列举HTML5支持的，详细信息请看教程
音频：
<audio controls="controls"> <source src="song.mp3" type="audio/mp3" /> </audio> <a href="song.mp3">Play Sound</a> <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"> </script> <!--使用雅虎的播放器，如果没有js脚本，浏览器默认用自带的辅助应用程序-->
视频：
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> </video> <a href="movie.swf">Play a video file</a>
