HTML
简介: HTML(Hyper Text Mark-up Language 超文本标记语言)的缩写,是最基础的网页语言 ,通过标签定义语言,不区分大小写。
<html>
<head>
<!--头部分-->
</head>
<body>
<!--体部分-->
</body>
</html>
标签: <标签名 属性名=‘属性值1>数据内容</标签名>
属性名可以有多个用空格隔开,空标签没有数据内容,只有属性名,例如标签。
**文件名:**只能以英文字母、数字和下划线组成。
常用的标签:
1.段落标签
<p align='center'>段落标签</p>
属性:align ;定义段落中的文本水平方向的对齐方式。
属性值:left(左对齐)、right(右对齐)、center(居中对齐)
2.换行标签
<br/>
3.标题标签
<h1></h1>---<h6></h6>:
属性:align ;定义标题中的文本水平方向的对齐方式。
属性值:left(左对齐)、right(右对齐)、center(居中对齐)
4.文字段落缩进
<blockquote>
<p>自动缩进p标签内的文本</p>
</blockquote>
5.建立无序列表
<ul type="circle">
<li>列表项</li>
<li>列表项</li>
</ul>
属性:type ;定义列表项的符号。
属性值:circle(空心圆)、disc(实心圆)、square(实心方块)
6.建立有序列表
<ol type="a">
<li>列表项</li>
<li>列表项</li>
</ol>
属性:type ;定义列表项的符号。 start:用来设置列表编号的起始数值。
属性值:a、A、i、I
7.建立自定义列表
<dl>
<dt>列表标题</dt>
<dd>列表项</dd>
<dd>列表项</dd>
</dl>
8.文字特殊样式
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<s>删除线</s>
<big>放大</big>
<small>缩小</small>
<strong>加强强调</strong>
<em>强调倾斜</em>
9.图片标签
<img/>
属性:
src:指定图片源文件;
alt :图片未加载成功的提示文字;
width:指定图片的宽度;
height:指定图片的高度;
border:指定图片的边框样式;
alghr:top/bottom/middle;图片位于两端文字在垂直方向的一个上/中/下的对齐方式;
10.超链接
<a href="http://baidu.com" target="_blank"></a>
属性:
href:连接地址;空连接可以用"#"代替;
target :打开方式;_self在当前页面中打开,_blank在新的空白窗口打开。
11.
<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是固有的唯一格式表现。可以通过的 class 或 id 应用额外的样式。
<div class="test">111111</div>
12. 标签被用来组合文档中的行内元素。
span标签和div标签是最常用的标签,主要对他们进行样式的应用来改变视觉上的变化。
<span>span标签</span>
13.
<table>
<caption>表格标题</caption>
<tr>
<th>表头</th>
<td>第一行的第一个单元格</td>
<td>第一行的第二个单元格</td>
</tr>
<tr>
<td>第二行的第一个单元格</td>
<td>第二行的第二个单元格</td>
</tr>
</table>
表格的表头<th>是<td>单元格的一种变体,实质上是一种单元格加粗和居中
table的属性:
width:表格的宽度
height:表格的高度
align:表格的对齐方式
border:表格的边框
bordercolor:边框的颜色
cellspaning:单元格之前的距离
csllpadding:单元格与内容之间的距离
bgcolor:表格的背景颜色
background:表格的背景图片
tr的属性:
height:行的高度
bordercolor:边框的颜色
bgcolor:表格的背景颜色
background:背景图片
align:文本水平对齐方式
valign:文本垂直对齐方式
td的属性:
width:单元格的宽
height:单元格的高度
bordercolor:边框的颜色
bgcolor:背景颜色
background:表格的背景图片
align:文本水平对齐方式
valign:文本垂直对齐方式
colspan:水平合并单元格(跨列)
rowspan:垂直合并单元格(跨行)
完整的表格标记
如果使用thead、tfoot、tbody元素,就必须使用全部的元素。
14.表单 (form)输入类型
属性:
Type:指定元素的类型。元素类型可以有多种选择:TEXT、PASSWORD、CHECKBOX、RADIO、SUBMIT、RESET、FILE、HIDDEN 和 BUTTON。默认选择为 TEXT。
Name:指定控件的名称。例如,如果表单中有几个文本框,则可以用名称 TEXT1、TEXT2 或选择的任何名称来标识它们。Name 属性的作用域是在 FORM 元素内。
Value:指定控件的初始值。但是,如果 TYPE 为 RADIO,则必须指定一个值。
Size:控件的初始宽度。如果 TYPE 为 TEXT 或 PASSWORD,则控件的大小以字符为单位。对于其他输入类型,宽度以像素为单位。
Maxlength:指定可在 TEXT 或 PASSWORD 元素中输入的最大字符数。
Checked:指定按钮是否是打开的。当输入类型为 RADIO 或 CHECKBOX 时,使用此属性。
<input type="radio" name=" " checked />
<input type="radio" name=" " />
复选按钮 (checked默认)
<input type="checkbox" name=" " checked />
<input type="checkbox" name=" " />
密码输入框
<input type="password" />
提交按钮
<input type="submit" />
重置按钮
<input type="reset" />
普通按钮
<input type="button" />
图片按钮(有提交功能)
<input type="image" />
多行文本框
<textarea cols="一行多少字符" rowa="多少行"><textarea>
列表框
<select size="一次显示多少个" multiple="可多选">
<option selected>默认的下拉菜单1</option>
<option>下拉菜单2</option>
</select>
单行文本框
<input type="text" size="文本框显示的长度" maxlength="最长字符数"/>
隐藏域
<input type="hidden"/>
文件域
<input type="file"/>
CSS
1.简介
样式选择器,用于控制html的显示样式。使用最多的分别为id选择器和class选择器。
2.书写位置
内部样式表
将CSS代码集中在HTML的head头部标签中
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
语法中,style标签一般位于head标签中title标签之后,也可以把他放在HTML文档的任何地方。
type=“text/CSS” 在html5中可以省略, 写上也比较符合规范, 所以这个地方可以写也可以省略。
行内式(内联样式表)
通过标签的style属性来设置元素的样式,任何HTML标签都拥有style属性,用来设置行内式,行内式只对其所在的标签及嵌套在其中的子标签起作用。
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
外部样式表(外链式)
将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中
<head>
<!--link为单标签-->
<link href="CSS文件的路径" rel="stylesheet" />
</head>
href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。
3.CSS选择器
标签选择器
用html标签名称为选择器,按标签名称对某一类标签指定统一的CSS样式。
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } or
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签选择器最大的优点是能快速为页面中同类型的标签统一样式,同时这也是他的缺点,不能设计差异化样式。
标签选择器 可以把某一类标签全部选择出来 div span
类选择器
类选择器使用“.”进行标识,后面紧跟类名。其基本语法格式如下:
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签调用的时候用 class=“类名” 即可。
类选择器最大的优势是可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签。
样式显示效果跟HTML元素中的类名先后顺序没有关系,受CSS样式书写的上下顺序有关。
id选择器
id选择器使用“#”进行标识,后面紧跟id名,其基本语法格式如下:
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
该语法中,id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素。
用法基本和类选择器相同。
id选择器和类选择器区别
在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class。
<p>正确示例<span class="stress">第一次加粗</span>,<class="stress">第二次加粗</span>。</p>
<p>错误示例<span class="stress">第一次加粗</span>,<class="stress">第二次加粗</span>。</p>
可以使用类选择器词列表方法为一个元素同时设置多个样式。ID选择器则是不可以的
/*类选择器设置验证效果为红色,字号15px*/
.stress{
color:red;
}
.bigsize{
font-size:15px;
}
<p>开始<span class="stress bigsize">验证效果</span>对比</p>
/*id选择器错误*/
#stress{
color:red;
}
#bigsize{
font-size:15px;
}
<p>开始<span id="stress bigsize">验证效果</span>对比</p>
通配符选择器
通配符选择器用“*”号表示,他是所有选择器中作用范围最广的,能匹配页面中所有的元素。其基本语法格式如下:
* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
* {
margin: 0; /* 定义外边距*/
padding: 0; /* 定义内边距*/
}
CSS字体样式属性
font:综合设置字体样式
font属性用于对字体样式进行综合设置,其基本语法格式如下:
选择器{font: font-style font-weight font-size/line-height font-family;}
- 使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
- 其中不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用。
javascript
简介
javascript是一门脚本语言,可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
- JavaScript 为动态的HTML提供了方法,
- JavaScript能够改变 HTML 内容
- JavaScript 能够改变 HTML 属性
- JavaScript 能够改变 HTML 样式 (CSS)等
使用
在 HTML 中,JavaScript 代码必须位于 标签之间
外部 JavaScript 的优势
分离了 HTML 和代码
使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载
**关键字:**var + 变量名
变量:
- undefined - 如果变量是 Undefined 类型的
- boolean - 如果变量是 Boolean 类型的
- number - 如果变量是 Number 类型的
- string - 如果变量是 String 类型的
- object - 如果变量是一种引用类型或 Null 类型的
常见的转义符:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7I3MVL85-1661160133150)(C:\Users\admin\Desktop\23370499-7493bbab961e9a30.png)]
关系运算符
== != < > >= <= === !==
与=之间的区别:==只进行值比较,===类型和值同时相等。
数组
数组的定义
var myArray = new Array()
数组的赋值
var myArray=new Array(3)
myArray[0]="array1"
myArray[1]="array2"
myArray[2]="array3"
var myArray=new Array("array1","array2","array3")
var myArray=["array1","array2","array3"]
数组的用法
//利用for in来输出数组
var x
var myArray=new Array("array1","array2","array3")
for (x in myArray)
{
document.write(myArray[x] + "<br />")
}
数组的合并concat
var myArray1=new Array("array1","array2","array3")
var myArray2=new Array("array4","array5","array6")
var myArray3=myArray1.concat(arr2)
将数组转字符串join
var myArray=new Array("array1","array2","array3")
var str = myArray.join()
//输出结果为:array1,array2,array3
js的对象
对象的定义
对象也是变量。但是对象能够包含很多值。
值按照名称 : 值对的形式编写(名称和值以冒号分隔)。
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
对象方法
对象方法是包含函数定义的对象属性。
methodName : function() { code lines }
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue", fullName: function() {return this.firstName + " " + this.lastName;}};
person.fullName()
创建js对象
1.使用new关键字调用构造器创建
缺点:不利于代码复用
//通过new关键字生成一个对象,然后根据JavaScript是动态语言的特性来添加属性和方法
var obj = new Object();
obj.name = "Bill";//为对象增加属性
obj.age = 62;
obj.showName = function () {//为对象添加方法
console.log(this.name);
};
obj.showAge = function(){
console.log(this.age);
};
obj.showName();
obj.showAge();
2.工厂方法
缺点:如果需要多次创建对象,而且属性内容不一样的话,也是需要重复代码多遍
function createObj(){
var obj = new Object();//创建对象
obj.name = "Bill";
obj.age = "62";
obj.showName = function () {
console.log(this.name);
};
obj.showAge = function () {
console.log(this.age);
};
return obj;
}
var obj1 = createObj();
var obj2 = createObj();
obj1.showName();
obj1.showAge();
obj2.showName();
obj2.showAge();
改进
function createObj(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.showName = showName;
obj.showAge = showAge;
return obj;
}
function showName(){
console.log(this.name);
}
function showAge(){
console.log(this.age);
}
var obj1 = new createObj("Kitty","21");
var obj2 = new createObj("Luo","22");
obj1.showName();//Kitty
obj1.showAge();//21
obj2.showName();//luo
obj2.showAge();//22
3.构造函数方法
function Person(name,age){
this.name = name;
this.age = age;
this.showName = function () {
console.log(this.name);
};
this.showAge = function () {
console.log(this.age);
};
}
var obj1 = new Person("Kitty","21");
var obj2 = new Person("Luo","22");
obj1.showName();//Kitty
obj1.showAge();//21
obj2.showName();//luo
obj2.showAge();//22
js中的函数
函数可以带参数也可以不带参数,当函数带参数是,函数声明时要加变量名 例如function functionname(var1,var2),其中如果函数是带有返回值的函数则需要用到return语句
function name(参数 1, 参数 2, 参数 3) {
//要执行的代码
}
js的作用域
- 如果变量是在函数内部声明的,变量为局部作用域,既只能在函数内部使用(注意如果在函数内部定义变量时没有用关键字 var 则该变量为全局变量)
- 如果是在函数外部声明的则为全局变量,可以在所有脚本和函数中使用。
js事件
HTML中的事件可以用js来触发。
- HTML 事件的实例
- HTML 页面完成加载
- HTML input 字段改变时
- HTML 按钮被点击
js中的语句
条件语句
if (条件 1) {
//条件 1 为 true 时执行的代码块
} else if (条件 2) {
//条件 1 为 false 而条件 2 为 true 时执行的代码块
} else {
//条件 1 和条件 2 同时为 false 时执行的代码块
}
switch语句
switch(n){ case 1:
执行代码块 1 break;
case 2:
执行代码块 2 break;
default:
与 case 1 和 case 2 不同时执行的代码
}
for循环
for (var i=0;i<5;i++){
//执行的代码
//break用于跳出循环
//continue 用于跳过循环中的一个迭代,并继续执行循环中的下一个迭代。
}
//continue 语句中断循环中的迭代,如果出现了指定的条件,然后继续循环中的下一个迭代。
var text = "";
var i, j;
Loop1: // 第一个循环标签 "Loop1"
for (i = 0; i < 3; i++) {
text += "<br>" + "i = " + i + ", j = ";
Loop2: // 第二个循环标签 "Loop2"
for (j = 10; j < 15; j++) {
if (j == 12) {
continue Loop2;
}
document.getElementById("demo").innerHTML = text += j + " ";
}
}
js中的错误和调试
当错误发生时,JavaScript 引擎通常会停止,并生成一个错误消息,JavaScript 将抛出一个错误。
如果浏览器支持调试,可以使用 console.log() 方法在调试窗口上打印 JavaScript 值。
js中的表单验证
- 验证表单数据是否为空?
- 验证输入是否是一个正确的email地址?
- 验证日期是否输入正确?
- 验证表单输入内容是否为数字型?
<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname"><br/>
Email: <input type="text" name="email">
<input type="submit" value="提交">
</form>
function validateForm()
{
var name=document.forms["myForm"]["fname"].value;//获取姓名的值
var email=document.forms["myForm"]["email"].value;//获取email的值
var atpos=email.indexOf("@");
var dotpos=email.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
alert("不是一个有效的 e-mail 地址");
return false;
}
if (name==null || name=="")
{
alert("姓必须填写");
return false;
}
}
js中的闭包
js中嵌套函数可以访问上一层的函数变量。
function makeAdder(x) {
return function(y) {
return x + y;
};
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
console.log(add5(2)); // 7
console.log(add10(2)); // 12