Html基础教程培训.ppt

Html基础教程及网页的基本修改 培训文档,编写人：曾文凭,目 录,第二章：table表格的基本编写方式,第二章：静态页面常用的构造方式,第三章：网页的修改需要注意的地方,第一章：html语言的基础代码,HTML 文件结构 . . .,第一章：html语言的基础代码,例子1： HTML 文件的正文写在这里. . ,.常用代码 移动商城 ,在 HTML 文件中设置 字符集信息。 您在浏览主页时，最好自己在浏览器的选项菜单内选择相应的语言(language encoding)。 但是如果 HTML 文件里写明了设置，浏览器就会自动设置语言选项。尤其是主页里用到了字符实体(entities)，则该主页就应该写明字符集信息。否则，您在浏览该主页时，若未正确设置语言选项，显示将可能混乱。,写网站名字的代码，可以方便搜索以及在网页的顶部出现网页相关信息。,调用外部cs、js文件的代码，可以调用多个。,第一章：html语言的基础代码,Body的常用属性 ,背景颜色 背景图片 页面滚动 顶部页面空白(Margin) 左边页面空白(Margin) 右边页面空白(Margin) 底部页面空白(Margin),第二章：静态页面常用的构造方式,静态页面比较常用的构造方式有两种： 一：表格（table）构造方式： 优点：可以方便灵活的排版，表格可以把相互关联的信息元素集中定位，使浏览页面的人一目了然； 缺点：表格层级深，可能导致页面展示效果慢；修改不够灵活。 二：div+css构造方式： 优点：缩减页面代码，提高页面浏览速度，样式控制，修改方便； 缺点：技术难度较高，工作量比较大；样式修改，需要一定的基础，编写要求高，对浏览器的兼容也有要求。 三：两者的对比： 两种方式都是可取的，并不一定div就比table好，好的页面设计应该根据设计网站的难易程度以及网站的功能性等因素，决定选择哪款构造方式，至于哪种网站用哪种方式试个人的经验和用户要求而定，可以确定的是，不管是哪种构造方式，合理的布局、代码简洁、注释的齐全是构造页面的必须条件。,第三章： table表格的基本编写方式,在html文档中，表格是通过、标签来完成的，如下表所示：,在一个最基本的表格中，必须包含一组标签，一组标签和一组标签,Html页面table基本元素构造实例： 一个简单的表格 第1行中的第1列 第1行中的第2列 第1行中的第3列 第2行中的第1列 第2行中的第2列 第2行中的第3列 ,table表格开头 tr行开头 第一个单元格 第二个单元格 第三个单元格 tr行结尾 tr行开头 第一个单元格 第二个单元格 第三个单元格 tr行结尾 table表格结尾,第三章： table表格的基本编写方式,表格标签最常用的属性如下： 属 性 描 述 width 表格的宽度 height 表格的高度 align:left.center.right 表格在页面的水平摆放位置 background 表格的背景图片 bgcolor 表格的背景颜色 border:0px 表格的边框 border-style:solid 表格的边框样式 border:1px solid #000000 表格边框的宽度（以像素为单位） bordercolor:$000000 边框颜色 bordercolorlight 表格边框明亮部分的颜色 bordercolordark 表格边框昏暗部分的颜色 cellspacing 单元格之间的间距 cellpadding 单元格内容与单元格边界之间的空白距离的大小,第三章： table表格的基本编写方式, 无标题文档 第1行中的第1列 第1行中的第2列 第1行中的第3列 第2行中的第1列 第2行中的第2列 第2行中的第3列 ,第三章： table表格的基本编写方式,第三章： table表格的基本编写方式,我们一般习惯的写法如下：,第三章： table表格的基本编写方式,是插入单元格的标签，必须嵌套在标签内。是成对出现的。就是该单元格中的具体数据内容，属性设定如下： 属 性 描 述 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页面trtd的合并和拆分，要了解页面的构造。 4：div里面的样式一定要齐全，不要随便挪动位置。 5：不要在html页面中加空格等符号，要加的编程代码最好放在一个完全的div外面，不要插在中间。,备注：原则上td有的属性tr