HTML+CSS+JS

目录•1.HTML/CSS/JavaScript先睹为快•2.HTML•3.CSS•4.JavaScript1.1HTML代码•html•head•title未使用css，JavaScript的html网页/title•/head••body•h2未使用css，JavaScript的html网页/h2•hr•p这是一个未使用css，JavaScript的html网页•/body•/html•使用记事本即可编写HTML代码，扩展名是html或htm。•使用浏览器就可以查看其效果。1.2CSS代码•html•head•title使用了css的html网页/title•styletype=text/css•h2{font-size:50}•p{font-size:20;font-style:italic}•/style•/head••body•h2使用了css的html网页/h2•hr•p这是一个使用了css的html网页•/body•/html1.3JavaScript代码•html•head•title使用了css和JavaScript的html网页/title•styletype=text/css•h2{font-size:50}p{font-size:20;font-style:italic}•/style•scripttype=text/JavaScript•alert(这是JavaScript起的作用);•/script•/head••body•h2使用了css和JavaScript的html网页/h2•hr•p这是一个使用了css和JavaScript的html网页•/body•/html1.4HTML、CSS、JavaScript的角色•HTML：超文本标记语言。是网页设计的主要语言。无论网页是否包括动画、多媒体、图形等各种复杂的元素，其基本架构都是HTML.•CSS：层叠样式表。是目前唯一的网页排版样式标准，弥补了HTML在网页格式化方面的不足，帮助用户对页面的布局加以更多的控制。•JavaScript用于开发Internet客户端应用程序，实现了一种实时、动态、交互的页面功能。它的出现使静态的HTML页面逐渐本客户端可做出响应的动态页面所取代。•可以在HTML语言中直接编写CSS和JavaScript代码，也可以独立编写。扩展名分别是.css和.js2HTML•1:HTML简介•2:基本标记•3:列表list•4:表格table•5:表单form•6:框架frame•7:层div2.1.1HTML概念•HTMLHyperTextMarkupLanguage超文本标识语言是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档HTML文档：*.htm或*.html文件名区分大小写浏览HTML文件的工具:浏览器例：NetscapeNavigator,MicrosoftIE,MazillaFireFox2.1.2HTML文档的编写方法1.手工直接编写记事本等，存成.htm.html格式，要求用户必须掌握HTML2.使用可视化HTML编辑器Frontpage、Dreamweaver等,容易产生废码2.1.3HTML文档结构htmlheadtitlemyfirstpage/title/headbodybgcolor=bluepalign=centerThisismyfirsthomepage!hrsize=7width=75%color=redpalign=right这是我的第一张网页！/body/html2.1.3HTML文档结构•标记(签)是HTML语言的基本部分，比如html、head、body、hr、p。大多数标记总是成对出现，每一对标记一般都有一个开始的标记并且结束的标记总是在开始的标记前加一个斜杠。•属性：HTML标记有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。palign=rightcolor=redmyfirsthomepage/phrsize=7align=centerwidth=75%color=red•注意：标记不区分大小写。例htmlHTML都可以标记中不要有空格，否则浏览器无法识别。例title错误任何空格和回车在代码中无效。插入空格和回车分别用br和 属性的值可以用双引号引起来，也可以不引，最好引起来各属性之间无先后次序，属性也可省略（即取默认值）2.1.3HTML文档结构-head(title)•head标记出现在文档的开头部分。head与/head之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。1:titletitle标记定义HTML文档的标题。title与/title之间的内容将显示在浏览器窗口的标题栏。2.1.3HTML文档结构-head(meta)2:meta标记meta标记定义网页的一些相关信息，例文件的关键字，作者，网页过期时间等，这些信息不会在浏览器的文档窗口显示metaname=keywordscontent=study,computer用来标记搜索引擎在搜索你的页面时所取出的关键词。metaname=authorcontent=“liukl用来标记文档的作者。metahttp-equiv=Content-Typecontent=text/html;charset=gb2312用来标记你的页面的解码方式。metahttp-equiv=refreshcontent=5;URL=文档结构-(head)meta•编写一个网页，要求3秒钟后自动跳转到北软教育首页。•html•head•titlemyfirstpage/title•metahttp-equiv=refreshcontent=3;URL=•/head•body•palign=“center”三秒钟后本网页将自动跳转到北软教育首页/p•/body•/html2.1.3HTML文档结构-body•body表明是HTML文档内容主体部分。在body与/body之间，通常都会有很多其它标记；这些标记和标记属性构成HTML文档的主体部分。•body自身属性主要有：1)bgcolorbgcolor属性标志HTML文档的背景颜色。如：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”红色Red=”#ff0000”蓝色Blue=”#0000ff”白色White=”#ffffff”黄色Yellow=”ffff00”绿色Green=”#00ff00”海蓝色Aqua=”#00ffff”2.2基本HTML标记•1.标题标记h#•2.文字标记font•3.段落级标记pbr•4.字符级标记•5.水平标尺标记hr•6.HTML注释!----•6.超级链接a•7.图像标记img•8.移动的文字marquee2.2.1标题标记•可显示六种大小的标题，即H1到H6，H1为最大，H6为最小HTMLHEADTITLEHTML简介/TITLE/HEADBODYH1HTML简介/H1H2HTML简介/H2H3HTML简介/H3H4HTML简介/H4H5HTML简介/H5H6HTML简介/H6/BODY/HTML2.2.2文字标记•文字属性标记1.文字颜色•fontcolor=#.../font•#=RRGGBB16进制数码2.文字字体•fontface=“#”.../font#=客户端可获得的字体3.文字大小•fontsize=#.../font•#=1,2,3,4,5,6,7等2.2.3.段落级标记•段落标记(paragraph)p•换行符标记br•预格式化标记pre：•HTML的段落与段落之间有一定的空隔。•如果不希望出现空隔而只想换行的话，就要用到另一个元素，即br元素。•利用pre标记对网页中文字段落进行预格式化，在输入过程中，按键盘上的回车键，就可以生成一个段落。即浏览器会以文本输入格式显示•用三种标记分别实现登鹳雀楼的显示2.2.4字符级标记•常用字符级标记i倾斜文本/ib粗体文本/bu下划线文本/us删除线文本/sem强调文本/emcenter居中显示文本/center•空格标记 2.2.5水平线标记•水平线hrsize=#：设定线宽hrwidth=#：设定线长hralign=#：设定对齐方式#=left,righthrcolor=#：设定线的颜色•hrsize=7align=centerwidth=75%color=red2.2.6HTML注释•HTML文档可以插入注释。不但便于对程序排错，也使其他人更易读懂自己的代码•HTML注释的格式为：!--注释内容--源码依然存在，不会被浏览器所解释BODY!--以下是程序的主体--•注释语句的特点是仅用于程序中某一句或一段语句的作用说明，浏览器在执行过程中将忽略掉注释语句的内容，对其视而不见。2.2.7超级链接超级链接是用锚元素a定义的•在a元素下，有元素属性href,href的属性值为一个URL地址如：ahref=指向学院的超级链接/a如：ahref=top.htm普通超级链接/a如：ahref=../pic/left.htm普通超级链接/a•开一个新的(浏览器)窗口(TargetWindow)ahref=URLtarget=“_blank.../a2.2.7超级链接超级链接的路径•绝对路径：指文件的完整路径，包括协议，主机地址等，一般用于网站的外部链接。•相对路径：指相对于当前文件的路径，它包含了从当前文件指向目的文件的路径，一般用于网站的内部链接。相对位置如何输入同一目录输入要链接的文档名链接上一目录先输入../，再输入目录名链接下一目录先输入目录名，后加/2.2.8图像标记•imgsrc=“图片名称”img的基本属性是src属性，src的属性值为所引用的图片的URL地址。src属性是必须的。src的URL可以是绝对地址，也可以是相对地址imgsrc=sample.jpgwidth=100height=100width指定宽度，height指定高度。它们的属性值可以是象素，也可以是%。•定义图片替代文本的方法是：imgsrc=“图片名称”alt=“这是一张图片”替代文本有两个作用：•提示：若图片下载成功，把鼠标放在图片上，会出现提示文本