《(附加一)HTML的设计和应用》由会员分享，可在线阅读，更多相关《(附加一)HTML的设计和应用（56页珍藏版）》请在金锄头文库上搜索。
1、附加一 HTML的设计与应用,预习检查,HTML的主体结构是怎样的？创建一个表格都需要哪些标签？form表单都有哪些表单项？,本章任务,1.网页制作概述 2.HTML语言的语法 3.HTML文件的主体结构 4.HTML文档头部元素 5.HTML文档主体标记 6.文字版面的编辑 7.创建图像和链接 8.使用XHTML表格 9.HTML框架结构 10.HTML表单设计,1.网页制作概述,1.1 HTML基础 1.2 简单HTML实例制作,1.1 HTML基础,HTML是用来制作网页的标记语言 HTML是Hypertext Markup Language的英文缩写,即超文本标记语言 HTML语言是一
2、种标记语言,不需要编译,直接由浏览器执行 HTML文件是一个文本文件,包含了一些HTML元素,标签等.HTML文件必须使用html或htm为文件名后缀 HTML是大小写不敏感的,HTML与html是一样的 HTML是由W3C的维护的,1.2 简单HTML实例制作, 本页面的标题 这是第一个HTML实例 本页显示黑色背景，白色的文本 ,2. HTML语言的语法,2.1 HTML标签和元素 2.2 HTML语法不区分大小写 2.3 HTML标签属性 2.4 HTML颜色值的设置 2.5 HTML文档注释 2.6 HTML代码格式 2.7 HTML字符实体,2.1 HTML标签,标签是HTML中最基
3、本单位,也是最重要组成部分。 通常要用两个角括号括起来:“”。 标签都是闭合的（两种形式：成对与不成对） 标签是大小写无关的,跟表示意思是一样的，标准推荐使用小写，这样符合XHTML标准,内容 如： 即分起始和结束如： ,html - 定义html文档 body - 定义文档体body head - 定义文档头信息head title - 定义文档的标题title a - html链接标签a img - html图像标签img div - html层div table - 定义html表格table tr - 定义表格行tr td - 定义表格列td form - html表单标签form i
4、nput - 定义表单的输入域input,常用HTML标签,2.2 HTML语法不区分字母大小写,HTML标签名和属性都是不区分大小写的，例如、或都是定义相同的标记，但推荐全部使用小写字母书写。,2.3 HTML标签属性,HTML属性一般都出现在HTML标签中, 是HTML标签的一部分。 标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中。 标签可以拥有多个属性。 属性由属性名和值成对出现。 语法：示例：,兄弟连网址,2.4 HTML颜色值的设置,大多数的浏览器都支持颜色名集合，颜色值是一个关键字或一个RGB格式的数字，在网页中用得很多。 主要有以下两种： 使用英文单词作为颜色值：如
5、：red、green、blue、black、maroon、whilte、yellow 可以使六位十六进制的颜色值：如：#000000 - #ffffff 其中前两位表示红色，中间两位表示绿色，最后两位表示蓝色。,2.5 HTML注释,HTML注释,我们经常要在一些代码旁做一些HTML注释,这样做的好处很多,比如:方便查找,方便比对,方便项目组里的其它程序员了解你的代码,而且可以方便以后你对自己代码的理解与修改等等.,语法：,2.6 HTML代码格式,任何回车或空格在源代码中都是不起作用，所以在编写HTML代码时，都可以使用回车或者空格进行代码排版，这样可以使代码清晰，也便于团队合作。必须保持严
6、格的缩进规则，以“Tab”键为准。,2.7 HTML字符实体,特殊字符（实体）：用数值码和引用实体两种方式表示 例如：在什么情况下需要用&qout表示？,如果属性值中同时有单引号和双引号，该如何处理呢？假设标签的title属性值为zx”x, 那么， 不使用引号的写法为： 使用单引号的写法为：有错 使用双引号的写法为：有错 特殊字符的写法为：正确 思考题： 人们为什么要对&、字符安排一个HTML编码文本代码呢？,3 HTML文档的主体结构,我的第一个网页欢迎来到LAMP兄弟连！ ,网页标题,网页内容，可以是文本、图像等,头部, 主 体 部,HTML网页,文档结构中的标签,4. HTML文档头部元
7、素,head标签代表HTML文档的头信息，以开始,结束。 头(head)包含了当前文档的一些信息,例如标题信息,meta信息等,正常情况下头信息是不会显示在HTML文档中的. head元素包含的常用标签:,title标签 - 代表HTML文档的标题 base标签 - 将相对URL转换为完整的绝对URL meta标签 - 用于定义文件信息的名称、内容等信息 link标签 - 当在文档中声明使用外接资源(如CSS)时使用此标签 style标签 - 在文档中声明样式时使用此标签 script标签 - 在文档中使用JavaScript脚本,LAMP兄弟连-易第优教育|PHP|PHP培训|LAMP|LA
8、MP培训bodymargin:0px;padding:0px;background:red;color:green;,5. HTML文档主体标记,body标签的常用属性,6. 文字版面的编辑,6.1 格式标签 6.2 文本标签,6.1 格式标签,格式标记测试网页一段文本 这行文本在网页中居中显示 上边 左边 右边 下边 无顺序列表： 第一项 第二项 第三项 有顺序列表： 第一项 第二项 第三项 ,6.2 文本标签,文本标记测试网页 使用标记输出大型的字体,7. 创建图像和链接,7.1 插入图片 7.2 建立锚点和超链接,7.1 插入图片,img标签 - 代表HTML图像 img标签是单独出现的
9、：， img是image(图像)的缩写 常用属性: alt - 代表图像的替代文字 src - 代表一个图像源(就是图像的位置) border 代表图片边框的宽度 height - 代表一个图像的高度 width - 代表一个图像的宽度 设计网页时经常使用的图片有三种格式： GIF - 最多支持256色,支持透明,支持多帧动画显示效果. JPEG - 支持多种颜色,可以有很高的压缩比,使用了有损压缩,不支持透明,不支持动画效果. PNG - 是一种新的图片技术,可以表现品质比较高的图片,使用了无损压缩,支持透明,不支持动画.,鼠标移到图像上，出现的提示性文字,图像的位置,图像的宽度,图像的高度
10、,为图像添加的提示性文字,map标签 - 定义图像点击区域的集合 map标签是成对出现的,即,而且必须配合area标签使用。 map标签中name与id属性指定的值必须与定义图像点击区中图像(img)的usemap属性指定的值一致。 属性 id - 定义map的名称。 name - 定义map的名称。 area标签 - 定义图像点击区域, area标签是单独出现的, area标签必须使用在map标签中，而且必须配合img标签使用。 属性 accesskey - 链接的快捷键访问方式 alt - 图像的提示文字 coords - 定义可点击区域图形的坐标 href - HTML链接源的URL n
11、ohref - 图像点击排除的区域，当不使用href时应使用nohref shape - 可点击区域的形状 tabindex - 使用“Tab“键的遍历顺序 target - 链接目标,与标签应用实例,rect定义一个矩形区域，coords属性设置值为矩形的左上角、右下角的坐标,poly定义一个多边形区域，coords属性设置值为多边形各顶点的坐标值,circle定义一个圆形区域，coords属性设置值分别为圆心的横、纵坐标，第三个参数为半径,7.2 建立锚点和超链接,a标签 - 代表HTML链接 a,是anchor(锚)的第一个字母，a标签是成对出现的,即。 常用属性： href - 代表一
12、个url链接源(就是链接到什么地方) url除了是网页外,还可以是其它的文件(如文本文件,pdf文件等)。 url还可以是指向HTML文件中的一个位置。 url还可以是Email地址。 target - 用来指出哪个窗口或框架应该被此链接打开 target=_blank： 将链接内容在新的浏览窗口中打开。 target=_parent：将链接的内容，当成文件的上一个画面。 target=_self： 将链接的内容，显示在目前的窗口中。 target=_top：这个参数可以解决新内容被旧框窗包围的困扰，使用这参数，会将整个画面重新显示成链接的画面内容。 title - 代表链接的附加提示信息 链
13、接语法：,显示的文字,定位网页内部的链接（锚点链接）： 用定义，例如：第一部分，使用跳转到第一部分超链接就可以定位到网页中的“第一部分”这个位置。 注意：与的区别 URL(Uniform Resource Locator)的基本组成： 协议名:/主机名:端口号/资源名。 例如： http:/:8080/index.html 为URL指定参数 例如：http:/ 带有定位标记的URL 例如：http:/ 网站链接：PHP专家 电子邮件链接：写信给我 ftp链接： 下载档案 有三种类型的链接路径： 绝对路径 （例如 http:/ 文档相对路径 （例如 adver/contents.html） 站点
14、根目录相对路径 （例如 /support/app/customer.html，其中“/”表示根目录）,链接路径,文档相对链接alex/blue.html,WWW,home.html,根文件夹相对链接 /photo/alex/blue.html,绝对链接http:/ 使用HTML表格,8.1 表格标签常见标签 8.2 表格标签常见属性 8.3 综合示例,8.1 表格中常用标签,列,行,单元格,表格的基本结构：,表格首行为表头,表格的基本语法,单元格内容 ,border用来设置表格边框尺寸大小,8.2 表格标签常见属性,table标签属性: width - 代表表格的宽度 height - 代表表
15、格的高度 border - 代表表格边框(此属性应该使用CSS实现) cellspacing - 代表表格边框与表格内容填充的距离,也是内容填充之间的距离(此属性应该使用CSS实现) cellpadding - 代表内容填充的宽度(此属性应该使用CSS实现) th、td标签属性： width与height 代表宽度与高度 colspan - 一行跨越多列 rowspan - 一列跨越多行 align - 代表水平对齐方式(left(左对齐) | center(居中对齐) | right(右对齐) | justify)(此属性应该使用CSS实现) valign - 代表垂直对齐方式(top(顶部对齐) | middle(中部对齐) | bottom(下部对齐) | baseline(基线对齐)(此属性应该使用CSS实现) tr标签属性： align与valign具体解释详见上面。,
