前端学习以及问题记录
在上家公司的时候有段时间一直在写前段页面,对于我这种前段菜狗来说来说,写出好看又不失功能的页面,是在是一种挑战,想恶补一下前段的知识:
wifth宽度 red红色 blue蓝色 yellow黄色 green绿色
height高度 white白色 black黑色 gray灰色 silver银色
background背景 pink粉色 khaki卡其色 greenyellow黄绿色
var urls=window.location.search
var urls=window.location.href
html:5 TAB键 或 ！TAB键
<title>Document</title> Document网页名字
回车下面写style TAB键
<body>
下面写 div.h1 TAB键
width: 宽 《外丝》
height 高度 《海特》
background：red 颜色 《百克如昂的》
插入图片 background：url 图片位置/路径
no-repeat right center;上下居中连接图片为背景不平铺，向右显示
background-size:cover; 背景填充
repeat-x 横向平铺 repeat-y纵向平铺
嵌套 div class=“h1” 起名字 不能用特殊符号，数字，汉字
浮动 float：left； [none 无 left左对齐 right右对齐]
没有上下只有左右浮动
定义外边距 margin-top:20px；定义元素的外边距一个方向
[top上 left左 bottom下 right右]
margin:0px; 定义上下左右
margin:0px 10px;上下为0，左右为10px；
margin:0px 0px 0px 0px;上右下左
margin:0px auto;上下为0左右居中；
针对下级包含的元素统一排列 .dh div{ } 后加div
表单 <input type="text"> 文本框 《泰克斯特》
<input type="password" value=""> 定义密码框 《怕死沃尔德》
<input type="checkbox"> 定义复选框
<input type="radio"> 定义单选框
<input type="button" value="搜索"> 定义按钮
<textarea></textarea> 定义文本输入区
<select class="select">
<option>请选择</option>
<option>河南一区</option>
<option>北京二区</option>
</select> 定义下拉菜单
定义内填充 padding-left: 20px; 占宽高，设置完要减去相应的尺寸
内填充后不用减去对应的尺寸
box-sizing:border-box;
方向 像素
行间距离 line-height: 36px; 设置行间的行高
定义边框 border-top: 2px solid #FFFFFF;
top 方向 solid 实线 dotted点状 dashed虚线 double双线
段落 <p> </p> 段落标签，网页中的大段落文字用到
标题 <h1></h>....<h6> 标题标签 <h1>最大只用一次 <h6>最小
图片 <img src"=图片位置/路径/>链接图片标签，没有结束标签
字体样式：
字体大小 font-size: 15px;
字体样式 font-family:"黑体" 字体加引号如宋体
加粗 font-weight:bold;
去掉加粗 font-weight:normal;
斜体 font-style:italic;
字体对齐： text-align:left 左对齐 right右对齐 center居中
文本颜色 color: #FFFFFF;
下划线 text-decoration:underline
文字间距 text-indent:20px 首行缩进
letter-spacing:8px; 两字间距
line-height:20px; 两行间距
<span></span>针对行元素的标签
<dl>
<dt>计算机</dt> <dt></dt>里面包含图片
<dd>计算机</dd> <dd></dd>里面放p标签文字
</dl>....定义列表 标签一般用于图文混排
超级连接标签
<a href="" target="_blank"></a> 用于一个网页跳转到另一个网页重要的是href 它指示连接目标 targ="_blank"跳转到另一个页面打开新窗口
<span></span> 提示注释标签用于改变特殊字体颜色
<strong></strong>和<p></p>强调文本常用加粗字体
<s></s>和<del></del>定义加删除线文本
<i></i>和<cite></cite> 显示斜体字文本
<hr/>在HTML中创建一条水平线
<br/>插入一个简单的换行符 强制换行
表单标签
文本框 <input type="text" value=""/>
密码框 <input type="password" value=""/>
复选框 <input type="checkbox/>
单选框 <input type="radio"/>
按钮 <input type="button" value="按钮"/>
文本输入区 <textarea></textarea>
<select>
<option>北京一区</option>
<option>河南一区</option>
<option selected="selected">广州<option>...
</select>
定义下拉菜单 selected="selected"
这个代码加给哪个option 哪个就默认在下拉框中显示
网页引入CSS样式的几种方法
1.内联（行内样式）直接写在现有的标记中比如：
<p style="font-size:24px;>"www.baidu.com></p>
2.嵌入式样式表（内嵌式）使用<style></style>
标签嵌入到HTML文件头部<head>标记中 如：
<style.sype="text/css>
·p{
font-size:18px;
color:#093;
}
</style>
3.外链式（外部样式表）使用<link>标签调用CSS文件（开发中用这种方式）
CSS在网页中应用的方式后缀名为XXX.css 如：
<link rel="stylesheet" type="text/css" href="style/style.css"/>
划过样式改变 .box12 li:hover 样式元素后加：hover{
行内元素标签：<a href=""></a> <span></span>、<img src=""/>
<input type="text"> <b></b> <select><option></option></select>
块元素<div></div> <h1></h1> <p></p> <ul><li></li></ul> <ol><li></li></ol>
<dl><dd></dd><dt></dt></dl>
特点：行内元素并列在一行内 块元素自己独占一行
行元素转换成块元素用 display：block
块元素并列同一行加 float：left
加载样式
<link rel="stylesheet" type="text/css" href="css/reset.css">
.box6 li:hover{ -----------划过
color: red; -----------字体颜色
border:1px solid #F2F2F3; -----------边框
}
.box6 img{ -----------给插入图片加属性
width: 217px; ---------------图片宽
height: 100%; ---------------图片按比例高放大或缩小
}
.box6 .cai{
width: 217px; ---------------
height:252px; ---------------
position: relative; ---------------相对定位目标体依据这个盒子的位置给需要动的盒子做参考
}
.box6 .cai .fg{
width: 217px;
height: 46px;
background: rgba(0,0,0,0.4);----------RGB颜色 最后一位透明度,只作用元素颜色背景最大1完全显示,最小0不显示
opacity:0.5; ---------------------总透明度作用元素和元素里面所有的元素最大1完全显示,最小0不显示
font-family: "微软雅黑"; ----------更改字体样式如“仿宋”“黑体”加引号
line-height: 46px; ----------字体行高
text-align: center; ----------字体居中
position: absolute; ----------绝对定位定位中需要动的盒子参照上面的目标进行移动
top: 30px; --------------------绝对定位上30像素
left:19px; --------------------绝对定位左19像素
z-index:999; ------------------------定位后控制层次，1最下面数越大越往上显示
position： fixed；--------------------固定定位相对于浏览器窗口，窗口滚动依旧浏览器固定位置显示特点类似绝对定位
top: 30px;
left:19px;
}
border-radius：50%//定义圆角
border-radius：20px左上 40px右上 60px右下 80px左下；
div{box-shadow:0 0 1px #000 inset;} 盒子阴影 有inset 代表框内阴影 ，不带inset 代表框外阴影。
加小手
cursor:pointer;
修改js中form的submit方法实现自己的form表单校验
通过封装实现js中对象原本没有的方法:
使用FieldSet和legend实现输入框边缘的加入文本效果(之前是通过文字的边距这种笨办法实现的)
全局变量的使用要谨慎,页面嵌套的时候注意重命名;注意A包含B(一个Ifream)的时候相互获取和操作变量的方法;
wifth宽度 red红色 blue蓝色 yellow黄色 green绿色
height高度 white白色 black黑色 gray灰色 silver银色
background背景 pink粉色 khaki卡其色 greenyellow黄绿色
var urls=window.location.search
var urls=window.location.href
html:5 TAB键 或 ！TAB键
<title>Document</title> Document网页名字
回车下面写style TAB键
<body>
下面写 div.h1 TAB键
width: 宽 《外丝》
height 高度 《海特》
background：red 颜色 《百克如昂的》
插入图片 background：url 图片位置/路径
no-repeat right center;上下居中连接图片为背景不平铺，向右显示
background-size:cover; 背景填充
repeat-x 横向平铺 repeat-y纵向平铺
嵌套 div class=“h1” 起名字 不能用特殊符号，数字，汉字
浮动 float：left； [none 无 left左对齐 right右对齐]
没有上下只有左右浮动
定义外边距 margin-top:20px；定义元素的外边距一个方向
[top上 left左 bottom下 right右]
margin:0px; 定义上下左右
margin:0px 10px;上下为0，左右为10px；
margin:0px 0px 0px 0px;上右下左
margin:0px auto;上下为0左右居中；
针对下级包含的元素统一排列 .dh div{ } 后加div
表单 <input type="text"> 文本框 《泰克斯特》
<input type="password" value=""> 定义密码框 《怕死沃尔德》
<input type="checkbox"> 定义复选框
<input type="radio"> 定义单选框
<input type="button" value="搜索"> 定义按钮
<textarea></textarea> 定义文本输入区
<select class="select">
<option>请选择</option>
<option>河南一区</option>
<option>北京二区</option>
</select> 定义下拉菜单
定义内填充 padding-left: 20px; 占宽高，设置完要减去相应的尺寸
内填充后不用减去对应的尺寸
box-sizing:border-box;
方向 像素
行间距离 line-height: 36px; 设置行间的行高
定义边框 border-top: 2px solid #FFFFFF;
top 方向 solid 实线 dotted点状 dashed虚线 double双线
段落 <p> </p> 段落标签，网页中的大段落文字用到
标题 <h1></h>....<h6> 标题标签 <h1>最大只用一次 <h6>最小
图片 <img src"=图片位置/路径/>链接图片标签，没有结束标签
字体样式：
字体大小 font-size: 15px;
字体样式 font-family:"黑体" 字体加引号如宋体
加粗 font-weight:bold;
去掉加粗 font-weight:normal;
斜体 font-style:italic;
字体对齐： text-align:left 左对齐 right右对齐 center居中
文本颜色 color: #FFFFFF;
下划线 text-decoration:underline
文字间距 text-indent:20px 首行缩进
letter-spacing:8px; 两字间距
line-height:20px; 两行间距
<span></span>针对行元素的标签
<dl>
<dt>计算机</dt> <dt></dt>里面包含图片
<dd>计算机</dd> <dd></dd>里面放p标签文字
</dl>....定义列表 标签一般用于图文混排
超级连接标签
<a href="" target="_blank"></a> 用于一个网页跳转到另一个网页重要的是href 它指示连接目标 targ="_blank"跳转到另一个页面打开新窗口
<span></span> 提示注释标签用于改变特殊字体颜色
<strong></strong>和<p></p>强调文本常用加粗字体
<s></s>和<del></del>定义加删除线文本
<i></i>和<cite></cite> 显示斜体字文本
<hr/>在HTML中创建一条水平线
<br/>插入一个简单的换行符 强制换行
表单标签
文本框 <input type="text" value=""/>
密码框 <input type="password" value=""/>
复选框 <input type="checkbox/>
单选框 <input type="radio"/>
按钮 <input type="button" value="按钮"/>
文本输入区 <textarea></textarea>
<select>
<option>北京一区</option>
<option>河南一区</option>
<option selected="selected">广州<option>...
</select>
定义下拉菜单 selected="selected"
这个代码加给哪个option 哪个就默认在下拉框中显示
网页引入CSS样式的几种方法
1.内联（行内样式）直接写在现有的标记中比如：
<p style="font-size:24px;>"www.baidu.com></p>
2.嵌入式样式表（内嵌式）使用<style></style>
标签嵌入到HTML文件头部<head>标记中 如：
<style.sype="text/css>
·p{
font-size:18px;
color:#093;
}
</style>
3.外链式（外部样式表）使用<link>标签调用CSS文件（开发中用这种方式）
CSS在网页中应用的方式后缀名为XXX.css 如：
<link rel="stylesheet" type="text/css" href="style/style.css"/>
划过样式改变 .box12 li:hover 样式元素后加：hover{
行内元素标签：<a href=""></a> <span></span>、<img src=""/>
<input type="text"> <b></b> <select><option></option></select>
块元素<div></div> <h1></h1> <p></p> <ul><li></li></ul> <ol><li></li></ol>
<dl><dd></dd><dt></dt></dl>
特点：行内元素并列在一行内 块元素自己独占一行
行元素转换成块元素用 display：block
块元素并列同一行加 float：left
加载样式
<link rel="stylesheet" type="text/css" href="css/reset.css">
.box6 li:hover{ -----------划过
color: red; -----------字体颜色
border:1px solid #F2F2F3; -----------边框
}
.box6 img{ -----------给插入图片加属性
width: 217px; ---------------图片宽
height: 100%; ---------------图片按比例高放大或缩小
}
.box6 .cai{
width: 217px; ---------------
height:252px; ---------------
position: relative; ---------------相对定位目标体依据这个盒子的位置给需要动的盒子做参考
}
.box6 .cai .fg{
width: 217px;
height: 46px;
background: rgba(0,0,0,0.4);----------RGB颜色 最后一位透明度,只作用元素颜色背景最大1完全显示,最小0不显示
opacity:0.5; ---------------------总透明度作用元素和元素里面所有的元素最大1完全显示,最小0不显示
font-family: "微软雅黑"; ----------更改字体样式如“仿宋”“黑体”加引号
line-height: 46px; ----------字体行高
text-align: center; ----------字体居中
position: absolute; ----------绝对定位定位中需要动的盒子参照上面的目标进行移动
top: 30px; --------------------绝对定位上30像素
left:19px; --------------------绝对定位左19像素
z-index:999; ------------------------定位后控制层次，1最下面数越大越往上显示
position： fixed；--------------------固定定位相对于浏览器窗口，窗口滚动依旧浏览器固定位置显示特点类似绝对定位
top: 30px;
left:19px;
}
border-radius：50%//定义圆角
border-radius：20px左上 40px右上 60px右下 80px左下；
div{box-shadow:0 0 1px #000 inset;} 盒子阴影 有inset 代表框内阴影 ，不带inset 代表框外阴影。
加小手
cursor:pointer;
修改js中form的submit方法实现自己的form表单校验
通过封装实现js中对象原本没有的方法:
使用FieldSet和legend实现输入框边缘的加入文本效果(之前是通过文字的边距这种笨办法实现的)
全局变量的使用要谨慎,页面嵌套的时候注意重命名;注意A包含B(一个Ifream)的时候相互获取和操作变量的方法;