Html基础教程培训.ppt

Html基础教程及网页的基本修改培训文档编写人：曾文凭目录第二章：table表格的基本编写方式第二章：静态页面常用的构造方式第三章：网页的修改需要注意的地方第一章：html语言的基础代码HTML文件结构html.../htmlhead.../headbody.../body第一章：html语言的基础代码例子1：HTMLHEADtitle/title/HEADBODYHTML文件的正文写在这里....../BODY/HTMLhead.../head常用代码metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/title移动商城/titlelinktype=text/cssrel=stylesheethref=css/style.css在HTML文件中设置字符集信息。您在浏览主页时，最好自己在浏览器的选项菜单内选择相应的语言(languageencoding)。但是如果HTML文件里写明了设置，浏览器就会自动设置语言选项。尤其是主页里用到了字符实体(entities)，则该主页就应该写明字符集信息。否则，您在浏览该主页时，若未正确设置语言选项，显示将可能混乱。写网站名字的代码，可以方便搜索以及在网页的顶部出现网页相关信息。调用外部cs、js文件的代码，可以调用多个。第一章：html语言的基础代码Body的常用属性bodybgcolor=#000000background=image-URLstyle=overflow:auto“topmargin=0leftmargin=0rightmargin=0“bottommargin=0背景颜色背景图片页面滚动顶部页面空白(Margin)左边页面空白(Margin)右边页面空白(Margin)底部页面空白(Margin)第二章：静态页面常用的构造方式静态页面比较常用的构造方式有两种：一：表格（table）构造方式：优点：可以方便灵活的排版，表格可以把相互关联的信息元素集中定位，使浏览页面的人一目了然；缺点：表格层级深，可能导致页面展示效果慢；修改不够灵活。二：div+css构造方式：优点：缩减页面代码，提高页面浏览速度，样式控制，修改方便；缺点：技术难度较高，工作量比较大；样式修改，需要一定的基础，编写要求高，对浏览器的兼容也有要求。三：两者的对比：两种方式都是可取的，并不一定div就比table好，好的页面设计应该根据设计网站的难易程度以及网站的功能性等因素，决定选择哪款构造方式，至于哪种网站用哪种方式试个人的经验和用户要求而定，可以确定的是，不管是哪种构造方式，合理的布局、代码简洁、注释的齐全是构造页面的必须条件。第三章：table表格的基本编写方式在html文档中，表格是通过table、tr、td标签来完成的，如下表所示：标签描述table.../table用于定义一个表格开始和结束tr.../tr定义一行标签，一组行标签内可以建立多组由td标签所定义的单元格td.../td定义单元格标签，一组td标签将将建立一个单元格，td标签必须放在tr标签内在一个最基本的表格中，必须包含一组table标签，一组标签tr和一组td标签Html页面table基本元素构造实例：htmlheadtitle一个简单的表格/title/headbodytabletrtd第1行中的第1列/tdtd第1行中的第2列/tdtd第1行中的第3列/td/trtrtd第2行中的第1列/tdtd第2行中的第2列/tdtd第2行中的第3列/td/tr/table/body/htmltable表格开头tr行开头第一个单元格第二个单元格第三个单元格tr行结尾tr行开头第一个单元格第二个单元格第三个单元格tr行结尾table表格结尾第三章：table表格的基本编写方式表格table标签最常用的属性如下：属性描述width表格的宽度height表格的高度align:left.center.right表格在页面的水平摆放位置background表格的背景图片bgcolor表格的背景颜色border:0px表格的边框border-style:solid表格的边框样式border:1pxsolid#000000表格边框的宽度（以像素为单位）bordercolor:$000000边框颜色bordercolorlight表格边框明亮部分的颜色bordercolordark表格边框昏暗部分的颜色cellspacing单元格之间的间距cellpadding单元格内容与单元格边界之间的空白距离的大小第三章：table表格的基本编写方式htmlheadtitle无标题文档/title/headbodytableborder=10bordercolor=#006803border-style=“solid”align=centerbgcolor=#DDFFDD“width=500height=200bordercolorlight=#FFFFCC“bordercolordark=#660000“background=../../imge/b0024.gifcellspacing=2cellpadding=8trtd第1行中的第1列/tdtd第1行中的第2列/tdtd第1行中的第3列/td/trtrtd第2行中的第1列/tdtd第2行中的第2列/tdtd第2行中的第3列/td/tr/table/body/html第三章：table表格的基本编写方式第三章：table表格的基本编写方式tableborder=10bordercolor=#006803border-style=“solid”align=centerbgcolor=#DDFFDD“width=500height=200bordercolorlight=#FFFFCC“bordercolordark=#660000“background=../../imge/b0024.gifcellspacing=2cellpadding=8tablestyle=“border:10pxsolid#006803”align=centerbgcolor=#DDFFDD“width=500height=200bordercolorlight=#FFFFCC“bordercolordark=#660000“background=../../imge/b0024.gifcellspacing=2cellpadding=8我们一般习惯的写法如下：第三章：table表格的基本编写方式td是插入单元格的标签，必须嵌套在tr标签内。是成对出现的。td就是该单元格中的具体数据内容，属性设定如下：属性描述width/height单元格的宽和高，接受绝对值（如80）及相对值（如80%）。colspan单元格向右打通的栏数rowspan单元格向下打通的列数align单元格内字画等的摆放贴，位置（水平），可选值为：left,center,right。valign单元格内字画等的摆放贴位置（垂直），可选值为：top,middle,bottom。bgcolor单元格的底色bordercolor单元格边框颜色bordercolorlight单元格边框向光部分的颜色bordercolordark单元格边框背光部分的颜色background单元格背景图片第四章：网页的基本修改网页修改要注意的几点：1：copy或者移动，要注意代码的开头和结束要找对地方。要有头有尾，否则页面错乱。2：copy或者移动div要注意上级div的样式，样式的编写可能存在父子集的关系，所以，截取的时候要找到最上级的div。3：table页面tr\td的合并和拆分，要了解页面的构造。4：div里面的样式一定要齐全，不要随便挪动位置。5：不要在html页面中加空格等符号，要加的编程代码最好放在一个完全的div外面，不要插在中间。备注：原则上td有的属性tr都具备；不同的是，td的属性只是定义每个单个td，而tr却是定义tr内部的N个td，如果tr和td同时定义一个属性，将会td的属性为先。所有开发修改页面的时候要特别留意，要确定要修改的是哪个属性，每个地方的属性管理的地方也不一样。