HTML+CSS、JS阶段总结(华清远见)

HTML+CSS、JS阶段总结(华清远见)

web

web三要素

1.浏览器

浏览器发送请求给服务器，下载服务器中的HTML，执行HTML显示出内容。

2.服务器

接受浏览器的请求，发送相应结果给浏览器。

3.http协议

浏览器与服务器的通讯协议

web学习的主要内容

1.html

用于勾勒出网页的结构和内容

2.css

用于网页的美化

3.js

以html和css为基础进行操作

web项目开发相关技术

 

HTML

HTML基本介绍

HTML：HyperText Markup Languages，超文本标记语言，是一种纯文本类型的语言

结构

 

声明

为浏览器提供声明HTML是用什么版本编写的

HTML标签

标题标签：h1~h6，字号逐渐变小，越来越细，会换行。写法为

文本内容

段落标签：p，字号默认，会换行。写法为

文本内容

文本标签：span，div，没有默认的样式效果。写法为

文本内容//span标签为行内元素，不换行
文本内容
//div标签为块元素，会换行

换行标签：br，用于换行。写法为

横线标签：hr，可以产生一条横线，可通过width属性设置其宽度，color属性设置其颜色。写法为

列表标签：分为有序列表和无序列表。

• 有序列表：ol，列表会自动编号有序排列。写法为

  
      
  文本1
      
  文本2
      
  文本3
  

• 无序列表：ul，列表按html的书写顺序排列，无编号。写法为

  
      
  文本1
      
  文本2
      
  文本3
  

样式标签：设置文本样式的标签，主要有加粗、倾斜、下划线、删除线等。写法为

加粗
加粗
倾斜
倾斜
删除线
删除线
上标
下标

图片标签：img，引用一张存在的图片，在网页上显示。用法为

//src为引用的图片资源的路径
//相对路径: 根据当前文件的路径，查找需要引用的资源的路径.
//绝对路径：从协议开始的全路径.
//alt: 如果图片没有正常加载成功，则显示alt的文字说明

超链接标签：a，点击超链接标签，可以让页面跳转到新的资源路径。用法为

//href属性：指定需要跳转的url地址（相对地址， 绝对地址）
//url：统一资源定位路径。(网络上可以访问的资源的路径)
//target属性：_blank,打开的内容显示在一个新窗口；_self,打开的内容显示当前窗口。

表格标签：table，用于实现一个表格。用法为

//设置表格的名字
	//表格的行元素
		//表格的列元素（单元格）
	


	
表格1
1

			
表格2
			
			

				

					
					
文本内容
				
			
			
			

				

					
文本内容
				
			
			

            
				

					
					
					
文本内容
				
                

				
					
1
2
3
				
			
		

表单标签：form，表单相关的标签，其内部嵌套用于用户输入数据的标签。写法为

			 
			 用户名:
			 
			 

			 密码:
			 

			 
			 
			 
			 


			 单行文本框： 

			 密码框：

			 隐藏域：

			 文件上传：

			 
			 单选按钮： 男
			  女  

			 复选框： 看书
			  弹琴
			  跑步

			 下拉列表(单选)：
				         请选择
						 上海
						 
						 北京
						 天津
					 

			下拉列表(多选):
			
			
				java
				c
				c++
				python
				html
			

			多行文本框：
			
			  

			submit:


			reset:

			button:

			
分组标签：

	
地址
	邮箱： 
				
	年龄: 
	date: 
	颜色：
			submit:

iframe标签：在网页中，可以通过src的路径找到新的网页，嵌套在当前网页中。写法为

		
		

			
			
文本
			
文本
			
文本
		
		
		

每个标签都有style属性， 用于设置标签的样式，如

• width="xx";---宽

• height="xx";---高

• border: 1px solid green; --- 边框 (宽度 ，类型， 颜色)

• background-color: gray; --- 背景颜色(颜色值)

CSS语言

css(Cascading Style Sheets)：层叠样式表，又叫级联样式表，简称样式表

用于HTML文档中元素的样式定义，实现网页的美化

实现将内容和表现分离

CSS的三种使用方法

1.内联样式

样式定义在单个的HTML元素中

2.内部样式

样式定义在HTML页的头元素中

3.外部样式

将样式定义在一个外部的css文件中，由html页面引用样式表文件

CSS的语法规则

样式表由多个样式规则组成

每个样式规则有两个部分：选择器和声明

• 选择器：决定哪些元素使用规则

• 声明：由一个或者多个属性/值对组成，用于设置元素的外观表现

CSS的特征

继承性

大多数css的样式规则可以被继承

层叠性

可以定义多个样式表，多个不冲突的样式可以层叠为一个

优先级

样式你故意冲突时，按照不同样式的规则优先级来应用样式

下面是上述内容在代码内的具体表现

	
	 
	 

		 
文本内容
		 a标签
	 
	 
	 
文本内容
	 
	 
 	 
文本内容
	 
	 
文本内容
	 
	 
	 
文本内容
	 

CSS的选择器

 

• 元素选择器：即标签选择器，元素名即标签名

• 类选择器：即class选择器，根据设置的class选择对应的标签

• 分类选择器：元素选择器和类选择器一起使用

• id选择器：根据设置的id选择对应的标签

• 选择器分组：一次性选择多个标签进行样式设置

• 派生选择器：找到子类选择器，如图中为找到p标签下的类名为main的标签

• 伪类选择器：伪类用于向某些选择器添加特殊的效果，使用冒号(:)作为结合符，结合符左边是其他选择器，右边是伪类 常用伪类：

  • :link 页面上从来没有点击过的链接

  • :active 选择活动链接，并设置其样式

  • :visited 选择已访问的链接，并设置其样式

  • :hover 鼠标悬停的状态

  • :focus 获取焦点的状态[对有键盘焦点的元素设置

  • :first-child 元素的第一个子元素添加样式

CSS常用单位

尺寸单位

%:百分比 in:英寸 cm:厘米 mm:毫米 pt:榜（1pt=1/72英寸） px:像素（计算机屏幕上的一个点） em:1em等于当前的字体尺寸，2em等于当前字体尺寸的两倍。（移动端用的多）

颜色单位

rgb(x,x,x ):RGB值，如rgb(255,0,0) x的取值范围0~255 rgb(x%,x%,x%):RGB百分比值，如rgb(100%,0%,0%) #rrggbb:十六进制数，如#ff0000 #rgb:简写的十六进制数，如#f00

CSS样式

• 尺寸相关样式

  • width：宽

  • height：高

  • overflow：当内容溢出元素框时的处理方法

    • visible：溢出部分可见，溢出的默认的处理方式

    • hidden：隐藏溢出部分

    • scroll：溢出的内容通过滚动条查看

    • auto：继承父元素的溢出处理方式

• 边框属性

  • border: width style color：分别对应宽度、样式、颜色

  • border-left/right/top/bottm: width style color：设置边框左边/右边/顶部/底部的宽度、样式、颜色

  • border-left/right/top/bottm-width/style/color：设置边框左边/右边/顶部/底部的宽度/样式/颜色

• 框模型

框模型（Box Model）定义了元素框处理元素内容、内填充、边框和外边距的方式

width和height指内容区域的宽度和高度

增加内填充、边框和外边距不会影响内容区的尺寸，但是会增加元素框的总尺寸。

• 背景

  • 背景色 :background-color

  • 背景图像：

  • — background-image:url();

    — background-repeat:repeat/repeat-x/repeat-y/no-repeat;

    — background-position:left top;

    — background-attachment:scroll/fixed;

  • 组合设置：background：颜色 背景图片 重复方式 背景图片是什么方式显示 left top;

• 文字和table相关样式

  • 文字样式

    指定字体：font-family:value1,value2; 字体颜色：color:value 字体大小：font-size：value 字体加粗：font-weight：normal/bold; 文本排列：text-align：left/right/center 行高：line-height：value 文字修饰：text-decoration:none/underline 文本缩进：text-indent：value;

  • 表格样式

    垂直对齐

    — vertical-align：top/middle/bottom

    边框合并

    — border-cellapse：separate/cpllapse

    边框边距

    — border-spacing：value

• 标签的显示方式

  • display: none; -- 隐藏标签。

  • display:block; -- 设置为块级元素

  • display: inline ; -- 设置为行内元素

  • display: inline-block ; -- 设置为行内块级元素。

• 流定位

  • 页面中的块级元素框从上到下一个接一个地排列

    — 每一个块级元素都会出现在一个新行中

    — 元素框之间的垂直距离是由框的垂直外边距计算出来的

  • 行内元素将在一行中从左到右排列水平布置

    — 不需要重新开始

    — 可以使用水平内边距、边框和外边距调整它们的间距

• 浮动定位

  • 浮动定位是指

    — 让元素脱离普通流定位

    — 将浮动元素放置在父元素的左边或者右边

    — 浮动元素依旧位于父元素之内

  • 浮动的框可以向左或向右移动，直到它的外边缘碰到父元素或另一个浮动框的边框为止

    — 经常使用它来实现特殊的定位效果

  • 设置浮动

    — float：none/left/right

子元素浮动之后，父元素高度为0，造成溢出现象： 解决方式① 给父元素设置高度， ② 使用overflow，隐藏溢出。 标签浮动之后，影响了其他标签的显示。如果其他标签不想受其影响，可以在标签中通过clear，清除浮动的影响。

• 定位：position

元素设置了position定位之后，可以通过top,left, right, bottom等样式设置元素的具体位置。

1. 相对定位:relative , 参考自己本身原来的位置。

2. 绝对定位:absolute , 参考的是自己的有相对定位的包裹元素， 如果直接父元素没有相对定位，那么就找父辈的， 如果最终也没有，那么就找html(body)为准。

3. 固定定位:fixed , 参考html(body)--网页内容区域的左上角。

• 层叠和透明性

  • opacity :背景和文字都透明

  • rgba： 背景透明，名字不透明

JavaScript

js的三种使用方式

1. 事件定义的方式

2. js嵌入到html页面，通过script标签来使用

3. 把js相关内容写在单独的.js文件中，然后在html页面上，通过script标签的 src="xx.js"引入js文件，进行使用。

js知识点

变量

• let变量名

• let变量名=变量名

• 变量的名字不能使用关键字

数据类型

• string

• number

• boolean

• null

• undefined

运算符

• 算术运算符

  +、-、*、/

• 关系运算符

  <、>、==

• 逻辑运算符

  &&、||、!=

• 赋值运算符

  =

数据类型转换

• 隐式转换

  • boolean参与运算的时候，true转为1，false转为0

  • 有string参与运算的时候，做的是字符串的拼接

  • 把变量直接用于条件判断的时候， 非空为true , 空为false

• 数据类型转换函数

  • typeof(变量名)

  • toString()

  • parseInt()

  • parseFloat()

  • isNaN()

分支语句

• if...else

• if...

• if...else if...

循环语句

• for(let i = 0; i < n; i++){}

• while(条件){}

• 循环语句规则同java语法规则

获取元素的方式

• document.getElementById(id值) ： 根据id查找元素，结果是一个元素对象

• document.getElementsByTagName(标签名字) ： 根据标签名查找，结果是一个元素的数组对象

• document.getElementsByName(标签的name属性) ： 根据标签的name属性的值查找，结果是一个元素的数组对象

• document.getElementsByClassName(标签class的值) ： 根据标签的class的值查找，结果是一个元素的数组对象

修改和获取标签内部的内容

• obj.innerHTML: 可以对文本和标签进行使用

• obj.innerText:只能对文本进行使用

• obj.value: 表单元素的value值的获取或者设置

修改标签的style

• obj.style.width/height

• obj.style.color

• 等

this元素

如下列代码中 this代表的就是当前触发单击事件的元素对象

οnclick="change(this)"

js对象

• String

• Number

• Date

• Boolean

• Math

let str = new String("对象内容")

如上创建对象，可通过固定函数获取该对象属性，如

• length：长度属性

• toUpperCase()：转大写

• toLowerCase()：转小写

• charAt()：找指定位置的字符

• indexOf()：找到就返回索引位置，否则返回-1

• lastIndexOf()：从后往前找

• indexOf(x,num)：从num位置开始找

• substring()：从指定位置开始找，找到原字符串的最后

• replace(x,y)：替换字符串

• split()：以指定元素分割原字符串

• concat()：将指定元素拼接到原字符串末尾

数组

let arr = new Array()

数组常用的函数：

• join函数: 把数组按指定的字符串拼接为一个字符串

• concat函数：用于给数组连接新的元素，可连接的元个数不定，原数组不会改变

• slice函数：用于获取数组的子数组，可以指定获取的范围

• reverse函数： 数组的反转,原数组变化了

• sort函数：升序排序 ，按字符升序排序

setInterval(function(),time)函数

该函数为定时函数，意思是将函数function()每个time的时间调用一次，其中time=1000为一秒

arguments对象

js中的arguments对象：方法调用的时候，所有的参数都是保存在arguments对象中的，arguments本质就是数组

正则表达式

• 能出现那些字符 [字符] ， \d表示纯数字[0-9]， \w匹配字母数字[0-9a-zA-Z] .....

• 出现的字符的个数{n} , {n,m} , +等价于{1,} , ?等价于{0,1} , *等价于{0,}

• 匹配行首 ^

• 匹配结尾 $

• .等价于任意内容

• \用于转义, .表示.本身

• () 用于分组

• |表示或

相关函数

• test函数： 测试字符串是否满足正则表达式的要求，满足返回true，不满足返回false

• exec函数： 如果字符串满足正则表达式的要求，返回匹配成功的字符串(返回的是一个包含了字符串的一个数组)

节点

常用函数

• nodeName：获取节点的名字

• nodeType：获取节点的类型

• getAttribute(属性名)：获取节点的属性

• setAttribute("class","active")：修改节点的属性，如给节点修改类名为active

• removeAttribute("class")：删除节点的属性，如class

• parentNode：节点的父节点

• childNodes：找到子节点，找到的节点包含元素节点和文本节点

• children：找到子节点，只包含元素节点

• firstChild：第一个孩子，所有孩子中的第一个，可能是文本节点

• firstElementChild：第一个孩子，代表孩子中的第一个元素节点

• lastChild：最后一个孩子，所有孩子中的最后一个，可能是文本节点

• lastElementChild：最后一个孩子，代表孩子中的最后一个元素节点

• previousSibling：上一个兄弟，可能是文本类型的兄弟

• previousElementSibling：上一个元素节点兄弟

• nextSibling：下一个兄弟，可能是文本类型的兄弟

• nextElementSibling：下一个元素节点兄弟

创建对象的三种方式

1. 通过Object创建对象

2. 通过构造函数，创建自定义对象

3. 采用json格式定义对象

事件和事件对象

• 事件分为： 鼠标事件， 键盘事件，状态事件和其他事件

• 事件对象： event , 事件触发的时候会产生一个event对象

• 事件的定义方式：

  在标签上使用on+事件名称，调用函数。

  在js代码中，通过函数绑定进行函数的调用，如

  obj.onclick = function()

• 事件的取消： 事件执行的函数返回值是false. 事件就取消了

• 事件的执行机制：冒泡原理-- 元素的某个事件被触发了。 那么其包裹元素的同类事件也会被触发

• 事件源：通常使用“event.target”找到事件源

• 阻止冒泡：在事件函数中加入“event.cancelBubble=true”阻止冒泡

jquery相关内容

jquery就是js的函数库，jquery中封装了常用的函数。语法规则同java

如何使用

导入jquery.js文件， 然后就可以使用jquery了

jquery选择器

用法：$(选择器)

函数使用方法

jquery中的函数和js还有css中的函数名相同，如

• 要修改颜色：$(选择器).css("color","red")

• 要删除父节点：$(选择器).parent().remove()