IT Juck HTML知识整理开山篇:☞何为传输协议?⏹简单的说计算机的通信(网络)规则就是一种协议.⏹FTP 文件传输协议⏹SMTP 邮件传送协议⏹HTTP 用于网页与网页间的访问协议☞语言编码接下来我们还会发现这样一句话:它标示文档的语言编码。
就像我们平时所说的汉语、英语一样。
这里的gb2312告诉浏览器,本文档采用简体中文编码;还有一种常用的编码是UTF-8编码,它是国际通用的编码。
不管我们采用哪种编码,有一点就是包含的css样式表和其它文件也必须和本文档的编码一样,要不就会出现乱码。
☞HTML开发工具1.记事本2.Editplus3.Frontpage4.Dreamweaver [初学者推荐使用,该软件有提示功能]下载地址:/cfusion/tdrc/index.cfm?product=dreamweaver& loc=cn5.Zend Studio6.MyEclipse等其他IDE ,这里就不在介绍了,有兴趣可到网上搜索网页三剑客◆网页制作三剑客是Macromedia 公司开发的三款开发工具◆Flash :用于做动画◆Fireworks :用于图片处理◆Dreamweaver :用于拼接网页,代码编程☞HTML是什么?HTML表示: 超文本标记语言(Hyper Text Markup Language)HTML文件必须有htm 或 html扩展名HTML文件可以用一个简单的文本编辑器创建☞HTML文档类型当我们新建HTML格式文档时,查看源代码,会发现代码最上部有如下代码:译:表示本文档是过渡类型,另外还有框架和严格类型,目前一般都采用过渡类型,因为浏览器对XHTML的解析比较宽松,允许使用HTML4.01中的标签,但必须符合XHTML 的语法。
许多朋友在制作页面时,往往喜欢把这句删除掉,在这里建议大家一定要保留这句话,删除它后可能引起某些样式表失效或其它意想不到的问题。
☞文档类型标记分五个部分DOCTYPE文档类型定义标签(还可以指定别的类型文件)HTML指定文档类型的名称PUBLIC说明当前文件所依据的文件是任何人都可以访问的还是局部访问的 version name 指定该HTML版本的标识名称。
例如HTML 4.0的标识名称为:"-//W3C//DTD HTML 4.01 Transitional//EN"版本名称version name.被改进的iso用+号开头,没有被改动过的用–号开头,最后的两个斜号是DTD文档的语言种类url 指定该HTML 语言的定义规范文件在Internet上的位置,例如:/TR/html4/loose.dtd。
loose.dtd说明:当前文档可能含HTML4.01严格标准定义的元素及不含的元素 strict.dtd 说明:当前文档所以的HTML 元素都是严格符合标准的frameset.dta 说明:除了以上的俩个共同点还有可能包含一些框架的元素 HTML 4.01中如果没有下面这个文档类型定义语句是一个无效的HTML文件XHTML 1.0文档类型创建一个HelloWord的XHTML 1.0文档<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><HTML><head><title> 网页标题 </title></head><body>Hello Word 我的第一个网页!</body></HTML>首先复制上面的代码在电脑桌面鼠标右键创建一个文本文件.txt,双击打开把代码粘贴到里面保存关闭鼠标右键txt文件重命名为 HelloWord.html [点击回车]☞HTML标记解释HTML的标记大多都是成对出现的,分开始和关闭如:<html></html>每个关闭标记都是以:</标记> 斜杠加标记关闭的<!DOCTYPE html> 表示:这是一个HTML类型的文件<html> 表示:告诉浏览器这是HTML文档的开始<head> [表示:该标记是HTML头信息在浏览器标题区域显示] <title>标题</title>[表示:该标记是文档标题显示在浏览器窗口的标题栏]</head> 表示:关闭HTML 头信息区域<body> 网页正文内容 </body> 表示:该标记之间的内容会显示在浏览器中 </html> 表示:记告诉浏览器这是HTML文档的终止☞head 区属性<link rel="SHORTCUT ICON" href="favicon.ico"> [地址栏网站标志图标]注:图片的名字最好是: favicon.icoMeta 标记必须要写在Head 头标记区域里<meta http-equiv="refresh" content="秒数; url=页面路径"> [自动跳转] 浏览器兼容问题解决[告诉浏览器使用IE7]<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />页面编码类型<mate http-equiv="Content-Type"content="text/html;charset=UTF-8 "> GB2312 中国UTF-8 国际Ansi 美国国家标准协会,它可以根据操作系统变换☞body 标签属性bgcolor="red" [页面背景颜色]background="图片.jpg" [页面背景图片]text="#000FFF" [页面中所有非连接字体颜色]link=”颜色”[页面中所有连接字体颜色]alink=”颜色”[页面中正要被点击的连接字体颜色]vlink=”颜色”[页面中所有点击过的连接字体颜色]leftmargin=”0”[设定网页与浏览器窗口左边沿的间隙,单位为像素] topmargin=”0”[设定网页与浏览器窗口上边沿的间隙,单位为像素]☞table 表格标签属性table表示定义一个HTML表格<table></table> [创建一个无边框的表格]cellpadding="10" [该属性是设置表格的单元格的内边距]cellspacing="10" [该属性是设置表格的单元格间距]width="10" [控制表格宽度]height="10" [控制表格高度]rowspan="2" [合并行(写在<td>标签)]colspan="2" [合并列(格写在<td>标签里)]border="1" [该属性可指定边框大小,数值越大边框线越粗] bordercolor=””[边框线的颜色]bordercolorright=”颜色值”[亮边框属性]bordercolordark=”颜色值”[暗边框属性]<tr></tr> [表格内的行]<th></th> [表格开头格内内容自动到中间位置字体加粗] <td></td> [表示行内的单元格]<caption>表格的标题</caption> [没有任何边框的表格顶部]横向控制表格方向align="left" left [左] right [右] center [中间]竖向控制表格方向valign="top" top [上] bottom [下] middle [中间]frame属性来控制表格周围的边框frame="border" frame=" box" frame=" void" frame=" above"frame=" below" frame=" hsides" frame=" vsides" frame=" lhs"frame=" rhs"表格嵌套例子如下:<table><tr><td><table><tr><td>我是被嵌套在里面的另一个表格</td></tr></table></td></tr></table>☞HTML 字符实体编码< | < <> | > >{ {& | & &" | " "' ‘ |   空格  |   方形空格× | × x [乘号]÷| ÷ ÷[除号]© | © 版权符号☞HTML 超链接<a> [锚标签(<a>)来创建一个连接到其他文件的链接]target=" "_blank [在新窗口打开链接地址]_self [本窗口打开新链接]_top [假如你的页面在框架中,如何跳出框架]_parent [父窗口]还有一个是在框架中使用,值为: 框架的name属性值(名字)<a href="页面地址" target="_blank">点我到另一个页面</a><a href="页面地址"><img border="0" src=".\images\next.gif">点击图片</a><a href="mailto:someone@?subject=Hello%20again">发邮件</a><ahref="mailto:someone@?cc=someoneelse@&bcc=a ndsomeoneelse2@&subject=Summer%20Party&body=You%20are%20in vited%20to%20a%20big%20summer%20party!">邮件链接2</a> [完整版邮件链接] 下面是命名锚的语法:<a name="label"> 我的名字叫label </a>在一个页面链接到另一个页面的指定位置链接地址后面加 #锚名字即可.<a name="/links.asp#label">点我到label位置</a>一个链接到本页面中某章节的命名锚是这样写的:<a href="#label">点我到 label的位置.</a> [点击位置]<a name="label">我是 label</a> [链接的位置]Hidefocus=”true”[使链接点击时是去血线 IE]☞HTML img图片图片的大小只需要指定宽度,图片就会自动按比例缩放<img src="url.jpg" width="图宽" height="图高" border="0" alt=" " vspace=”垂直边距”hspace=”水平边距” align=”top;middle;bottom”/>alt 属性值是由用户定义的, 浏览器装载图像失败的时候告诉用户所丢失的信息☞HTML 字体控制<b></b> [字体加粗]<i></i> [斜体]<em>斜体</em> [斜体]<u></u> [字体加下划线]<s></s> [删除线]<tt></tt> [小一点]<sup>上标签</sup><sub>下标签</sub><strong>黑体加粗体</strong><big>原字体字号上加一级,多个标记叠加</big><small>原大小字体减一级</small><strike>删除线</strike><font>字体控制</font> 属性如下:color="字体颜色"size="字体大小" 注: 值可以取 1~7 最大,再加需要 +数字–数字face="字体类型"☞HTML 格式标签<h1 aling=””>标题</h1> H1~7<nobr>强制不换行</nobr><pre>文本原格式输出</pre><xpm><input type="text"name="yhm"></xpm> 被括起来的在页面中原样显示<blockquote>内容向右缩进</blockquot>☞HTML marquee 移动标记(跑马灯)<marquee></marquee>behavior=”属性值”[该属性设置滚动方式] 值如下:✧scroll 循环滚动(默认值)✧slide 滚动一次✧alternate 来回交替滚动direction=”属性值”[该属性控制滚动方向] 参数如下:✧up上移动✧down下移动✧left左移动✧right右移动Scrollamount=”3” [滚动速度]Scrolldelay=”200”[该属性设置滚动间隔, 滚动一直停留时间,再次滚动] Loop=”50”[设置滚动次数]<marquee direction="left" scrollamount="10">从右往左走</marquee><marquee direction="right" scrollamount="10">从左往右走</marquee><marquee behavior="alternate" scrollamount="10">左右来回走</marquee> <marquee direction="left" loop="1" behavior="alternate"scrollamount='10'>从右往左走一次</marquee><marquee direction="up" behavior="alternate" height="50"scrollamount='10'>我上下来回走</marquee><marquee onmouseover="this.stop()" onmouseout="this.start()"scrollamount="5" scrollDelay="10" direction="up" height="100">从下往上走鼠标放到停止</marquee>☞HTML 热点区域(怎样产生图像地图)首先必须定义出图像上的各热点区域的形状、位置坐标、及其指向的url地,这个过程叫图像热点映射需要map标记进行说明<map name=”mapname”></map>Name 属性为该图像热点映射指定了一个名称图像热点映射中的各个区域用<area>标记说明,<area>标记的格式为:<area shape=”形状” coords=”坐标” href=”url”>coords 属性与 shape 属性配合使用,来规定区域的尺寸、形状和位置。