目录
CSS技术
层叠样式表(cascading style sheets,CSS)是一种用来表现HTML或XML等文件样式的计算机语言,用于为HTML文档定义布局。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有字体字号样式,拥有对网页对象和模型样式编辑的能力。
CSS规则
CSS。中包括3部分内容:选择符、属性和属性值。
语法格式为: 选择符{属性1:属性值1;属性2:属性值2;属性3:属性值3 }
选择符: 又称选择器,是CSS中很重要的概念,所有HTML中的标记都是通过不同的CSS选择符 进行控制的。
属性: 主要包括字体属性、文本属性、背景属性、布局属性、边界属性、列表项目属性、表格属 性等内容。
属性值: 为某属性的有效值。属性与属性值之间以“:”分隔。
CSS选择器
CSS选择器常用的是标记选择器、类别选择器和ID选择器。使用选择器可对不同的HTML标签进行控制,从而实现各种效果。
标记选择器
HTML文档是由多个不同标记组成的,而标记选择器就是声明那些标记采用的样式。例如p选择器,就是用于声明页面中所有<p>标记的样式风格。同样可以通过h1选择器来声明页面中所有<h1>标记的CSS风格。
类别选择器
使用标记选择器非常快捷,但是会有一定的局限性,页面如果声明标记选择器,那么页面中所有该标记内容会有相应的变化。例如,页面中有3个<p>标记,如果想要每个<p>的显示效果不一样,使用标记选择器就无法实现了,这时需要引入类别选择器。
类别选择器的名称由用户自己定义,并以“.”开头,定义的属性与属性值也要遵循CSS规范。
ID选择器
ID选择器使用“#”进行标识,后面紧跟ID名。与类别选择器不同,在一个HTML文档中,由于不能包含两个相同的ID标记,因此定义的ID选择器只能使用一次,而类别选择器可以使用多次。
CSS样式的引入方式
1 行内式
行内式是在某个元素内通过使用style属性实现的,它只针对某个元素,而不会影响整个文件,所以可以控制某个HTML元素的外观表现。
2 内嵌式
内嵌式使用<style>标签将CSS属性名和属性值引人html页面中,通常<style>标签放置在head标签中。内嵌式的形式没有行内式表现得直接,但是行内式只能对一个标签生效,如果希望影响到多个元素,必须对每个元素都复制一遍,且当样式发生变化时,必须一个一个地进行修改,非常不方便。内嵌式将样式编写到head 中的<style>标签里面,然后通过Css 的选择器来选中元素,并为其设置各种样式,还可以同时为多个标签设置样式,并且只需要修改一处即可全部改变。
3 链接式
链接式引人CSS样式文件是通过link标签实现的,它只能位于HTML文档的head标签内,且必须有href属性,该属性用于指定需要引人的CSS文件的路径。
其基本格式为: <link type=" text/css"rel="stylesheet"href="CSs样式文件的地址">
link元素中type属性用于规定链接文档的MIME类型。rel属性用于规定被链接文档与当前文档之间的关系,例如, alternate定义交替出现的链接,appendix定义文档的附加信息,stylesheet定义一个外部加载的样式表等。href属性用于指定CSS样式文件的绝对或相对地址。
4 导入式
导入式与链接式的功能基本相同,只是语法和动作方式上略有区别。导入式采用import方式导入样式表,在HTML文件初始化时,样式就会导入到HTML文件内,作为文件的一部分。
JavaScript技术
JavaScript是Web页面中一种比较流行的脚本语言,它由客户端浏览器解释执行,被广泛应用在Web项目中。
JavaScript概述
JavaScript是一种具有函数优先的轻量级、解释型或即时编译型的编程语言。它被广泛用于Web 应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌人在HTML中来实现自身功能的。其主要特点如下:
(1)脚本语言:JavaScript是一种解释型的脚本语言,在程序的运行过程中逐行进行解释。
(2)基于对象:JavaScript是一种基于对象的脚本语言。它不仅可以创建对象,也能使用现有的对象。
(3)事件驱动:JavaSeript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。
(4)跨平台:JavaScript脚本语言不依赖操作系统,仅需要浏览器的支持。只要机器上的浏览器支持JavaSeript,JavaScript脚本程序就可以正确执行。
JavaScript基本语法
1 数据类型
2 变量
JavaScript变量的命名规则如下:
(1)变量名由字母、数字或下划线组成,但必须以字母或下划线开头
(2)变量名称区分大小写,如y和Y是不同的变量
(3)变量名中不能有空格、逗号、加减号等符号
(4)不能使用JavaScript中的关键字
3 注释
JavaScript注释可用于提高的可读性。JavaScript不会执行注释。JavaScript 的注释分为单行注释和多行注释。单行注释以//开始,且没有结束标记,只占一行。多行注释以/*开始,以*/结尾。
4 分号
在JavaScript中,常常使用分号“:”分隔表达式,代表语句的结束。但分号作为语句的结束不是必需的,如果语句的结束处没有分号,JavaScript会自动将该行代码的结尾作为语句的结尾。
5 运算符
运算符是程序执行特定算术或操作的符号,用于执行程序代码运算。JavaScript中的运算符包括算术运算符、赋值运算符、比较运算符、逻辑运算符和条件运算符5种。
1)算术运算符
2)赋值运算符
3)比较运算符
4)逻辑运算符
5)条件运算符
JavaScript的条件运算符是一种特殊的三目运算符。
JavaScript的引入
通常情况下,在Web页面中使用JavaScript有两种方式:一种是在页面中直接JavaScript, 即内嵌式;另一种是链接外部JavaScript,即外链式。
内嵌式:就是在HTML文档中通过<script>标签及其相关属性引人 JavaScript 代码。
外链式:就是采用链接外部JavaScript文件的方式在Web页面中引入JavaSeript。
JavaScript的使用
函数:是由事件驱动的或者当它被调用时执行的可重复使用的代码块。JavaScript使用关键字function定义函数。函数可以通过声明定义,也可以是一个表达式。
(1)functionName:必选,用于指定函数名。注意函数名区分大小写。
(2) var1:可选,用于指定参数列表。当有多个参数时,参数间使用逗号进行分隔。一个函数最多可以有255个参数。
(3) statements:必选,用于实现函数功能。
(4)expression:可选,用于返回函数值。
事件:函数声明后不会在打开浏览器时立即执行,而是在需要的时候调用。可以在某事件发
生时直接调用函数(比如当用户点击按钮时)。采用事件驱动是JavaScript的一个最基本的
特征。
正则表达式
正则表达式(regular expression)描述了一种字符串匹配的模式(patterm)。以用来检查: -个字符串是否含有某种子串、将匹配的子串替换或者从某个字符串中取出付合条件的子串等。构造正则表达式就是用多种元字符与运算符将小的表达式结合在一起来创建更大的表达式。正则表达式可以是单个的字符、字符集合、字符范围、字符间的选择或者所有这些组件的任意组合。
基本语法
正则表达式主要包括普通字符(例如,a到2之间的字母)和元字符。元字符不代表它们大
身的字面意思,它们都有特殊的含义。元字符又包括元字符、反义元字符和重复限定元字符。
元字符
在正则表达式中,“^”代表字符串的开头,“$”代表字符串的结束。例如:
(1)表达式^hi能匹配hi,him,hidden等。
(2)表达式hi $能匹配hi, chi等。
(3)表达式^hi $只能匹配hi。
反义元字符
重复限定元字符
在重复限定元字符中,“+”表示前一字符模式可以被重复1次或n次,例如表达式“^go+gle $”,可以匹配“gogle”“google”“go00gle”等。“*”表示前一字符模式可以被重复0 次或n次,例如表达式“^go* gle$”,可以匹配“ggle"“google"“go0gle."等。“{x,}”表示前一字符模式可以被重复至少x次,例如表达式“^go{2, }gle$”,可以匹配“ google "gooogle”等。
Web页面中使用正则表达式
在Web开发中,正则表达式通常用来检测、查找替换某些符合规则的字符串,如检测用户输人是否为空,E-mail格式是否正确、采集符合规则的页面内容等。