html css javascript
html前端三剑客分别是：
html css javascript
常用软件架构分类及区别
C/S架构：Client/Server 客户端/服务器
B/S架构：Browser/Server 浏览器/服务器
静态资源与动态资源的举例与区别
静态资源：文本，图片，音频，视频，Html,CSS,JavaScript...
动态资源：jsp/servlet,php...
区别：静态资源所有用户访问，得到的结果是一样的。动态资源是从资源的服务器里面的数据库拿出来的
html 常用标签
标题标签：<h> h1-h6 其中<h1>定义最大的标题，<h6>定义最小的标题。
段落标签: <p>使得文本独立成段。
换行标签: <br/>
分割线标签: <hr/>
加粗标签: <b> 、<strong>标签可以使字体加粗。
斜体标签:<em> 、<i>标签可以使字体倾斜。
上标标签:<sup>
下标标签:<sub>
字体格式化标签:<font> 用于设置字体尺寸、字体颜色等，已过时。<span>内容标签
居中标签:<center>标签用于将文本居中显示。
层叠样式标签：<div>
图片标签:
<img src=”图片路径” width=”宽” height=”高” alt=”替代文本” title=”提示文字” />
音频标签：
<audio src="音频路径" controls loop muted></audio>
controls:定义播放组件 loop:重新播放 muted:静音
视频标签：
<video src="视频路径" controls loop muted width="400px" height="400px"></video>
controls:定义播放组件 loop:重新播放 muted:静音 width:视频组件的宽 height:视频组件的高
列表标签：
无序列表 有序列表
<ul type="disc"> <ol type="I">
<li></li> <li></li>
<li></li> <li></li>
<li></li> <li></li>
</ul> </ol>
超链接标签：
<a href="" target="">热点文字或图片</a>
target 取值：_blank 在新的选项卡中打开_self 在本页面打开（默认）
不跳转：href="#" 或者 href="javaScript:void(0)"
表格标签：
<table> tr:行标签 常用的属性
<th> td:单元格标签 border:边框
<td></td> th:表头标签 width:表格的宽
</th> height:表格的高
<tr> align:对齐方式
<td></td> cellspacing:单元格边框距离表格边框的间距
</tr> cellpadding:单元格中文本距离单元格边框之间的间距
<tr> bgcolor:背景颜色
<td></td> rowspan:行合并
</tr> colspan:列合并
</table>
表单标签:
form:表单标签
action:表单提交地址
method:表单请求方式
enctype:规定数据在发送到服务器之前应该如何进行编码
表单数据会编码为 "application/x-www-form-urlencoded"。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 "+" 加号，特殊符号转换为 ASCII HEX 值）。
不对表单进行编码
multipart/form-data 用于文件上传 配合post使用
text/plain：纯文本的传输。空格转换为"+"号，但不对特殊字符编码。
type:
文本框 text
密码框 password
单选框 radio
复选框 checkbox
文件框 file
隐藏域 hidden
提交按钮 submit
重置按钮 reset
普通按钮 button
收集不同类型内容
下拉框
select
option
表单控件中常用的属性
id:标识当前标签在网页中只有一份
name:提交到服务器中键
value:提交到服务器中的值
checked:默认选中 （单选框|复选框）
selected:默认选中(下拉框)
maxlength:输入框中最大允许的字符长度
minlength:输入框中最小允许的字符长度
readonly:只读（当前输入框只能看不能修改）
disabled:不可用|未激活
placeholder:提示文字
框架标签：
<!--注意去掉body标签 -->
<frameset rows="200px,*">
<!-- 上页面 -->
<frame src="top.html"></frame>
<!-- 下页面 -->
<frameset cols="200px,*">
<!-- 左侧页面 -->
<frame src="left.html"></frame>
<frame src="right.html" name="right"></frame>
</frameset>
</frameset>
src：指定页面的路径
noresize:框架分割后禁止调整
name:该框架的名称用于和a标签target连用
get/post请求的区别
get:
安全性:get提交会将参数暴露在浏览器地址栏中不安全
效率:get提交效率比post提交要快
数据量携带大小:最大只允许4kb
post:
安全性:post提交会将参数放在请求体中、比较安全
效率上:post提交效率比get提交慢
数学量携带大小:没有大小限制
常见实体字符
空格： 小于符号：< < 大于符号：> > 双引号：" " 版权符号：© ©
css样式的引入方式
1.行内样式
在标签内使用style属性指定css代码。该方式定义样式作用于为整个页面。
2.内部样式
在head标签内，定义style标签，style标签的标签体内容就是css代码。
3.外部样式
定义css文件，在head标签中使用link标签，引入外部的资源文件。
语法格式：
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
优先级问题:
行内样式 > 内部样式 & 外部样式(后加载的先生效)
css选择器
基本选择器:
标签选择器 ID选择器 类选择器
其它常见的选择器有:
1.全局选择器 *{}
2.组合选择器 h2,p,a,li {}
3.层级选择器 h1 em {}
4.父选择器 h1 > strong {}
5.属性选择器 [value] {} [value = "no1"] {}
6.伪类选择器
a:link{} 未被访问时
a:visited{} 访问过后
a:hover{} 鼠标悬浮时
a:active{} 鼠标激活时
css常见属性
（一）尺寸修饰
height 设置元素的高度
width 设置元素的宽度
（二）字体样式
font-family 字体类型(取值：隶书/微软雅黑...)
font-size 字体大小
font-style 字体风格(取值：italic/normal...)取值(扩展):italic : 斜体。
font-weight 字体粗细取值:Normal 默认值。bold 粗体字符 bolder 更粗的字符
（三）文本样式
color 文本颜色
text-align 文本对齐（取值：left/right/center...）
text-decoration 文本装饰，取值:none默认。underline下划线。
line-height 设置行高
（四）边框样式
border-width 边框宽度按方向设置：border-(left/right/top/bottom)-width
border-color 边框颜色按方向设置：border-(left/right/top/bottom)-color
border-style 边框风格按方向设置：border-(left/right/top/bottom)-style
可以简写： border:1px solid red;
border-radius 圆角边框按方向设置值：border-(top/bottom)-(left/right)-radius
（五）背景样式
background-color: 背景颜色
background-image: url(img/1.jpeg);
background-repeat 背景平铺
background-position:背景偏移
什么是盒子模型？
盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
内边距 padding:也叫填充（padding），设置元素内容与元素边框之间的距离。
外边距 margin：也叫空白边（margin），位于盒子的最外围，设置不同元素之间, 它们边框与边框之间的距离。
浮动
float:
float是css样式中的定位属性，用于设置标签对象的浮动布局，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动属性的取值有三个：
left：元素左浮动
right：元素右浮动
none：默认值，不浮动
清除浮动：
clear：
常用的取值有：left（清除左浮动）、right（清除右浮动）、both（清除两侧浮动）。
一般我们会使用一个独立的div标签专门用来做清除浮动的样式。
定位
position定位
1.relative 相对定位
相对原来的位置定位,定位完成后可以去偏移(移动),不会脱离标准文档流
2.absolute 绝对定位
绝对定位后，脱离文档流,位置移动看父标签中有没有定位，如果有定位则相对父标签偏移，如果父标签没有定位，相对<body>标签偏移
块标签、行标签和行块标签
块标签：独占一行，可设置宽高。
常见的块级元素：<div> 、<h> 、<ul>等
行标签：按行排列。
常见的行标签：<span> 、 <strong> 、<a>等
行块标签：按行排列，但又可以设置宽高的标签。
常见的行块标签：<img>、<input>、<textarea>等
块标签、行标签和行块标签之间的转换
display:用于定义建立布局时元素生成的显示框类型.
其取值如下:
inline：此元素将显示为行元素（行内元素display的默认值）
block：此元素指定为块元素（块元素display的默认值）
inline-block:将对象呈现为内联元素，对象内的元素块级展示。
隐藏元素
display:none
去除列表前面的符号
list-style-type:none
float与display的区别
1、浮动float横排显示的元素之间无外边距，而inline-block会有默认的外边距。
2、浮动float让元素脱离当前文档流，inline-block不会。
3、二者都能实现水平排列，优先使用inline-block，因为此种方式元素未脱离标准文档流,元素间的相对定位好调整。但当某些场景希望有些元素向左排列，有些元素向右排列，这时只能使用float。
javascript的特点与组成
JavaScript是一门脚本语言，必须依赖html才能运行，不需要编译，直接由浏览器解析运行。
组成
1.ECMA核心：核心语法
2.DOM文档对象模型
3.BOM浏览器对象模型
js引入方式
1、内部JS:在HTML网页中通过script标签直接嵌入JavaScript脚本代码。可以出现在页面的任何位置，且可以写多个。
2、外部JS:外链式是单独定义脚本文件（*.js），再将这个脚本文件通过script标签的src属性引入到HTML页面中。一个页面中可以引用多个外部js文件。
注意事项:引用外部js文件的script标签里不能再写自定义的javaScript代码。
js数据类型
1、基本数据类型：
（1）Undefined:Undefined类型只有一个值即undefined。当声明的变量未初始化时，该变量的默认值就是undefined。
（2）Null:只有一个值即null表示空，一个占位符。值undefined实际是从值null派生来的，因此ECMAScript把他们列为等值。
例如：alert(null == undefined); //true
虽然两个值相等但是表示的意义不同，null为空值，undefined是未定义。
（3）Boolean:表示真假，只有两个值true和false。
（4）Number:表示任意数字，在JS中所有值类型统称为数字类型。
（5）String:字符串类型用单引号或者双引号赋值。
2、引用类型：
引用类型通常叫做类（class），JavaScript将引用类型转化为对象进行处理。
JavaScript是基于对象而非面向对象。对象的默认值是null。
我们可以通过typeof(变量名)来查看一个变量所属的数据类型。
例如：alert(typeof(123));得到的数据类型是Number。
== 和===有什么区别
==比较 只比较内容
===比较 不光比较内容还比较类型
<script>
var a;
var b = null;
console.log(a == b); //true
console.log(a === b);//false
</script>
js函数
创建函数的语法格式：
function 方法名(形式参数列表){方法体} 推荐使用;
js方法的特点：
（1）方法定义时，形式参数类型不用写，返回值类型也不写
（2）方法是一个对象，定义相同方法名会被覆盖 方法不支持重载
（3）在JS中方法的调用只和方法名有关与方法的参数无关
js数组 可理解为java中的集合
1、创建数组：
（1）var arr = new Array(); 空数组
（2）var arr = new Array(默认长度) 默认长度的数组
（3）var arr = [元素列表]; 具有初值的数组
2、js数组的特点：
（1）在JS中，数组元素的类型可变
（2）在JS中数组的长度可变
3、js数组的属性：length 获取数组长度、元素个数
4、js数组中的常用方法：
（1）join(参数); 将数组中的元素按照指定规则转成字符串
（2）push(); 向数组的末尾添加一个或更多元素
js Date日期对象
1、创建日期对象：var date = new Date() 获取当前时间。
2、日期对象的常用方法：
（1）toLocaleString()：当前日期转换为本地字符串打印。年月日 时分秒
(2)toLocaleDateString() 将当前日期转换为本地字符串打印 年月日
（3）getTime()：返回 1970 年 1 月 1 日至今的毫秒数
（4）getHours()：返回小时数。
（5）getMinutes()：返回分钟数。
（6）getSeconds()：返回秒数
（7）getFullYear():获取年份
（8）getMonth()+1:获取月份
（9）getDate():获取日期
Math数学对象
1、创建：Math对象不用创建直接使用。使用时直接调用方法，如：Math.方法名();
2、常用方法：
（1）random()：返回 0 ~ 1 之间的随机数
（2）max(x,y)：返回 x 和 y 中的最大值
（3）min(x,y)：返回 x 和 y 中的最低值
（4）ceil(x)：对数进行向上取整
（5）floor(x)：对数进行向下取整
（6）round(x)：把数四舍五入为最接近的整数
（7）abs(x)：返回数的绝对值
3、属性：PI，圆周率
String字符串对象
1、创建：
（1）var str1 = "abc"; // string
（2）var str2 = new String("abc"); // object
2、常用方法：
（1）获取字符串的长度 str1.length
（2）是否以某个字符开头 startsWith()
（3）是否以某个字符结尾 endsWith()
（4）截取字符串
a、substring(起始下标,结束角标) 截取从开始索引到结束索引中某一段内容
b、substring(起始索引) 截取从指定索引开始一直到最后
c、substr(起始下标,截取长度) 忽略
（5）根据某个字符拆分字符串 返回数组 split()
(6) indexOf 获取指定字符串在该字符串第一次出现的索引位置 如果没有则返回-1
(7) lastIndexOf 获取指定字符串在该字符串最后一次出现的索引位置 如果没有则返回-1
(8) charAt(索引) 获取指定索引对应上的单个字符
获取页面元素对象
1、查找页面元素的方法：
（1）document.getElementById(id)：通过id号来查找元素。
（2）document.getElementsByTagName(name)：通过标签名来查找元素。
（3）document.getElementsByClassName(name)：通过类名来查找元素。
（4）document.getElementsByName(name)：通过name属性名来查找元素。
2、以上四种方法中，由于页面中元素的id号是唯一的，所以通过id获取的元素个数也是唯一的；而其他三种方式获取的元素个数不唯一，所以使用时需要像数组一样去获取指定的元素。
操作页面元素对象
1、创建dom对象
document.createElement("标签名");
2、添加dom对象
（1）A.appendChild(B) 将B添加到A内部的最后面
（2）A.insertBefore(B, C) 将B添加到A内部C的前面
3、删除dom对象
（1）A.remove() 将A删除
4、替换dom对象
A.replaceChild(B, C) 用B替换A内部的C
操作元素属性
1、页面元素.属性名 = “值”
2、设置：标签对象.setAttribute("属性名","属性值");
3、获取：标签对象.getAttribute("属性名");
4、删除：标签对象.removeAttribute("属性名");
操作元素样式
1、直接操作
页面元素.style.css样式名称 = “值”
2、间接操作:通过类名进行操作
页面元素.setAttribute(“class”, “类名1 类名2”)
先将css样式定义在类中，通过行间属性class，为其设置类
操作元素内容
1、标签对象.innerHTML 获取或者设置内容 可以包含标签
2、标签对象.innerText 获取或者设置内容 只包含文本
3、input标签对象.value 获取或者设置input框中的内容
4、innerText和innerHTML语法:
获取:标签对象.innerHTML
修改:标签对象.innerHTML=要修改的值
绑定事件
（1）在标签中指定事件的属性：<button id="btn" onclick="func01()">点我啊</button>
需要在脚本中，先行定义好func01这个方法~
（2）获取标签元素绑定事件：document.getElementById("btn").onclick = function(){}
第二种绑定事件用到的是匿名函数，直接书写方法体代码即可
常见事件
① onclick:单击事件
② ondblclick:双击事件
③ onchange：内容改变事件
④ onmouseover/onmouseout： 鼠标从某元素移入或移开事件
⑥ onblur/onfocus：元素失去焦点或获取焦点事件
onsubmit 表单提交事件 注意要有一个返回值
用js实现全选、全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全选</title>
</head>
<body>
<input type="checkbox" name="all" id="all" onclick="checkAll()">全选<br>
<input type="checkbox" name="hobby">唱<br>
<input type="checkbox" name="hobby">跳<br>
<input type="checkbox" name="hobby">rap<br>
<input type="checkbox" name="hobby">篮球<br>
</body>
<script>
function checkAll() {
var all = document.getElementById("all").checked;
var hobbies = document.getElementsByName("hobby");
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = all;
}
}
</script>
</html>
浏览器对象模型
Bom：浏览器对象模型
Bom有一个核心的对象window，window对象包含了6个核心模块
1、document对象:文档对象
2、Frames对象:html的自框架
3、History历史记录对象:页面的浏览记录
4、Location定位对象:当前页面的地址
5、Navigator导航对象:包含了访问者的浏览器相关信息
6、Screen对象:显示屏幕相关信息
window方法
1. 弹窗方法
1. alert(); 显示带有一段消息和一个确认按钮的警告框 演示
2. confirm(); 显示带有一段消息以及确认按钮和取消按钮的对话框 演示
3. prompt(); 显示可提示用户输入的对话框 演示
2.定时器方法
JS中的定时器函数有两种：
1、循环定时器：按照指定的周期来调用函数或代码串，执行多次。
var timeid=Window.setInterval(code,millisec);
window.clearInterval(timeid);清除定时器，使定时器停止执行函数或代码串。
参数说明：
code:要调用的函数或要执行的代码串。
millisec:周期性执行或调用 code 之间的时间间隔，以毫秒为单位。
2、单次定时器：在指定的毫秒数后调用函数或代码串，只执行一次。
var timeid=Window.setTimeout(code,millisec);
window.clearTimeout(timeid);清除定时器,可以阻止定时器的执行。
参数说明：
code:要调用的函数或要执行的代码串。
millisec:在执行代码前需等待的毫秒数。
用定时器实现轮播效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lunbo</title>
</head>
<body>
<img src="../img/1.jpg" id="img">
</body>
<script>
var index = 1;
/* function change() {
var img =document.getElementById("img");
img.src="../img/"+index+".jpg";
index++;
if(index == 5) {
index = 1;
}
} */
setInterval(() => {
var img = document.getElementById("img");
img.src = "../img/" + index + ".jpg";
index++;
if (index == 5) {
index = 1;
}
}, 2000);
</script>
</html>
window对象核心模块常用方法
Screen
1、screen.availWidth - 可用的屏幕宽度
2、screen.availHeight - 可用的屏幕高度
History
1、window.history 对象包含浏览器历史。
2、方法：
（1）history.back() - 等同于在浏览器点击后退按钮
（2）history.forward() - 等同于在浏览器中点击前进按钮
3、想要出现前进后退的效果，必须存在路径的跳转！
Location
1、window.location 对象可用于获取当前页面地址（URL）并把浏览器重定向到新页面
2、window.location 对象在编写时可不使用 window 这个前缀。
3、创建:window.location/location
4、方法:reload():刷新当前页面
5、属性href:获取请求的URL/跳转指定的URL地址中
桌面弹球案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 所有的标签都没有外边距 */
*{
margin: 0px;
}
div{
width: 75px;
height: 75px;
/* 设置小球背景颜色 */
background-color: rgb(30,144,255);
/* 设置小球的圆角 */
border-radius: 80%;
}
</style>
</head>
<body>
<div id="ball"></div>
</body>
<script>
//屏幕可用宽度
var width =screen.availWidth
//小球移动的距离（左外边距）
var index =0
//向右跑
function toRight(){
//获得球
var div =document.getElementById("ball")
//设置小球的左外边距
div.style.marginLeft=index+"px"
index++;
if(index>=width-75){
//1毫秒后马上执行向左跑函数
setTimeout(toLeft,1)
}else{
//1毫秒后马上执行向右跑函数
setTimeout(toRight,1)
}
}
function toLeft(){
//获得球
var div =document.getElementById("ball")
//设置小球的左外边距
div.style.marginLeft=index+"px"
index--
if(index<=0){
//1毫秒后马上执行向右跑函数
setTimeout(toRight,1)
}else{
//1毫秒后马上执行向左跑函数
setTimeout(toLeft,1)
}
}
toRight()
</script>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
