标签：color 标签 前端 汇总 笔记 nbsp background var 选择器
目录
前端基础
HTML
1.基本标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签</title>
</head>
<body>
<!-- 换行标签br和p标签有区别，段落每行有一定间距 -->
<P> 粗体：<strong>hello</strong> </P>
<p> 斜体: <em>hello</em> </p>
<!-- 水平线标签 -->
<hr/>
<!-- 特殊符号 -->
空 格
>大于号 <br/>
<小于号 <br/>
©版权符号 <br/>
</body>
</html>
-
img标签
<!-- src为路径，alt为没找到图片文字替代，title为鼠标悬停文字显示--> <img src="../resources/image/01.jpg" alt="没找到图片" title="鼠标悬停显示文字"> -
超链接
<!--target属性为哪个窗口打开默认是在当前窗口打开--> <a href="https://www.baidu.com" target="_blank">百度</a> -
列表
<!-- 有序--> <Ol> <li>数学</li> <li>语文</li> <li>英语</li> </Ol> <br/> <!-- 无序 --> <ul> <li>数学</li> <li>语文</li> <li>英语</li> </ul> <!-- 自定义列表 --> <dl> <dt>学科</dt> <dd>数学</dd> <dd>语文</dd> <dd>英语</dd> <dt>成绩</dt> <dd>99</dd> <dd>96</dd> <dd>55</dd> </dl> -
表格table
border:加边框
rowspan跨行
colspan跨列
<!-- 加边框 --> <table border="1px"> <!-- rowspan跨行 --> <tr> <td colspan="3">学科及成绩</td> </tr> <tr> <td>java</td> <td>python</td> <td>c++</td> </tr> <tr> <td>99</td> <td>92</td> <td>80</td> </tr> </table> -
视频和音频
视频：video
src为路径，autoplay为播放控制(进度条暂停下载...),autoplay自动播放打开网页后音频：audio
src为路径，autoplay为播放控制(进度条暂停下载...),autoplay自动播放打开网页后
2.页面结构分析
3.高级标签
-
iframe:内联标签
<iframe src="https://www.baidu.com" width="500px" height="400px"> </iframe>
CSS
1.基础知识
css1.0
css2.0 div + css,html与css分离思想，网页变得简单
css2.1 浮动加定位
css3.0 圆角，阴影，动画，浏览器兼容
练习格式：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>css测试</h1>
</body>
</html>
css
h1{
color: chartreuse;
}
- 标签选择器
例：p{ } - 类选择器
好处：可以使多个不同标签分类
例：
<!--html-->
<p class="wmp">java</p>
<p>c++</p>
/*css*/
.wmp{
color: #a03493;
}
- id选择器
好处：全局唯一，当只需要对一个标签特效时可以用
例子：#id{ }
不遵循就近原则
id选择器 > class选择器 > 标签选择器
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>
<p>p4</p>
</li>
<li>
<p>p5</p>
</li>
<li>
<p>p6</p>
</li>
</ul>
</body>
（1）后代选择器
/* body后面的p标签都选择 */
body p{
color: chartreuse;
}
（2）子选择器
/*儿子一代，注意是>不是-> */
body>p{
background-color: antiquewhite;
}
（3）相邻兄弟选择器
只有一个相邻的(向下相邻)
用加号 +
（4）通用选择器
选择向下的所有兄弟
用 ~
- 结构伪类选择器
/*ul标签里面的li标签的第一个和最后一个,也可以用id选择器*/
ul li:first-child{
background-color: chartreuse;
}
ul li:last-child{
background-color: aqua;
}
或者
/*选择当前li标签的父级标签的第一个子标签,并且是当前元素才生效*/
li:nth-child(1){
background-color: #9c65a0;
}
正则表达式
*= 存在
^= 以什么开头
$= 以什么结尾
/*a标签中有id的*/
a[id]{
background-color: chartreuse;
}
/*a标签中id = name的*/
a[id=name]{
background-color: antiquewhite;
}
/*通配，存在，因为class的名字可以有不同的多个，只用包含，不能绝对等于*/
a[class*="links"]{
background-color: #9a74a0;
}
/*选中href标签中以http开头的元素*/
a[href^=http]{
background-color: antiquewhite;
}
/*选中href标签中以pdf结尾的元素*/
a[href$=pdf]{
background-color: antiquewhite;
}
2.美化网页
重点要突出的字，使用span标签套起来,然后用css样式美化
欢迎学习<span id="title1">java</span>
p{
font-family: 楷体;
font-size: 10px;
font-weight: bold;
color: antiquewhite;
}
p{
text-align: center; /*文本居中*/
text-indent: 2em; /*首行缩进2个英文字母*/
line-height: 400px;
}
a{
text-decoration: none; /*去掉下划线*/
color: black; /*默认颜色*/
}
a:hover{ /*鼠标浮动到超链接产生变化*/
color: aqua;
font-size: 40px;
}
list-style: none; li标签前面的黑点去掉
list-style: circle; 空心圆
list-style:decimal ; 有序前面有数字
html代码：
<div id="nav">
<h3 id="tytle1">主题市场</h3>
<ul>
<li><a href="#">女装</a> <a href="#">男装</a> <a href="#">内衣</a></li>
<li><a href="#">童装玩具</a> <a href="#">箱包</a> <a href="#">配件</a></li>
<li><a href="#">家电</a> <a href="#">数码</a> <a href="#">手机</a></li>
<li><a href="#">美妆</a> <a href="#">洗护</a> <a href="#">保健品</a></li>
<li><a href="#">珠宝</a> <a href="#">眼睛</a> <a href="#">手表</a></li>
<li><a href="#">运动</a> <a href="#">户外</a> <a href="#">乐器</a></li>
<li><a href="#">游戏</a> <a href="#">动漫</a> <a href="#">影视</a></li>
</ul>
</div>
css代码
#nav{
width: 300px;
height: 500px;
}
#tytle1{
font-size: 18px;
font-weight: bold;
text-indent: 1em;
line-height: 30px;
background-color: crimson;
}
/*
list-style: none; li标签前面的黑点去掉
list-style: circle; 空心圆
list-style:decimal ; 有序前面有数字
*/
ul{
background-color: aliceblue;
}
ul li{
height: 30px;
list-style: none; /*li标签前面的黑点去掉*/
}
a{
text-decoration: none;
color: black;
}
a:hover{
color: chartreuse;
}
背景图片应用
ul li{
height: 30px;
list-style: none; /*li标签前面的黑点去掉*/
background-image: url("../image/01.jpg");
background-repeat: no-repeat;
background-position: 236px,2px; /*定位图片位置*/
}
background-image:url("");/默认是全部平铺的/
background-repeat:repeat-x/水平平铺/
background-repeat:repeat-y/垂直平铺/
background-repeat:no-repeat/不平铺/
(1)什么是盒子模型
margin：外边距
padding：内边距
border：边框
(2)边框border
border：粗细 样式 颜色
(3)外边距----妙用：居中
margin:0 0 0 0/*分别表示上、右、下、左；从上开始顺时针*/
/*例1：居中*/
margin:0 auto /*auto表示左右自动*/
/*例2：*/
margin:4px/*表示上、右、下、左都为4px*/
/*例3*/
margin:10px 20px 30px/*表示上为10px，左右为20px，下为30px*/
盒子的计算方式：
margin+border+padding+内容的大小
(4)圆角边框
border-radius有四个参数（顺时针），左上开始,左下结束
圆圈：圆角=半径
使用浮动可以把行内元素变为块内元素
块级元素：独占一行 h1~h6 、p、div、 列表…
行内元素：不独占一行 span、a、img、strong
行内元素可以包含在块级元素中，反之则不可以。
(1)display
这也是一种实现行内元素排列的方式，但是我们很多情况用float
行内元素只占一行，改变height和width不起作用，可以在span标签里加display: inline-block;
block：块元素
inline：行内元素
inline-block：是块元素，但是可以内联，在一行
div{
height: 100px;
width: 100px;
border: 1px solid red;
}
span{
height: 100px;
width: 100px;
border: 1px solid red;
}
（2）float
父级边框塌陷
clear：
right：右侧不允许有浮动元素
left：左侧不允许有浮动元素
both：两侧不允许有浮动元素
none：
解决父级边框塌陷的方法：
方案一：增加父级元素的高度；
方案二：增加一个空的div标签，清除浮动
<div class = "clear"></div>
<style>
.clear{
clear:both;
margin:0;
padding:0;
}
</style>
方案三:在父级元素中增加一个overflow：hidden
overflow:hidden/*隐藏*/
overflow：scoll/*滚动*/
方案四：父类添加一个伪类:after
#father:after{
content:'';
display:block;
clear:both;
}
小结：
浮动元素增加空div----》简单、代码尽量避免空div
设置父元素的高度-----》简单，元素假设没有了固定的高度，就会超出
overflow----》简单，下拉的一些场景避免使用
父类添加一个伪类:after（推荐）----》写法稍微复杂，但是没有副作用，推荐使用
display：方向不可以控制
float：浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题。
（1）相对定位
相对定位：positon：relstive；
相对于原来的位置，进行指定的偏移，相对定位的话，它仍然在标准文档流中，原来的位置会被保留
positon：relstive；
top:-20px;
left:20px;
bottom:-10px;
right:20px;
例子:实现如下
html
<div id="box">
<a href="#" class="a1">链接1</a>
<a href="#" class="a2">链接2</a>
<a href="#" class="a3">链接3</a>
<a href="#" class="a4">链接4</a>
<a href="#" class="a5">链接5</a>
</div>
#box{
height: 300px;
width: 300px;
border: 1px red solid;
padding: 10px;
}
a{
width: 100px;
height: 100px;
text-decoration: none;
background: #a05775;
line-height: 100px;
text-align: center;
color: aliceblue;
display: block;
}
a:hover{
background: chartreuse;
}
.a2,.a4{
position: relative;
left: 200px;
top:-100px
}
.a5{
position: relative;
left: 100px;
top:-300px
}
(2)绝对定位
定位：基于xxx定位，上下左右~
1、没有父级元素定位的前提下，相对于浏览器定位
2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移
3、在父级元素范围内移动
总结：相对一父级或浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留
（3）固定定位fixed
div{
width: 50px;
height: 50px;
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
视野拓展
cancas动画
JS
JavaScript是一门世界上最流行的脚本语言
一个合格的后端人员,必须要精通 JavaScript
1.基础知识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/wmp.js"></script>
</head>
<body>
</body>
</html>
alert("hello");
- 定义变量 var a = 10;
- 条件控制
if(1<2){
alert("true");
}
console.log()在浏览器控制台打印
调试器可以调试
数值，文本，图形，音频，视频…
NaN //not a number
Infinity //最大的数
'abc'
"abc"
注意（==和 ===)
== //只要内容一样，不管类型是否一样 例如："1" == 1为真
=== //绝对等于 "1" === 1为假
比较一定要用 ===
NaN === Nan 为false,只能通过isNaN(NaN)
java中数组一定要相同类型，js中可以不同
例：
var arr = [1,2,3,"a",false];
new Array(1,2,3,'a');
数组越界会undefine
对象
在js代码开头加上 'user strict'(引号不能少)，局部变量建议用let定义，不用 var
2.数据类型详解
（1）模板字符串
let name = "wmp";
let msg = `你好呀,${name}`; //注意：这里是电脑Tab键上面的反单引号
console.log(msg)
（2）字符串不可变
常用的方法slice（截取），push（压入），pop（弹出），shift（压入首部），unshift（弹出首部），concat（拼接）
（1）使用不存在的对象，不会报错，undefine
（2）可以动态删减属性
(3)判断属性在不在对象中
if,while,for和java一样，forEach如下
var arr = [1,2,"wmp"];
// 函数
arr.forEach(function (value) {
console.log(value)
})
ES6出来的
map
(1)基本使用
var map = new Map([['tom',100],['wmp',0]]);
var value = map.get('wmp');
console.log(value);
（2）新增
(3)删除
map.delet('lmy');
set
无序不重复
ES6的新特性~
使用iterator来迭代Map和Set
var arr = [1,2,3];
for(let x of arr){
console.log(x)
}
//map set一样
3.函数
两种定义，方法二是匿名函数
function fun(x) {
}
var fun = function (x) {
}
调用 ：fun(10)；
js可以传任意个参数，不会报错
最好提前判断传入参数类型，用
if(typeof x != 'number'){
throw 'Not a Number'
}
js中也有const(和c++一样的作用)
定义方法
var person = {
name:'wmp',
age:12,
birth:2000,
now:function () {
return this.age + this.birth;
}
};
内部对象
(1) Date
var now = new Date();
console.log(now.getHours());
注意now.getMonth();为0-11月
（2）JSON对象
在JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示
4.面向对象编程
（1）原来的继承
（2）ES6之后
5.操作BOM对象(重点)
BOM:浏览器对象模型
代表浏览器窗口
(1)浏览器内外高宽
获取屏幕宽高
获取当前页面URL信息
Location https://www.baidu.com/index.php?tn=monline_3_dg
document代表当前页面
document.title = '大火狐'
"大火狐"
可以获取文档树节点
<div id="app">
......
</div>
<script>
val div = document.getElementById('app')
</script>
6.操作DOM对象(重点）
DOM：文档对象模型
<div class="father">
<h1>标题一</h1>
<P id="p1">p1</P>
<p class="p2">p2</p>
</div>
//获取对应css选择器
var h1 = document.getElementsByTagName('h1'); //通过标签拿
var p1 = document.getElementById('p1'); //通过id获取
var p2 = document.getElementsByClassName('p2'); //通过class获取
var father = document.getElementsByClassName('father');
var children = father.children(); //获取父节点的子节点
先获得父节点再删除
注意，删除多个节点的时刻，children是在时刻变化的，删除节点的时候一定要注意。
（1）追加
7.操作form表单
如果我们获得了一个节点的引用，就可以直接调用value获得对应的用户输入值：
// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用户输入的值'
<body>
<P>
<span>用户名：</span><input type="text" id="username">
</P>
<p>
<span>密 码：</span><input type="password" id="password">
</P>
<p>
<!-- 绑定事件onclick 被点击进入bbb()函数 -->
<button type="button" οnclick="bbb()">提交</button>
</p>
<script>
function bbb() {
var username=document.getElementById("username").value; //注意一定要加.value属性
alert(username);
}
</script>
</body>
在 < head >标签里面加
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
8. jQuery
存在大量的js函数
获取jQuery - 公式：$(selector).action()
公式：$(选择器).** 事件(函数)**
注意开头要引入：
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
具体引入方法可以看下面网站
点击
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<a href="#" id="test">点我</a>
<script>
$('#test').click(function () {
alert("hello world");
})
</script>
</body>
</html>
文档工具站jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm
获取鼠标位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
mouse: <span id="mouseMove"></span>
<div id="divMove">
在这里移动试试：
</div>
<script>
//$(选择器).text可以修改文本
//$(选择器).html可以html代码
$(function(){
$('#divMove').mousemove(function(e){
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
})
});
</script>
</body>
</html>
操作DOM
9.总结
看jQuery源码
看游戏源码
CSS —> 扒网站，全部下载下来，修改对应位置的样式，看效果
标签：color,标签,前端,汇总,笔记,nbsp,background,var,选择器 来源： https://blog.csdn.net/weixin_45740811/article/details/122340256
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。