第1章 HTML语言.ppt

《第1章 HTML语言.ppt》由会员分享，可在线阅读，更多相关《第1章 HTML语言.ppt（62页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、HTMLHTML技术技术授课讲师：陈美汜授课讲师：陈美汜目录1.HTML/CSS/JavaScript先睹为快2.HTML3.CSS4.JavaScript1.1 HTML代码1.2.3.初识庐山真面目4.5.6.7.未使用css，JavaScript的html网页8.9.这是一个未使用css，JavaScript的html网页10.11.使用记事本即可编写HTML代码，扩展名是html或htm。使用浏览器就可以查看其效果。1.2 CSS代码1.2.3.使用了css的html网页4.5.h2 font-size:506.pfont-size:20;font-style:italic;color

2、:red7.8.9.10.11.使用了css的html网页12.13.这是一个使用了css的html网页14.15.1.3 JavaScript代码1.2.3.使用了css和JavaScript的html网页4.5.h2 font-size:50 pfont-size:20;font-style:italic6.7.8.alert(这是JavaScript起的作用);9.10.11.12.13.使用了css和JavaScript的html网页14.15.这是一个使用了css和JavaScript的html网页16.17.1.4 HTML、CSS、JavaScript的角色HTML：超文本标记语

3、言。是网页设计的主要语言。无论网页是否包括动画、多媒体、图形等各种复杂的元素，其基本架构都是HTML.CSS：层叠样式表。是目前唯一的网页排版样式标准，弥补了HTML在网页格式化方面的不足，帮助用户对页面的布局加以更多的控制。JavaScript用于开发Internet客户端应用程序，实现了一种实时、动态、交互的页面功能。它的出现使静态的HTML页面逐渐被客户端可做出响应的动态页面所取代。可以在HTML语言中直接编写CSS和JavaScript代码，也可以独立编写。扩展名分别是.css和.js2 HTML1:HTML简介2:基本标记3:列表list4:表格table5:表单form6:框架fr

4、ame7:层div2.1.1 HTML概念HTMLHyper Text Markup Language 超文本标识语言是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档HTML文档：*.htm或*.html文件名不区分大小写浏览HTML文件的工具:浏览器例：Netscape Navigator,Microsoft IE,Mazilla FireFox2.1.2 HTML文档的编写方法1.手工直接编写记事本等，存成.htm.html格式，要求用户必须掌握HTML2.使用可视化HTML编 辑 器Frontpage、Dreamweaver等,容易产生废码2.1.3 H

5、TML 文档结构 my first page This is my first homepage!这是我的第一张网页！2.1.3 HTML 文档结构标记(签)是HTML语言的基本部分，比如、。大多数标记总是成对出现，每一对标记一般都有一个开始的标记并且结束的标记总是在开始的标记前加一个斜杠。属性：HTML标记有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。my first homepage 注意：标记不区分大小写。例都可以标记中不要有空格，否则浏览器无法识别。例错误任何空格和回车在代码中无效。插入空格和回车分别用 和 属性的值可以用双引号引起来，也可以不引，最好引起来各

6、属性之间无先后次序，属性也可省略（即取默认值）2.1.3 HTML 文档结构-head(title)标记出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。1:标记定义HTML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。2.1.3 HTML 文档结构-head(meta)2:标记 标记定义网页的一些相关信息，例文件的关键字，作者，网页过期时间等，这些信息不会在浏览器的文档窗口显示 用来标记搜索引擎在搜索你的页面时所取出的关键词。用来标记文档的作者。用来标记你的页面的解码方式。用来自动刷新网页2.1.3 HTML 文档结构-(head)meta编

7、写一个网页，要求3秒钟后自动跳转到西安通瀛首页。1.2.3.my first page4.5.6.7.三秒钟后本网页将自动跳转到西安通瀛首页8.9.2.1.3 HTML 文档结构-body表明是HTML文档内容主体部分。在与之间，通常都会有很多其它标记；这些标记和标记属性构成HTML文档的主体部分。自身属性主要有：1)bgcolorbgcolor属性标志HTML文档的背景颜色。如：bgcolor=#CCFFCC。2)backgroundbackground属性标志HTML文档的背景图片。可以使用的图片格式为gif,jpg如：background=“images/bg.gif。3)texttex

8、t属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。text定义的颜色将应用于整篇文档。2.1.3 HTML 文档结构-body颜色颜色名和RGB值黑色Black=”#000000”银色Silver=”#c0c0c0”Silver=”#c0c0c0”红色Red=”#ff0000”Red=”#ff0000”蓝色Blue=”#0000ff”Blue=”#0000ff”白色White=”#White=”#ffffffffffff”黄色Yellow=”ffff00”Yellow=”ffff00”绿色Green=”#00ff00”Green=”#00ff00”海蓝色Aqua=”#00

9、ffff”Aqua=”#00ffff”2.2 基本 HTML 标记1.标题标记2.文字标记 3.段落级标记4.强制换行标记5.水平标尺标记6.HTML注释6.超级链接7.图像标记8.移动的文字2.2.1 标题标记可显示六种大小的标题，即到，为最大，为最小 1.2.3.HTML 简介 4.5.6.HTML 简介7.HTML 简介8.HTML 简介9.HTML 简介10.HTML 简介11.HTML 简介12.this is paragraph mark13.You can see what is the different between paragraph andbreak,this is a

10、nother paragraph mark14.this is paragraph mark15.16.how it work in the web page.17.If you need to insert one image for your web page,you can use below mark:18.19.And also you can user hyperlink for your want,this is the link，click it and see where it has gone?20.another style for you21.22.2.2.2 文字标记

11、文字属性标记1.文字颜色 .#=RRGGBB 16 进制数码2.文字字体.#=客户端可获得的字体3.文字大小.#=1,2,3,4,5,6,7等2.2.3.段落级标记段落标记(paragraph)换行符标记预格式化标记：HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话，就要用到另一个元素，即元素。利用标记对网页中文字段落进行预格式化，在输入过程中，按键盘上的回车键，就可以生成一个段落。即浏览器会以文本输入格式显示用三种标记分别实现登鹳雀楼的显示2.2.4 字符级标记常用字符级标记 倾斜文本 粗体文本 下划线文本 删除线文本 强调文本 居中显示文本空格标记 �

12、0A0;2.2.5 水平线标记水平线：设定线宽：设定线长：设定对齐方式#=left,right ：设定线的颜色2.2.6 HTML注释HTML文档可以插入注释。不但便于对程序排错，也使其他人更易读懂自己的代码 HTML注释的格式为：源码依然存在，不会被浏览器所解释 注释语句的特点是仅用于程序中某一句或一段语句的作用说明，浏览器在执行过程中将忽略掉注释语句的内容，对其视而不见。2.2.7 超级链接超级链接是用锚元素定义的 在元素下，有元素属性href,href的属性值为一个URL地址如：指向学院的超级链接 如：普通超级链接如：普通超级链接开一个新的(浏览器)窗口(Target Window).2

13、.2.7 超级链接超级链接的路径绝对路径：指文件的完整路径，包括协议，主机地址等，一般用于网站的外部链接。http:/ 图像标记的基本属性是src属性，src的属性值为所引用的图片的URL地址。src属性是必须的。src的URL可以是绝对地址，也可以是相对地址width指定宽度，height指定高度。它们的属性值可以是象素，也可以是%。定义图片替代文本的方法是：替代文本有两个作用：提示：若图片下载成功，把鼠标放在图片上，会出现提示文本。替代：若图片下载不成功，在图片位置出现替代文本。图片的对齐方式#=left,right,top,middle,bottom2.2.8 图像标记HTML 文档中的

14、图片GIF（Graphics Interchange Format）图像(.GIF)支持无损压缩只支持256色JPEG（Joint Photographic Experts Group）图像(.JPG)有损压缩，但这个损失是剔除一些视觉上不易察觉的部分。通常用来保存超过256色的图片文件PNG（Portable Network Graphics）新兴的网络图片格式，结合了gif和jpeg的优点。可以将图片文件以最小的方式压缩而不造成图片失真支持48bit的色彩。2.2.8 图像标记图像的超级链接 图像的超级链接是指整个图像的超级链接，当点击图像的任何部分时，都会打开这个超级链接。定义默认超级链

15、接的方法是：图像的热区链接热区就是在图片中特意划分出一个热点区域。当点击图象的热区时，才会打开这个超级链接。需要使用map标记指定热区。2.2.9 移动的文字1.基本语法.2.文字移动属性(1)方向：direction=#=left,right,up,down(2)方式：behavior=#=scroll(循环),slide(只走一次),alternate(来回走)(3)循环:loop=#=次数；若未指定则循环不止(infinite)(4)速度:scrollamount=#(5)延时:scrolldelay=#2.3.1 无序列表无序列表由和元素定义的:sportsfood drink fri

16、ends 无序列表的默认符号是圆点。元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有：disc(圆)、circle（圆圈）、square（方块）支持嵌套定义2.3.2 有序列表有序列表由和定义:sports drink friends元素也有自己的type属性，type属性的属性值有1、A、a、I、i等。例如，我们以A、B、C作为列表的编号元素还可以定义列表的起始编号，如我们希望列表的第一个编号为5，而不是1，则需要定义元素的start属性支持嵌套定义2.4.1 表格的基本结构定义表格定义表头定义表行定义单元格.定义表行定义单元格2.4.1 表

17、格的基本结构 元素：定义一个表格。每一个表格只有一对和，一张页面中可以有多个表格。元素：定义表格的行，一个表格可以有多行，所以对于一个表格来说不是唯一的。元素：定义表格的一个单元格。每行可以有不同数量的单元格，在和之间是单元格的具体内容。需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。元素：定义表格的表头行，一个表格只能有一个表头行或者没有，所以对于一个表格来说是唯一的或没有。2.4.2 表格的属性表格的属性 width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。height属性：指定表格或某一个表格单元格的高度。单位可以是%或者

18、象素。border属性：表格边线粗细bgcolor属性：指定表格或某一个单元格的背景颜色。background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式(left,center,right)。2.4.3 单元格的属性单元格属性valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括：top：顶端对齐；middle：居中对齐；bottom：底端对齐;baseline：相对于基线对齐;align属性：指定某一个单元格里的内容（文本、图片等）的水平对齐方式（left

19、,center,right）colspan：属性值表示当前单元格跨越几列rowspan：属性值表示当前单元格跨越几行2.4.4 行的属性行属性1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包 top：顶端对齐；middle：居中对齐；bottom：底端对齐。baseline：相对于基线对齐。2、align属性：指定表格或某一个单元格里的内容（文本、图片等）的水平对齐方式(left,center,right)3、height属性：指定表格中某一行的高度。单位可以是%或者象素2.4.5 表格的嵌套在 之间插入表格，实现表格嵌套导航列表计算机政治军

20、事法律正文内容2.4.5 表格的作用表格是用于在 HTML 页面上设计数据和图像布局的常用工具，可使用表格来组织数据，控制页面布局制作网页时，为了以一定的形式将网页中的信息组织起来，同时使网页便于阅读和页面美观，需要对页面的版式进行设计或进行页面 布局。而表格能将网页分成多个任意的矩形区域，表格是网页制作中是常用的一种简单布局工具。表格的作用一般只是控制文本和图像的显示，而不显示表格的边框2.4.6 表格举例 第一季度第二季度 一月二月三月四月五月六月1000550240150027651240 30002430250012509003400 2.5.1 表单formHTML表单是HTML页面

21、与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。在HTML里，我们可以定义表单，并且使表单与CGI或ASP等服务器端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。表单是网页上的一个特定区域。这个区域是由一对元素定义的。2.5.2 表单举例设计一个注册表单，输入姓名，年龄，密码，密码确认，电子邮件，性别，爱好，身份，个人简历，单击提交按钮提交，单击重置按钮重置。姓名，年龄，电子邮件：text密码，密码确认：password性别：radio爱好：checkbox身份：select个人简历：textarea提交按钮：submit重置按钮：reset2.5.2 表单举例

22、2.5.2 表单举例1.2.姓名 3.密码 4.密码确认 5.性别 男6.女7.年龄 8.电子邮件 9.爱好体育10.音乐11.美术12.身份13.学生14.教师15.解放军16.17.个人经历请输入个人简历18.19.20.2.5.2 表单举例2.5.2 表单举例1.2.3.4.姓名5.6.7.8.密码9.10.11.12.密码确认13.14.15.16.性别17.男 18.女19.20.21.年龄22.23.24.2.5.2 表单举例1.2.电子邮件3.4.5.6.爱好7.体育8.音乐 9.美术10.11.12.身份13.14.学生 教师 解放军15.16.17.18.个人经历19.请输入

23、个人简历20.21.22.23.24.25.26.2.5.3 表单基本语法1.表单的基本语法:.action属性：用来定义表单处理程序（一个ASP、JSP等程序）的位置(相对地址或绝对地址)。method定义表单结果从浏览器传送到服务器的方法，一般有两种方法：get、post。GET有数据量限制，POST无以上限制,以文件形式传输2.5.3 表单基本语法2.文本框的基本语法:?文本框的名字*默认值*长度?最大输入字符数3.密码框的基本语法：数据以圆点形式显示，提高密码安全性2.5.3 表单基本语法3.复选框的基本语法:在一个表单里的所有多选框可以有一个或多个被选中。/默认选中 4.单选框的基本

24、语法:一个表单里的所有变量名相同的单选框只能够有一个被选中。/默认选中各个选项的name必须一样才能达到预期效果5.标准按钮的基本语法:2.5.3 表单基本语法6.提交按钮和重置按钮的基本语法:7.图象域的基本语法:：相当于漂亮的submit按钮。8.隐藏域的基本语法 隐藏域在网页中对用户是不可见的，用户单击提交按钮提交表单时，隐藏域的信息也被一起发送到服务器。2.5.3 表单基本语法9.文本区域的基本语法:.10.下拉菜单的基本语法 音乐 美术 体育 2.5.3 表单基本语法TYPE此属性指定表单元素的类型。可用的选项有TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、

25、RESET、FILE、HIDDEN和BUTTON。默认值为TEXT。NAME此属性指定表单元素的名称。例如，如果表单上有几个文本框，可以按照名称来标识它们-TEXT1、TEXT2或用户选择的任何名称。VALUE此属性是可选属性，它指定表单元素的初始值 SIZE此属性指定表单元素的显示长度。用于文本输入的表单元素即输入类型是TEXT或PASSWORD的 MAXLENGHT此属性用于指定在TEXT或PASSWORD表单元素中可以输入的最大字符数。默认值为无限的 CHECKED此属性是一个Boolean属性，指定按钮是否是被选中的。当输入类型为RADIO或CHECKBOX时，使用此属性。SRCSRC

26、=URL。当使用IMAGE作为输入类型时使用此属性，它用于标识图像的位置。2.6.1 框架举例 2.6.1 框架举例框架的嵌套 2.6.2 框架简介框架是一种在一个网页中显示多个网页的技术，通过超级链接可以为框架之间建立内容之间的联系，从而实现页面导航。在网页文件中，框架常用于网页的布局。框架的基本结构分为框架集frameset和框架frame两个部分。使用框架集的页面的标记将被标记替代，然后在利用标记去定义框架结构。每个框架frame由一个单独的 HTML 页面组成。框架支持嵌套。当一个框架集中既有左右分割，又有上下分割是，就要用到框架嵌套。2.6.2 framset基本语法 框架由一对定义

27、有两个属性：rows和colsrows定义上下分割的框架的大小；cols定义左右分割的框架的大小；在定义大小时，rows和cols可使用相对大小或以百分比为单位2.6.2 frame基本语法的属性 src：在本框架里显示的网页的URL。frameborder：是否显示边框name：定义该框架的名字。这个名字可以被一些网页元素引用，如被元素引用。noresize：框架在浏览器里不可以被调整大小。scrolling：是否显示滚动条。yes,no,auto 2.6.2 frame基本语法 left.html:快乐的生活在当前框架中打开超链接页面 默认就是在当前框架页中打开,也可以采用 target=

28、“_self”在指定框架中打开超级链接页面 target=“name”新开窗口打开链接页面 target=“_blank”跳出整个框架集 target=“_parent”2.7.1 图层图层也是网页制作中用于定位元素或布局的一种技术，图层比表格的布局更加灵活，它能够将层中的内容摆放到浏览器的任意位置，放入到层中的HTML元素包括：文字、图像、动画甚至是图层。一个网页中可以使用多个层，层与层之间可以重叠，在网页制作中，使用层可以将网页中的任何元素布局到网页的任意位置，同时可以以任何方式重叠。可以想象在word文档中不同图片之间的上下左右位置和前后重叠关系。图层也可以实现嵌套的功能。嵌套图层最主要的特点就是可以保证子层永远位于父层之上。2.7.2 图层举例1.2.3.将元素分组4.5.6.7.8.第一层9.这是第一部分内的一个段落元素10.第一层的内容。11.该部分之外12.第二部分13.这是第二部分内的一个段14.第一层的内容。15.16.17.18.2.7.3 图层属性讲解1.基本语法2./设置图层背景色10./图层的具体内容11.课后作业利用html语言完成学生成绩管理系统的界面设计，需求说明