Html基础教程文档.ppt

《Html基础教程文档.ppt》由会员分享，可在线阅读，更多相关《Html基础教程文档.ppt（12页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、Html基础教程及网页的基本修改培训文档编写人：曾文凭编写人：曾文凭目目 录录第二章：第二章：table表格的基本编写方式表格的基本编写方式第二章：第二章：静态页面常用的构造方式静态页面常用的构造方式第三章：第三章：网页的修改需要注意的地方网页的修改需要注意的地方第一章：第一章：html语言的基础代码语言的基础代码u HTML 文件结构文件结构.第一章：第一章：html语言的基础代码语言的基础代码例子例子1：HTML文件的正文写在这里.u.常用代码常用代码移动商城在HTML文件中设置字符集信息。您在浏览主页时，最好自己在浏览器的选项菜单内选择相应的语言(languageencoding)。但是

2、如果HTML文件里写明了设置，浏览器就会自动设置语言选项。尤其是主页里用到了字符实体(entities)，则该主页就应该写明字符集信息。否则，您在浏览该主页时，若未正确设置语言选项，显示将可能混乱。写网站名字的代码，可以方便搜索以及在网页的顶部出现网页相关信息。调用外部cs、js文件的代码，可以调用多个。第一章：第一章：html语言的基础代码语言的基础代码uBody的常用属性的常用属性背景颜色背景颜色背景图片背景图片页面滚动页面滚动顶部页面空白顶部页面空白(Margin)左边页面空白左边页面空白(Margin)右边页面空白右边页面空白(Margin)底部页面空白底部页面空白(Margin)第二

3、章：第二章：静态页面常用的构造方式静态页面常用的构造方式静态页面比较常用的构造方式有两种：静态页面比较常用的构造方式有两种：一：表格（一：表格（tabletable）构造方式：）构造方式：优点：可以方便灵活的排版，表格可以把相互关联的信息元素集中定位，使浏览页面的人一优点：可以方便灵活的排版，表格可以把相互关联的信息元素集中定位，使浏览页面的人一目了然；目了然；缺点：表格层级深，可能导致页面展示效果慢；修改不够灵活。缺点：表格层级深，可能导致页面展示效果慢；修改不够灵活。二：二：div+cssdiv+css构造方式：构造方式：优点：缩减页面代码，提高页面浏览速度，样式控制，修改方便；优点：缩减

4、页面代码，提高页面浏览速度，样式控制，修改方便；缺点：技术难度较高，工作量比较大；样式修改，需要一定的基础，编写要求高，对浏览器缺点：技术难度较高，工作量比较大；样式修改，需要一定的基础，编写要求高，对浏览器的兼容也有要求。的兼容也有要求。三：两者的对比：三：两者的对比：两种方式都是可取的，并不一定两种方式都是可取的，并不一定div就比就比table好，好的页面设计应该根据设计网站的难好，好的页面设计应该根据设计网站的难易程度以及网站的功能性等因素，决定选择哪款构造方式，至于哪种网站用哪种方式试个人易程度以及网站的功能性等因素，决定选择哪款构造方式，至于哪种网站用哪种方式试个人的经验和用户要求

5、而定，可以确定的是，的经验和用户要求而定，可以确定的是，不管是哪种构造方式，合理的布局、代码简洁、注不管是哪种构造方式，合理的布局、代码简洁、注释的齐全是构造页面的必须条件。释的齐全是构造页面的必须条件。第三章：第三章：table表格的基本编写方式表格的基本编写方式u在在html文档中，表格是通过文档中，表格是通过、标签来完成的，如下表所示：标签来完成的，如下表所示：标标 签签描描 述述.用于定义一个表格开始和结束.定义一行标签，一组行标签内可以建立多组由标签所定义的单元格.定义单元格标签，一组标签将将建立一个单元格，标签必须放在标签内在一个最基本的表格中，必须包含一组标签，一组标签和一组标签

6、Html页面页面table基本元素构造实例：基本元素构造实例：一个简单的表格第1行中的第1列第1行中的第2列第1行中的第3列第2行中的第1列第2行中的第2列第2行中的第3列table表格开头表格开头tr行开头行开头第一个单元格第一个单元格第二个单元格第二个单元格第三个单元格第三个单元格tr行结尾行结尾tr行开头行开头第一个单元格第一个单元格第二个单元格第二个单元格第三个单元格第三个单元格tr行结尾行结尾table表格结尾表格结尾第三章：第三章：table表格的基本编写方式表格的基本编写方式u表格表格标签最常用的属性如下：标签最常用的属性如下：属属 性性 描描 述述 width表格的宽度heig

7、ht表格的高度align:left.center.right表格在页面的水平摆放位置background表格的背景图片bgcolor表格的背景颜色border:0px表格的边框border-style:solid表格的边框样式border:1pxsolid#000000表格边框的宽度（以像素为单位）bordercolor:$000000边框颜色bordercolorlight表格边框明亮部分的颜色bordercolordark表格边框昏暗部分的颜色cellspacing单元格之间的间距cellpadding单元格内容与单元格边界之间的空白距离的大小第三章：第三章：table表格的基本编写方式表

8、格的基本编写方式无标题文档第1行中的第1列第1行中的第2列第1行中的第3列第2行中的第1列第2行中的第2列第2行中的第3列第三章：第三章：table表格的基本编写方式表格的基本编写方式第三章：第三章：table表格的基本编写方式表格的基本编写方式我们一般习惯的写法如下：我们一般习惯的写法如下：第三章：第三章：table表格的基本编写方式表格的基本编写方式是插入单元格的标签，必须嵌套在标签内。是成对出现的。就是该单元格中的具体数据内容，属性设定如下：属性描述width/height单元格的宽和高，接受绝对值（如80）及相对值（如80%）。colspan单元格向右打通的栏数rowspan单元格向下

9、打通的列数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都具备；不同的是，td的属性只是定义每个单个td，而tr却是定义tr内部的N个td，如果tr和td同时定义一个属性，将会td的属性为先。所有开发修改页面的时候要特别留意，要确定要修改的是哪个属性，每个地方的属性管理的地方也不一样。