【Html + Css + javaScript+web Apis】-易微帮

W3C标准：

结构：HTML
表现：CSS
行为：JavaScript

一、html的要点：

1.1 div和span的区别：

div是块内容，定义一个div，是按行排列。div是块元素。display = block；

~~span是块内元素，两者都是用来页面布局。span是内联元素。display = inline；~~

1.2 相对地址：

html最好用相对地址来定位资源

1.3 用p、hr、font等标签实现的段落内容展示代码

<body>
<h1>公司简介</h1>
<hr style="border-color:yellow">
<p>
<font color="ff0000">上海高者特信息技术有限公司</font>
（Cognizant）成立于1994年，公司总部设在美国新泽西洲Teaneck市，于1998年完成自己的独立整合，并在纳斯达克上市（股票代码：CTSH），成为股指NASDAQ100中唯一的全球性IT服务公司。我们为世界前2000强企业提供全面的应用软件外包业务、业务流程、咨询服务以及系统集成服务，并已率先通过ISO9001和5级SEI CMM认证。经过26年的发展，高知特已经成为一个拥有292,500多人的庞大的IT咨询服务公司。我们不仅有完善系统的内部培训机制，并不断为优秀人才提供全球范围内on-site的工作机会。
</p>
<p>
作为全球领先的提供综合性IT服务的美资公司， “财富”500强企业中名列第185位，于<b>2005年在上海设立了首个中国研发中心，</b>2013年建立天津研发中心，2014年成立大连研发中心，致力于为全球客户提供各种类型的科技服务。迄今为止，高知特在中国已取得了长足的发展。并被评为全球最受赞赏的公司之一。欢迎访问:http://www.cognizant.com/zh-cn了解更多有关高知特（Cognizant）的数字服务。
</p>
<p>

高知特中国研发中心成功吸收了公司的全球文化。我们致力于推崇“员工从客户的最大利益出发作出决定”、“鼓励知识分享”、“奖励绩效并提供多元的职业发展机会”的企业文化；并致力于帮助客户在数字时代打造新的商业模式、运营模式和技术模式。通过我们植根于不同行业、专业独到的咨询式服务，我们将帮助客户构想（Envision）和建造（Build）未来愿景，成就（Run）创新和高效的企业。
</p>
<hr style="border-color:yellow">
<font face="楷体" size="4"><center>上海告知特信息技术有限公司&reg; </center></font>
<center><a size="4">版权所有Copyright 2016-2022&copy;,ALL Rights </a></center>
</body>

1.4 用table、tr、th、td实现的课程表代码：

这个表格用到的标签，
其中的

border元素用于给单元格加边框；
cellspacing元素用于个单元格之间划定距离
tr标签用于定位一表格行
td标签用于定义一个单元格
主要注意的是，在合并单元格时候，colspan是不占行，但占列
rowspan占行，而且是占第一行。

	<table border="1" cellspacing="0" width="50%">
		<tr>
			<th colspan="2"></th>
			<th>星期一</th>
			<th>星期二</th>
			<th>星期三</th>
			<th>星期四</th>
			<th>星期五</th>
		</tr>
		<tr align="center">
			<td rowspan="4">上午</td>
			<td>早自习</td>
			<td>英语</td>
			<td>语文</td>
			<td>数学</td>
			<td>语文</td>
			<td>数学</td>
		</tr>
		<tr align="center">
			<td>first</td>
			<td>英语</td>
			<td>语文</td>
			<td>数学</td>
			<td>语文</td>
			<td>数学</td>
		</tr>
		<tr align="center">
			<td>second</td>
			<td>英语</td>
			<td>语文</td>
			<td>数学</td>
			<td>语文</td>
			<td>数学</td>
		</tr>
		<tr align="center">
			<td>第三节</td>
			<td>英语</td>
			<td>语文</td>
			<td>数学</td>
			<td>语文</td>
			<td>数学</td>
		</tr>
		<tr align="center">
			<td colspan="7">午休</td>
		</tr>
		<tr align="center">
			<td rowspan="3">下午</td>
			<td>第四节</td>
			<td>英语</td>
			<td>语文</td>
			<td>数学</td>
			<td>语文</td>
			<td>数学</td>
		</tr>
		<tr align="center">
			<td>第5节</td>
			<td>英语</td>
			<td>语文</td>
			<td>数学</td>
			<td>语文</td>
			<td>数学</td>
		</tr>
		<tr align="center">
			<td>第6节</td>
			<td>英语</td>
			<td>语文</td>
			<td>数学</td>
			<td>语文</td>
			<td>数学</td>
		</tr>
	</table>

1.5 form表单

action: 定义表单发送表单数据的目标URL
method:定义发送方法
表单项数据要被提交，必须定义name属性
get请求：请求参数会拼接在URL后边，url长度有限制 4kb
post请求：请求参数在http请求的request header，请求参数无限制

1.6 1em = 当前标签的 font size 大小

二、CSS要点：

CSS是用来设计页面表现。
对后端工程师主要懂：

2.1 css的导入方式：

标签内使用

<div style="color:red"></div>

html内部样式:

<style>
	div{
		color:red;
	}
</style>

外部css文件导入

<link rel="stylesheet" href="demo.css">

2.2 选择器

元素选择器

div{
 	color:red;
}

该种用法会让div标签都是这样的style

id选择器

#div1{
color
}

//
<div id="div1"> </div>

3.类选择器

.div1{
color
}

//
<div class="div1> </div>

定义范围越小，权重越大

升级版复炸选择器

1. 后代选择器

后代的都会被选中
后代：儿子、孙子。。。。。

div p{
 
 }

2.子代选择器

只能选儿子
语法：

选择器1>选择器2{ }

div>p{
}

3.交集选择器

例子

p.box{

}

就是下文的嵌套选择器

2.3 常见元素

- `box model`

一个css元素由四部分margin、padding、border、content组成，如图：
在这里插入图片描述

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

所以，当您使用一个元素时候，要时刻牢记，计算元素总大小，当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完整大小的元素，你还必须添加内边距，边框和外边距。

- `padding` 例子

定义元素边框与元素内容之间的空间，即上下左右的内边距。

用padding，让盒子的内容做出居中效果

如果是文字，肯定让行高占满content
接着，不要为内容设定固定宽度，直接给它设padding

- `margin`

定义元素的周围空间

在这里插入图片描述

margin常见问题

垂直布局的块级元素的margin会合并，拿margin的最大值
外间距的塌陷问题，可以用
- padding解决
- 父元素设置border
- overflow：hidden ，最有用
- 设置浮动
行内元素，margin和padding的左右方向有作用，但如果是垂直方向，设立line-height解决。

- 伪元素

伪元素是css模拟生成标签，但是必须添加content属性

-`分组选择器`

当一个html页面，有很多相同样式时候，可以同时代码复用，减少代码量。例子。

-`嵌套选择器`

1. p{ }:为所有 p 元素设计样式。优先级较低。
2. .mark{ }:为所有 class = " mark " 的元素设计样式。优先度较高。
3. .mark p{ }: 为所有 class = " mark " 的元素里的p子元素设计样式，p的样式优先级大于 mark。
4. p.mark{ }: 为class = “mark” 的p元素设计样式，mark > p

例子

- `position`

static 定位。不受top、bottom等值的影响。就是固定的。
fixed 定位。通过 浏览器窗口来定位，导航栏怎么划，它都是固定的。例子。
absolute定位。使用率比较高的定位方式，通过 父元素 来定位。如果元素没有已定位的父元素，那么它的位置相对于html标签。例子。
absolute 定位的元素和其他元素重叠。 ，绝对定位脱标，具备行内块特点
relative 定位：相对定位元素的定位是相对 本身正常位置 。例子
子绝父相
absolute实现居中，transform:translate(-50%)

相对定位不脱离标准流

- `float`

float 适用于水平向左向右，不能上下浮动。
当只有一个float元素时候，其它元素会围绕float元素。
两个float元素放到一起，如果有窗口有空间，他们会相邻排列。

作用：让块状元素完美实现在一行排列
浮动不能用matrgin: 0 auto 来居中

清除浮动

因为元素浮动后，脱离标准流，不占位置。
父子级标签，子级浮动，父级没有高度，后面的标准流会展位置

方法

父级加高度，不推荐
父级最后加一个块级元素，设置 clear:both，不推荐
单伪元素添加块级元素，伪元素默认是行内模式

.clearfix::after{
	/* 让其成为伪元素 */
	content:'';
	/* 将伪元素由默认的行内变成块状 */
	display:block;
	/* 功能语句 */
	clear:both;
}

双伪元素解决外边距塌陷和清除浮动问题

.clearfix::before,
.clearfix::after {
	content:'';
	/* 解决子级margin塌陷问题 */
	display:table;
}
.clearfix::after {
	/* 清除浮动 */
	clear:both;
}

overflow:hidden;推荐

标准流<浮动<定位

默认情况，定位盒子，后来居上，z-index默认值为0，z-index要配合position使用

- `导航栏`

1. 传统网页，用列表实现HTML导航栏，例子1

2. 用css来实现垂直导航栏，例子2

用到的也是ul和li标签，只是加个鼠标hover事件，改变背景颜色。

3. 进阶版，固定个主选项。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lipp</title>
<style>
ul {
// 设置ul的风格
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}

li a {
    将整个li作为 a
    display: block;
    
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
//弄个类作为主类，与子类不相关
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
//鼠标hover的时候，排除active类的li
    background-color: #555;
    color: white;
}
</style>
</head>
<body>

<h2>垂直导航条</h2>
<p>在点击了选项后，我们可以添加 "active" 类来标准哪个选项被选中。</p>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

</body>
</html>

4. 全屏高度的固定导航条

左边是全屏高度的固定导航栏，右边是可滚动的内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body {
    margin: 0;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* 全屏高度 */
    position: fixed; 
    overflow: auto; /* 如果导航栏选项多，允许滚动 */
}

li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}

li a.active {
    background-color: #4CAF50;
    color: white;
}

li a:hover:not(.active) {
    background-color: #555;
    color: white;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">主页</a></li>
  <li><a href="#news">新闻</a></li>
  <li><a href="#contact">联系</a></li>
  <li><a href="#about">关于</a></li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">
  <h2>Fixed Full-height Side Nav</h2>
  <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
  <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
  <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
  <p>Some text..</p>
</div>

</body>
</html>

5.水平导航条

例子
主要代码：

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
 
li {
/* li float */
    float: left;
}
 
li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
 
/*鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #111;
}

2.4 注意点

2.4.1 百分比高度

百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以，如果你把一个div的高度设定为height: 50%;，而它的父元素的高度是100px，那么，这个div的高度应该是50px。

2.4.2 标签水平居中

行内和行内块的居中，
因为浏览器解析两者，都是将其当成文字，所以。
水平居中:text-align:center
垂直居中:vertical:middle,将文字baseline对齐

2.5 CSS特性

1.继承性

文字控制属性可以继承,一些标签自带属性，就继承不了了

2.层叠性

后来居上，但是选择器优先级要相同。

三、JavaScript

3.1闲话

脚本语言不需要编译。
javascript来控制网页行为。

js代码置于body'底部，可以让页面加载比较快。

引入方式与css相似，但是 引入标签不能自闭和

3.2 基础语法

3.2.1 书写语法

分号可有可无
区分大小写
document.write():写到html页面
var 变量可以存放不同类型的值，作用域：全局变量 ，不局限与代码块里面。可以重复定义。
let 用法与var相似，只是作用域： 代码块 ，不可以重复定义。
运算符都跟java大差不差
" === " : 不会进行类型转换
" == " : 判断类型是否一样，如果不一样，进行类型转换，再比较

3.2.2 类型转换

在这里插入图片描述

3.2.3 函数 function

第一种

function functionName(arg1,arg2.... ){
	方法体
}

第二种

var functionName = function(arg1,arg2,...){
	方法体
}

3.3 对象

3.3.1 array

相当于java可以变长变类型的list集合
但是变长情况比list更宽松。

var array =[1,2,3];

length： array数组的元素个数
push：添加方法
splice：删除方法

3.3.2 自定义对象

在这里插入图片描述

3.3.3 BOM 浏览器对象

window.confirm()的返回值是一个布尔值
setTimeout(function,ms) :在一定的时间间隔执行，只执行一次
setInterval(function,ms) :在一定的时间间隔执行，重复执行
History 对象 History.back() 返回上一页
Location.href : 实现页面跳转

3.3.4 DOM 文档对象模型

作用：

改变HTML元素内容
改变HTML元素样式
对HTMLDOM事件做出反应
添加和删除HTML元素

获取Element对象：

在这里插入图片描述

Element对象的使用：

查文档，查对象的操作

3.4 事件监听

事件绑定：

建议通过拿ID来绑定元素。

常见事件

手册

表单验证

第一步：输入框失去焦点，验证输入内容提示要求

第二步：表单验证

在这里插入图片描述

注意点：

首先通过 id 来获取表单对象

var refForm = document.getElementById("reg-form");

为表单对象绑定onsubmit对象，οnsubmit=true是成功提交
有两个要注意：

第一种方法

refForm.onsubmit=function(){
	/*
	在这里面填写 表单验证代码 ，
	记住返回要返回true和false
	*/
}

第二种方法：

<form onsubmit="return function() ">


</form>

记住一定要 return function（），而不是function（）

四、web API

1. 获取元素

getElementById()
getElementByClassName() 类名对象元素集合
getElementByTagname()标签名对象集合

2. 基础事件

触发-响应机制
事件源：事件被触发对象

var btn = document.getElementById("btn“)

事件类型：如何触发
事件处理程序：可以用函数封装

3. 操作DOM

3.1 改变元素内容

element.innerText

不识别html标签

elemrnt.innerHTML
此外，大量创建节点时候，将标签元素字符串，用数组拼接，效率最快

支持html标签

其中可以拿到元素内容，而且第二种可以拿到标签 ，推荐使用第二种，严谨，而且这是针对普通盒子元素

3.2 改变元素属性值

直接

元素.属性 = value

3.3 修改表单元素内容

this 是事件函数的调用者

3.4 修改元素样式

element.style.field

js修改的style样式，是行内样式，权重比较高，优先显示
同时修改许多样式，可以用预先定义的类来包装，但是会覆盖以前的类名，但直接把原先的类名，直接写着就可以了。
example：

this.className ='ex1';

3.5 获取和设置自定义属性值

得到

element.getAttribute("属性名");

定义

 element.setAttribute("属性名","value")；

注意
更改类时候，属性名应该是 “ class” ，不是” className “

用”data-“来规范自定义属性

4. 节点操作

利用节点层级关系，来获取元素
任何元素都是节点，主要是
1 == 元素节点
2 == 属性节点
3 == 文本节点

4.1节点关系

父亲节点:

node.parentNode
/* 拿到它亲爹节点 */

儿子节点

 node.childNodes
 // 拿到所有儿子节点集合，包括元素节点和文本节点

node.children 
// 拿到的是子元素节点

推荐使用children，拿到的都是子元素节点集合
没有兼容性问题，以及拿到第一个子元素节点
children[0]

兄弟节点

node.nextElementSibling

4.2 创建节点

步骤：

var li =document.createElement('li') 创建节点
ul.appendChild(li) 将节点添加到末尾，类似 css的after
ul.insertBefore(要添加的节点，子节点的位置 child[i]) 添加位置为 i-1
ul.removeChild(ul.children[0]) 删除元素

5.事件

5.1 注册事件

传统注册事件具有唯一性。
监听事件 addEventListener()
事件类型是字符串，监听器是函数

5.2 解绑事件

eventarget.removeEventListener('事件类型',funciton)

其中function不能是匿名函数，调用时候不用写括号。

5.3 阻止事件

普通版本

e.preventDefault()

6.Dom事件流

事件会逐级寻找对应的元素，只要在捕获和冒泡阶段，父级事件有绑定相同事件，就会触发。

7.事件对象

1.event 就是一个事件对象，写到侦听函数小括号里面，当形参来看。
2.事件对象要在有事件才能存在，参数都是与事件有关，也都是系统自动创建
3.事件对象通常命名为event、e等

7.1 e.target和this的区别

this指向的是绑定对象，e.target执行的是，你点击的那个对象。
要做到这个this效果，可以用e.currentTarget.

7.2 阻止事件冒泡

e.stopPropagation() 直接冒泡时候阻止父级元素触发相同事件

7.3 事件委托

将事件监听器设置在父节点上，利用冒泡原理影响设置每个子节点。

例子：
给ul注册点击事件，然后利用事件对象的target找到当前点击的li，点击li后，冒泡到ul，因为ul注册过点击事件，就会触发监听器

7.4 键盘事件

onkeyup 按键弹起
onkeydown 任意键按键按下
onkeypress 非功能键按下

7.4.1 判别按下的是那个键

keyCode 返回该键的ASCII码值
keyup和keydown 不区分字母大小写，
keypress区分字母大小写

8. BOM 浏览器对象模型

8.1浏览器窗口大小事件

 window.onresize();
 window.addEventListener("resize",funciton(){ 
 })

8.2 定时器 ------自动播放

setTimout(function(){
},time)

其中的function是回调函数

停止计时器

clearTimeout(timer)

重复调用定时器

setInterval(function,time)

9.offset

style 是可读写
offset 只读，能读所有样式表

本文含有隐藏内容，请开通VIP 后查看

【Html + Css + javaScript+web Apis】

一、html的要点：

1.1 div和span的区别：

1.2 相对地址：

1.3 用p、hr、font等标签实现的段落内容展示代码

1.4 用table、tr、th、td实现的课程表代码：

1.5 form表单

1.6 1em = 当前标签的 font size 大小

二、CSS要点：

2.1 css的导入方式：

2.2 选择器

升级版复炸选择器

1. 后代选择器

2.子代选择器

3.交集选择器

2.3 常见元素

- box model

- padding 例子

用padding，让盒子的内容做出居中效果

- margin

margin常见问题

- 伪元素

-分组选择器

-嵌套选择器

- position

- float

清除浮动

方法

- 导航栏

1. 传统网页，用列表实现HTML导航栏，例子1

2. 用css来实现垂直导航栏，例子2

3. 进阶版，固定个主选项。

4. 全屏高度的固定导航条

5.水平导航条

2.4 注意点

2.4.1 百分比高度

2.4.2 标签水平居中

2.5 CSS特性

1.继承性

2.层叠性

三、JavaScript

3.1闲话

3.2 基础语法

3.2.1 书写语法

3.2.2 类型转换

3.2.3 函数 function

3.3 对象

3.3.1 array

3.3.2 自定义对象

3.3.3 BOM 浏览器对象

3.3.4 DOM 文档对象模型

作用：

获取Element对象：

Element对象的使用：

3.4 事件监听

事件绑定：

常见事件

表单验证

第一步：输入框失去焦点，验证输入内容提示要求

第二步：表单验证

四、web API

1. 获取元素

2. 基础事件

3. 操作DOM

3.1 改变元素内容

3.2 改变元素属性值

3.3 修改表单元素内容

3.4 修改元素样式

3.5 获取和设置自定义属性值

4. 节点操作

4.1节点关系

4.2 创建节点

5.事件

5.1 注册事件

5.2 解绑事件

5.3 阻止事件

6.Dom事件流

7.事件对象

7.1 e.target和this的区别

7.2 阻止事件冒泡

- `box model`

- `padding` 例子

- `margin`

-`分组选择器`

-`嵌套选择器`

- `position`

- `float`

- `导航栏`