HTML
标签
标题标签
1
2
3
4
5
6
7
| <h1>标题标签</h1>
<h1>标题一共六级选,</h1>
<h2>文字加粗一行显。</h2>
<h3>由大到小依次减，</h3>
<h4>从重到轻随之变。</h4>
<h5>语法规范书写后，</h5>
<h6>具体效果刷新见。</h6>
|
段落标签
1
2
| <p>在中国IT教育行业发展的轨迹中，
<br /> 能始终秉承着初心做教育的企业为数不多，而在李开复老师的心中，传智播客就是其中之一。在11年的风雨历程中，传智播客在中国IT教育行业留下了“为莘莘学子改变命运而讲课，为千万学生少走弯路而著书”的独特烙印。同时，传智播客也凭借着良好的口碑、更注重品质的教学及优秀的业绩增长成功吸引了众多知名投资者们的青睐，其中不乏创新工场、经纬、君度、蓝图、北城壹号等多个投资机构。</p>
|
文本格式标签
1
2
3
4
| <strong>加粗</strong> <b>加粗</b>
<em>倾斜</em> <i>倾斜</i>
<del>删除线</del> <s>删除线</s>
<ins>下划线</ins> <u>下划线</u>
|
div和span标签
1
2
3
4
5
6
| <div>我是一个div标签我一个人单独占一行</div>
<div>我是一个div标签我一个人单独占一行</div>
<span>百度</span>
<span>新浪</span>
<span>搜狐</span>
<span>块标签</span>
|
img标签
1
2
3
4
5
6
| <img src="图片地址"
alt="图片出错时文字"
title="鼠标悬浮时的文字"
height="高度"
width="宽度"
border="图片描边大小"/>
|
超链接标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| 1.外部链接
<a href="http://www.qq.com" target="_blank"> 腾讯</a>
target 打开窗口的方式 默认的值是 _self 当前窗口打开页面 _blank 新窗口打开页面
<a href="http://www.itcast.cn" target="_blank">传智播客</a>
2.内部链接: 网站内部页面之间的相互链接
<a href="gongsijianjie.html" target="_blank">公司简介</a>
3.空链接:#
<a href="#">公司地址</a>
4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式
<a href="img.zip">下载文件</a>
5.网页元素的链接
<a href="http://www.baidu.com"><img src="img.jpg"/></a>
6. 锚点定位，点击之后跳转到对应id的元素
<a href="#live">个人生活</a><br />
***
***
***
<h3 id="live">个人生活</h3>
|
表格标签
HTML表格（table）元素有许多属性，以下是一些常见的属性：
border：控制表格边框是否显示。默认值为 “1”。cellpadding：控制单元格内文本的间距。默认值为 “0”。cellspacing：控制单元格之间的间距。默认值为 “0”。width：控制表格的宽度。默认值为 “100%”。height：控制表格的高度。默认值为 “100%”。bgcolor：控制表格的背景颜色。align：控制表格在页面中的对齐方式。valign：控制表格中单元格在垂直方向上的对齐方式。bordercolor：控制表格边框的颜色。rules：控制表格边框的显示方式。可选值有 “none”（不显示边框）、“groups”（显示分隔线）、“rows”（显示行边框）和 “cols”（显示列边框）。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <table>
<thead>表头部分
<tr>
<th>姓名</th>表头单元格
<th>年龄</th>
<th>职业</th>
</tr>
</thead>
<tbody>表格主体
<tr>
<td>张三</td>表格单元格
<td>25</td>
<td>程序员</td>
</tr>
<tr>
<td>李四</td>
<td>30</td>
<td>设计师</td>
</tr>
<tr>
<td>王五</td>
<td>28</td>
<td>销售</td>
</tr>
</tbody>
</table>
|
合并单元格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <table width="500" height="249" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
|
列表
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <ul>无序列表
<li>榴莲</li>
<li>臭豆腐</li>
<li>鲱鱼罐头</li>
<li>
<p>123</p>
</li>
</ul>
<ol>有序列表
<li>刘德华 10000</li>
<li>刘若英 1000</li>
<li>pink老师 1</li>
</ol>
<dl>自定义列表，无修饰
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
<dt>关注我们</dt>
<dd>新浪微博</dd>
<dd>官方微信</dd>
<dd>联系我们</dd>
</dl>
|
表单
表单域
1
2
3
| <form action="demo.php提交地址" method="POST提交方式" name="表单名字">
各种控件
</form>
|
表单元素
预览表单元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| <form action="xxx.php" method="get">
用户名: <input type="text" name="username" value="张三" maxlength="6" placeholder="请输入名字"> <br>
密码: <input type="password" name="pwd" > <br>
性别: 男 <input type="radio" name="sex" value="男">
女 <input type="radio" name="sex" value="女" checked="checked">
人妖 <input type="radio" name="sex" value="人妖"> <br>
爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭">
睡觉 <input type="checkbox" name="hobby">
打豆豆 <input type="checkbox" name="hobby" checked="checked"> <br>
<input type="submit" value="免费注册">
<input type="reset" value="重新填写">
<input type="button" value="获取短信验证码"> <br>
上传头像: <input type="file" >
</form>
|
label标签
1
2
3
4
5
6
| 增加用户选中点面积，更加便于点击
label标签通过for和表单元素id进行绑定
<label for="text"> 用户名:</label> <input type="text" id="text" >
<input type="radio" id="nan" name="sex"> <label for="nan">男</label>
<input type="radio" id="nv" name="sex"> <label for="nv">女</label>
|
select标签
1
2
3
4
5
6
| <select>
<option>山东</option>
<option>北京</option>
<option>天津</option>
<option selected="selected">火星</option>
</select>
|
文本域标签
1
| <textarea cols="50" rows="5">pink老师,我知道这个反馈留言是textarea来做的 </textarea>
|
H5标签
语义化标签
<header> 头部标签<nav> 导航标签<article> 内容标签<section> 定义文档某个区域<aside> 侧边栏标签<footer> 尾部标签
音视频标签
1
2
| <audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>
<video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/mi9.jpg"></video>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <form action="">
<ul>
<li>邮箱: <input type="email" /></li>
<li>网址: <input type="url" /></li>
<li>日期: <input type="date" /></li>
<li>时间: <input type="time" /></li>
<li>数量: <input type="number" /></li>
<li>手机号码: <input type="tel" /></li>
<li>搜索: <input type="search" /></li>
<li>颜色: <input type="color" /></li>
<!-- 当我们点击提交按钮就可以验证表单了 -->
<li> <input type="submit" value="提交"></li>
</ul>
</form>
<form action="">
<input type="search" name="sear" id="" required="required" placeholder="pink老师" autofocus="autofocus" autocomplete="off">
<input type="file" name="" id="" multiple="multiple">
<input type="submit" value="提交">
</form>
|
Emmet语法
快速撸HTML
CSS
选择器
类名选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| 格式为.类名
一个标签可以有多个类名，用空格隔开
<style>
.box {
width: 150px;
height: 100px;
font-size: 30px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
<body>
<div class="box red">红色</div>
<div class="box green">绿色</div>
<div class="box red">红色</div>
</body>
|
id选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!DOCTYPE html>
格式为#id
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基础选择器之id选择器</title>
<style>
#pink {
color: pink;
}
</style>
</head>
<body>
<div id="pink">迈克尔·杰克逊</div>
<div>pink老师</div>
</body>
</html>
|
通配符选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html>
格式*
选中所有的
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基础选择器之通配符选择器</title>
<style>
* {
color: red;
}
</style>
</head>
<body>
<div>我的</div>
<span>我的</span>
<ul>
<li>还是我的</li>
</ul>
</body>
</html>
|
后代选择器和子元素选择器
1
2
3
4
5
| 后代选择器
格式p a
子元素选择器 p > a
子元素选择器只能选择直接子元素，后代选择器可以选择所有子元素。
|
并集选择器
1
2
3
4
5
6
7
| 一般竖着写并集选择器
div,
p,
.pig li {
color: pink;
}
|
伪类选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
a:link {
color: #333;
text-decoration: none;
}
a:visited {
color: orange;
}
a:hover {
color: skyblue;
}
a:active {
color: green;
}
input:focus {
background-color: pink;
color: red;
}
|
属性选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3新增属性选择器</title>
<style>
input[type=text] {
color: pink;
}
div[class^=icon] {
color: red;
}
section[class$=data] {
color: blue;
}
div.icon1 {
color: skyblue;
}
</style>
</head>
<body>
<input type="text" name="" id="">
<input type="password" name="" id="">
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>
<section class="icon1-data">我是安其拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon3-ico">哪我是谁</section>
</body>
</html>
|
结构伪类选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
ul li:first-child {
background-color: pink;
}
ul li:last-child {
background-color: pink;
}
ul li:nth-child(2) {
background-color: skyblue;
}
ul li:nth-child(6) {
background-color: skyblue;
}
ul li:nth-child(even) {
background-color: #ccc;
}
ul li:nth-child(odd) {
background-color: gray;
}
ol li:nth-child(-n+3) {
background-color: pink;
}
ul li:first-of-type {
background-color: pink;
}
|
E:nth-child(n) 匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的） 先找到第n个孩子，然后看看是否和E匹配E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E，也就是说，对父元素里面指定子元素进行排序选择。 先去匹配E ，然后再根据E 找第n个孩子
伪元素选择器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>伪元素选择器before和after</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
div::before {
content: '我';
}
div::after {
content: '小猪佩奇';
}
</style>
</head>
<body>
<div>
是
</div>
</body>
</html>
|
CSS的特点
- 层叠性：子级元素会覆盖父级元素
- 继承性：子级元素会继承父级
- 优先级：
| 选择器 |
权重 |
| 继承/* |
0 0 0 0 |
| 元素选择器 |
0 0 0 1 |
| (伪)类选择器 |
0 0 1 0 |
| ID选择器 |
0 1 0 0 |
| 内联样式 |
1 0 0 0 |
| !importrant |
无穷 |
- 权重计算：四组数字，不会进位
元素显示分类
块元素
常见的块元素：
1
| <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
|
标签是最典型的块元素。
块级元素的特点：
- 比较霸道，自己独占一行。
- 高度，宽度、外边距以及内边距都可以控制。
- 宽度默认是容器（父级宽度）的100%。
- 是一个容器及盒子，里面可以放行内或者块级元素。
注意：
文字类的元素内不能放块级元素
1
2
| <p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放<div>
同理， <h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素
|
行内元素
常见的行内元素：
1
| <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
|
标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个。
- 高、宽直接设置是无效的。
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。
注意： 链接里面不能再放链接 特殊情况链接 里面可以放块级元素，但是给 转换一下块级模式最安全
行内块元素
常见的行内块标签：
它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点：
- 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。
- 一行可以显示多个（行内元素特点）。默认宽度就是它本身内容的宽度（行内元素特点）。
- 高度，行高、外边距以及内边距都可以控制（块级元素特点）。
显示模式转换
1
2
3
4
| 转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block;
不显示：display: none;
|
盒模型
border
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| div {
width: 300px;
height: 200px;
border-width: 5px;
border-style: solid;
border-color: pink;
border-top: 5px solid pink;
border-radius: 10px;
border-top-left-radius: 20px;
}
|
border会占据盒子的大小
padding
1
2
3
4
5
6
7
8
9
10
| div {
width: 200px;
height: 200px;
background-color: pink;
padding-left: 20px;
padding-top: 30px;
padding: 5px 10px 20px 30px;
}
|
padding会撑大盒子，但当元素没有设定宽高时，padding会占据盒子大小
margin
1
2
3
4
5
6
7
| .header {
width: 900px;
height: 200px;
background-color: pink;
margin: 100px auto;
}
|
相邻和嵌套块元素会合并外边距
阴影
1
2
| box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, .3);
text-shadow: 5px 5px 6px rgba(0, 0, 0, .3);
|
css3盒模型
1
2
3
4
5
6
|
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
|
Position定位
relative
- 它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。
- 相对定位并没有脱标，也就是原来所在的位置会被保留。一般用来作为绝对定位的父级元素
absolute
- 脱标，不占据位置
- 父级无定位以document为定位，有则以父级定位
fixed
固定不动，一直显示在屏幕上
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>固定定位小技巧-固定到版心右侧</title>
<style>
.w {
width: 800px;
height: 1400px;
background-color: pink;
margin: 0 auto;
}
.fixed {
position: fixed;
left: 50%;
margin-left: 405px;
width: 50px;
height: 150px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="fixed"></div>
<div class="w">版心盒子 800像素</div>
</body>
</html>
|
sticky
粘性定位在滚动后会锁在最上层
z-index
利用绝对定位居中
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>绝对定位水平垂直居中</title>
<style>
.box {
position: absolute;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
|
属性
字体属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| p{
font-family: 'Times New Roman', Times, serif;
font-size: 16px;
font-weight: 400;
font-style: italic;
font: font-style font-weight font-size/line-height font-family;
color: rgb(255, 0, 255);
text-align: right;
text-decoration: line-through/overline/underline;
text-indent: 2em;//文字首行缩进
line-height: 25px;//多用于文字中心对齐
}
|
背景属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| div {
width: 200px;
height: 200px;
background-color: pink;
background-image: url(images/logo.png);
background-repeat: repeat-y/no-repeat/repeat-x;
background-position: right top;
background-attachment: fixed;
background: black url(images/bg.jpg) no-repeat fixed center top;
background: -webkit-linear-gradient(top left, red, blue);
}
|
显示隐藏
1
2
3
4
5
6
7
|
display: none;
visibility: hidden;
overflow: hidden
|
图片滤镜
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
html{
filter: grayscale(100%);
}
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);
|
宽度处理函数
1
| width: calc(100% - 30px);
|
过度效果
1
2
|
transition: all 0.5s ease-out;
|
At-rules
@property
布局
Flex布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
div {
display: flex;
width: 800px;
height: 300px;
background-color: pink;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
align-content: space-around;
}
div span{
flex:flex-grow flex-shrink flex-basis
align-self:flex-end
}
|
Javascript
DOM 文档对象模型
DOM树
整个HTML文档其实是由一个个DOM节点构成，也是DOM对象，它们共同构成了DOM树
获取DOM对象
1
2
3
| const box = document.querySelector('div')
const boxs = document.querySelectorAll('div')
const ele = document.getElementById('elementId')
|
操作DOM对象
修改内容
1
2
3
| const intro = document.querySelector('.intro')
intro.innerText = '嗨~ 我叫李雷！'
intro.innerHTML = '<h4>嗨~ 我叫韩梅梅！</h4>'
|
修改常见属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
const pic = document.querySelector('.pic')
pic.src = './images/lion.webp'
const box = document.querySelector('.intro')
box.style.color = 'red'
box.style.backgroundColor = 'pink'
|
操作类名
1
2
3
4
5
6
7
8
|
const box = document.querySelector('.intro')
box.className = 'pink'
box.classList.add('active')
box.classList.remove('active')
box.classList.toggle('one')
|
修改表单属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
let input = document.querySelector('input')
input.value = '小米手机'
input.type = 'password'
let btn = document.querySelector('button')
btn.disabled = false
let checkbox = document.querySelector('.agree')
checkbox.checked = false
|
自定义属性
在html5中推出来了专门的data-自定义属性，在标签上一律以data-开头，在DOM对象上一律以dataset对象方式获取
1
2
3
4
|
let div = document.querySelector('div')
console.log(div.dataset.id)
|
定时器
事件
Array方法
Array.find 返回符合条件的第一个对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
const arr = [
{
name: '小米',
price: 1999
},
{
name: '华为',
price: 3999
},
]
const mi = arr.find(item => item.name === '小米')
console.log(mi)
>> {
"name": "小米",
"price": 1999
}
|
Array.from 将伪数组转换为真数组
1
2
3
4
5
6
7
|
const lis = document.querySelectorAll('ul li')
const liss = Array.from(lis)
liss.pop()
console.log(liss)
|
String方法
String.split 将字符串转化为数组
1
2
3
4
5
| const str = 'The quick brown fox jumps over the lazy dog.';
const words = str.split(' ');
console.log(words[3]);
|
String.substring 截取字符串
1
2
3
4
5
6
7
8
| const str = 'Mozilla';
console.log(str.substring(1, 3));
console.log(str.substring(2));
|
String.startsWith 判断是否以某字符开头
1
2
3
4
5
6
7
| const str1 = 'Saturday night plans';
console.log(str1.startsWith('Sat'));
console.log(str1.startsWith('Sat', 3));
|
String.includes 判断字符串是否包含指定内容
1
2
3
4
5
6
7
8
| const str = "To be, or not to be, that is the question.";
console.log(str.includes("To be"));
console.log(str.includes("question"));
console.log(str.includes("nonexistent"));
console.log(str.includes("To be", 1));
console.log(str.includes("TO BE"));
console.log(str.includes(""));
|
