《html设置文本和图像(web编程基础)》由会员分享，可在线阅读，更多相关《html设置文本和图像(web编程基础)（50页珍藏版）》请在金锄头文库上搜索。
1、信息工程学院 web编程基础,用HTML设置文本、图像、列表 教师：刘欣欣 年级： 2014级 时间： 2015-2016学年第一学期 联系方式：621422、13777131290 办公室：21号楼303,3,知识回顾,什么是HMTL？ HTML（Hypertext Markup Language）是一种SGML (Standard for General Markup Language)定义下的一个描述性的语言，全称是超文本标记语言 是一种国际化标准语言，它用于在 Web上发布超文本信息，是一种基于SGML，公开的资源描述格式 不是程序语言，只是标记语言，设计者只需要掌握各类标记的使用方法
2、即可。,4,(X)HTML,什么是XHTML？ XHTML是The Extensible Hypertext Markup Language可扩展标识语言的缩写。在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。它实现HTML向XML的过渡。 什么是XML？ XML(Extensible Markup Language)的出现，结构化文档和数据有了一个通用的、科适应的格式，不仅仅应用在web上，也可以应用在任何地方，标准成为可能，是Web未来的发展方向。,5,(X)HTML,为什么要使用XHMTL？ HTML没有足够的可扩展性。HTML文档创建要素是有限的，如无法处理非常
3、规的内容：乐谱，数学表达式等。同时HTML不能很好地支持不断更新的显示媒体，如手机等。而XHMTL就可以很好地解决这一点。 XHMTL的优点有： HTML没有非常良好的格式，所以当添加新的元素时，需更改文档类型定义。而XHMTL有良好的格式，极大简化了新元素的开发和集成。 HTML没有非常良好的格式，所以在计算能力较差的浏览设备上不能正常显示，而XHMTL有良好的格式，可在非台式设备中正常显示。 新建的Web文档使用XHTML，将会使文档具有更大的扩展性和兼容性,6,HTML文件的总体结构, 文件标题 : : : ,表头区,主体区,以 开头,以 结尾,HTML页面结构,7,(X)HTML页面结
4、构,XHMTL页面结构 /关于文档类型的说明 /声明名字空间 页面标题 这里是页面内容部分，注意内容与浏览器边缘的距离 ,8,XHTML文件基本结构说明,说明： 1、HTML只是一个纯文本文件，由“显示内容”及“控制语句”两部分组成 2、规范的标记方法为： 受影响内容 3、由英文”括起来的一个单词，例如 4、在XHTML中大部分的标签是成对出现的，第一个成为“起始”标签，第二个叫做“结束标签”，结束标签比起始标签多一个”/”，例如 5、标签之间相互嵌套来定义网页中文字图片的板式，但是先后顺序必须一致。 6、两个标签之间定义的就是排版的内容。 7、html标签区分大小写，xhtml标签与属性必须
5、小写。,9,Meta标签,什么叫Meta标签？ 1、meta是html语言head区的一个辅助性标签。 2、也许你认为这些代码可有可无。其实如果你能够用好meta标签，会给你带来意想不到的效果，例如加入关键字会自动被大型搜索网站自动搜集；可以设定页面格式及刷新等等。 3、meta标签的组成 meta标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。,10,Meta标签,1、name属性 name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类
6、信息用的。 meta标签的name属性语法格式是：meta name=“参数“ content=“具体的参数值“ 。 其中name属性主要有以下几种参数：,11,Meta标签,A、Keywords(关键字) 说明：keywords用来告诉搜索引擎你网页的关键字是什么。 举例：meta name =“keywords” content=“science, education,culture,politics,ecnomics，relationships, entertaiment, human” B、description(网站内容描述) 说明：description用来告诉搜索引擎你的网站主要
7、内容。 举例：meta name=“description“ content=“This page is about the meaning of science, education,culture.“,12,Meta标签,C、robots(机器人向导) 说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。 content的参数有all,none,index,noindex,follow,nofollow。默认是all。 举例：meta name=“robots” content=“none” D、author(作者) 说明：标注网页的作者 举例：meta name=“
8、author“ content=“root,“,13,Meta标签,2、http-equiv属性 http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 meat标签的http-equiv属性语法格式是：meta http-equiv=“参数“ content=“参数变量值“ ；其中http-equiv属性主要有以下几种参数：,14,Meta标签,A、Expires(期限) 说明：可以用于设定网页的到期时间。一旦网页过期，必须到服务器上重新传输
9、。 用法：meta http-equiv=“expires“ content=“Fri, 12 Jan 2001 18:18:18 GMT“ 注意：必须使用GMT的时间格式。 B、Pragma(cache模式) 说明：禁止浏览器从本地计算机的缓存中访问页面内容。 用法：meta http-equiv=“Pragma“ content=“no-cache“ 注意：这样设定，访问者将无法脱机浏览。,15,Meta标签,C、Refresh(刷新) 说明：自动刷新并指向新页面。 用法：meta http-equiv=“Refresh“ content=“2；URL=http:/“ 注意：其中的2是指停
10、留2秒钟后自动刷新到URL网址。 D、Set-Cookie(cookie设定) 说明：如果网页过期，那么存盘的cookie将被删除。 用法：meta http-equiv=“Set-Cookie“ content=“cookievalue=xxx; expires=Friday, 12-Jan-2001 18:18:18 GMT； path=/“ 注意：必须使用GMT的时间格式。,16,Meta标签,E、Window-target(显示窗口的设定) 说明：强制页面在当前窗口以独立页面显示。 用法：meta http-equiv=“Window-target“ content=“_top“ 注意
11、：用来防止别人在框架里调用自己的页面。 F、content-Type(显示字符集的设定) 说明：设定页面使用的字符集。 用法：meta http-equiv=“content-Type“ content=“text/html; charset=gb2312“,17,Meta标签功能,、帮助主页被各大搜索引擎登录 、定义页面的使用语言 、自动刷新并指向新的页面 、实现网页转换时的动画效果 、网页定级评价 、控制页面缓冲 、控制网页显示的窗口,18,XHTML与HTML的重要区别,XHTML与HTML的重要区别（代码规范） 1. 在XHTML中标记名称必须小写 2. 在XHTML中属性名称必须小写
12、 3. 在XHTML中标记必须严格严格嵌套 4. 在XHTML中标记必须封闭 5. 在XHTML中，即使是空元素的标记也必须封闭 6. 在XHTML中属性值用双引号括起来 7. 在XHTML中属性值必须使用完整形式 8. 在XHTML中，应该区分“内容标记”与“形式标记” 9.在XHTML 1.0中, 别用name用id :) name属性是不赞成使用的,在以后的XHTML版本中将被删除.,19,XHTML语法注意事项,1、为图片添加 alt 属性 为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本，这样做对正常用户可有可无，但对纯文本浏览器和使用屏幕阅读机的用户来
13、说是至关重要的。只有添加了alt属性，代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性，像下面这样的写法毫无意义： 正确的写法： ,20,XHTML语法注意事项,2、给所有属性值加引号 在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。还必须用空格分开属性。 例： 这也是不正确的 3、关闭所有的标签 在XHTML中，每一个打开的标签都必须关闭。空标签也要关闭，在标签尾部使用一个正斜杠 “/”来关闭它们自己。例如： 4、使用页面注释 XHTML中使用作为页面注释，其示例代码如下： 说明：在页面相应的位置使用注释，可以使文档结构更加清晰。,21,X
14、HTML开发环境,XHTML编写环境和测试方法 1、记事本 （1）打开记事本文件，编写HTML文件，保存为后缀为html的文件 （2）双击打开该文件，即可在浏览器中查看 2、Dreamweaver （1） 启动Dreamweaver 软件，新建HTML文件，在代码视图下编写HTML文件，保存； （2） F12或是选择菜单预览，即可在浏览器中查看,22,(X)HTML标签（一）,1、规范的标记方法为： 受影响内容 2、html 3、head 4、title 5、body 主要属性： bgcolor:背景颜色 background：背景图片 text：文字颜色 link：设置链接文字颜色 marg
15、in:边距,23,（一）段落 段落标签是处理文字时常用到的标签，成对出现的标签。见 ch022.102.html文档,（二）换行 单标签 例：见ch022.103.html文档,使用段落标记后的效果,在段落内部强制换行,2.1 文本排版,9/5/2018,（三）标题 标题标签由6个级别从到,为最大标题，为最小标题，成对出现的标签，。 例：见ch022.104.html文档 属性：align；值：right，center， left。,段落与标题的效果,2.1.2 设置标题,25,（四）居中对齐 例：见ch022.105.html文档,居中显示,2.1.3 使文字水平居中,9/5/2018,2.
16、1.4 设置文字段落的缩进,（五）向右缩进五个字符 例：见ch022.106.html文档,缩进显示,27,（六）预排版 把预先排版好的格式保留下来，成对标签,.,（七）水平线 在页面中插入一条水平标尺线，使文字分隔开，单标签。 主要属性： Width:宽度 Color:颜色 Align:对齐方式 Noshade:去掉水平线的阴影；,XHTML常用标签：文本排版,9/5/2018,（八）文字标签 ，成对标签，用于设置文字的大小、字体、字型、颜色、字号等，常用属性如下： size:设置文字大小，取值范围：1-7,-66 face:设置字体，如：黑体、宋体、Times New Roman color:设置文字颜色，如#000000,black,文字列表的主要作用是有序地编排一些信息资源，使其结构化和条理化，并以列表的样式显示出来，以便浏览者能更加快捷地获得相应信息。HTML中，文字列表主要分为无序列表、有序列表、定义列表三种，第一种每个列表项的前面有一个圆点符号，第二种则对每个列表项依次编号，第三种用于关键词的解释说明。,
