前端基础知识整理
2018-10-29 17:36:36 0 举报AI智能生成
前端基础,新手必看
作者其他创作
大纲/内容
前端
HTML4
html标签
head标签
title标签 : 显示网站的标题
meta标签 : 提供有关页面的原信息
style标签 : 定义内部样式表
script标签 : 链接脚本 js 文件
body标签
h1~h6标题标签
p段落标签
ul无序列表标签
ol有序列表标签
div盒子标签
table表格标签
th 定义表头
tr 定义表行
td 定义表单元格数据
form表单标签
action
定义表单被提交时发生的动作提交给服务器处理程序的地址
method
作用 : 定义表单提交数据时的方式
取值
get
post
无大小限制
enctype
表单控件分类
textarea文本域
作用 : 允许用户录入多行数据到表单控件中
属性
select和option选项框
select属性
size 取值大于1 滚动列表 取值小于1 下拉框选项
option属性
value 选项的值
input组元素
type
button
text 明文显示油耗输入的数据
<input type=\"text\">
password 密文显示用户输入的数据
<input type=\"password\">
checked 设置值后被选中
<input type=\"submit\">
file 上传文件所用
<input type=\"file\">
value 控件的值即要提交给服务器的数据
img标签
  :空格字符
a 超链接标签
span 标签
button 按钮
行内标签
特点
1.在一行内显示
行内块属于行内标签
2.可以设置宽高
块级标签
1.独占一行
可以放任何东西
定义:超文本标记语言
标准文档流
文档流指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
CSS
css 引入方式
内嵌式 <h1 style=\"font-size: 10px;color: yellow\">帅帅</h1>
内联式<style type=\"text/css\">h1{font-size: 30px;color: red;}</style>
外链式 <link rel=\"stylesheet\" type=\"text/css\" href=\"./css/index.css\">
导入式 @import url(\"./css/index.css\");
选择器
基础选择器
* 通配符选择器
匹配所有的标签通常不建议使用通配选择符，因为它会遍历并命中文档中所有的元素，出于性能考虑，需酌情使用
# warp id选择器
匹配以唯一标识符id属性等于wrap的对象作为选择符，唯一的只有一个
div 标签选择器
匹配div标签的选择器
. 类选择器
以class属性包含myclass的E对象作为选择符 不同于ID选择符的唯一性，类选择符可以同时定义多个
高级选择器
ul>li 子代选择器
ul a 后代选择器
li+a 相邻选择器
选择紧贴在li元素之后a元素
li a 兄弟选择器
选择li元素后面的所有兄弟元素a
伪类选择器
E:link
设置超链接a在未被访问前的样式
E:visited
设置超链接a在其连接地址已被访问过时的样式
E:hover
设置元素在其鼠标悬停时的样式
E:active
设置元素在被用户激活(鼠标点击与释放之间发生的事情)时的样式
E:focus
设置元素在成为输入焦点(该元素的 onfocus 事件发生)时的样式
属性选择器
E[att]
选择具有att属性的E元素
E[att=\"val\"]
选择具有att属性且属性值等于 val 的E元素
E[att^=\"val\"]
选择具有att属性且属性值为以val开头的字符串的E元素
E[att$=\"val\"]
选择att属性且属性值为以val结尾的字符串的E元素
E[att*=\"val\"]
选择具有att属性且属性值为包含val的字符串的E元素
伪元素选择器
E:before
E:after
选择器的权重
行内样式1000>ID选择器100>类选择器10>标签选择器1
字体 font
font-size
指定文本字体大小
font-style
指定文本的样式
normal
正常字体
italic
斜体字体
oblique
倾斜字体
font-weight
指定文本字体的粗细
bold
bolder
定义比bold更重的值
lighter
定义比normal更轻的值
<integer>
用数字表示文本字体粗细.取值范围: 100|200|300|400|500|600|700|800|900
font-family
指定文本使用某个字体
颜色 color
Color Name
16个基础颜色关键字
红 red
黄 yellow
蓝 blue
黑 black
绿 green
......
扩展颜色关键字
十六进制
#RRGGBB或#RGB
RGB
RGB记法
RGB色彩是通过对红(R)、绿(G)、蓝(B)三个颜色通道的变化和它们相互之间的叠加来得到各式各样的颜色的
RGBA
文本 text
text-align
left 内容左对齐
center 内容居中对齐
right 内容右对齐
justify 内容两端对齐
text-index 文本的缩进
text-decoration
none 文字无装饰
underline 下划线
overline 上划线
line-through 删除线
line-height
背景 background
background
none 无背景图
background-image: url(./1.jpg)
background-position
background-repeat
repeat
背景图像在横向和纵向平铺 默认
repeat-x
背景图像横向平铺
repeat-y
背景图像纵向平铺
no-repeat
背景图像不平铺
background-attachment
scroll
fixed
背景图像相对于窗体固定
background-color
transparent 默认透明
盒模型 *****
width
盒子内容的宽度
height
盒子内容的高度
border 边框
border-width
使用说明: 分别设置四个边框宽度
如果提供三个 : 第一个作用于上; 第二个作用于左右 ; 第三个作用于下
border-style
none 默认 无轮廓
dotted 点状轮廓
dashed 虚线轮廓
solid 实现轮廓
double 双线轮廓
用法:于border-width 一样
border-color
用法与 border-width一样
border-left
border-left-width
border-left-style
border-left-color
border-left: 1px solid red
border-right
border-right-width
border-right-style
border-right-color
border-right: 1px solid yellow
border-bottom
与border-left 和 border-right 用法相似
border-top
与border-left和border-right用法雷同
border-radius
常用
border-radius:50% 园
border-radius:
border-shadow
padding 内边距
内容区域(content)到边框(border)的距离 (父子之间)
内边距会扩大元素所在的区域
一些padding的属性和border类似
margin 内边距
外边距 四个方向值 (兄弟之间)
注意 : 外边距合并的情况
解决方法 :
1.父级或子元素使用浮动或者绝对定位absolute
2.父级 overflow:hidden;
3.父级设置padding(破坏空白折叠现象)
4.父级设置border
浮动 ******
浮动效果
float: left
float: right
右浮动 右侧为起始。从右往左依次排列
float: none
文档流的概念： 可见元素在文档中的显示位置
浮动产生的效果
浮动可以使元素按指定位置排列，直到遇到父元素的边界或另一个元素的边界停止
浮动特性
4.浮动可以使行内元素支持宽高
浮动可以是元素脱离文档流，它可以是元素 并排显示，1.有贴边现象 2.有收缩现象（块元素转换成行内元素）3.只要盒子浮动了 不区分行内还是块级标签，可以任意的设置宽高。但是大家记住，要浮动一起浮动，要不一起不浮动
浮动产生的问题
在页面布局中，一般情况父元素的高度是不设置的，通过子元素来填充它的高度。 但是子元素设置浮动之后，不会撑开父元素的高度。因为子元素 不占位置
浮动解决方案
1.给父盒子设置固定高度
缺点:不灵活
2.给浮动元素最后一个子元素后面添加一个空的块级元素，且该元素不浮动，设置clear:both
缺点：结构冗余，无缘无故添加了一个块级元素
3.官方写法：建议大家这样去写 给父盒子设置： .clearfix:after{visibility:hidden;clear:both;display:block;content:\".\";height:0}
4.给父元素添加overflow:hidden 推荐使用
定位 ******
static
默认 没有定位
relative
相对定位:相对于自身进行定位
2.可以提升层级关系
3.微调元素
absolute
绝对定位
这就是\"父相子绝\"
1.提高层级
2.脱离标准流
页面布局小技巧： 通常情况下，浮动和定位要结合去用，大家也能看出来，一般盒子的排列，要横排盒子了我们用浮动，调成盒子中小元素的位置偏移量我们尽量用定位
z-index *****
1.z-index属性设置元素的堆叠顺序(层级关系)，拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素前面
2.对于同级元素，默认或position:static情况下文档流后面的元素会覆盖前面的
3.对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，及z-index越大优先级越高
4.记得从父原则
所谓从父元素 子级的永远大于父级的
display ******
Javascript
基础语法
var 声明变量
测试语句
console.log(变量名)
alert(变量名)
弹出框测试
数据类型
基本数据类型
number
string
var str = \"123\";console.log(typeof str)
字符串拼接使用 +
boolean
var b1 = false;console.log(typeof b1)
null
undefined
var d1;// 表示变量未定义console.log(typeof d1)
引用数据类型
Function
Object
Array
Data
运算符
赋值运算符
=
算数运算符
+
-
*
/
%
++
--
比较运算符
==
等于 比较的是值
===
等同于 比较值和类型均相等
!=
!==
数据类型转换
将数值类型转化成字符串类型
var n1 = 123;var n2 = \"123\";var n3 = n1+n2;//隐式转换console.log(typeof n3);
//强制类型转换var str1 = String(n1);console.log(typeof str1);var num = 234;console.log(num.toString());
字符串类型转换成数值类型
var stringNum = \"123.123wskdi\
任何类型都可以转化成为boolean类型
var b1 = \"123\"; //truevar b2 = 0; //falsevar b3 = -123; //truevar b4 = Infinity; //truevar b5 = NaN; //falsevar b6; //falsevar b7 = null; //false//非0即真console.log(Boolean(b7))
流程控制
if-else
逻辑与&& 逻辑或||
switch
while
do-while
for
常用内置对象
数组Array
concat()
把几个数组合并成一个数组
join()
pop()
移除数组的最后一个元素
shift()
移除数组第一个元素
unshift()
返回数组的某一段
push()
sort()
对数组进行排序
reverse()
对数组进行反转
length
String
Math内置对象
Function函数
DOM
获取DOM的三种方式
document.getElementById()
docuemnt.getElementsByClassName()
docuemnt.getElementsByTagName()
值得操作
innerText
innerHTML
渲染标签也可以设置文本
value
样式操作
属性操作
DOM操作
创建DOM
document.createElement('div');
追加DOM
父.appendChild(子标签)
适用于父DOM插入子DOM
适用于兄弟之间
删除DOM
父.remove.Child(子)
BOM
window.open()
打开窗口
window.localtion
location.reload()
重新加载
0 条评论
回复 删除
下一页
