HTML+CSS+JS入门基础ppt.ppt
《HTML+CSS+JS入门基础ppt.ppt》由会员分享,可在线阅读,更多相关《HTML+CSS+JS入门基础ppt.ppt(142页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、目录1.HTML/CSS/JavaScript先睹为快2.HTML3.CSS4.JavaScript1.1HTML代码未使用css,JavaScript的html网页未使用css,JavaScript的html网页这是一个未使用css,JavaScript的html网页使用记事本即可编写HTML代码,扩展名是html或htm。使用浏览器就可以查看其效果。1.2CSS代码使用了css的html网页h2font-size:50pfont-size:20;font-style:italic使用了css的html网页这是一个使用了css的html网页1.3JavaScript代码使用了css和Java
2、Script的html网页h2font-size:50pfont-size:20;font-style:italicalert(这是JavaScript起的作用);使用了css和JavaScript的html网页这是一个使用了css和JavaScript的html网页1.4HTML、CSS、JavaScript的角色HTML:超文本标记语言。是网页设计的主要语言。无论网页是否包括动画、多媒体、图形等各种复杂的元素,其基本架构都是HTML.CSS:层叠样式表。是目前唯一的网页排版样式标准,弥补了HTML在网页格式化方面的不足,帮助用户对页面的布局加以更多的控制。JavaScript用于开发Int
3、ernet客户端应用程序,实现了一种实时、动态、交互的页面功能。它的出现使静态的HTML页面逐渐本客户端可做出响应的动态页面所取代。可以在HTML语言中直接编写CSS和JavaScript代码,也可以独立编写。扩展名分别是.css和.js2HTML1:HTML简介2:基本标记3:列表list4:表格table5:表单form6:框架frame7:层div2.1.1HTML概念HTMLHyperTextMarkupLanguage超文本标识语言是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档HTML文档:*.htm或*.html文件名区分大小写浏览HTML文件的
4、工具:浏览器例:NetscapeNavigator,MicrosoftIE,MazillaFireFox2.1.2HTML文档的编写方法1.手工直接编写记事本等,存成.htm.html格式,要求用户必须掌握HTML2.使用可视化HTML编辑器Frontpage、Dreamweaver等,容易产生废码2.1.3HTML文档结构myfirstpageThisismyfirsthomepage!这是我的第一张网页!2.1.3HTML文档结构标记(签)是HTML语言的基本部分,比如、。大多数标记总是成对出现,每一对标记一般都有一个开始的标记并且结束的标记总是在开始的标记前加一个斜杠。属性:HTML标记
5、有自己的相关属性,每一个属性还可以由我们网页编制者赋一定的值。myfirsthomepage注意:标记不区分大小写。例都可以标记中不要有空格,否则浏览器无法识别。例错误任何空格和回车在代码中无效。插入空格和回车分别用和 属性的值可以用双引号引起来,也可以不引,最好引起来各属性之间无先后次序,属性也可省略(即取默认值)2.1.3HTML文档结构-head(title)标记出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。1:标记定义HTML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。2.1.3HTML文档结构-head(meta)2:
6、标记标记定义网页的一些相关信息,例文件的关键字,作者,网页过期时间等,这些信息不会在浏览器的文档窗口显示用来标记搜索引擎在搜索你的页面时所取出的关键词。用来标记文档的作者。用来标记你的页面的解码方式。用来自动刷新网页2.1.3HTML文档结构-(head)meta编写一个网页,要求3秒钟后自动跳转到北软教育首页。myfirstpage三秒钟后本网页将自动跳转到北软教育首页2.1.3HTML文档结构-body表明是HTML文档内容主体部分。在与之间,通常都会有很多其它标记;这些标记和标记属性构成HTML文档的主体部分。自身属性主要有:1)bgcolorbgcolor属性标志HTML文档的背景颜色
7、。如:bgcolor=#CCFFCC。2)backgroundbackground属性标志HTML文档的背景图片。可以使用的图片格式为gif,jpg如:background=“images/bg.gif。3)texttext属性标志HTML文档的正文文字颜色。如:text=“#FF6666”。text定义的颜色将应用于整篇文档。2.1.3HTML文档结构-body颜色颜色名和RGB值黑色Black=”#000000”银色Silver=”#c0c0c0”Silver=”#c0c0c0”红色Red=”#ff0000”Red=”#ff0000”蓝色Blue=”#0000ff”Blue=”#0000f
8、f”白色White=”#ffffffWhite=”#ffffff”黄色Yellow=”ffff00”Yellow=”ffff00”绿色Green=”#00ff00”Green=”#00ff00”海蓝色Aqua=”#00ffff”Aqua=”#00ffff”2.2基本HTML标记1.标题标记2.文字标记3.段落级标记4.字符级标记5.水平标尺标记6.HTML注释6.超级链接7.图像标记8.移动的文字2.2.1标题标记可显示六种大小的标题,即到,为最大,为最小HTML简介HTML简介HTML简介HTML简介HTML简介HTML简介HTML简介2.2.2文字标记文字属性标记1.文字颜色.#=RRGG
9、BB16进制数码2.文字字体.#=客户端可获得的字体3.文字大小.#=1,2,3,4,5,6,7等2.2.3.段落级标记段落标记(paragraph)换行符标记预格式化标记:HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话,就要用到另一个元素,即元素。利用标记对网页中文字段落进行预格式化,在输入过程中,按键盘上的回车键,就可以生成一个段落。即浏览器会以文本输入格式显示用三种标记分别实现登鹳雀楼的显示2.2.4字符级标记常用字符级标记倾斜文本粗体文本下划线文本删除线文本强调文本居中显示文本空格标记 2.2.5水平线标记水平线:设定线宽:设定线长:设定对齐方式#=l
10、eft,right:设定线的颜色2.2.6HTML注释HTML文档可以插入注释。不但便于对程序排错,也使其他人更易读懂自己的代码HTML注释的格式为:源码依然存在,不会被浏览器所解释注释语句的特点是仅用于程序中某一句或一段语句的作用说明,浏览器在执行过程中将忽略掉注释语句的内容,对其视而不见。2.2.7超级链接超级链接是用锚元素定义的在元素下,有元素属性href,href的属性值为一个URL地址如:指向学院的超级链接如:普通超级链接如:普通超级链接开一个新的(浏览器)窗口(TargetWindow).2.2.7超级链接超级链接的路径绝对路径:指文件的完整路径,包括协议,主机地址等,一般用于网站
11、的外部链接。http:/ 第一季度第一季度第二季度第二季度 一月一月二月二月三月三月四月四月五月五月六月六月1000550240150027651240 30002430250012509003400 2.5.1表单formHTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。在HTML里,我们可以定义表单,并且使表单与CGI或ASP等服务器端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。表单是网页上的一个特定区域。这个区域是由一对元素定义的。2.5.2表单举例设计一个注册表单,输入姓名,年龄,密码,密码确认,电子邮件,性别,爱好,身份,个人
12、简历,单击提交按钮提交,单击重置按钮重置。姓名,年龄,电子邮件:text密码,密码确认:password性别:radio爱好:checkbox身份:select个人简历:textarea提交按钮:submit重置按钮:reset2.5.2表单举例2.5.2表单举例姓名密码密码确认性别男女年龄电子邮件爱好体育音乐美术身份学生教师解放军个人经历请输入个人简历2.5.2表单举例2.5.2表单举例姓名密码密码确认性别男女年龄2.5.2表单举例电子邮件爱好体育音乐美术身份学生教师解放军个人经历请输入个人简历2.5.3表单基本语法1.表单的基本语法:.action属性:用来定义表单处理程序(一个ASP、J
13、SP等程序)的位置(相对地址或绝对地址)。method定义表单结果从浏览器传送到服务器的方法,一般有两种方法:get、post。GET有数据量限制,POST无以上限制,以文件形式传输2.5.3表单基本语法2.文本框的基本语法:?文本框的名字*默认值*长度?最大输入字符数3.密码框的基本语法:数据以圆点形式显示,提高密码安全性2.5.3表单基本语法3.复选框的基本语法:在一个表单里的所有多选框可以有一个或多个被选中。/默认选中4.单选框的基本语法:一个表单里的所有变量名相同的单选框只能够有一个被选中。/默认选中各个选项的name必须一样才能达到预期效果5.标准按钮的基本语法:2.5.3表单基本语
14、法6.提交按钮和重置按钮的基本语法:7.图象域的基本语法::相当于漂亮的submit按钮。8.隐藏域的基本语法隐藏域在网页中对用户是不可见的,用户单击提交按钮提交表单时,隐藏域的信息也被一起发送到服务器。2.5.3表单基本语法9.文本区域的基本语法:.10.下拉菜单的基本语法音乐美术体育2.5.3表单基本语法TYPE此属性指定表单元素的类型。可用的选项有TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、HIDDEN和BUTTON。默认值为TEXT。NAME此属性指定表单元素的名称。例如,如果表单上有几个文本框,可以按照名称来标识它们-TEXT1、TE
15、XT2或用户选择的任何名称。VALUE此属性是可选属性,它指定表单元素的初始值SIZE此属性指定表单元素的显示长度。用于文本输入的表单元素即输入类型是TEXT或PASSWORD的MAXLENGHT此属性用于指定在TEXT或PASSWORD表单元素中可以输入的最大字符数。默认值为无限的CHECKED此属性是一个Boolean属性,指定按钮是否是被选中的。当输入类型为RADIO或CHECKBOX时,使用此属性。SRCSRC=URL。当使用IMAGE作为输入类型时使用此属性,它用于标识图像的位置。2.6.1框架举例2.6.1框架举例框架的嵌套框架的嵌套2.6.2框架简介框架是一种在一个网页中显示多个
16、网页的技术,通过超级链接可以为框架之间建立内容之间的联系,从而实现页面导航。在网页文件中,框架常用于网页的布局。框架的基本结构分为框架集frameset和框架frame两个部分。使用框架集的页面的标记将被标记替代,然后在利用标记去定义框架结构。每个框架frame由一个单独的HTML页面组成。框架支持嵌套。当一个框架集中既有左右分割,又有上下分割是,就要用到框架嵌套。2.6.2framset基本语法框架由一对定义有两个属性:rows和colsrows定义上下分割的框架的大小;cols定义左右分割的框架的大小;在定义大小时,rows和cols可使用相对大小或以百分比为单位2.6.2frame基本语
17、法的属性src:在本框架里显示的网页的URL。frameborder:是否显示边框name:定义该框架的名字。这个名字可以被一些网页元素引用,如被元素引用。noresize:框架在浏览器里不可以被调整大小。scrolling:是否显示滚动条。yes,no,auto2.6.2frame基本语法left.html:快乐的生活在当前框架中打开超链接页面默认就是在当前框架页中打开,也可以采用target=“_self”在指定框架中打开超级链接页面target=“name”新开窗口打开链接页面target=“_blank”跳出整个框架集target=“_parent”2.7.1图层图层也是网页制作中用于
18、定位元素或布局的一种技术,图层比表格的布局更加灵活,它能够将层中的内容摆放到浏览器的任意位置,放入到层中的HTML元素包括:文字、图像、动画甚至是图层。一个网页中可以使用多个层,层与层之间可以重叠,在网页制作中,使用层可以将网页中的任何元素布局到网页的任意位置,同时可以以任何方式重叠。可以想象在word文档中不同图片之间的上下左右位置和前后重叠关系。图层也可以实现嵌套的功能。嵌套图层最主要的特点就是可以保证子层永远位于父层之上。2.7.2图层举例将元素分组第一层这是第一部分内的一个段落元素第一层的内容。该部分之外第二部分这是第二部分内的一个段第一层的内容。2.7.3图层属性讲解基本语法/设置图
19、层背景色./图层的具体内容3.1CSS的作用CSS是CascadingStyleSheets(层叠样式表)的简称.,是一系列格式规则,它们控制网页内容的外观。css简单来说就是用来美化网页用的。使用CSS样式可以非常灵活并更好地控制确切的网页外观,从精确的布局定位到特定的字体和样式。即使不改动HTML,只是通过添加不同的CSS规则,就可以得到各种不同样式的网页。可以通过简单的更改CSS文件,改变网页的整体表现形式,从而减少我们的工作量,所以她是每一个网页设计人员的必修课.CSS可以嵌入到html文档中,也可以单独文件形式存在,扩展名是.css3.1CSS的作用当样式定义在外部文件中时,一个样式
20、表可以用于多个页面,甚至整个工作点,因此具有更好的易用性和扩展性。总的来说,CSS可以完成下列工作:(1)弥补HTML对网页格式化功能的不足,如段落间距、行距等。(2)设置字体变化和大小。(3)设置页面格式的动态更新。(4)进行排版定位。CSS的特点(1)控制页面中的每一个元素(精确定位)。(2)对HTML语言处理样式的最好补充。(3)把内容和格式处理相分离,减少工作量。3.2样式表规则CSS的样式规则css样式规则由两部分组成:选择器和声明。选择器是样式名称(如TR或P)。声明是用于定义样式元素。pfont-style:italic;font-weight:bold;color:limegr
21、een .water color:blue 用法:用法:用法:用法:RuleSelector property:value;property:value;.规则选择器规则选择器声明声明属性属性属性值属性值3.3样式表中的选择器1:简单选择器(仅描述元素,而不考虑该元素在文档结构中的位置)1.1HTML选择器-选择器是HTML标记的名称1.2类选择器使用HTML元素的CLASS属性1.3ID选择器使用HTML元素的ID属性2:上下文选择器(引用元素的上下文)3.3样式表中的选择器1.1:HTML选择器示例选择器示例h1,h2,h3,h4,h5,h6color:greenPfont-style:i
22、talic;font-weight:bold;color:red测试HTML选择器这些选择器使用HTML元素的名称唯一区别是删除了尖括号。3.3样式表中的选择器1.2:类选择器示例:类选择器示例.watercolor:blue;text-align:rightp.dangercolor:red;text-align:center测试CSS测试水测试危险无样式3.3样式表中的选择器1.3:ID选择器示例ID选择器#controlcolor:red这是火焰的颜色这是火焰的颜色本段没有应用样式3.3样式表中的选择器所有的HTML标签都可以作为类选择器。省略HTML标记的类选择器是最常用的CSS方法,
23、使用这种方法,可以很方便的在任意元素上套用预先定义好的类样式HTML页面中ID参数指定了某个单一元素,ID选择器用来对这个单一元素定义单独的样式。由于ID选择器局限性很大,只能单独定义某个元素的样式,一般只在特殊情况下使用。ID是先给某个元素定义标签,再给它定义样式;class是先定义好一种样式,再套给多个元素。用多个相同ID“一般情况下”也能正常显示。但是当你需要用JavaScript通过id控制这个元素时(如div),那就会出现错误3.3样式表中的选择器2:上下文选择器示例:上下文选择器示例acolor:red;font-size:20tableacolor:green;font-size
24、:25tablea:hovercolor:blue北软教育北软教育北软教育3.3样式表中的选择器2:上下文选择器示例:上下文选择器示例上下文选择器BODYcolor:blue;background:lavender;font-family:Arial;ULcolor:redulacolor:green;font-size:15芒果桔子苹果芒果桔子苹果3.4在HTML中引用样式表1:使用Style元素2:使用Style属性3:使用Link元素3.4在HTML中引用样式表1:使用:使用Style元素元素STYLE元素应插入文档的元素部分中,所有规则都放置在开始标记和结束标记之间。显示页面时,只有嵌
25、入了STYLE元素的文档会受到影响 H1 color:maroon;P color:hotpink;font-family:Arial;3.4在HTML中引用样式表2:使用:使用Style属性属性style属性用于将样式表应用于单个元素。直接将在HTML标记里加入style参数,而style参数的内容就是CSS的属性和值。本段应用了内嵌样式本段以默认样式显示。您能发现本行中的不同之处吗?3.4在HTML中引用样式表3:使用:使用Link元素链入外部样式表元素链入外部样式表链入外部样式表是把样式表保存为一个样式表文件,然后在页面中用标记链接到这个样式表文件,这个标记必须放到页面的区内设置属性。3
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML CSS JS 入门 基础 ppt
限制150内