HTML学习心得整理.docx

IT Juck HTML 知识整理开山篇:F 何为传输协议?n 简单的说 计算机的通信(网络)规则就是一种协议.n FTP文件传输协议n SMTP邮件传送协议n HTTP用于网页与网页间的访问协议F 语言编码接下来我们还会发现这样一句话：它标示文档的语言编码。就像我们平时所说的汉语、英语一样。这里的gb2312告诉浏览器，本文档采用简体中文编码；还有一种常用的编码是UTF-8编码，它是国际通用的编码。不管我们采用哪种编码，有一点就是包含的css样式表和其它文件也必须和本文档的编码一样，要不就会出现乱码。F HTML开发工具1. 记事本2. Editplus3. Frontpage4. Dreamweaver初学者推荐使用,该软件有提示功能 下载地址: /cfusion/tdrc/index.cfm?product=dreamweaver&loc=cn5. Zend Studio6. MyEclipse等其他IDE ，这里就不在介绍了,有兴趣可到网上搜索 网页三剑客u 网页制作三剑客是Macromedia 公司开发的三款开发工具u Flash ：用于做动画u Fireworks ：用于图片处理u Dreamweaver ：用于拼接网页,代码编程附加内容：建站帮助工具推荐抓包工具: HttpWatch Professional （httpwatch.exe）Host: 值(这里显示的是IP地址)FSCapture.exe 截图工具,可以用来测页面宽高,图片尺寸等常用功能F HTML是什么? HTML表示: 超文本标记语言（Hyper Text Markup Language） HTML文件必须有htm 或 html扩展名 HTML文件可以用一个简单的文本编辑器创建F HTML文档类型当我们新建HTML格式文档时，查看源代码，会发现代码最上部有如下代码：译：表示本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。F 文档类型标记分五个部分 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文档 网页标题 Hello Word 我的第一个网页! 首先复制上面的代码在电脑桌面鼠标右键创建一个文本文件.txt,双击打开把代码粘贴到里面保存关闭鼠标右键txt文件重命名为 HelloWord.html 点击回车F HTML标记解释 HTML的标记大多都是成对出现的,分开始和关闭如: 每个关闭标记都是以: 斜杠加标记关闭的 表示:这是一个HTML类型的文件 表示:告诉浏览器这是HTML文档的开始 表示:该标记是HTML头信息在浏览器标题区域显示 标题表示:该标记是文档标题显示在浏览器窗口的标题栏 表示:关闭HTML 头信息区域 网页正文内容 表示:该标记之间的内容会显示在浏览器中 表示:记告诉浏览器这是HTML文档的终止F head 区属性 地址栏网站标志图标注：图片的名字最好是: favicon.ico Meta 标记必须要写在Head 头标记区域里 自动跳转 浏览器兼容问题解决告诉浏览器使用IE7 页面编码类型 GB2312中国 UTF-8国际 Ansi美国国家标准协会,它可以根据操作系统变换F body 标签属性 bgcolor=red页面背景颜色 background=图片.jpg页面背景图片 text=#000FFF页面中所有非连接字体颜色 link=”颜色”页面中所有连接字体颜色 alink=” 颜色”页面中正要被点击的连接字体颜色 vlink=” 颜色”页面中所有点击过的连接字体颜色 leftmargin=”0” 设定网页与浏览器窗口左边沿的间隙,单位为像素 topmargin=”0” 设定网页与浏览器窗口上边沿的间隙,单位为像素F table 表格标签属性 table表示定义一个HTML表格 创建一个无边框的表格 cellpadding=10该属性是设置表格的单元格的内边距 cellspacing=10该属性是设置表格的单元格间距 width=10控制表格宽度 height=10控制表格高度 rowspan=2合并行(写在标签) colspan=2合并列(格 写在标签里) border=1该属性可指定边框大小,数值越大边框线越粗 bordercolor=”边框线的颜色 bordercolorright=”颜色值”亮边框属性 bordercolordark=”颜色值”暗边框属性 表格内的行 表格开头格内内容自动到中间位置字体加粗 表示行内的单元格 表格的标题没有任何边框的表格顶部横向控制表格方向align=leftleft左 right右 center中间竖向控制表格方向valign=toptop上bottom下middle中间frame属性来控制表格周围的边框frame=borderframe= boxframe= void frame= aboveframe= belowframe= hsidesframe= vsidesframe= lhs frame= rhs表格嵌套例子如下:我是被嵌套在里面的 另一个表格F HTML 字符实体编码<| & |"|  | 空格 | 方形空格×|x乘号÷|除号©|版权符号F HTML 超链接锚标签（）来创建一个连接到其他文件的链接target= _blank在新窗口打开链接地址_self本窗口打开新链接_top假如你的页面在框架中,如何跳出框架_parent父窗口还有一个是在框架中使用,值为: 框架的name属性值(名字)点我到另一个页面点击图片发邮件邮件链接2 完整版邮件链接下面是命名锚的语法： 我的名字叫label 在一个页面链接到另一个页面的指定位置链接地址后面加 #锚名字 即可.点我到label位置一个链接到本页面中某章节的命名锚是这样写的：点我到 label的位置.点击位置我是 label链接的位置Hidefocus=”true”使链接点击时是去血线 IEF HTML img图片图片的大小只需要指定 宽度,图片就会自动按比例缩放alt 属性值是由用户定义的, 浏览器装载图像失败的时候告诉用户所丢失的信息F HTML 字体控制字体加粗斜体斜体斜体字体加下划线删除线小一点上标签下标签黑体加粗体原字体字号上加一级,多个标记叠加原大小字体减一级删除线字体控制 属性如下:color=字体颜色size=字体大小注: 值可以取 17 最大,再加需要 +数字 数字face=字体类型F HTML 格式标签标题H17强制不换行文本原格式输出 被括起来的在页面中原样显示内容向右缩进F HTML marquee 移动标记(跑马灯) behavior=”属性值”该属性设置滚动方式 值如下: scroll 循环滚动(默认值) slide 滚动一次 alternate 来回交替滚动 direction=” 属性值”该属性控制滚动方向 参数如下: up上移动 down下移动 left左移动 right右移动 Scrollamount=”3”滚动速度 Scrolldelay=”200”该属性设置滚动间隔, 滚动一直停留时间,再次滚动 Loop=”50”设置滚动次数从右往左走从左往右走左右来回走从右往左走一次我上下来回走从下往上走鼠标放到停止F HTML 热点区域(怎样产生图像地图)首先必须定义出图像上的各热点区域的形状、位置坐标、及其指向的url地,这个过程叫图像热点映射需要map标记进行说明Name 属性为该图像热点映射指定了一个名称图像热点映射中的各个区域用标记说明,标记的格式为:coords 属性与 shape 属性配合使用，来规定区域的尺寸、形状和位置。X 是水平方向 , Y 是 垂直方向shape 属性的值:rect矩形 coords=” x1,y1,x2,y2” 则该值规定矩形左上角和右下角的坐标/矩形 x1, y1左上角, x2, y2 右下角circ圆形 coords=”x,y,radius” coords=”80,100,60” 前俩圆心做表,半径poly多边形 coords=”x1,y1,x2,y2,.,xn,yn” 则该值规定多边形各边的坐标。如果第一个坐标和最后一个坐标不一致，那么为了关闭多边形，浏览器必须添加最后一对坐标href 属性也可以用nohref替换,表示在该区域单击鼠标无效.标签还可以有一个target 属性,用来指明浏览器在哪个窗口或帧中显示href属性所指向的网页资源定好了图像热点映射后,接着就要在图像标签中增加一个名为usemap的属性设置,usemap属性指定该图像被用做图像地图,其设置值为所使用的图像热点映射名称,格式为:在标签的name属性设置值前多加一个#字符实例:F HTML 线包至健康信息正文正文F HTML列表一个无序列表 Coffee Tea 效果图:无序列不同类型type=disc实心圆点type=circle空心圆点效果图:type=square方形有序列表 Coffee Tea MilkType=”1” 用什么来表示 start=”从第几个数开始排序”效果图:type=A效果图:type=a效果图:type=I效果图:type=i效果图:目录列表目录列表菜单列表菜单列表定义列表定义列表标题简介HTML form表单最常用的表单标记是 input的类型用type属性指定Target=”windowname”action=URLaction属性定义了所要提交到的目标文件method=传输方式提交(传输)表单数据这写的什么方式接受用什么方式接POST隐士提交GET显示提交(会在地址栏体现传输的数据)REQUEST不考虑提交方式size=10控制框的外观大小maxlength=10控制框内可以输入多少个数据rows=15文本框的 高度cols=60文本框的 宽度checked默认选项readonly=true不能更改文本框的数据disabled限制文本框被修改推荐unselectable=on不能点击文本框隐藏域文本框密码框单选框 名字一样多选框提交按钮提交按钮重置按钮文件上载对象下拉列表选项属性: multiole列表项选择样式selected=slected设置默认选项内容文本域Cols 行,rows 列Wrap 字符显示方式=”on|off 字符不会绕virtual文本在区域的右边界自动回绕到下一行,但是中间没有回车符,发送时仍然是一行HTML 框架 frameset1.标记定义了如何将窗口拆分成框架2.每个frameset标签定义了一组行和列3.行/列的值指明了每个行/列在屏幕上所占的大小Frameset 属性:cols=”50%,50%” 横向分割页面的布局rows=”注意: 作为frameset 的主文件,不可以有 bodyF frame标记说明: 标记定义了框架中放入什么文件 frameborder=”yes/no”该属性是设置隐藏边框 framespacing=”边框宽度” bordercolor=”边框颜色” noresize=noresize禁止边框移动 Scrolling=”yes/no/auto” 控制滚动条的显示隐藏水平分栏点击我在 b.htm框架中替换页面像这样垂直分栏rows=”框架窗口的宽度”混合框架：导航框架：F 内联框架(浮动窗口)：iframe F Iframe属性 Width=”宽度”框架的宽度 Height=”高度” 框架的高度 frameborder=1 框架的边框线 scrolling=no隐藏下拉条在内