程序设计实践—html课件.ppt

《程序设计实践—html课件.ppt》由会员分享，可在线阅读，更多相关《程序设计实践—html课件.ppt（47页珍藏版）》请在三一办公上搜索。

1、HTML基础（一）,内容概要,HTML概述与基本概念HTML文档的结构文字版本编辑图像,HTML概述与基本概念,HTML的概述 HTML的英文全称是 Hyper Text MarkUp Language，中文叫做“超文本标记语言”。 所谓超文本，指除了文本内容外，还可以表现图形、图像、音频、视频、链接等非文本要素。和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称标记。 用HTML编写的超文本文档称为HTML文档，一个HTML文件的后缀名是.htm或者是.html，能独 立于各种操作系统平台，自1990年以来HTML就一直被用作WWW 的信息表示语言，使用HTML

2、语言描述的文件，需要通过WEB浏览器显示出效果。 用文本编辑器就可以编写HTML文件。HTTP协议超文本传输协议（ HTTP协议）规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准,HTML文档的结构,一个简单的例子Title of pageThis is my first homepage. This text is bold,HTML基本概念,HTML元素(HTML Elements)HTML元素(HTML Element)用来标记文本，表示文本的内容。比如body, title就是HTML元素。 HTML元素用Tag

3、表示，Tag以“”结束。 Tag通常是成对出现的，比如。起始的叫做Opening Tag，结尾的就叫做Closing Tag。 目前HTML的Tag不区分大小写的。比如，和其实是相同的。HTML元素(HTML Elements)的属性HTML元素可以拥有属性。属性可以扩展HTML元素的能力。case1：使用一个bgcolor属性，使得页面的背景色成为红色：Case2：使用border这个属性，将一个表格设成一个无边框的表格：属性通常由属性名和值成对出现，就像这样：name=value。上面例子中的bgcolor, border就是name，red和0就是value。属性值一般用双引号标记起来。

4、属性通常是附加给HTML的Opening Tag，而不是Closing Tag。,HTML文档的结构,HTML文档组成：在文档的最外层，文档中的所有文本和html标签都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。一个HTML文档实例通常由2个部分组成一个说明性的文档头：，由HEAD元素所界定，HTML文档头中包含了有关当前文档的信息，例如，对于搜索引擎有用的title,keywords等，以及其它一些不属于文档内容的数据在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标记, 用以说明文件的标题和整个文件的一些公共属性。若不需头部信息则可省略此标记，良好的习

5、惯是不省略。 一个文档体：由BODY元素或Frameset所实现， 标记一般不省略，标签之间的文本是正文，是在浏览器要显示的页面内容。,HTML文档的结构,文档头TITLE元素TITLE元素：用于概括文档的内容，浏览器通常将TITLE元素显示在文档窗口的标题中 META元素meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的与中，meta 标签的用处很多。meta 的属性有两种：name和http-equiv，不同的属性又有不同的参数值,HTML文档的结构,Name属性1. 用以说明生成工具（如Microsoft FrontPage 4.0）等 2. 向搜索引擎

6、说明你的网页的关键词3. meta name=DEscription content=“Military, weapon, missile告诉搜索引擎你的站点的主要内容,HTML文档的结构,Name属性4. 告诉搜索引擎你的站点的制作的作者5. all：文件将被检索，且页面上的链接可以被查询；none：文件将不被检索，且页面上的链接不可以被查询； index：文件将被检索； follow：页面上的链接可以被查询； noindex：文件将不被检索，但页面上的链接可以被查询； nofollow：文件将不被检索，页面上的链接可以被查询。,HTML文档的结构,http-equiv属性1. 和 用以说明

7、主页制作所使用的文字以及语言2. 定时让网页在指定的时间n内，跳转到页面http:/yourlink；3. 可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；4. 是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；,HTML文档的结构,文档体： 一般格式： HTML文档的主要内容Body常用属性：bgcolor - 背景色彩 #=rrggbb色彩是用 16 进制的 红绿蓝(red-green-blue, RGB) 值来表示。16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,

8、e,ftext - 非可链接文字的色彩 link - 可链接文字的色彩 alink - 正被点击的可链接文字的色彩 vlink - 已经点击(访问)过的可链接文字的色彩 background -设定页面背景图像leftmargin -设定页面的左边距topmargin -设定页面的上边距bgproperties -设定页面背景图像为固定，不随页面的滚动而滚动例如：,文字版面编辑,标题 段落 换行 注释 原样显示文字 对齐 引文 (缩排） 水平分隔线 署名 字符实体 列表 字体属性,标题,标签用于设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显示在网页中。格式：标签是成对出现的标签共分为

9、六级，用到这几个Tag来定义正文标题，从大到小在.之间的文字就 是第一级标题，是最大最粗的标题；.之间的文字是最后一级，是最小最细的标题文字align属性：设 置标题的对齐方式，参数为 left（左）， center（中)， right (右）。标签本身具有换行的作用，标题总是从新的一行开始。,标题,示例设定各级标题一级标题。二级标题。三级标题。四级标题。五级标题。六级标题。,段落,在HTML里用和划分段落。示例段落示例This is a paragraphThis is another paragraph ,换行,使用这个Tag，可以在不新建段落的情况下换行。没有Closing Tag。用换

10、行是个坏习惯，正确的是使用示例换行示例This is a paragraph with line breaks ,注释,解释说明你的代码，这样有助于你和他人日后能够更好地理解你的代码。注释可以写在之间。浏览器是忽略注释的，你不会在HTML正文中看到你的注释。示例注释示例This is a paragraph with line breaks ,原样显示文字, ：保留原始文字排版的格式，把制作好的文字排版内容前后分别加上始标签和尾标签. 示例原样显示示例离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。 ,对齐,居中对齐标签：文本在页面中使用标签进行居中显示,是成对标签,在需要居中的内容部分开头处

11、加,结尾处加 对齐属性align=#, #=left, center, right示例文字的对齐示例HelloHello Hello ,引文 (缩排）,标签可以用来建立一个引文，他特别适合较长文本的引用，引文显示时将会自动右移，左边空出几个格，加以区别 示例缩排示例Her Song:When I was young, I listened to the radio waiting for my favorite songs. ,水平分隔线,标签是单独使用的标签，是水平线标签，用于段落与段落之间的分隔，使文档结构清晰明了，使文字的编排更整齐。通过设置标签的属性值，可以控制水平分隔线的样式。标签的

12、属性,水平分隔线,示例测试水平分隔线标签春 晓春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少？,署名,署名标签一般用于说明这个网页是由谁或是由哪个公司编写的，以及其它相关信息。在标签之间的文字显示效果是斜体字。 示例署名标签乐 游 原向晚意不适，驱车登古原。夕阳无限好，只是近黄昏。唐 李商隐,字符实体,有些字符没办法直接显示出来使用特殊字符可以将键盘上没有的字符表达出来有些HTML文档的特殊字符在键盘上虽然可以得到，但浏览器在解析HTML文当时会报错，例如“”等，为防止代码混淆，必须用一些代码来表示写法：一个字符实体(Character Entity)分成三部分第一部分是一个&符号，英文叫am

13、persand；第二部分是实体(Entity)名字或者是#加上实体(Entity)编号；第三部分是一个分号。常见字符集,列表,分类无序列表有序列表定义列表目录列表菜单列表,无序列表,无序列表：各条列间并无顺序关系的列表标签：每一个列表项前使用的属性type有三个选项,这三个选项都必须小写:disc实心园circle空心园square小方块如果不使用其项目的属性值,默认情况下会加“实心园”。格式 第一项 第二项 第三项,无序列表,示例无序列表默认的无序列表1实心园默认的无序列表2实心园默认的无序列表3实心园无序列表square加方块无序列表square加方块无序列表square加方块无序列表ci

14、rcle加空心园无序列表circle加空心园无序列表circle加空心园,有序列表,各条列之间是有顺序的，有序列表和无序列表的使用格式基本相同，使用标签，每一个列表项前使用列表的结果是带有前后顺序之分的编号,如果插入和删除一个列表项，编号会自动调整顺序编号的设置是由的两个属性type和start来完成的start=编号开始的数字如start=2则编号从2开始如果 从1开始可以省略或在标签中设定valuen改变列表行项目的特定编号，例如type=用于编号的数字,字母等的类型type=1，A，a，i可以放在或的的初始标签中,有序列表,示例有序列表默认的有序列表1默认的有序列表2默认的有序列表3第1

15、项第2项第3项第4项第1项第2项第3项,列表的嵌套,将一个列表嵌入到另一个列表中，无论是有序列表和无序列表的嵌套，浏览器都可以自动地分成排列。 示例嵌套列表目录这是以序号类型a开头第一行内容这是以序号类型a开头第二行内容这是以序号A类型C开头第一行内容这是以序号A类型C开头第二行内容这是以序号数字51开头第一行内容这是以序号数字51开头第二行内容这是以序号数字51开头第三行内容这是以序号A类型C开头第三行内容这是以序号类型a开头第三行内容,定义列表,定义列表也叫描述性列表定义列表默认为两个层次，第一层为列表项标签，第二层为注释项标 签。和标签通常是成对使用的也可以一个列表项对应于几个解释项，这

16、种方式很少 用默认的注释是显示在另一行中,当使用后,注释项和列表项将显示在同一行。,定义列表,示例定义性列表定义性列表 WWW： WWW是(World wide web)的缩写，也可简写web; WWW： WWW又叫万维网; WWW： internet提供的最常用的服务是WWW;,目录列表和菜单列表,为目录列表标签为菜单列表标签二者的格式和无序列表一样,目录列表和菜单列表,示例目录列表和菜单列表默认的目录列表加实心园默认的目录列表实心园默认的目录列表实心园默认的菜单列表加实心园默认的菜单列表实心园默认的菜单列表实心园 目录列表square加方块目录列表square加方块目录列表square加方

17、块 菜单列表circle加空心园菜单列表circle加空心园菜单列表circle加空心园,字体,标签：用于控制文字的字体，大小和颜色特定文字样式,Font标签,Font标签的属性Face：设置文字使用的字体默认宋体Size：设置文字的大小取值为17，也可以用“+”或“-”来设定字号的相对值默认为3Color：设置文字的颜色值为：rgb颜色“#nnnnnn”或颜色的名称默认黑色,Font标签,字体大小 . #=1, 2, 3, 4, 5, 6, 7 今天天气真好！ 今天天气真好！今天天气真好！ 今天天气真好！今天天气真好！ 今天天气真好！今天天气真好！ 今天天气真好！今天天气真好！ 今天天气真好

18、！今天天气真好！ 今天天气真好！今天天气真好！ 今天天气真好！,Font标签,示例控制文字的格式盼望着，盼望着，东风来了，春天脚步近了。 一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。,特定文字样式,物理类型粗体标签：放在与标签之间的文字将以粗体方式显示 斜体标签：放在与标签之间的文字将以斜体方式显示下划线标签：放在与标签之间的文字将以下划线方式显示,物理类型,示例字体的物理类型这些文字是粗体的这些文字

19、是斜体的 这些文字带有下划线,特定文字样式,逻辑类型：使用一些标签来改变字体的形态和式样，以便产生一些浏览者习惯的或约定的显示效果，常用的逻辑类型标签有八种，放在标签之间的文字受其控制,逻辑类型,示例字体的逻辑类型em标签：用于强调的文本，一般显示为斜体字strong标签：用于特别强调的文本，显示为粗体字cite标签：用于引证和举例，通常是斜体字code标签：用来指出这是一组代码small标签：规定文本以小号字显示big标签：规定文本以大号字显示samp标签：显示一段计算机常用的字体，即宽度相等的字体kbd标签：由用户输入文本，通常显示为较粗的宽体字var标签：用来表示变量，通常显示为斜体字d

20、fn标签：表示一个定义或说明，通常显示为斜体字sup标签：122=144sub标签：硫酸亚铁的分子式是Fe2SO4,图像,浏览器可以显示的图像格式有jpeg，bmp，gifBmp：存储空间大，传输慢，不提倡用Jpeg：支持数百万种颜色，即使在传输过程中丢失数据，也不会在质量上有明显的不同，占位空间比gif大，gif ：仅包括265色彩，虽然质量上没有jpeg图像高，但占位储存空间小，下载速度最快、支持动画效果及背景色透明等特点可视情况而决定使用那种格式。,图像,背景图像的设定 格式： ，其中 “image-url” 指图像的位置 示例设置背景图像盼望着，盼望着，东风来了，春天脚步近了.,图像,

21、网页中插入图片：使用标签 最基本的语法： 当浏览器读取到标签时，就会显示此标签所设定的图像如果要对插入的图片进行修饰时，还要配合其它属性来完成 align属性：可以改变图片的垂直(居上、居中、居下)对齐方式和水平对齐方式(居左、居中、居右)height和width属性：改变图片的大小。在缺省状况下，图片显示原有的大小。不过图片的大小一旦被改变，图片会相应放大或缩小，显示出来的结果可能会很难看。 hspace/vspace：设定上下左右空白位置Alt:在浏览器尚未完全读入图象时，在图象位置显示的文字Border: 设置边框大小,图像,示例插入图像My Face!It is always smiling.Hahaha.My Face!It is always smiling.Hahaha.My Face!It is always smiling.Hahaha.,图像,建议：图片相对文字，所占的字节数较多，比如一个全屏的图片，即使经过压缩，也要占去大约50k字节，这相当于25000字的文本。因此浏览器载入图片比较费时，建议一个HTML文件里不要包含过多的图片，否则会影响你的网页显示速度。,