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-color
background-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
- 删除最后一个:
pop
join()
方法将数组元素连接成一个字符串- 连接数组 -
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)
- 将字符串转化为函数:
eval
apply
:控制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.domain
document.getElementsByName
document.getElementsByTagName
document.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 必须省略 。而且语句的执行结果就是函数返回值