html：超文本标记语言（hyper text markup langlanguage）
<!-- meta：一般用来做seo：搜索引擎优化 -->
- 基本标签
- 标题标签
<h>- 段落标签
<p>- 换行标签
<br/>- 水平线标签
<hr>/- 字体样式标签
- 注释和特殊符号：空格
、>>、<<、©©
- 图像标签
<img>：src：图片地址alt：图片名字：找不到图片默认显示title：悬停文字- 相对路径、绝对路径的区别
- 链接标签
- HTML
链接是通过<a>标签进行定义的。可以内嵌图片，做图片超链接href：属性中指定链接的地址。target：表示窗口在哪里打开- 锚链接：1、需要一个锚标记，
id、name；2、跳转到标记- 功能性链接：邮件链接
<a href="http://www.w3school.com.cn">This is a link</a>
- 块元素和行内标签
块元素：独占一行
行内元素：在一行，撑开宽度
- 列表
- 有序列表：
<ol>内部：<li>- 无序列表：
<ul>内部：<li>- 自定义列表：
<dl>：内部：<dt>列表名称、<dd>列表内容
- 表格标签
- 基本结构：单元格、行、列、跨行、跨列
- 表格：
<table>、行：<tr>、列：<td>- 跨行：
<td>属性：colspan、跨列：<td>属性：rowspan
- 媒体元素
<video>：src：资源路径、controls：控制条、autoplay：自动播放<audio>：src：资源路径、controls：控制条、autoplay：自动播放
- 页面结构分析
<header>：网页头部<footer>：网页脚部<section>：页面中的一块独立区域<article>：独立文章内容<aside>：相关内容或应用（侧边栏<nav>：导航类辅助内容
- <iframe>：内联框架
src：地址 w-h：宽高
特殊用法跳转打开在ifeame中
<iframe src="" border="0" width="1000" height="800"></iframe>
<a href="../es 6 -11/index.html">tiaozhuan</a>
- 表单<form>
action：表单提交的位置。网站或请求地址method：post、get提交方式
- 表单元素属性
type：元素属性：text：文本（默认）、password：密码框、radio：单选框、checkbox：多选框、sumbit：提交按钮、reset：重置按钮、button：按钮、image：图片按钮、file：文件域、number：数字验证、range：滑块、search：搜索name：元素名value：默认初始值size：初始宽度maxlength：最大字符数checked：选中readonly：只读hidden：隐藏disable：禁用
- 下拉框：<selected>标签
name：属性option：选项（内部标签）
- 文本域：<textarea>标签
cols：行、rows：列
- 表单初级验证
placeholder：提示required：必填pattern：正则表达式
- HTML元素
- HTML属性
- HTML标题
- HTML段落
- HTML链接
<a href="url">Link text</a>
空格占位符
HTML<textarea>标签
css：层叠级联样式表（cascading style sheet）
一种描述 HTML 文档样式的语言
CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。
常用：字体、颜色、背景、边距、宽度、高度、位置、动画、边框。。。
- css语法
- 选择器和声明块
- 声明块：由属性和属性值组成
- css三种导入方式：优先级：就近原则（外部样式和内部样式看谁在下面）
外部样式表：
一般使用这种，复用，易修改
<!--链接式-->
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<!--导入式：css2.1特有-->
<head>
@import url="mystyle.css">
</head>
内部样式表
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
内联样式
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
- css选择器：选择页面一个或一类元素
基本选择器
- 标签选择器 ：
标签名- 类选择器：
.class- id选择器：
#id- 通用选择器：
*- 分组选择器：用
,分割选择器
优先级：id选择器>class选择器>标签选择器
层次选择器
- 后代选择器
body p：所有后代元素- 子选择器
body>p：子元素- 相邻兄弟选择器
.active+p：当前元素向下的第一个兄弟元素- 通用选择器
.active～p：当前元素向下的所有兄弟元素
常用结构伪类选择器
p:first-child：第一个子元素p:last-child：最后一个子元素p:nth-child(n)p:nth-of-type(n)
css属性选择器
- 选择所有带有
target属性的<a>元素：a[target]- 选取所有带有
target="_blank"属性的<a>元素：a[target="_blank"]:绝对等于- 选取
title属性包含"flower"单词的所有元素：[title~="flower"]：包含属性- 选取
class属性以"top"开头的所有元素：值必须是完整或单独的单词：[class|="top"]- 选取 class 属性以 “top” 开头的所有元素：
[class^="top"]- 选取 class 属性以 “test” 结尾的所有元素：
[class$="test"]- 选取 class 属性包含 “te” 的所有元素：
[class*="te"]
a[target] {
background-color: yellow;
}
a[target="_blank"] {
background-color: yellow;
}
[title~="flower"] {
border: 5px solid yellow;
}
/*。。。*/
css伪类：伪类用于定义元素的特殊状态。
/* 未访问的链接 */
a:link {
color: #FF0000;
}
/* 已访问的链接 */
a:visited {
color: #00FF00;
}
/* 鼠标悬停链接 */
a:hover {
color: #FF00FF;
}
/* 已选择的链接 */
a:active {
color: #0000FF;
}
/*注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS 定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。*/
- CSS 注释，以 /* 开始，以 */ 结束：
- css颜色：单词、rgb、rgba
- 常用样式
字体样式
font-family：字体font-size：字体大小font-weight：字体粗细color：字体颜色
文本样式
color：颜色text-align: center：排版，居中text-indent：首行缩进，2embackground：背景line-height：行高（行高和块的高度一致就可以居中了）text-decoration:划线text-shadow：阴影颜色
- css背景：背景颜色：背景图片
background-colorbackground-image: url()：url指定路径：默认铺满background-repeat：平铺格式background-position：位置background：颜色、图片、图片位置、平铺方式
- 盒子模型：元素大小=margin+border+padding+内容大小
margin：外边距padding：内边距border：边框：粗细、样式、颜色
其他
-
圆角边框：
border-radio: -
div居中：
margin: 0 auto：前提块要有宽高 -
display和float：浮动 -
<div>块元素</div> -
<span>行内元素</span>
父级边框塌陷问题
- 增加父级元素高度
- 在父级元素增加一个空div，清除浮动
overflow：在父级元素增加overflow:hidden- 父级添加伪类：
after
- 定位
相对定位
position: relative
绝对定位position: absolute
固定定位position: fixed即使滚动页面，它也始终位于同一位置
总结
- 前端的
html页面和css找模板copy
JavaScript
脚本语言
- 引入
<head>中的 JavaScript<body>- 外部文件中的 JavaScript
<script src="/demo/myScript.js"></script>- 外部 url 中的 JavaScript
<script src="https://www.w3school.com.cn/demo/myScript.js"></script>
- 严格检查模式：
‘use strict‘；
- 输出
- 写入html输出
<script> document.write(5 + 6); </script>- 写入html元素
<script> document.getElementById("demo").innerHTML = 5 + 6; </script>- 弹窗：
alert- 控制台输出：
console.log
- 语法：数据类型
- 数据类型：数值、字符串、布尔、数组、对象、undefined、function、object
字符串方法：
- 在引号前添加反斜杠被认定为引号
indexOf()方法返回指定文本首次出现的位置：- 在字符串中搜索文本并在找到后返回这段文本 - match()：有多少个返回多少个
- 替换字符串中的字符 -
replace()- 把字符串转换为大写 - toUpperCase()
- 把字符串转换为小写 - toLowerCase()
- 把字符串拆分入数组 -
split()- 将字符串转化为函数：
eval（str）
数字
- 超大或超小的数可通过科学（指数）计数法
123e5：12300000- 浮点算术不总是 100% 精确，但是可以通过乘并除以 10 解决此问题
- 数字字符串相加是字符串，其他运算会尝试转化为数字
- 用非数字字符串进行除法会得到 NaN
- NaN 的类型是数字（没错！typeof NaN 返回 number）
toString()方法能够以十六进制、八进制或二进制输出数，数字转换为字符串- 全局方法
Number()将变量转换为数字- 全局方法 parseInt() 将字符串转换为数字
- 全局方法 parseFloat() 将字符串转换为数字
数组
- length 属性返回数组长度
- 遍历
- 添加具有高索引的元素可以在数组中创建未定义的“孔”。
- 数组类型判断：`fruits instanceof Array;
- Array.isArray(fruits);`
- 添加元素：
push- 删除最后一个：
popjoin()方法将数组元素连接成一个字符串- 连接数组 -
concat()- 将一个元素添加到数组中的位置 -
splice()fruits.splice(2, 0, “Lemon”, “Kiwi”);第二个参数表示删除几个指定位置后的原数组元素- 把数组转换为字符串 - toString()
- 把新元素添加到数组的开头 - unshift()
- 删除数组中的第一个元素 - shift()
- 选取数组中的元素 - slice()
数组排序
- fruits.
sort();：升序reverse()方法反转数组中的元素。- 先 sort 再 reverse：降序
- 自定义排序方式：points.sort(function(a, b){return a - b});
数组迭代
Array.forEach()Array.map()Array.filter(function)：过滤规则Array.reduce()：Array.indexOf()：返回索引Array.lastIndexOf()：返回最后一个索引Array.find(function)：找到满足条件的第一个值Array.findIndex()：找到满足条件的第一个值的下标
对象：具有属性和方法
- 直接创建、
- new 创建：
var person = new Object(); person.firstName = "Bill";、- 构造器创建：
- 使用 .property 访问属性
- 使用 [property] 访问属性
- 使用 for in 访问属性
- 添加对象属性：
person.xx = xx1：xx为新增属性 赋值- 删除对象属性
delete
json：简洁、清晰：json对象、json数组、json解析
- 任何js支持的类型都能转化为json
- 用 JSON 字符串创建对象：
JSON.parse(text);- 从 Javascript 对象创建 JSON 字符串
JSON.stringify(obj);JSON.stringify会删除对象中的任何函数，把函数转换为字符串，就可以在 JSON 对象中保留该函数。使用toString()
- map 和 set（es6新特性）
//map
var map = new Map([['a',1],['b',2],['c',3]]);
map.set('d',4);
console.log(map);//Map(4) {"a" => 1, "b" => 2, "c" => 3, "d" => 4}
map.delete('a');
console.log(map);//Map(3) {"b" => 2, "c" => 3, "d" => 4}
//set
var set = new Set([1,1,1,2,2,3]);
console.log(set);//Set(3) {1, 2, 3}
set.add(4);
console.log(set);//Set(4) {1, 2, 3, 4}
set.delete(2);
console.log(set);//Set(3) {1, 3, 4}
console.log(set.has(3));//true
- 比较：
==和===
==：类型不一样，数值一样，true===：类型一样，数值一样，才true
- 条件语句：
- if、else、if else
- switch case
- 循环语句
- for
- while、do while
- break和continue
- 使用
for...in语句遍历对象中的元素
for (x in person) { txt += person[x] + " "; }- 使用
for...of语句遍历
for...in：获取数组下标和对象属性名 和for...of：获取数组值和对象属性值
- JavaScript 正则表达式（查）
- 语法：其他
- 变量。var、let。常量：const
如果变量声明时没有赋值，那么其值是 undefined。
重新声明变量不会破坏值
空的字符串变量既有值也有类型。- 运算符
+ - * / % ++--- 赋值
= += -= *= /= %=- 表达式：数值相加，字符串拼接
字符串+数字："8" + 3 + 5 = 835
数字+字符串：3 + 5 + "8"=88（先数值加完，再拼接：Javascript 从左向右计算表达式。）
可以使用 += 运算符对两个字符串相加- 关键词：var、const、let、this等
- 注释
JavaScript 对大小写敏感typeof运算符返回变量或表达式的类型constructor属性返回变量或对象的构造器函数。事件：onclick等- 数学：
Math.xxx- 日期：
Date()
字符串转化为date对象new Date(str);- 错误处理：
try...catch 语句和onerror：指向错误处理函数
-
函数：function name()：假设一个参数
var name = function(){}
没有传递参数：参数类型会是undefined；手动抛出异常，
传递多个参数：
arguments：传递进来的所有参数，是一个数组rest：获取已经定义的参数外的所有参数（es6）function name(a,b,...rest)- 将字符串转化为函数：
evalapply：控制this指向的对象（默认是指向的调用他的对象）
操作BOM对象
浏览器内核
- ie 6～11
- chrome
- Safari
- Firefox
三方：（可以切换内核）
- QQ浏览器
- 360浏览器
window代表浏览器窗口（重要）
navigator，封装了浏览器信息
screen：屏幕
location：代表当前页面的URL信息
document：代表当前页面（重要）
获取具体的文档树节点
获取cookie：document.cookie
history：历史记录
DOM对象
- 获取cookie：
document.cookie- 获取域名：
document.domaindocument.getElementsByNamedocument.getElementsByTagNamedocument.getElementsById
innerHTML 属性可用于获取或替换 HTML 元素的内容。
es6
ECMAScript介绍：ECMA-262：标准
1、let：声明 变量 和 特性
- 变量不能重复声明
- 块级作用域
- 不存在变量提升
- 不影响作用域链
2、const: 声明 常量 和 特性
- 必须赋初值
- 一般大写
- 值不能修改
- 块级作用域
- 对于数组和对象的元素修改，不算做对常量的修改，不会报错（地址没有改变）
3、变量的解构赋值：ES6运行按照一定模式从数组和对象提取值，对变量进行赋值
-
数组
const F4=['A','B','C','D']; let [a,b,c,d] = F4;结果 a=A，。。。
-
对象
const zhao = { name: 'hzt', age: '18', eat: function(){ console.log("eat pig"); } } let {name, age,eat} = zhao;结果name=hzt，eat函数可以调用
4、模板字符串：[``]
-
内容中可以直接出现换行符等
-
变量拼接
let a = '啊啊啊'; let b = `${a}hhhhhhh`;
5、对象的简化写法
6、箭头函数 和 声明特点
-
this 是静态的，this 始终指向函数声明时所在作用域下的 this 的值
-
不能作为构造函数实例化对象
-
不能使用 arguments 变量
-
箭头函数的简写
1）、省略小括号，当形参有且只有一个时
2）、省略花括号，当代码体只有一条语句时，此时 return 必须省略 。而且语句的执行结果就是函数返回值
1448
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
