前端入门笔记
Posted 神芝
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端入门笔记相关的知识，希望对你有一定的参考价值。
1、html基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>题目</title>
</head>
<body>
<p>body</p>
</body>
</html>
2、网页中用了 <!DOCTYPE html... 就表示该页面采用了W3C标准，这样做可以增强页面的兼容性，降低对浏览器的依赖性。
3、<h1~6></h1~6>
标题标签，只有1~6,数字越小字越大
4、在html中回车是不会换行的，无论是不是在标签中
因此就有了段落标签<p></p>,p标签会在段落前后加入一些空白
换行标签是<br>，br标签不会
5、超链接标签
<a href="http://www.baidu.com">点击进入百度</a>
如果没有加href属性，就是普通的字段
6、插入图片
<img src="/images/logo.png" alt="abc" width="500" height="100" />
src是图片的地址，alt属性是替代文本，图片未加载时显示替代文本，width是图片宽度，height是图片长度
7、<a href="http://www.baidu.com/" target="_blank"></a>
加入target这个属性就可以打开新页面而不是在原界面跳转
8、<link rel="stylesheet" type="text/css" href="mystyle.css">
link元素通常存在head元素里面，用于连接样式表
9、<meta>标签为网页添加信息，如定义关键词keywords，描述内容description，网页作者author，刷新当前 页面refresh
10、<style>
p{color:blue;}
</style>
style元素存在于head元素内，这种添加样式的方式称为内部样式表
也可以直接为单个元素添加样式，这种方式称为内联样式
11、<map name="mapname">
<area shape="rect" coords="0,0,x,x" alt="sun" href="www.xx.com">
</map>
定义图像地图,coords是坐标
12、<table border="1" cellpadding="文本跟单元格的间距">表格
<caption>表的标题</caption>
<tr>行
<th></th>行头或者列头，文本中置，字体加粗
<td></td>列
</tr>
</table>
13、无序列表
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
有序列表
<ol srart="10">
<li>x</li>
<li>x</li>
<li>x</li>
</ol>
14、form表单
<form action="http://www.baidu.com">
A: <input type="text" name="firstname"><br>
B: <input type="radio" name="B" value="B"><br>
C:<input type="checkbox" name="C" value="C">
D:<input type="submit" value="Submit">value就是按键上的字
</form>
type属性可以有text，password，radio单选，checkbox多选,submit提交
文本默认宽度是20字符
input的name属性可以在后台收集到
下拉列表
<select name="food" id="5">
<option>1</option>
<option>2</option>
</select>
文本框：textarea标签
15、css有class选择器，也有id选择器
class以.开头，id选择器以#开头
p.demo{color:red;}
p是指只对段落有效，demo是指只对class名为demo的段落有效
16、链接css文件
在<head>中<link rel="stylesheet" type="text/css" href="demo.css">
样式冒号后面不能加空格，这个是网站上的严格验证
17、样式具有优先级
内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式
如果一个字段同时被内部样式表和外部样式表修饰，则优先选择属性更具体的那个，而那些一样的属性的值则是优先级更优先
18、body的属性
background-color：red;背景颜色，bgcolor也可以
background-image:url(‘url‘);背景图片
background-repeat:repeat-x;背景平铺，只在水平方向（x）平铺
background-repeat:no-repeat;不平铺
background-position：right top;位置右上
也可以用百分比来确定位置，左上角是0% 0%，右下角是100% 100%，使用position属性前要先设置attachment属性
background-attachment:fixed;背景固定不动，如果是scroll则是默认的可以滚动
margin-right:200px;右边距200px，只对块状元素有效
可以把所有背景属性设置在一个声明中，用空格隔开
body{
background：url("12.JPG") no-repeat fixed 50% 50%;
}
19、更详细的样式优先级更高
比如p.ex{color:red;}的优先级比body{color：blue;}高
20、文本修饰：
text-align:justify;实现两端对齐文本效果
text-decoration:overline;文本上划线
line-through;删除线
underline；下划线
text-transform：uppercase；所有大写
lowercase；小写
capitalize；首字母大写
text-indent：50px；文本缩进
text-shadow：3px 3px 3px red;字体阴影：横距，竖距，模糊距离，颜色
letter-spacing:2px;字体间隔
line-height:100%;行高
vertical-align:bottom;垂直对齐：底部
word-spacing:30px;单词间隔
font-style:normal;正常显示
italic;斜体
font-size:30px;字体大小
font-weight:normal;正常字体
lighter；瘦一点
bold；粗体
900；粗的像素
21、链接样式：a:link
a:link{color:red;}未访问
text-decoration:none;无下划线
a:visited{color:blue;}已访问
text-decoration:none；无下划线
a:hover{color:yellow;}鼠标接触时
text-decoration:underline；下划线
a:active{color:green;}鼠标点击时
text-decoration:underline；下划线
hover要在link和visited之后，active要在hover之后
22、无序列表的样式
ul.a {list-style-type:circle;}圆圈
square；方形
upper-roman；大写罗马字母
lower-alphq；小写英文字母
ul{list-style-image:url(‘sqpurple.gif‘);}以图片作为序列
23、表格填充
内边距
padding:2px 7px 2px 7px;上右下左的顺序
外边距margin：25px；
24、表格边框
table，td，th{border:1px soild block;}
表格和单元格各自有边框,soild是实线的意思
table{border-callapse:collapse;}
边框折叠，加上这个让表格边框和单元格边框互相重叠
border-style:soild;边框风格
border-width:1px;边框宽度，单独使用无效
border-top-style:soild;
-right
-bottom
-left
设置各个侧面的边框
border-style:上，右，下，左；
上，左右，下；
上下，左右；
全部；
25、轮廓outline
outline：green dotted；绿色虚线
outline-color
outline-style
outline-width
26、外边距margin
margin：上，右，下，左；
上，左右，下；
上下，左右；
全部；
27、填充，就是内边距padding
padding：上，右，下，左；
上，左右，下；
上下，左右；
全部；
28、嵌套选择器
p{}对所有p元素有效
.asd{}对class为asd的元素有效
.asd p{}对class为asd的元素内的p元素有效
29、display and visibility显示与可见性
display:none;不可见也不占据空间
visibility:hidden;不可见但是占据空间
30、块元素和内联元素display
display：block；把一个元素改变成块元素
display：inline；把一个元素改变成内联元素，顾名思义，行内元素
31、定位positioning
positioning：static；静态流，即默认
fixed；固定的，会与其他重叠
relative；相对定位，相对原来正常的位置
left：-20px；从左侧减去20像素
absolute；绝对定位，会相对于最近的已定位的父元素，如果没有则相对于body元素，不占据空间
32、父元素就是上层元素，兄弟元素就是同级元素
33、元素重叠z-index
z-index:-1; 堆叠顺序，数字大排前面，如无指定，后定位的显示在前面
34、改变光标cursor
<span style="cursor:wait">wait</span>让鼠标放上去改变光标
35、滤镜属性filter
img{
filter: grayscale(0%);
}
36、内容溢出
overflow：visible;默认，内容溢出
hidden；溢出部分不可见
scroll；溢出则显示滚动条
37、设置字体类型
font-family：Serif，,Sans-serif，Verdana
如果浏览器找不到第一种字体，会找下一种
font-size：12px;字体大小
38、浏览器兼容性
Firefox:-moz-box
Safari,Chrome,Opera:-webkit-box
39.盒子中元素居中
box-pack:center;水平居中
box-align:center;垂直居中
40、伪类
就是css内植类css内部本身赋予它一些特性和功能，也就是你不用再class=...或id=...你就可以直接拿来使用，当然你也可以改变它的部分属性
语法selector:pseudo class { property: value; }
:link未被访问的链接
：hover鼠标悬浮（鼠标接触）的元素
：active被激活（鼠标点击）的元素
：visited已被访问的链接
：focus拥有键盘输入焦点的元素
：first-child元素的第一个子元素
：lang带有指定lang属性的元素
其中first-child 伪类比较复杂，感觉挺不人性化的
比如：
p:first-child {font-weight: bold;}，匹配所有元素中，第一个子元素是p元素的那个p元素
p > i:first-child {font-weight:bold;} 匹配所有p元素中，第一个子元素是i元素的那个i元素
41、max-width:
一个块元素，如果设置了width，那个这个元素的宽度就固定了，无论窗口怎么改变，如果设置了max-width,
就说明了这个元素的最大长度，实际宽度可以在0~max-width之间，如果窗口小于这个长度，该元素也会自动调整大小
42、box-sizing: border-box;
设置了这个属性，则内边距和边框不会增加元素的宽度
43、@media screen and（max-width:300px）{
}
@media screen and 是指如果宽度小于300px，就实现大括号里的代码
44、display：line-block；行内块，每个块在行内依次排开
也可以用浮动 float：left，实现困难
45、文本分列
column-count: 3;列数
column-gap: 20px;列之间的间隔
46、如果父元素的总宽度是300px，那么这2个子元素的比例就是1：2，一个100px，一个200px
#p1
{
-moz-box-flex:1.0; /* Firefox */
-webkit-box-flex:1.0; /* Safari 和 Chrome */
box-flex:1.0;
}
#p2
{
-moz-box-flex:2.0; /* Firefox */
-webkit-box-flex:2.0; /* Safari 和 Chrome */
box-flex:2.0;
}
父元素：display：flex；
子元素： -webkit-flex: initial;
flex: initial;
width: 200px;
min-width: 100px;空间足够是200px，不够可以最低减少到100px
-webkit-flex: none;
flex: none;
width: 200px;宽度200px保持不变
47、justify-content用于设置元素在横轴的对齐方式、
justify-content:center;项目位于容器中心
space-around；项目四周留空白
align-content用于设置元素在垂直方向的对齐方式
48、颜色渐变
background: linear-gradient(red, blue);上下线性渐变
background: linear-gradient(to right, red , blue);左到右
background: linear-gradient(to bottom right, red , blue); 左上到右下
可以附带有多个颜色的渐变
49、单词拆分
word-break:keep-all;保持
break-all;拆分
50、
transform:translate(50px,100px);移动元素，距离左50px，距离上100px
transform:rotate(30deg);顺时针30度，-30则是逆时针
transform: scale(2,3); 比例尺，宽度是原来2倍，高度是原来3倍
transform: skew(30deg,20deg);水平方向倾斜30度。垂直方向倾斜20度
51、
document.getElementById("demo").innerHTML="我的第一段 javascript";
在文档中以id为索引取得元素“demo”，替换新元素
document.write("<p>我的第一段 JavaScript</p>");
在js中写html使用以上代码，如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖
document.write("Hello \
World!"); 文本换行要加反斜杠\
52、
js中所有变量都是var，文本加上单引号或者双引号
变量的类型是动态的，随时都可以改变，重新声明就可以重新定义
数组声明和初始化
var cars=new Array("奔驰","宝马","大众");第一个元素下标是0
javascript对象
var person={firstname:"Bill", lastname:"Gates", id:5566};键值对
引用方式：name=person.firstname;
name=pserson["firstname"];
undefined是没有值得意思，null用来清空变量
document.getElementById("demo").innerHTML=myFunction(4,3);
这句话的意思是将id为demo的元素内容变成myFuntion(4,3)
使用了innerHTML，所有的内容都会被替换
53、
javascript的函数中在使用 return 语句时，函数会停止执行，并返回指定的值。
如果仅仅退出函数，直接return；
54、
如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。carname="Volvo";carname就是全局变量
局部变量在函数运行完就会删除，全局变量在页面关闭后删除。
55、js中==和===的区别
（1）对于string,number等基础类型：==看值是否相等，===看类型是否相等
（2）对于Array，Object等高级类型，都是进行指针地址比较
（3）对于高级与基础类型的比较，==还是看值是否相等，===直接是false
56、for/in循环
用于循环遍历对象的属性
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}
person[x]每次循环代表一个属性。顺序排列
57、break和comtinue
break会直接调出循环，后面的循环全部跳过
continue是结束本次循环，后面的循环继续执行
58、接以上，break和continue如果是单独使用的话，就只能出现在循环和switch中
但是如果加上了标签引用，就可以用来跳过任何javascript代码块
例如break labelname；标签名
59、捕获异常
try{
throw "异常内容";
}catch(err){
return err;
}
60、表单验证
61、
javascript可以通过3中方式找到对象
var x=document.getElementById("intro");通过id
var y=x.getElementsByTagName("p");找到"main"中的所有p元素
62、innerHTML inner：内部的
innerHTML属性用于提取元素的内容
document.getElementById("3d").innerHTML；提取id为3d的元素的内容
document.getElementById("image").src;用于提取id为image的元素的src属性
document.getElementById(id).style.color；提取元素的样式中的颜色
63、
<h1 onclick="this.innerHTML=‘谢谢!‘">请点击该文本</h1>这个话中的this指的是本元素
64、onload打开页面时,onunload离开页面时,onchange改变输入字段时,onmouseover鼠标接触时，onmouseout鼠标离开时，onmousedown鼠标按下时，onmouseup鼠标抬起时，onfocus字段获得焦点时。
65、javascript的所有数字都是64位，8bit的浮点数
整数最多是15位，小数最大位是17位，数字前加0视为八进制，加0x视为16进制
66、正则表达式regexp
创建正则对象：var patt1=new Regexp("e");这个正则对象的模式是e这个字母
正则对象的方法：test（）如果有匹配为true，否则false
exec()匹配则返回匹配值，否则null
。。。
67、浏览器对象模型BOM
window.open()打开新窗口
window.colse()关闭
window.moveTo()移动
。。。
window.screen 包含用户屏幕信息
screen.availWidth；用户可用屏幕宽度
screen.availHeight；用户可用屏幕高度
。。。
window.location包含当前网页的网络信息
location.hostname;web主机域名
location.href;返回整个url
location.pathname;返回当前页面的路径和文件名
。。。
window.history历史信息
history.back() - 上一个url
history.forward() - 与在浏览器中点击按钮向前相同
。。。
window.navigator关于访问者浏览器的信息
。。。
68、消息框
提示框alert（"xxx"）;
确认框confirm（"xxx"）;点确定就返回true，取消就是false
输入框prompt（"文本","默认值"）;
69、延时器
t=setTimeout("JavaScript语句"，x毫秒)；在x毫秒后执行javascript语句
clearTimeout(t);取消标识为t的延迟代码块
70、escape（asd）;把asd变成一个字符串
71、
以上是关于前端入门笔记的主要内容，如果未能解决你的问题，请参考以下文章