html5css3网页设计教程探析.ppt

HTML 网 页 设 计;HTML网页设计教程;;Html的概念;如何创建一个HTML文档;HTML文档的基本结构;如何保存和编辑html文件;Meta标签;Title标签;; title无标题文档/title /head body /body /html;html的主体标签body;?body标签的属性;颜色的设定;;颜色的设定（2）;文字版面的编辑 ;段落标签p及属性;P标签的属性;居中对齐标签center;水平分隔线标签hr ;hr标签的属性;文字的设置;标题字标记;Hn的对齐属性;字体标记font;文字的修饰标记 ;;文字的修饰标记(2);特殊符号;注释标记;建立列表 ;在html页面中，合理的使用列表标签可以起到提纲和格式排序文件的作用。 列表分为两类，一是无序列表，一是有序列表。 无序列表就是项目各条列间并无顺序关系，纯粹只是利用条列来呈现资料而已，此种无序标签，在各条列前面均有一符号以示区隔。 有序条列就是指各条列之间是有顺序的，比如从1、2、3…一直延伸下去。 ;无序列表UL; body 颜色 ul type=“square” li红色 li绿色 li蓝色 li紫色 /ul /body /html; 格式1: ???????? UL　　　　　　　LI第一项　　　　　　　LI第二项　　　　　　　LI第三项　　　?? /UL ??? 格式2??????? ul　　??????? li type=disc第一项　　??????? li type=circle第二项　　??????? li type=square第三项??????? /ul;有序列表OL;?顺序编号的设置是由ol的两个属性type和start来完成的。 start=n 开始的数字，如start=2则编号从2开始，如果从1开始可以省略，或是在li标签中设定value＝“n”改变列表行项目的特定编号，例如li value=“7”。 type=用于编号的数字,字母等的类型，如type=a，则编号用英文字母。 为了使用这些属性，把它们放在ol或li的初始标签中。;type 类 型描 述 type=1表示列表项目用数字标号（1,2,3...）,默认值 type=A表示列表项目用大写字母标号（A,B,C...） type=a表示列表项目用小写字母标号（a,b,c...） type=I表示列表项目用大写罗马数字标号（Ⅰ,Ⅱ,Ⅲ...） type=i表示列表项目用小写罗马数字标号（i,ii,iii...）;定义列表DL/DT/DD;示例;建立超链接 ;关于超链接;;建立超链接的标签A和/A;建立目标窗口的属性;链接路径;路径可以分以下三种;1、绝对路径;2、相对路径;相对路径分三种情形 如果链接到同一目录下，则只需输入要链接文件的名称。 要链接到下级目录中的文件。需先输入目录名，然后加“\，再输入文件名。 要链接到上一级目录中文件，则先输入..\，再输入文件名。;相对路径的用法;相对路径的具体的链接方法;当前页面 被链接页面 超链接 2-1.html 3-1.html a href=3-1.html超链接元素/a 3-1.html 1-1.html a href=asm/1-1.html超链接元素/a sy.html 1-1.html a href=ssm/asm/1-1.html超链接元素/a 2-1.html sy.html a href=../sy.html超链接元素/a 1-1.html sy.html a href=../../sy.html超链接元素/a sy.html 2-1.html a href=ssm/2-1.html超链接元素/a;3、根路径;链接本地机器上的文件时，应该使用相对路径还是根路径？; 超链接的应用--书签链接 ? ;书签链接;在站点内部建立链接 ;外部链接 ;URL外链部接格式 ;链接其它站点; 发送E-mail;例;图片的插入;图片的格式;插入图片标记Img;Border：默认图片无边框。可用此属性设置边框线的宽度，单位为像素。 Vspace：图像的垂直间距。指图像垂直方向上和文字的距离。 Hspace：图像的水平间距。指图像水平方向上和文字的距离。 ;图片的超链接;图像映射;图像映射标记;图像映射例子;图像映射标记;图像映射标记;TABLE表格 ;本节主要内容;制作表格;基本语法;Table标签的属性 ;Table标签的属性;行标签tr的属性;单元格标签td（th)的属性;表格标题和表头标签;表头标签; Rowspan和Colspan的用法;表格实例;表单的设计;本节主要内容;表单