《程序设计实践—html课件.ppt》由会员分享，可在线阅读，更多相关《程序设计实践—html课件.ppt（47页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、HTML基础（一）内容概要lHTML概述与基本概念lHTML文档的结构l文字版本编辑l图像HTML概述与基本概念lHTML的概述 HTML的英文全称是 Hyper Text MarkUp Language，中文叫做“超文本标记语言”。所谓超文本，指除了文本内容外，还可以表现图形、图像、音频、视频、链接等非文本要素。和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称标记。用HTML编写的超文本文档称为HTML文档，一个HTML文件的后缀名是.htm或者是.html，能独 立于各种操作系统平台，自1990年以来HTML就一直被用作WWW 的信息表示语言，使用HTML语
2、言描述的文件，需要通过WEB浏览器显示出效果。用文本编辑器就可以编写HTML文件。lHTTP协议超文本传输协议（HTTP协议）规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准HTML文档的结构l一个简单的例子lllTitle of pagelllThis is my first homepage.This text is boldll HTML基本概念lHTML元素元素(HTML Elements)HTML元素(HTML Element)用来标记文本，表示文本的内容。比如body,title就是HTML元素。HTML元素
3、用Tag表示，Tag以“”结束。Tag通常是成对出现的，比如。起始的叫做Opening Tag，结尾的就叫做Closing Tag。目前HTML的Tag不区分大小写的。比如，和其实是相同的。lHTML元素元素(HTML Elements)的属性的属性HTML元素可以拥有属性。属性可以扩展HTML元素的能力。lcase1：使用一个bgcolor属性，使得页面的背景色成为红色：lCase2：使用border这个属性，将一个表格设成一个无边框的表格：属性通常由属性名和值成对出现，就像这样：name=value。上面例子中的bgcolor,border就是name，red和0就是value。属性值一般
4、用双引号标记起来。属性通常是附加给HTML的Opening Tag，而不是Closing Tag。HTML文档的结构lHTML文档组成：在文档的最外层，文档中的所有文本和html标签都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。一个HTML文档实例通常由2个部分组成l一个说明性的文档头：，由HEAD元素所界定，HTML文档头中包含了有关当前文档的信息，例如，对于搜索引擎有用的title,keywords等，以及其它一些不属于文档内容的数据在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标记,用以说明文件的标题和整个文件的一些公共属性。若不需头部信息则可省略
5、此标记，良好的习惯是不省略。l 一个文档体：由BODY元素或Frameset所实现，标记一般不省略，标签之间的文本是正文，是在浏览器要显示的页面内容。HTML文档的结构l文档头TITLE元素lTITLE元素：用于概括文档的内容，浏览器通常将TITLE元素显示在文档窗口的标题中 lMETA元素meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的与中，meta 标签的用处很多。meta 的属性有两种：name和http-equiv，不同的属性又有不同的参数值 HTML文档的结构lName属性1.l用以说明生成工具（如Microsoft FrontPage 4.0）等
6、 2.l向搜索引擎说明你的网页的关键词3.meta name=DEscription content=“Military,weapon,missilel告诉搜索引擎你的站点的主要内容 HTML文档的结构lName属性4.l告诉搜索引擎你的站点的制作的作者5.lall：文件将被检索，且页面上的链接可以被查询；lnone：文件将不被检索，且页面上的链接不可以被查询；lindex：文件将被检索；lfollow：页面上的链接可以被查询；lnoindex：文件将不被检索，但页面上的链接可以被查询；lnofollow：文件将不被检索，页面上的链接可以被查询。HTML文档的结构lhttp-equiv属性1.
7、和 用以说明主页制作所使用的文字以及语言2.定时让网页在指定的时间n内，跳转到页面http:/yourlink；3.可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；4.是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；HTML文档的结构l文档体：一般格式：l lHTML文档的主要内容lBody常用属性：lbgcolor-背景色彩#=rrggbb色彩是用 16 进制的 红绿蓝(red-green-blue,RGB)值来表示。16 进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e
8、,fltext-非可链接文字的色彩 llink-可链接文字的色彩 lalink-正被点击的可链接文字的色彩 lvlink-已经点击(访问)过的可链接文字的色彩 lbackground-设定页面背景图像lleftmargin-设定页面的左边距ltopmargin-设定页面的上边距lbgproperties-设定页面背景图像为固定，不随页面的滚动而滚动例如：l 文字版面编辑l 标题l 段落l 换行l 注释l 原样显示文字l 对齐l 引文(缩排）l 水平分隔线l 署名l 字符实体l 列表l 字体属性 标题l标签用于设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显示在网页中。l格式：hn al
9、ign=参数标题内容标签是成对出现的标签共分为六级，用到这几个Tag来定义正文标题，从大到小l在.之间的文字就 是第一级标题，是最大最粗的标题；l.之间的文字是最后一级，是最小最细的标题文字align属性：设 置标题的对齐方式，l参数为 left（左），center（中)，right(右）。l标签本身具有换行的作用，标题总是从新的一行开始。标题l示例设定各级标题一级标题。二级标题。三级标题。四级标题。五级标题。六级标题。段落段落l在HTML里用和划分段落。l示例段落示例This is a paragraphThis is another paragraph 换行l使用这个Tag，可以在不新建段
10、落的情况下换行。没有Closing Tag。用换行是个坏习惯，正确的是使用l示例换行示例This is a paragraph with line breaks 注释注释l解释说明你的代码，这样有助于你和他人日后能够更好地理解你的代码。l注释可以写在之间。浏览器是忽略注释的，你不会在HTML正文中看到你的注释。l示例注释示例This is a paragraph with line breaks 原样显示文字l ：保留原始文字排版的格式，把制作好的文字排版内容前后分别加上始标签和尾标签.l示例原样显示示例离离原上草，一岁一枯荣。野火烧不尽，春风吹又生。对齐l居中对齐标签：文本在页面中使用标签进
11、行居中显示,是成对标签,在需要居中的内容部分开头处加,结尾处加 l对齐属性align=#,#=left,center,rightl示例文字的对齐示例HelloHello Hello 引文(缩排）l标签可以用来建立一个引文，他特别适合较长文本的引用，引文显示时将会自动右移，左边空出几个格，加以区别 l示例缩排示例Her Song:When I was young,I listened to the radio waiting for my favorite songs.水平分隔线l标签是单独使用的标签，是水平线标签，用于段落与段落之间的分隔，使文档结构清晰明了，使文字的编排更整齐。l通过设置标签
12、的属性值，可以控制水平分隔线的样式。l标签的属性属性参数功能单位默认值size设置水平分隔线的粗细pixel(像素）2width设置水平分隔线的宽度pixel(像素）%100%alignleft center right设置水平分隔线的对齐方式centercolor设置水平分隔线的颜色black noshade取消水平分隔线的3d阴影水平分隔线l示例测试水平分隔线标签春 晓春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少？署名l署名标签一般用于说明这个网页是由谁或是由哪个公司编写的，以及其它相关信息。在标签之间的文字显示效果是斜体字。l示例署名标签乐 游 原向晚意不适，驱车登古原。夕阳无限好，只
13、是近黄昏。唐 李商隐 字符实体l有些字符没办法直接显示出来使用特殊字符可以将键盘上没有的字符表达出来l有些HTML文档的特殊字符在键盘上虽然可以得到，但浏览器在解析HTML文当时会报错，例如“”等，为防止代码混淆，必须用一些代码来表示l写法：一个字符实体(Character Entity)分成三部分第一部分是一个&符号，英文叫ampersand；第二部分是实体(Entity)名字或者是#加上实体(Entity)编号；第三部分是一个分号。l常见字符集特殊或专用字符 字符实体特殊或专用字符字符实体>×&®"空格 列表l分类无序列表有序列表定义列
14、表目录列表菜单列表无序列表l无序列表：各条列间并无顺序关系的列表标签：每一个列表项前使用的属性type有三个选项,这三个选项都必须小写:ldisc实心园lcircle空心园lsquare小方块如果不使用其项目的属性值,默认情况下会加“实心园”。格式 第一项 第二项 第三项 无序列表l示例无序列表 默认的无序列表1实心园 默认的无序列表2实心园 默认的无序列表3实心园无序列表square加方块无序列表square加方块 无序列表square加方块无序列表circle加空心园 无序列表circle加空心园 无序列表circle加空心园有序列表l各条列之间是有顺序的，l有序列表和无序列表的使用格式基
15、本相同，使用标签，每一个列表项前使用l列表的结果是带有前后顺序之分的编号,如果插入和删除一个列表项，编号会自动调整l顺序编号的设置是由的两个属性type和start来完成的start=编号开始的数字l如start=2则编号从2开始l如果 从1开始可以省略l或在标签中设定valuen改变列表行项目的特定编号，例如type=用于编号的数字,字母等的类型ltype=1，A，a，il可以放在或的的初始标签中有序列表l示例有序列表默认的有序列表1默认的有序列表2默认的有序列表3第1项第2项第3项第4项第1项第2项第3项 列表的嵌套l将一个列表嵌入到另一个列表中，无论是有序列表和无序列表的嵌套，浏览器都可
16、以自动地分成排列。l示例嵌套列表目录这是以序号类型a开头第一行内容这是以序号类型a开头第二行内容这是以序号A类型C开头第一行内容这是以序号A类型C开头第二行内容这是以序号数字51开头第一行内容这是以序号数字51开头第二行内容这是以序号数字51开头第三行内容这是以序号A类型C开头第三行内容这是以序号类型a开头第三行内容 定义列表l定义列表也叫描述性列表l定义列表默认为两个层次，第一层为列表项标签，第二层为注释项标 签。和标签通常是成对使用的也可以一个列表项对应于几个解释项，这种方式很少 用默认的注释是显示在另一行中,当使用后,注释项和列表项将显示在同一行。定义列表l示例定义性列表定义性列表 WW
17、W：WWW是(World wide web)的缩写，也可简写web;WWW：WWW又叫万维网;WWW：internet提供的最常用的服务是WWW;目录列表和菜单列表l为目录列表标签l为菜单列表标签l二者的格式和无序列表一样目录列表和菜单列表l示例目录列表和菜单列表默认的目录列表加实心园默认的目录列表实心园默认的目录列表实心园默认的菜单列表加实心园默认的菜单列表实心园默认的菜单列表实心园 目录列表square加方块目录列表square加方块目录列表square加方块 菜单列表circle加空心园菜单列表circle加空心园菜单列表circle加空心园 字体l标签：用于控制文字的字体，大小和颜色l
18、特定文字样式Font标签lFont标签的属性Face：设置文字使用的字体l默认宋体Size：设置文字的大小l取值为17，也可以用“+”或“-”来设定字号的相对值l默认为3Color：设置文字的颜色l值为：rgb颜色“#nnnnnn”或颜色的名称l默认黑色Font标签l字体大小字体大小.#=1,2,3,4,5,6,7 今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今
19、天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！今天天气真好！Font标签l示例控制文字的格式盼望着，盼望着，东风来了，春天脚步近了。一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。特定文字样式特定文字样式l物理类型粗体标签：放在与标签之间的文字将以粗体方式显示 斜体标签：放在与标签之间的文字将以斜体方式显示下划线标签：放在与标签之间的文字将以下划线方式显示
20、 物理类型l示例字体的物理类型这些文字是粗体的这些文字是斜体的 这些文字带有下划线 特定文字样式特定文字样式l逻辑类型：使用一些标签来改变字体的形态和式样，以便产生一些浏览者习惯的或约定的显示效果，常用的逻辑类型标签有八种，放在标签之间的文字受其控制 逻辑类型l示例字体的逻辑类型em标签：用于强调的文本，一般显示为斜体字strong标签：用于特别强调的文本，显示为粗体字cite标签：用于引证和举例，通常是斜体字code标签：用来指出这是一组代码small标签：规定文本以小号字显示big标签：规定文本以大号字显示samp标签：显示一段计算机常用的字体，即宽度相等的字体kbd标签：由用户输入文本，
21、通常显示为较粗的宽体字var标签：用来表示变量，通常显示为斜体字dfn标签：表示一个定义或说明，通常显示为斜体字sup标签：122=144sub标签：硫酸亚铁的分子式是Fe2SO4 图像l浏览器可以显示的图像格式有jpeg，bmp，gifBmp：存储空间大，传输慢，不提倡用Jpeg：支持数百万种颜色，即使在传输过程中丢失数据，也不会在质量上有明显的不同，占位空间比gif大，gif：仅包括265色彩，虽然质量上没有jpeg图像高，但占位储存空间小，下载速度最快、支持动画效果及背景色透明等特点可视情况而决定使用那种格式。图像l背景图像的设定 格式：，其中“image-url”指图像的位置 示例设置
22、背景图像盼望着，盼望着，东风来了，春天脚步近了.图像l网页中插入图片：使用标签 最基本的语法：当浏览器读取到标签时，就会显示此标签所设定的图像如果要对插入的图片进行修饰时，还要配合其它属性来完成 lalign属性：可以改变图片的垂直(居上、居中、居下)对齐方式和水平对齐方式(居左、居中、居右)lheight和width属性：改变图片的大小。在缺省状况下，图片显示原有的大小。不过图片的大小一旦被改变，图片会相应放大或缩小，显示出来的结果可能会很难看。lhspace/vspace：设定上下左右空白位置lAlt:在浏览器尚未完全读入图象时，在图象位置显示的文字lBorder:设置边框大小图像l示例插入图像My Face!It is always smiling.Hahaha.My Face!It is always smiling.Hahaha.My Face!It is always smiling.Hahaha.图像l建议：图片相对文字，所占的字节数较多，比如一个全屏的图片，即使经过压缩，也要占去大约50k字节，这相当于25000字的文本。因此浏览器载入图片比较费时，建议一个HTML文件里不要包含过多的图片，否则会影响你的网页显示速度。