前端未掌握知识点记录
html:
设置页面的编码方式：<meta charset="UTF-8">
引用css文件：<link rel="stylesheet" href="style.css" type="text/css" />
引用js文件：<script src='js/index.js'></script>
html文件的结构：
<!DOCTYPE HTML>
<html>
<head>
<title>
</title>
<meta charset="UTF-8">
</head>
<body>
</body>
<script>
</script>
</html>
css:
a连接去下划线
text-decoration: none;
position的属性
absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit
规定应该从父元素继承 position 属性的值。
display属性：
|
none |
此元素不会被显示。 |
|
block |
此元素将显示为块级元素，此元素前后会带有换行符。 |
|
inline |
默认。此元素会被显示为内联元素，元素前后没有换行符。 |
cursor属性：
|
default |
默认光标（通常是一个箭头） |
|
auto |
默认。浏览器设置的光标。 |
|
crosshair |
光标呈现为十字线。 |
|
pointer |
光标呈现为指示链接的指针（一只手） |
|
move |
此光标指示某对象可被移动。 |
|
e-resize |
此光标指示矩形框的边缘可被向右（东）移动。 |
|
ne-resize |
此光标指示矩形框的边缘可被向上及向右移动（北/东）。 |
|
nw-resize |
此光标指示矩形框的边缘可被向上及向左移动（北/西）。 |
|
n-resize |
此光标指示矩形框的边缘可被向上（北）移动。 |
|
se-resize |
此光标指示矩形框的边缘可被向下及向右移动（南/东）。 |
|
sw-resize |
此光标指示矩形框的边缘可被向下及向左移动（南/西）。 |
|
s-resize |
此光标指示矩形框的边缘可被向下移动（南）。 |
|
w-resize |
此光标指示矩形框的边缘可被向左移动（西）。 |
|
text |
此光标指示文本。 |
|
wait |
此光标指示程序正忙（通常是一只表或沙漏）。 |
|
help |
此光标指示可用的帮助（通常是一个问号或一个气球）。 |
改变字体：
font-family:华文行楷
设置文字的垂直居中：
line-height: 55px; /*行距设为与div高度一致，此时文字垂直方向居中*/
css伪类：
作用：CS S 伪类用于向某些选择器添加特殊的效果。
锚伪类a:link、a:visited、a:hover、a:active
在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
伪类名称对大小写不敏感。
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。
.test a:link {color: #FF0000} /* 未访问的链接 */
.test a:visited {color: #00FF00} /* 已访问的链接 */
.test a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
.test a:active {color: #00ffff} /* 选定的链接 */
a.two:hover {color: #FF0000;font-size:26px;} /*放大字体*/
a.three:hover {color: #000;background:#f00} /*改变链接的背景颜色*/
a.four:hover {color: #000;font-family:华文行楷} /*改变链接的字体*/
a.five:hover {text-decoration: none} /*改变链接的下划线*/
:focus伪类
例子：input.bgc:focus{background:#b3b3b3;border: 1px solid #f00;}
解释：class为”bgc”的文本框在获得焦点的时候重新设置背景和边框颜色
:first-child （首页子对象）伪类的用法
例子1：p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;color:#f00}
解释：为首个p标签和首个li标签设置样式
例:2：<div class="div02">
<p>some text</p>
<p>some text</p>
</div>
.div02 p:first-child{color:#f00;}
解释：/*匹配div02中的第一个p标签*/
例子3：
<div class="div03">
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</div>
.div03 p > i:first-child {
color:#f00; }
解释：/*匹配div03中的所有 <p> 元素中的第一个 <i> 元素：*/
例子4：
<div class="div04">
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</div>
.div04 p:first-child i {
color:#f00; }
解释：/*匹配第一个<p>标签内的所有<i>标签*/
:lang（引用）伪类的用法
例子：
<style>
q:lang(soulsjie)
{
quotes: "---------你引用了我的内容soulsjie------" "---------你引用了我的内容soulsjie------"
}
<style>
<p>一些文本 <q lang="soulsjie">段落中的引用</q> 一些文本。</p>
解释：
css定义一个名为soulsjie的引用，HTML通过<q lang="soulsjie"></q>来进行引用操作
css伪元素：
解释：使class为”soulsjie”的段落的第一个字母颜色为红色
例子1：
<p class="soulsjie">My name is soulsjie。</p>
p.soulsjie:first-letter{
color: #FF0000; }
多重伪类的使用
例子2：
：first-line <p>标签内的首行
：first- letter <p>标签内的首字母
p.soulsjie:first-letter{
color:#ff0000;
font-size:32px; }
p.soulsjie:first-line{
color:#0000ff;
font-size:15px; }
:before 伪元素（在指定元素之前插入内容）
<div class="div05">
我是div05的内容
</div>
.div05:before{
content:url(images/list.png); }
:after 伪元素（在指定元素之后插入内容）
<div class="div05">
我是div05的内容
</div>
.div05:after{
content:url(images/list.png); }
js:
常用事件：
jQuery：
函数整理：
重写css样式：(元素对象)xxx.css({css样式的内容});
click(函数体):当元素被点击时--执行函数体的内容
slideToggle(时间，函数体)：在多少时间内隐藏div完成操作之后执行函数体的内容
show（时间）：让元素在多少时间内完全显示
hide（时间）：让元素在多少时间内完全隐藏
show（时间，函数体）：让元素在多少时间内完全显示，之后执行函数体的内容
hide（时间，函数体）：让元素在多少时间内完全隐藏，之后执行函数体的内容
hover(over,out) ：鼠标移入该元素触发over函数体移出触发out函数体
mouseover（函数体）：鼠标移入该元素时触发函数体的内容
slideToggle(时间，函数体)：在多少时间内隐藏div完成操作之后执行函数体的内容
width（数值）：使该元素的宽设置为数值
height（数值）：使该元素的高设置为数值
animate动画函数：$("#test").animate({ht,height:wh},400);
$("#test").animate({height:ht},400).animate({wh},400);
获取div的属性：var wh=$(this).css("width");
slideUp（时间）：在多少时间内向上隐藏元素
slideDown（时间）：在多少时间内向下展开元素
slideUp（时间，函数体）：在多少时间内向上隐藏元素，之后执行函数体的内容
slideDown（时间，函数体）：在多少时间内向下展开元素, 之后执行函数体的内容
fadeOut（时间）：让元素在多少时间内淡出
fadeIn（时间）：让元素在多少时间内淡入
fadeOut（时间，函数体）：让元素在多少时间内淡出，并执行函数体的内容
fadeIn（时间，函数体）：让元素在多少时间内淡入，并执行函数体的内容
fadeTo（时间，透明度，函数体）淡入淡出效果切换，让元素在多少时间内达到该透明度，（透明度的值0-1之间0代表完全透明，1代表不透明）之后执行函数体内容
empty（）：清空div的内容
replaceWith（）：替换div的内容
append（）：在div的尾部添加内容
prepend（）：在div的首部添加内容
text（）：获取div的内容不包含标签
html（）：获取div的内容包含HTML
val（）：获取表单元素的值
attr（）：alert($("#w3s").attr("href"));获取元素的属性值
手机端网站知识补充
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>