别具光芒（divcss等）案例 基本1-3章（html）
牢记：内容与表现相分离 div+css
html基本扫盲
<html>
<head>
<title>你好！</title>
</head>
<body bgcolor="yellow">
<p>哈哈，我的<strong>第一个</strong>页面！</p>
</body>
</html>
<html>
<head>
<title>标题</title>
</head>
<body>
<h1>第1级标题</h1>
<h2>第2级标题</h2>
<h3>第3级标题</h3>
<h4>第4级标题</h4>
<h5>第5级标题</h5>
<h6>第6级标题</h6>
</body>
</html>
<html>
<head>
<title>段落</title>
</head>
<body>
<p>HTML元素（Element）构成了HTML文件，这些元素是由HTML标签（tags）所定义的。<br />HTML文件是一种包含了很多标签（tags）的纯文本文件。</p>
<p>标签告诉浏览器如何去显示页面，使用Windows系统的记事本或者其他的文本编辑器就可以编辑它们，HTML文件以HTML或HTM为扩展名才会被浏览器“认识”并“解读”出来，如图2-2所示。</p>
</body>
</html>
段落会加入一个空行，而换行<br />无。
链接
<html>
<head>
<title>链接</title>
</head>
<body>
<a href="http://www.ddcat.net/" target="_blank">访问“豆豆猫的窝”_blank在新窗口打开，这个在过渡型无问题</a>
<p>分隔用的文字</p>
<a href="http://www.ddcat.net/" title="点击访问站点：豆豆猫的窝">豆豆猫的窝</a>
<p>分隔用的文字</p>
<a href="#bottom">到页面底部</a>
<p>分隔用的文字</p>
<p>分隔用的文字</p>
<p>分隔用的文字</p>
<p>分隔用的文字</p>
<p>分隔用的文字</p>
<p>分隔用的文字</p>
<p>分隔用的文字</p>
<p>分隔用的文字</p>
<p>分隔用的文字</p>
<p>分隔用的文字</p>
<a name="bottom">页面底部用name属性来创建一个命名的锚点</a>
</body>
</html>
也可以<a href="html_link.html#lesson2">
列表
<html>
<head>
<title>列表</title>
</head>
<body>
<h4>无序列表</h4>
<ul>
<li>Fireworks</li>
<li>Dreamweaver </li>
<li>Flash</li>
</ul>
<h4>有序列表</h4>
<ol>
<li>页面美工设计</li>
<li>静态页面制作</li>
<li>程序开发</li>
</ol>
<h4>释义列表</h4>
<dl>
<dt>HTML</dt>
<dd>超文本链接标示语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
</dl>
</body>
</html>
li,dd中可以放段落，图像，链接或列表等
图片
<html>
<head>
<title>图像</title>
</head>
<body>
<p>显示"img/cat.jpg"文件。</p>
<img src="img/cat.jpg" alt="豆豆猫头像" />
<hr />
<p>"img/cat2.jpg"文件并不存在，显示alt属性定义的文字。</p>
<img src="img/cat2.jpg" alt="胖猫" />
</body>
</html>
表格
<html>
<head>
<title>表格</title>
</head>
<body>
<p>最基本的表格要有3种标签：<table>、<tr>和<td>。</p>
<table width="100%" border="1">
<tr>
<td>张三</td>
<td>80</td>
</tr>
<tr>
<td>李四</td>
<td>78</td>
</tr>
</table>
<p>更复杂一些的表格，带标题和表格头。</p>
<table width="100%" border="1">
<caption>带表格头的表格</caption>
<tr>
<th width="40%">姓名</th>
<th>成绩</th>
</tr>
<tr>
<td>张三</td>
<td>80</td>
</tr>
</table>
</body>
</html>
层div 用于定位，本身无实际意义
<html>
<head>
<title>层</title>
</head>
<body>
<div style="background:#eee;">
<p>层中可以包含各种内容，文字、图片、表格、表单、多媒体等等。</p>
<table width="100%" border="1">
<tr>
<td width="40%"><img src="img/cat.jpg" alt="猫" /></td>
<td><a href="http://www.ddcat.net/">豆豆猫的窝</td>
</tr>
</table>
</div>
</body>
</html>
span 用于行内，用于一小块，需要设置css才有用
<html>
<head>
<title>范围</title>
</head>
<body>
<p>范围（span）和层的作用类似，只是<span>标签一般应用在行内，用以定义一块需要特别标示的内容，<span>标签需要通过
<span style="color:red;">设置CSS样式表</span>才能发挥作用。</p>
</body>
</html>
框架
<html>
<frameset rows="80,*">
<frame src="frame_top.html" name="top" />
<frameset cols="40%,*">
<frame src="frame_a.html" name="menu" />
<frame src="frame_b.html" name="main" />
</frameset>
<noframes>
<body>
<p>很抱谦，您使用的浏览器不支持框架功能。</p>
</body>
</noframes>
</frameset>
</html>
常用的是iframe
<html>
<head>
<title>iframe</title>
</head>
<body>
<p>下面的内容是在iframe内显示的。</p>
<iframe src="no1.html" name="show" width="80%" height="150">请使用IE浏览此页面。</iframe>
</body>
</html>
表单 用于交互 但需要服务器方支持
www.netvtm.com/w3/html/html-forms.htm
<html>
<head>
<title>表单</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="mailto:ddcat@163.com" enctype="text/plain">
<fieldset>
<legend>给豆豆猫发便条</legend>
<p>
<label>昵称：<input type="text" name="textfield" /></label>
<label><input type="radio" name="sex" value="boy" />帅哥</label>
<label><input type="radio" name="sex" value="girl" />美女</label>
<label><input name="sex" type="radio" value="none" checked />
保密</label>
</p>
<p>
<label>来自：
<select name="select">
<option value="1" selected="selected">地球</option>
<option value="2">火星</option>
<option value="3">外太空</option>
</select>
</label>
</p>
<p>
<label>留言：<textarea name="textarea" cols="40" rows="4"></textarea></label>
</p>
<p>
<input type="submit" name="Submit" value="发送" />
<input type="reset" name="Submit" value="重写" />
</p>
</fieldset>
</form>
</body>
</html>
注释
<html>
<head>
<title>段落</title>
</head>
<body>
<h4>下面的2句中间有注释</h4>
<p>在HTML内添加注释可以方便阅读和分析代码。</p>
<!--写在这里面的内容不会被浏览器显示。
还可以分行写。-->
<p>为一些比较复杂的代码添加注释可以便于以后理解和修改。</p>
<h4>下面的2句中间<srtong>没有</srtong>注释</h4>
<p>在HTML内添加注释可以方便阅读和分析代码。</p>
<p>为一些比较复杂的代码添加注释可以便于以后理解和修改。</p>
</body>
</html>
升级到xhtml 向xml过渡
dtd，命名空间，语言编码
浙公网安备 33010602011771号