《html+css+js-入门基础》由会员分享，可在线阅读，更多相关《html+css+js-入门基础（142页珍藏版）》请在金锄头文库上搜索。
1、目录,1.HTML/CSS/JavaScript先睹为快2.HTML3.CSS4.JavaScript,1.1 HTML代码,未使用css，JavaScript的html网页未使用css，JavaScript的html网页这是一个未使用css，JavaScript的html网页使用记事本即可编写HTML代码，扩展名是html或htm。 使用浏览器就可以查看其效果。,1.2 CSS代码,使用了css的html网页h2 font-size:50pfont-size:20;font-style:italic使用了css的html网页这是一个使用了css的html网页,1.3 JavaScript代码
2、,使用了css和JavaScript的html网页h2 font-size:50 pfont-size:20;font-style:italicalert(“这是JavaScript起的作用“);使用了css和JavaScript的html网页这是一个使用了css和JavaScript的html网页,1.4 HTML、CSS、JavaScript的角色,HTML：超文本标记语言。是网页设计的主要语言。无论网页是否包括动画、多媒体、图形等各种复杂的元素，其基本架构都是HTML.CSS：层叠样式表。是目前唯一的网页排版样式标准，弥补了HTML在网页格式化方面的不足，帮助用户对页面的布局加以更多的控
3、制。JavaScript用于开发Internet客户端应用程序，实现了一种实时、动态、交互的页面功能。它的出现使静态的HTML页面逐渐本客户端可做出响应的动态页面所取代。可以在HTML语言中直接编写CSS和JavaScript代码，也可以独立编写。扩展名分别是.css和.js,2 HTML,1:HTML简介 2:基本标记3:列表list 4:表格table 5:表单form6:框架frame 7:层div,2.1.1 HTML概念,HTMLHyper Text Markup Language 超文本标识语言 是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档 H
4、TML文档：*.htm或*.html 文件名区分大小写浏览HTML文件的工具:浏览器 例：Netscape Navigator ,Microsoft IE,Mazilla FireFox,2.1.2 HTML文档的编写方法,手工直接编写 记事本等，存成.htm .html格式，要求用户必须掌握HTML使用可视化HTML编 辑 器 Frontpage、Dreamweaver等,容易产生废码,2.1.3 HTML 文档结构,my first page This is my first homepage!这是我的第一张网页！,2.1.3 HTML 文档结构,标记(签)是HTML语言的基本部分，比如、
5、。大多数标记总是成对出现，每一对标记一般都有一个开始的标记并且结束的标记总是在开始的标记前加一个斜杠。属性：HTML标记有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。my first homepage注意： 标记不区分大小写。例都可以 标记中不要有空格，否则浏览器无法识别。例错误 任何空格和回车在代码中无效。插入空格和回车分别用 和 属性的值可以用双引号引起来，也可以不引，最好引起来 各属性之间无先后次序，属性也可省略（即取默认值）,2.1.3 HTML 文档结构-head(title),标记出现在文档的开头部分。与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要
6、的意义。 1:标记定义HTML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。,2.1.3 HTML 文档结构-head(meta),2:标记 标记定义网页的一些相关信息，例文件的关键字，作者，网页过期时间等，这些信息不会在浏览器的文档窗口显示用来标记搜索引擎在搜索你的页面时所取出的关键词。用来标记文档的作者。用来标记你的页面的解码方式。用来自动刷新网页,2.1.3 HTML 文档结构-(head)meta,编写一个网页，要求3秒钟后自动跳转到北软教育首页。my first page三秒钟后本网页将自动跳转到北软教育首页,2.1.3 HTML 文档结构-body,表明是HTML文档内容主体
7、部分。在与之间，通常都会有很多其它标记；这些标记和标记属性构成HTML文档的主体部分。自身属性主要有： 1)bgcolor bgcolor属性标志HTML文档的背景颜色。如：bgcolor=“#CCFFCC“。 2)background background属性标志HTML文档的背景图片。可以使用的图片格式为gif,jpg 如：background=“images/bg.gif“。 3)text text属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。 text定义的颜色将应用于整篇文档。,2.1.3 HTML 文档结构-body,2.2 基本 HTML 标记,1.标题标
8、记 2.文字标记 3.段落级标记 4.字符级标记 5.水平标尺标记 6.HTML注释 6.超级链接 7.图像标记 8.移动的文字,2.2.1 标题标记,可显示六种大小的标题，即到，为最大，为最小 HTML 简介 HTML 简介HTML 简介HTML 简介HTML 简介HTML 简介HTML 简介,2.2.2 文字标记,文字属性标记1.文字颜色 . #=RRGGBB 16 进制数码 2.文字字体. #=客户端可获得的字体 3.文字大小. #=1, 2, 3, 4, 5, 6, 7等,2.2.3.段落级标记,段落标记(paragraph) 换行符标记 预格式化标记：HTML的段落与段落之间有一定的
9、空隔。 如果不希望出现空隔而只想换行的话，就要用到另一个元素，即元素。 利用标记对网页中文字段落进行预格式化，在输入过程中，按键盘上的回车键，就可以生成一个段落。即浏览器会以文本输入格式显示用三种标记分别实现登鹳雀楼的显示,2.2.4 字符级标记,常用字符级标记倾斜文本粗体文本下划线文本删除线文本强调文本居中显示文本空格标记,2.2.5 水平线标记,水平线：设定线宽：设定线长：设定对齐方式 #=left, right ：设定线的颜色,2.2.6 HTML注释,HTML文档可以插入注释。不但便于对程序排错，也使其他人更易读懂自己的代码 HTML注释的格式为： 源码依然存在，不会被浏览器所解释 注
10、释语句的特点是仅用于程序中某一句或一段语句的作用说明，浏览器在执行过程中将忽略掉注释语句的内容，对其视而不见。,2.2.7 超级链接,超级链接是用锚元素定义的 在元素下，有元素属性href,href的属性值为一个URL地址 如：指向学院的超级链接 如：普通超级链接 如：普通超级链接 开一个新的(浏览器)窗口 (Target Window) . ,2.2.7 超级链接,超级链接的路径 绝对路径：指文件的完整路径，包括协议，主机地址等，一般用于网站的外部链接。 http:/ http:/127.0.0.1:8080/digitalhome/a.jpg相对路径：指相对于当前文件的路径，它包含了从当前
11、文件指向目的文件的路径，一般用于网站的内部链接。,2.2.8 图像标记, 的基本属性是src属性，src的属性值为所引用的图片的URL地址。 src属性是必须的。src的URL可以是绝对地址，也可以是相对地址width指定宽度，height指定高度。它们的属性值可以是象素，也可以是%。 定义图片替代文本的方法是：替代文本有两个作用： 提示：若图片下载成功，把鼠标放在图片上，会出现提示文本。 替代：若图片下载不成功，在图片位置出现替代文本。图片的对齐方式#=left,right,top,middle,bottom,2.2.8 图像标记,HTML 文档中的图片GIF（Graphics Interc
12、hange Format ）图像 (.GIF) 支持无损压缩 只支持256色JPEG（Joint Photographic Experts Group）图像 (.JPG) 有损压缩 ，但这个损失是剔除一些视觉上不易察觉的部分。 通常用来保存超过256色的图片文件PNG（Portable Network Graphics ） 新兴的网络图片格式，结合了gif和jpeg的优点。 可以将图片文件以最小的方式压缩而不造成图片失真 支持48bit的色彩。,2.2.8 图像标记,图像的超级链接 图像的超级链接是指整个图像的超级链接，当点击图像的任何部分时，都会打开这个超级链接。定义默认超级链接的方法是：图
13、像的热区链接 热区就是在图片中特意划分出一个热点区域。当点击图象的热区时，才会打开这个超级链接。 需要使用map标记指定热区。,2.2.9 移动的文字,基本语法. 文字移动属性 (1)方向 ：direction=# #=left, right,up,down (2)方式： behavior=# #=scroll(循环), slide(只走一次), alternate(来回走) (3)循环: loop=# #=次数；若未指定则循环不止(infinite) (4)速度: scrollamount=# (5)延时: scrolldelay=#,2.3.1 无序列表,无序列表由和元素定义的:sport
14、s food drink friends 无序列表的默认符号是圆点。 元素有type属性，通过定义不同的type属性可以改变列表的项目符号。目前，type属性的属性值有：disc(圆)、circle （圆圈）、square（方块） 支持嵌套定义,2.3.2 有序列表,有序列表由和定义:sportsdrinkfriends元素也有自己的type属性，type属性的属性值有1、A、a、I、i等。例如，我们以A、B、C作为列表的编号元素还可以定义列表的起始编号，如我们希望列表的第一个编号为5，而不是1，则需要定义元素的start属性支持嵌套定义,2.4.1 表格的基本结构,定义表格定义表头定义表行
15、定义单元格 定义表行 定义单元格,2.4.1 表格的基本结构, 元素：定义一个表格。每一个表格只有一对和，一张页面中可以有多个表格。 元素：定义表格的行，一个表格可以有多行，所以对于一个表格来说不是唯一的。 元素：定义表格的一个单元格。每行可以有不同数量的单元格，在和之间是单元格的具体内容。 需要注意的是：上述的三个元素必须、而且只能够配对使用。缺少任何一个元素，都无法定义出一个表格。元素：定义表格的表头行，一个表格只能有一个表头行或者没有，所以对于一个表格来说是唯一的或没有。,2.4.2 表格的属性,表格的属性 width属性：指定表格或某一个表格单元格的宽度。单位可以是%或者象素。 hei
16、ght属性：指定表格或某一个表格单元格的高度。单位可以是%或者象素。 border属性：表格边线粗细 bgcolor属性：指定表格或某一个单元格的背景颜色。 background属性：指定表格或某一个单元格的背景图片。其属性值为一个URL地址 align属性：指定表格或某一个单元格里的内容（文本、图片等）的对齐方式(left,center,right)。,2.4.3 单元格的属性,单元格属性valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包括：top：顶端对齐； middle：居中对齐；bottom：底端对齐; baseline：相对于基线对齐;
17、align属性：指定某一个单元格里的内容（文本、图片等）的水平对齐方式（left,center,right） colspan：属性值表示当前单元格跨越几列 rowspan：属性值表示当前单元格跨越几行,2.4.4 行的属性,行属性 1、valign属性：指定某一个单元格里的内容（文本、图片等）的垂直对齐方式。垂直对齐方式的属性值包top：顶端对齐； middle：居中对齐； bottom：底端对齐。 baseline：相对于基线对齐。 2、align属性：指定表格或某一个单元格里的内容（文本、图片等）的水平对齐方式(left,center,right) 3、height属性：指定表格中某一行的高度。单位可以是%或者象素,
