HTML,CSS,JS学习总结

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.

可定义文档中的分区或节(division/section)

<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”,表示被链接的文档是一个样式表文件。

img

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)]

关系运算符

== != < > >= <= === !==

=之间的区别:==只进行值比较,===类型和值同时相等。

img

数组

数组的定义

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 按钮被点击

img

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 1case 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

参考文献1
参考文献2
参考文献3

  • 7
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值