网站制作常用技巧：

网站框架：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">.......<!DOCTYPE>标签声明文档类型...Transitional(过渡类型)

<html>...是<html xmlns="http://www.w3.org/1999/xhtml">的简写

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />...文档内容类型..Content内容...Type类型...text文本...charset字符编码(utf-8国际通用字符编码,gb2312简体中文,ISO-885901纯英文,big5繁体)

  <meta name="keywords" content="北大青鸟,IT培训" /> ...keywords表示搜索关键字

  <meta name="description" content="北大青鸟是国内最大的IT教育集团，致力于为中国培养优秀的IT技术人才。" /> ...description 表示网站内容的具体描述，通过提供搜索关键字和内容描述信息，方便搜索引擎的搜索

 <title>标题</title>  添加网页标题..如   

</head>  ...头部标签

<body>  ...主体标签

<h1>一级标题</h1>二号字

<h2>二级标题</h2>三号字

<h3>三级标题</h3>四号字

<h4>四级标题</h4>五号字

<h5>五级标题</h5>六号字

<h6>六级标题</h6>七号字...标题标签,用于<body>标签内，标签中间为效果字样

 


 

H<sub>2</sub>O...下标 显示效果

2<sup>2</sup>=4...上标  显示效果

 

<p>段落标签</p>...标签里的内容为一个段落

<br/>  ..换行标签,.标签后的内容换行显示

<hr /> ...水平线标签，用于<head>,<body>等标签内可显示为水平线

<span style="color:red; font-size:40px;">低头思故乡</span>  ...范围标签，效果如右

<img src="图片地址" alt="图像的替代文字" title="鼠标悬停提示文字" /> ...图片标签，格式：JPEG;GIF;BMP;PNG ...src=""引用路径时"./"表示当前目录; "../"表示上级目录 "../../"表示上上级目录；另外插入Flash对象:在设计视图页面，选择菜单栏中的"插入"→"媒体"→"SWF"

<a href="链接地址" target="目标窗口位置">链接文本或图像</a> ...超链接标签，"链接地址"可以是"router.html" 也可以是URL地址格式"Scheme://host.domain:port/path/filename"  ..."目标窗口位置"：

                          _blank : 将链接的文档加载到一个未命名的新浏览器窗口

                          _parent : 将链接的文件加载到含有该链接的框架的父框架集窗口中，如果包含链接的框架不是嵌­                                       ­                                  套的，则链接文件加载到整个浏览器窗口中

                          _self : 将链接的文件加载到该链接所在的同一框架中，此目标是默认的，所以通常不用指定它

                          _top : 将链接的文件加载到整个浏览器窗口中，因而会删除所有框架

                          注：除此之外，本页内的链接,可以是name=""里的内容。

         超链接--锚链接：1)同页内锚链接:<a href="#marker">当前位置甲</a>....<a name="maker">目标位置乙</a>...当点击"当   ­                          前位置甲"时自动跳转到"目标位置乙"

                         2)页间锚链接：<a href="content.html#marker" target="_blank">第五首《蜀相》</a>...<a name="marker">          -                          《蜀相》</a>...可以理解为name就是一个锚记，点了前面的就跳到后面的所在位置

            其他超链接：<a href="index.html">回到主页</a>

                        <a href="sound.wav">播放音频文件</a>,打开该链接后，会把链接的音乐源文件下载到本地的播放       ­                        器程序中进行播放  

                        <a href="javascript:alert(“感谢你，选择了BENET”)">我想学网络工程师</a>,这是一种脚本链接。单­          ­                        击链接是会打开脚本中的程序，这里的脚本要弹出一个对话框

                       <a href="document.doc">BENET教学大纲下载</a>,这是文件下载链接，单击链接会弹出文件下载对话­                       ­                        框，提示打开或保存文件。

<ul>

 <li>列表项</li>  ...

</ul> ...无序列表标签；

 

<ol>

 <li>列表项 </li>

</ol>...有序列表标签；

 

<dl>

  <dt> 路由器</dt>

  <dd>为信息流或数据分组选择路由的设备</dd>

</dl>...自定义列表标签；默认<dt>离网页边缘一个空格的距离，<dd>是六个空格的距离；

 

<!-- 注释内容 -->  ...HTML注释，将不必要显示的内容注释掉，注释内容中可以出现“#”但不能出现“--”

特殊字符：

空格 &nbsp; 大于(>) &gt; 小于(<) &lt; 引号("") &quot; 版权号(©) &copy;

 

 

 </body>

</html>

 

W3C标准：

   HTML内容方面——XHTML 1.0

   样式美化方面——CSS

   结构文档访问方面——DOM

   页面交互方面——ECMAScript