HTML
超文本标记语言,是web开发的基本技术
HTML结构
<HTML>
<HEAD>
<TITLE>网页标题</TITLE>
</HEAD>
<BODY>
主体部分
</BODY>
</HTML>
标签一般成对出现,第一个标签是开始标签,第二个标签是结束标签。
显示中文
需要在<head>
标签中加入 <meta charset="UTF-9">
HTML元素
指的是从开始标签到结束标签之间的全部代码,是HTML语言的基本部分。
空的HTML元素,没有内容的HTML元素被称为空的HTML元素。<br>
就是一个空元素。
HTML元素属性
为HTML元素提供附加信息,格式:<开始标签 属性名=“属性值”> <结束标签>。
一定要添加到开始标签中。
例如:
<h1 align="center">This is heading 1 </h1>
<!--标题居中-->
常用基本标签
html 基础标签
html常见基础标签大汇总
HTML常用标签详解
表格
表格由<table>
标签来定义,<tr>
定义行,<td>
定义列,<td>
管理单元格内的数据,创建一个表格需要三个标签全定义才可以创建成功。
<HTML>
<HEAD>
<meta charset="UTF-9">
<TITLE>网页标题</TITLE>
</HEAD>
<BODY>
<table border="1" width="200px" heigth="150px">
<caption>表名</caption>
<tr>
<td align="center">test1</td> <!--居中-->
<td bgcolor="ponk">test2</td> <!--背景色-->
</tr>
<tr>
<td>test3</td>
<td>test4</td>
</tr>
<tr>
<th>test5</th> <!--<th>是特殊的列标签,单元格内文字加粗居中-->
<th>test6</th>
</tr>
</table>
</BODY>
</HTML>
表单
用于搜集不同类型的用户输入,最常见典型的表单是注册页面。是一个包含表单元素的区域。采用<form>
表单标签定义。
<form Action="url" Method="*" >
<inpout> </input>
……
</form>
表单属性
action
当用户点击按钮时,表单内容会被传送到另一文件。action
属性定义了目标文件的文件名,由动作属性只想的这个文件会对接收到的输入数据进行相关处理。
method
告诉浏览器如何将编码后的数据发给服务期。其值可以为get
和post
get
将数据直接附在表单的action URL之后,这两者之间问号进行分割。
post
直连服务器,然后将html表单的值发送给WEB服务期中,没有数值长度限制。
表单三个要点
- 表单控件
- 动作属性
- 方法属性
表单控件
文本输入框、单选按钮、复选框
input
根据type
可分为文本输入框、单选按钮、复选框、按钮。
<HTML>
<HEAD>
<meta charset="UTF-9">
<TITLE>网页标题</TITLE>
</HEAD>
<BODY>
<from>
<!--------------文本输入框----------------->
用户名:<input type="test" name="wenben" maxlength="10" size="40"/>
<!--输入框 ID 最大输入长度 输入框长度-->
密码:<input type="password" name="pwd" maxlength="10" size="44"/>
<!--密码框 ID 最大输入长度 输入框长度-->
<!--------------单选按钮----------------->
性别:<input type="radio" name="sex" value="nan" checked="checked"/>男
<input type="radio" name="sex" value="nv"/>女
<!--单选按钮 ID 返回值 显示值 默认值 -->
<!--------------多选框----------------->
多选框:
<input type="checkbox" name="01" value="001" />第一个
<input type="checkbox" name="02" value="002" />第二个
<input type="checkbox" name="03" value="003" />第三个
<input type="checkbox" name="04" value="004" />第四个
</from>
</BODY>
</HTML>
按钮
一共三个按钮,分别是普通按钮,重置按钮和提交按钮。需要结合js来使用。
<HTML>
<HEAD>
<meta charset="UTF-9">
<TITLE>网页标题</TITLE>
</HEAD>
<BODY>
<from action="url" method="get">
<inpout type="button" name="btn" value="普通按钮"/>
<inpout type="reset" name="re" value="重置按钮"/>
<inpout type="submit" name="sub" value="提交按钮"/>
</from>
</BODY>
</HTML>
提交按钮需要用到from
中的action
和method
属性。
下拉列表
Select
下拉列表可以用option
定义多个选项。
<HTML>
<HEAD>
<meta charset="UTF-9">
<TITLE>网页标题</TITLE>
</HEAD>
<BODY>
<from>
下拉列表选择一个数字:
<select name="sel">
<option selected="selected">001</option>
<!--设置默认值 -->
<option>002</option>
<option>003</option>
<option>004</option>
<option>005</option>
</from>
</BODY>
</HTML>
文本域
<textarea> 文本域 </textarea>
<HTML>
<HEAD>
<meta charset="UTF-9">
<TITLE>网页标题</TITLE>
</HEAD>
<BODY>
<from>
大声说出你的想法:<br><br>
<textarea name="tt" cols="40" rows="30">
</textarea>
<!--名字 长 宽 -->
</from>
</BODY>
</HTML>
H5提供的新的表单类型
<HTML>
<HEAD>
<meta charset="UTF-9">
<TITLE>网页标题</TITLE>
</HEAD>
<BODY>
<from action="url" method="get">
选取颜色:<input type="color" />
<!--取色器 -->
日期1:<input type="date"/>
日期2:<input type="datetime"/>
日期3:<input type="datetime-local"/>
邮件:<input type="email"/>
时间:<input type="time"/>
周:<input type="week"/>
月:<input type="month"/>
输入数:<input type="number" max="20" min="0" step="2" value="4" />
<!--数字选择器 最大数 最小数 选择步长 默认值-->
地址:<input type="url" />
<!--前面要加上https:// -->
提交按钮:<input type="submit" name="sub" value="提交"/>
</from>
</BODY>
</HTML>
CSS
通过CSS样式表解决HTML标签的外观样式单一的问题,实现内容与样式的分离,方便团队开发。
基本格式
<STYLE type="test/css" >
关键词{属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;}
……
</STYLE>
通过标签选择器
借助<STYLE>
标签实现样式;其中关键词为标签选择器。
<HTML>
<HEAD>
<meta charset="UTF-9">
<TITLE>网页标题</TITLE>
<STYLE type="test/css" >
P{color:red;font-size:30px;font-family:隶书;}
……
</STYLE>
</HEAD>
<BODY>
<P>我是一句有修饰的话</P>
</BODY>
</HTML>
通过类选择器
建立类选择器实现样式,为元素添加类属性,再将类设置CSS样式
<HTML>
<HEAD>
<meta charset="UTF-9">
<TITLE>网页标题</TITLE>
<STYLE type="test/css" >
.test{color:red;font-size:30px;font-family:隶书;}
……
</STYLE>
</HEAD>
<BODY>
<P class="test">我是一句有修饰的话</P>
</BODY>
</HTML>
注意
当标签选择器和类选择器冲突时,类选择器会覆盖标签选择器的样式。
常用的样式属性
字体属性
font-size
字体大小font-family
字体类型font-style
字体样式color
设置或检索文本的颜色text-align
文本对齐
背景属性
background-color
设置背景颜色background-image
设置背景图片background-repeat
设置图片的平铺方式
<!--------------设置背景颜色----------------->
<HTML>
<HEAD>
<meta charset="UTF-9">
<TITLE>网页标题</TITLE>
<STYLE type="test/css" >
body{background-color:pink;}
p{background-color:red;}
ins{background-color:yellow;}
h1{background-color:green;}
……
</STYLE>
</HEAD>
<BODY>
<P>我是P</P>
<ins>我是ins</ins>
<h1>我是h1</h1>
</BODY>
</HTML>
<!--------------设置背景图片----------------->
<HTML>
<HEAD>
<meta charset="UTF-9">
<TITLE>网页标题</TITLE>
<STYLE type="test/css" >
body{background-image:url( );background-repeat:repeat-y;}
<!--图片沿Y轴方向平铺-->
……
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
行内样式表
样式表的修饰只针对某行来进行,将style
作为属性在看待
<开始标签 style="属性名1:属性值1;属性名2:属性值2;">
实例:
<HTML>
<HEAD>
<meta charset="UTF-9">
<TITLE>网页标题</TITLE>
</HEAD>
<BODY>
<p>我是P</p>
<p style="color:red;fornt:30px;">我是修饰过的P</p>
</BODY>
</HTML>
外部样式表
使用外部样式表文件(.css)
使一个网站中多个页面的样式保持一致
连接方式
- 链接(LINK)外部样式表
- 导入(@import)外部样式表
外部样式表.CSS文件:
body{background-image:url( );background-repeat:repeat-y;}
h1{background-color:red;}
p{background-color:green;}
链接(LINK)外部样式表
使用LINK标签
HTML文件:
<HTML>
<HEAD>
<meta charset="UTF-9">
<TITLE>网页标题</TITLE>
<link href="css/外部样式表.CSS" rel="stylesheet" type="text/css"/>
<!--链接CSS文件 得到所有浏览器的支持 固定-->
</HEAD>
<BODY>
<h1>我是h1</p>
<p>我是P</p>
</BODY>
</HTML>
导入(@import)外部样式表
使用@import
HTML文件:
<HTML>
<HEAD>
<meta charset="UTF-9">
<TITLE>网页标题</TITLE>
<style type="text/css">
@import "css/外部样式表.CSS";
</style>
</HEAD>
<BODY>
<h1>我是h1</p>
<p>我是P</p>
</BODY>
</HTML>
JS
JavaScript
是一种具有面向对象能力的、解释性的程序设计语言。是基于对象和事件驱动并具有相对安全性的客户端脚本语言。
基于对象
提供好了很多对象,可以直接拿来使用事件驱动
html实现静态效果,JavaScript实现动态效果js的作用
操作HTML和CSS
语言特点
松散型
他的变量不必具有一个明确的类型解释型
不需要编译,直接解释执行基于对象
可以直接使用JS已经创建的对象安全性
不允许访问本地硬盘,不能将数据写入到服务器上跨平台
JS依赖于浏览器,与操作系统无关
核心构成
- 核心 ECMAScript
组织制定js语法、语句和函数 - 文档对象模型 DOM
- 浏览器对象模型 BOM
开发工具集
- 代码编辑器:Hbuilder、Notepad++等
- 浏览器:谷歌、IE、火狐等
编写
在html文件中
可以在<head></head>
中写也可以在<body></body>
中写。
<HTML>
<HEAD>
<meta charset="UTF-9">
<TITLE>网页标题</TITLE>
<script language="JavaScript">
//单行注释
//让页面弹出“hello world”
alert("hello world01");
</script>
</HEAD>
<BODY>
<script language="JavaScript">
//单行注释
//让页面弹出“hello world”
alert("hello world02");
</script>
</BODY>
</HTML>
先执行<head></head>
中的再执行<body></body>
中的。
在外部文件中
创建外部文件(.js)
,在html文件中<head></head>
引用
<HTML>
<HEAD>
<meta charset="UTF-9">
<TITLE>网页标题</TITLE>
<script language="JavaScript" src=".js后缀的文件路径">
alert("我是不会执行的");
</script>
<script language="JavaScript">
alert("我是会执行的");
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
- 当一个
Scirpt
标签引用了外部的js文件,script
在这个标签中如果还存在js代码,是不会执行的。新建一个script
标签内的js代码是会执行的。 - 每行结尾的分号可有可无,但是推荐写上分号。
标识符
- 第一个字符必须是一个字母、下划线(_)或一个美元符号($)
- 其他字符可以使字母、下划线、美元符号或者数字
- 不能和关键字、保留字等预留标识符冲突
语法
注释
单行注释
使用双斜线开头(//),在"//"后面的文字即为注释内容,仅仅注释本行内容,换行无效。
多行注释
使用/*
开头,以*/
结尾,在两者之间的内容均为注释内容。
声明变量
使用var运算符
var user="nicooo" //正确
var number=1 //正确
int a=0 //错误
声明规则
- 第一个字符必须是一个字母、下划线(_)或一个美元符号($)
- 其他字符可以使字母、下划线、美元符号或者数字
- 不能和关键字、保留字等预留标识符冲突
声明多个变量
var a,b,c,d;
var e=1,f=2,g=3;
全局变量和局部变量
变量分为全局变量
和局部变量
,在函数体外声明的变量 为全局变量
,无论有没有var
修饰。在函数内部声明的未用var
进行修饰的变量也为全局变量
。
在函数体内声明,并用var
修饰的变量 为局部变量
。
变量的作用域
变量的作用域指的是变量的使用范围。
全局变量,作用于整个代码的变量。
局部变量,只作用于定义的函数体内。
数值类型
数值型Number
- 整数 :
123
//十进制
0123
//八进制,以0开头
0x123
//十六进制,以0x开头 - 浮点型:整数部分加小数部分组成,只能用十进制来表示,不过可以使用科学计数法
3.1415926
//标准形式的浮点数
3.14E9
//采用科学计数法来表示,代表的是3.14乘以10的9次方
字符串型
字符串型数据是使用单引号或者双引号括起来的一个或多个字符
布尔型
布尔型数据只有ture和false两个。在js中可以使用整数0代表false,使用非零整数来代表ture。
转义字符
以反斜杠开头的不可显示的特殊字符通常称为控制字符,也被称为转义字符。
\b
退格
\n
换行
\t
Tab符
\r
回车
\'
单引号
\''
双引号
\\
双反斜杠
空值
null 用于定义空的或者不存在的引用
var a=null;
未定义值
已经声明但是没有赋值的变量,undefined
是关键字,用来表示未定义值。
var a;
alert(a);
查询数据类型
typeof
用于查看变量的数据类型
var a=10;
alert(typeof(a));
运算符
赋值运算符
//简单运算符
a=b;
//复合运算符
a+=b; //相当于a=a+b
a-=b; //相当于a=a-b
a*=b; //相当于a=a*b
a/=b; //相当于a=a/b
a%=b; //相当于a=a%b
a&=b; //相当于a=a&b
a|=b; //相当于a=a|b
a^=b; //相当于a=a^b
函数
声明方法
function 函数名(输入参数){
函数体;
return 返回参数;
}
if语句
与大多数编程语言一致,在此不再赘述。
if(expression){
//expression为真时执行
}
switch语句
与c中一致,在此不在赘述。
switch(expression){
case judgement1:statement1:break;
case judgement2:statement2:break;
……
default:defaultstatement;
}
for语句
与大多数编程语言一致,在此不再赘述。
for(initialize;test;increment){
statement;
}
//例子
var sum=0;
for(i=1;i<10;i++){
sum+=i;
}
slert("总和为:"+sum);
while语句
与大多数编程语言一致,在此不再赘述。
while(expression){
statement
}
//例子
var sum1=0;
car i=100;
while(i<=1){
sum1+=i;
i++;
}
alert("while总和为:"+sum1);
do-while语句
do-while循环时先执行一次循坏,再判断条件是否成立。所以不管条件成立与否,至少能够执行一次。
匿名函数
声明
var add=function(a,b){
var sub=a-b;
};
//通过变量名调用函数
add(10,20);
//匿名函数作为其他函数的参数使用
function test(func){
func();
}
test(funcition(){
document.write("hello");
});
//上面的传参实质的工作原理:
*var func = function(){
document.write("hello");
}
全局函数
eval函数
执行js代码(如果字符串时一个js代码,使用方法直接执行)
var str="slert('1234')";
eval(str);
encodeURI()编码decodeURI()解码
var s="测试中文123abc";
var bianma=encodeURI(s);
var ss="%E6";
var jiema=decodeURI(ss);
isNaN函数
判断是否为数字,是数字返回false
,不是数字返回ture
事件
常用事件
事件处理
事件处理程序可以使任意的JS语句,通常使用函数来对事件进行处理。
在HTML中绑定
<HTML>
<HEAD>
<meta charset="UTF-9">
<TITLE>网页标题</TITLE>
<script language="JavaScirpt">
//声明一个函数
function test(){
alert("我被点击了");
}
</script>
</HEAD>
<BODY>
<form>
<input type="button" value="按钮" onclick="test()"/>
</form>
</BODY>
</HTML>
在JavaScript中绑定
<input type="button" name="save" id="save" value="保存"/>
<script language="javascript">
var bt_save=document.getElementById("save");
bt_save.onclick=function(){
alert("保存按钮被点击");
};
</script>
正则表达式
是一个描述字符模式的对象,使用正则表达式进行强大的模式匹配和文本检索与替换的函数。
主要用来验证客户端的输入数据。用户填完表单单击按钮后,表单就会被发送到服务器,在服务器端通产会用PHP、ASP.NET等服务器脚本进行进一步处理。
正则表达式的创建
var objExp=/\d/;
正则表达式的判定
- 使用
test()
方法进行模式匹配,如果搜索到匹配的字符返回ture
,搜索不到返回false
var objExp=/\d/;
objExp.test("abc");
- 使用
esec()
方法进行模式匹配,当没有搜索到匹配字符时返回null
,当搜索到时返回包含正则表达式相匹配的字符串。
cookie
cookie的组成
cookie是由名/值对行程的文本,其组成为:name=value。
dociment.cookie='user=值;[expires=失效时间;path=访问路径;domain=域名访问;secure=安全的https限制通信]'
//中括号中值可选的 name=value时必选
//向本地磁盘写入cookie
document.cookie='用户名';
alert(document.cookie);
cookie局限性
- 每个特定的域名下最多生成20个cookie(根据不通的浏览器有所不同)
- cookie最大大约4096字节(4k),为了更好的兼容性,一般不超过4095字节
- 储存在客户端的文本文件,所以特别重要和敏感的数据不建议保存在cookie