一，HTML介绍
1，HTML(HyperText Markup Language):超文本标记语言，用来结构化网页，是浏览器认识并可以解析显示的语言。
A，ML(Markup Language):标记，例如(<h1>,<a>,<img>......)
B，HT(HyperText ) : 超链接，用于链接或跳转其他页面。
C，浏览器对于制表符，回车，空格等都是忽略掉，如果要在页面显示这些元素必须使用W3C提供的实体。例如(>, < ......)。
二，HTML元素类型
1，块元素(block)：每个块元素都独立显示，好像前后都有换行。
2，内联元素(inline): 总是随着文字流出现在“行内”。
3，空元素：不需要前后标记匹配。例如：<br>。
三，Tag 介绍 (以下块元素：B。内联元素：I)
<blockquote>[B] : 对一段文本块的引用（长引用用来强调书中的一大段文字）。
注释：因为是对1个文本块引用，因此严格上是：<blockquote> <p>......</p> </blockquote>
<ol> (order list)[B] : 有序列表。
<ul> (unorder list) [B]：无序列表
<li> (list)[B] ：列表项
<dl> [B] : 自定义列表.
<dt>[B] : 自定义列表项限
<dd>[B] :自定义列表描述。
例如：<dl>
<dt></dt>
<dd></dd>
</d>
<q>[I]：文本的引用。一般使用""号来代替，在IE里没有作用。
<em>[I] : 表示想要强调的文本。
<strong>[I]：着重想要强调的部分。
<pre> : 格式化文本
<code> : 代码元素用来显示计算机程序代码。一般可使用格式化<pre>来原样显示。
<address> : 该元素用来告诉浏览器这段内容是地址，例如你的联系地址等。
<img>: 它的执行方式，是在加载完其他元素后，才向服务器请求。
注释：1，通常大图片会影响网页显示速度，因此应通过其他图片处理软件合理缩放大图片和格式。
2，制作缩略图片并通过点击链接到其他网页显示大图片。<a href="xxx"> <img src="xxx" alt="xxx"> </a>
<div>: 是1个逻辑标签。如果想要组合一些简单的元素可以使用如下标签（看上去就像1个GroupBox一样）:
<fieldset>
<legend>Condiments</lefend>
......
<fieldset>
四，元素属性
1，<a> 元素揭秘
1）title 属性：当鼠标移动到连接上时，会弹出一个工具条显示title信息。
2）target 属性揭秘：_blank -->是特殊的，指定总是在一个新的空白页面打开。如果为对象起名为 coffee，则所有对象名为 coffee的链接都在相同窗体打开。
3）#锚名称：A, 首先在目标页面创建锚（<a id="first"></a>）
B, 当前页 <a href="index.html#first">,跳转到index页面的first目标锚处，针对页面比较长的页面。
4）<table>：border-collapse: collapse 可消除边框间距，将相邻的边框压缩合并。border-spacing：10px 30px （IE 6.0以上才支持）
五，默认网页如何工作
---- 如果浏览器从服务器获取1个目录而不是文件(http://www.starbuzzcoffee.com/images/)时，Web服务器会尝试在目录中定位默认文件。
通常默认文件名为“index.htm”或"default.htm"
六，CSS规则 (Eric Meyer CSS)
1, <link type="text/css" rel="stylesheet" href="xxx" media="screen, print, handlehled">
1），总是应用更具体的样式。
2），一个元素应用多个样式，则根据样式在样式表中的排序决定。
3），可继承。
4），选择符方式：P#id --> id的P段落
#id h2 --> id下的h2
#id>h2 --> id直接子元素h2
2，经验与误解
1）， 格式： font:font-style font-variant font-weight font-size/line-height font-family
font:italic bold small/1.6em Verdana, Helvetica, Arial, sans-serif
（Georgia, "Times New Roman", Times, serif;）字体系列
字体分：带衬线，不带衬线(容易阅读), 像印刷的，像手写，特殊的。
2) ，通常 body 字体使用1个标准单词，因各个浏览器默认大小有可能不相同。如：small, medium。
3），text-align: 必须使用在块元素上，指定所有内联元素的对齐方式(包括：image)。
4），line-height: A，使用em --> 指定所在的整个元素的font-size的倍数。
B，使用数字 --> 指定所在元素内的每个元素自己的font-size的倍数。
5），text-dicoration: underline overline 与 border-bottom:1px --> 1个仅指文本下划线，而border指边框下划线可一直延伸到网页末端。
6) ，<span>,<em>,<strong> 这些内联元素设置宽度只有排版时可以看到，而为内联元素添加边界只能看到左右空间。添加补白不影响其他内敛元素。
7），<a>根据状态来样式化： a:link {} a:visited{} a:hover{} a:focus{} a:active{}。
8），<div> 使用float属性，是指定元素漂移，相当于元素根本不在本来的位置，而其他元素会流到它的周围，如果是块元素将在漂移元素的下面。
9），当有2个前后<div1>,<div2>，如果想要分成平行的两栏：
A，将<div2>放置到<div1>前面-->漂移到右边，则<div1>则会上升到左侧(其实是在下面).(缺点：需要改变原来元素在页面中的位置)
B，保持页面元素顺序位置，将前1个<div1>漂移到左侧.
(缺点：思路是对的，不过显示上不是非常美观。
原因是：你要设置漂移元素的宽度，而设置了内容宽度，当页面随着浏览器的宽度重新调整时它的宽度不会改变，是固定了。
而一般侧重的边栏比较窄，如果太宽，看起来就很糟糕。所以如果你想让主内容区得到扩展，还需要考虑其他方法。)
10），clear: 不允许漂移元素在2边。
11），内联元素也是可以漂移的，最常见的就是漂移 <img>设置边框，补白，让文本流在周围。
3，布局
1），漂浮(float)： 使用float，clear。(唯一问题：导致内容放置顺序的改变。)
2），凝胶物： 将所有内容包含到<div>来创建冻结布局，通过 auto让边界扩展做成凝胶物布局。(解决了内容放置顺序问题，
但内容不会随浏览器大小变化而扩展。)
3），绝对(absolute)： 引出z-index概念，当使用left，top时它被指定为最近元素的相关位置。( 缺点不能使用clear，其他元素根据不知道它的存在。)
A，防止边栏重叠footer，可将footer设置为主内容区宽度。
B，如果把元素放置到页面的底部，需要将元素放置到可延伸到页面底部的元素中。否则将会是浏览器窗口的底部。
4），固定(fixed)：它的位置是相对于浏览器的，一旦放置就不会再变即使你滚动页面,或摇晃显示器。
5），相对(relative)：相对布局的元素任然是页面流中的一部分，只在浏览器显示之前偏移它的位置。
A，如果用绝对定位，则元素就不在流中，而是用相对定位，元素任然在流中它的位置保留，然后将它显示到实际要显示的地方。
（简单的说就是，元素任然占据了同样大的位置，但是画在了其他位置， 它是相对于自己原来本身的位置）
4，CSS更多选择符
一，伪类（将不同的元素放入临时的类中。）
1）p:first-letter{ font-size: 3em;}
2) p:first-line{font-style: italic;}
二，属性选择符(将来会支持属性的选择符)
1）img[width] { border: thin solid black;}
2) img[height="300"] { ... }
三，基于兄弟进行选择
1）h1+p{ ... } --> 首先写前面的元素，此选择紧跟 h1 元素的所有兄弟p元素。
四，复杂的选择符
1） 先写上下文 -------------> 元素 --> 伪类
div#greentea > blockquote p : first-letter { ...... }
五，框架
1）<frameset> 和 <frame>
<frameset rows="30%, * , 20%">
<frame name="header" src="header.html" />
<frame name="content" src="content.html" />
<frame name="footer" src="footer.html" />
</frameset>
以单个name为锚点，使用<a>元素在目标链接(target link)指定框架:
<a href="newpage.html" target="content" >new content</a>
2) <iframe>这个内联元素允许你在任何地方放置框架：
<iframe name="inlinecontent" src="newcontent.html" width="xxx" height="xxx" /> (newcontent.html页面创建框架)
注意：在含有框架布局中DOCTYPE认为是一种过渡文本：
HTML 4.01 用法：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"/>
XHTML 1.0 用法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"/>
6, 多媒体
<object classid="clsid:02BF25D5-8C47-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
height="200px"
width="300">
<param name="src" value="buckaroo.mov">
<param name="autoplay" value="true">
<param name="contoller" value="true">
<embed height="200px"
width="300px"
src="buckaroo.mov"
pluginspage="http://www.apple.com/quicktime/download/"
type="video/quicktime"
controller="true"
autoplay="true">
Sorry your browser does not support this movie type
</embed>
</object>
七，使用FTP来上传文件
pwd : 显示当前所在目录
put: 上传文件
get: 得到文件
命令格式：
ftp> ftp 服务器 (例如 ftp http://www.163.com/)
Connected to www.163.com
Name: ruijin
Password:******
230 User headfirst logged in.
ftp> dir
ftp> cd 目录
ftp> put index.html -->上传文件
ftp> dir
ftp> mkdir images --> 创建目录
ftp> cd images
ftp> bye --> 退出
八，网页工具
1，Macromedia Dreamweaver
2, Adobe GoLive
3, Microsoft FrontPage
4, GNU Emacs(open source)
九，转到搜索引擎
1，如果不想让自己的网站出现在搜索引擎列表中，请求搜索引擎忽略你的网页，但是不能保证。
<meta name="robots" content="noindex,nofollow" />
2，每个搜索引擎的排序原理不同，提高排序以下有一些技巧:
介绍：搜索引擎通过网页中的组合单词和词组进行搜索排序。所以，为了提高网页的排列并告知搜索引擎网页的相关内容，需要在<head>开始处添加
2个<meta>标签，1个用于列举关键字，另外一个提供内容的描述。关键字是1个描述网站的单词，例如：咖啡，旅行日志。
<meta name="description" content="This would be your description of what is on you page. Your most important keyword
phrases should appear in this description." />
<meta name="keywords" content="keyword 1, keyword 2, keyword 3, etc." />
浙公网安备 33010602011771号