Web前端(HTML,CSS,JavaScript)

HTML

一、HTML概述

1、HTML是一种描述性标记语言,用来描述页面内容的显示方式,如:文字、视频、音频程序等复杂元素。

2、HTML文件是一种纯文本文件,以“.html”或“.htm”为后缀。

3、HTML的基本组成单位是元素。

4、HTML文档结构是由、和这三大元素组成:

	1)<html>元素:所有内容都需要放在<html></html>之间。
	
	2)<head>元素:页面头部信息,(标题元素<title></title>标签除外)通常并不在浏览器中显示。
	
	3)<body>元素:网页的正文,是用户在浏览器主窗口中看到的信息,包括图片、表格、段落、图片、视频等内容。

在这里插入图片描述在这里插入图片描述
5、div与span标签

    <div>用来表达一个逻辑区块,属于块级元素

    <span>标签属于行内元素,用来选择特定文本

6、URL

URL(Uniform Resource Locator,统一资源定位符)用于指定Web资源所在的位置,用于指定Web上资源所在的位置,分为绝对路径和相对路径

7、图像标签

图像标签<img />:向HTML文档中添加一幅图像

8、超链接标签

常见的超链接有以下几种类型:文本链接、锚点链接、图像链接、图像热区链接、Email链接、JavaScript链接、空链接

CSS

一、CSS基本语法结构

1、样式是CSS的基本单元,每个样式包含选择器和声明两部分。

2、选择器(Selector):用于指明网页中哪些元素应用此样式规则。

3、声明(Declaration):每个声明由属性和属性值两部分构成,并以英文分号(;)结束

4、一个选择器可以包含有一个或多个声明。

二、CSS的使用

1、CSS样式有三种格式:内嵌样式、内部样式和外部样式。

2、样式表的优先级由高到低排序为:内嵌—>内部—>外部—>浏览器缺省默认

3、内联样式表的权值最高 1000; ID 选择器的权值为 100;Class 类选择器的权值为 10;HTML 标签选择器的权值为 1

三、CSS选择器

1、CSS选择器分为:基本选择器、组合选择器、属性选择器

2、基本选择器(由低到高排序)分为:通用选择器、标签选择器、类选择器、ID选择器

3、组合选择器可分为:多元素选择器、后代选择器、子元素选择器、相邻兄弟选择器、普通兄弟选择器

四、CSS样式属性

1、在选择器定义中,声明由属性和属性值构成。

2、常用的CSS样式的属性有:文本、字体、背景、表格、列表及定位等属性。

五、伪类选择器

1、伪类和伪元素是预先定义的、独立于文档元素的,能够被浏览器自动识别。

2、处于特殊状态的元素称为伪类,而伪元素是指元素中特别的内容(元素的一部分)。

3、伪类以冒号(:)开始,在类型选择符与冒号之间不能出现空白,冒号之后也不能出现空白。

4、在CSS1时引入了:link、:visited和:active三个伪类,只是用于HTML中的标签,表示网页中的链接状态:未访问、已访问和被选中,三者之间是互斥的。

六、盒子模型
1、盒子模型是由内容(content)、边框(border)、内边距(padding)和外边距(margin)四部分组成。
2、边框(border):指围绕元素的内容和内边距的一条或多条线,通过border-top-style、border-right-style、border-bottom-style和border-left-style四个属性对“上右下左”四个方向的边框样式分别进行设置,每条边框又有宽度、颜色、样式和圆角等特征。
3、内边距(padding):指内容区与边框之间的距离,通过padding-top、padding-right、padding-bottom和padding-left属性对元素的“上右下左”四个方向的内边距进行设置,通过padding属性可以在一个样式声明中设置该元素的所有内边距。
4、外边距(margin):指元素与元素之间的距离,即围绕在元素边框之外的空白区域,通过外边距可以为元素创建额外的“空间”。外边距与内边距相似,可以对“上下左右”四个外边距分别进行设定,也可以统一进行设定。

JavaScript

一、JavaScript简介

1、JavaScript是一种脚本语言,可以直接嵌入HTML页面之中。

2、JavaScript是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的客户端脚本语言

二、JavaScript使用形式

1、在页面中使用JavaScript脚本的形式有以下三种:行内JavaScript脚本、内部JavaScript脚本、外部JavaScript脚本。

三、基本语法

1、JavaScript拥有有自身的数据类型、运算符、表达式及语法结构。

2、标识符(identifier)用来命名变量、函数或循环中的标签,命名规范如下:

1)标识第一个字母必须是字母、下划线、或美元符号

2)标识符区分字母的大小写,推荐使用小写形式或骆驼命名法

3)标识符由数字、字母、下划线(_)、美元符号($)构成

4)标识符不能与JavaScript中的关键字相同

3、关键字(Reserved Words):指JavaScript中预先定义的、有特别意义的标识符。

4、常见的数据类型有String、Boolean、Array、Number和Undefinded等类型。

5、变量:程序存储数据的基本单位,用来保存程序中的数据。

6、变量的类型

1)JavaScript中的变量是弱数据类型

2)在声明变量时不需要指明变量的数据类型,通过关键字var进行声明;

3)在变量的使用过程中,变量的类型可以动态改变,类型由所赋值的类型来确定。

4)通过typeof运算符或typeof()函数来获得变量的当前数据类型。

7、变量的作用域:指变量的有效范围,根据作用域变量可分为全局变量和局部变量。

8、在JavaScript中,注释分为两种形式:单行注释(“//”)和多行注释(“/* … */”)。

四、运算符

1、在JavaScript中,常用的运算符:

1)赋值运算符(=)

2)算术运算符(+、-、*、/、%、++、--)

3)三元运算符(?:)

五、流程控制

1、流程控制是指通过控制程序执行的顺序,来完成一定的功能:

1)分支结构(if和switch)

2)循环结构(while、do while和for等)

3)转移语句(break、continue、return等)

2、for in循环是JavaScript提供的一种特殊循环,可以对字符串、数组、对象集合、对象属性等进行遍历。

六、函数

1、在JavaScript中,函数可分为预定义函数和用户自定义函数。

2、JavaScript目前支持的自定义方式有命名函数、匿名函数、对象函数和自调用函数

七、JavaScript对象

1、JavaScript是一种基于对象的语言

2、对象是一种特殊的数据类型,由变量和函数共同构成

3、在JavaScript内置对象

4、内置对象是指系统预先定义好的,直接使用的对象

1)Array数组对象

2)String字符串对象

3)Date日期对象

4)Math数学对象

5)RegExp正则表达式对象

5、数组对象的concat()方法用于连接两个或多个数组,返回合并后的新数组,原数组保持不变。

6、Date日期对象用于操作日期和时间。

7、通过日期对象的构造方法,可以获取一个系统当前时间或指定时间的日期对象。

8、Math数学对象提供了一些数学运算中的常数及数学计算方法,在数学运算时非常有用。

9、正则表达式是使用单个字符串来描述、匹配一系列符合某个句法规则。

八、Array数组对象

1、数组(Array)是一个有序的数据集合,使用单独的变量名来存储一系列的数据。

2、通过数组的构造函数Array()来创建一个数组对象。

3、Array对象的属性包括constructor、length和prototype

九、String字符串对象

1、字符串对象(String)用于对文本字符串进行处理:

2、字符串对象的创建有以下两种方式:字面量方式和new方式

1)字面量方式:使用单引号(')或双引号(")均可生成一个字符串。

2)new方式:通过调用String()构造函数来完成,并返回一个String对象。

十、RegExp对象的创建

1、创建一个RegExp对象有两种方式:直接量方式和构造函数方式。

2、参数pattern是一个字符串或表达式,表示正则表达式的模式;

3、参数attributes是一个可选的字符串,取值包括"g"、"i"和"m",分别用于指定全局匹配、区分大小写的匹配和多行匹配。
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值