emmet常用语法

1.”!+tab”:初始化html结构
2.”#”,”.”:元素的id和class生成指令,如div#container生成<div id="container></div>"
3.”[属性名称=属性值]”:元素的属性生成指令,如div[title=ok]生成<div title="ok"></div>
4.”>”,”+”:元素子级和兄弟生成指令:如div>div+p生成 <div><div></div></p></div>
5.”“:前一个的指令重复次数:如ul>li2生成<ul><li></li><li></li></ul>
6.”{}”:文本:如p>{aaaa}生成<p>aaaa</p>
7.”()”:分组指令:如(p>{aaaa})*2生成`

aaaa

aaaa

8."link:css":引入外部css文件,生成9."script:src":引入外部js文件,生成`

详解iframe与frame的区别

1、frame不能脱离frameSet单独使用,iframe可以

2、frame不能放在body中,否则不能正常显示

3.嵌套在frameSet中的iframe必需放在body中,不嵌套在frameSet中的iframe可以随意使用

4.frame的高度只能通过frameSet控制;iframe可以自己控制,不能通过frameSet控制

<!--<body>-->
<frameset rows="50%,*">
   <frame   name="frame1"   src="test1.htm"/> 
   <frame   name="frame2"   src="test2.htm"/> 
</frameset>
<!--</body>-->

<body>
<frameset>
   <iframe height="30%"  name="frame1"   src="test1.htm"/> 
   <iframe height="100"  name="frame2"   src="test2.htm"/> 
</frameset>
</body>

5.如果在同一个页面使用了两个以上的iframe,在IE中可以正常显示,在firefox和chrome中只能显示出第一个;使用两个以上的frame在IE和firefox中均可正常

区别:

  frame是整个页面的框架,iframe是内嵌的网页元素,也可以说是内嵌的框架,Iframe标记又叫浮动帧标记,可以用它将一个HTML文档嵌入在一个HTML中显示。它和Frame标记的最大区别是在网页中嵌入的html<Iframe></Iframe>所包含的内容与整个页面是一个整体,而html<Frame></Frame>所包含的内容是一个独立的个体,是可以独立显示的。另外,应用Iframe还可以在同一个页面中多次显示同一内容,而不必重复这段内容的代码。

2 iframe 可以放到表格里面。frame 则不行。

<table> 
<tr> 
<td><iframe id="" src=""></iframe></td><td></td> 
</tr> 
</table> 
 ```

5iframme   是活动帧   
  而frame是非活动帧   
  iframe使用方法如下   
```html
  <iframe   scr="sourcefile"   frameborder=0   width="width"   height="height"></iframe> 

iframe用起来更灵活,不需要frame那么多讲究
而且放的位置也可以自己设
iframe是内嵌的,比较灵活,不过也有不好的地方,就是位置在不同的浏览器和分辨率下有可能不同,有时会把本来好好的页面搞得变形

iframe是一个网页中的子框架,两网页间是父子关系

frame是把网页分成多个页面的页面。它要有一个框架集页面frameset
iframe是一个浮动的框架,就是在你的页面里再加上一个页面,

用来把页面横着或竖着切开,

<

iframe>用来在页面中插入一个矩形的小窗口

前端入门课程

1.html元素公共属性:id,class,style,title(鼠标放上去提示)
2.table的rowspan和colspan属性在表格单元元素上。
3.input使用type属性,表现出不同输入方式
4.textarea宽高用cols和rows来指定
5.form中的表单元素的通用属性:name,value,readonly,disabled
6.input 中 type=”radio”和type=”checkbox” 展示文本用,for值表示radio的id.属性checked(rdo,chk用)
7.在h5中,input有新增一个图片按钮,input type=”image”
8.iframe用起来比frame更灵活,,iframe是创建一个内联框架,与当前html还是一个整体。有区别,请看下一篇
9.元素自带的属性也非常重要,有些与css属性共用
10.css语法:选择器{属性:属性值}
11.css引入四种方式:内联样式>内部样式>外部样式,@import(css文件中引入其他css文件,不常用)
12.css三大选择器:ID选择器>类选择器>元素选择器
13.css其他选择器:通配符选择器,子选择器,后代/派生选择器(所有后代),伪类选择器
a)通配符选择器,“
”:常用于初始化整个html文档样式; *{margin:0px;}
b)子选择器,“>”:直接子代,不包括孙子及以下代; p>span{color:green}
c)后代/派生选择器,“空格”:父级的所有后代; p span{color:blue}
e)伪类/伪元素选择器,“:”:对元素作筛选;a:visited{color:blue}
f)属性选择器,”[attr=xxx]”:使用元素的属性来筛选;input[type=text]{color:red;}
g)相邻兄弟选择器,“+”:相邻两个元素,紧接在另一个元素后的元素,而且二者有相同的父元素;h1+p{color:red}
14. !important:当css属性值加上这个后,表示最高级别的权重,比上面的所有的选择器或者css样式表位置都高,就算只是在外部样式表中,权重也是最高.p{color:green !important;}
15.css属性有继承性
16.css字体常用属性:

    font-size: 28px;//字体大小
    font-family: "agency","宋体";//字体,可以用","指定多个,当前面找不到时,找后面的
    font-style: italic;//字体样式,斜体
    font-weight: 100px;//字体粗细
    color: blue;//字体颜色
    line-height: 150px;//行高,包含文字本身的高,文字居中常用
    text-align: center;//文本对齐方式
    text-decoration:underline;//文本修饰
    text-transform:uppercase;//文本大小写
    text-indent: 2em;//文本缩进,em表示当前文字样式大小

17.css背景:五个属性
a)background-color:背景颜色
b)background-image:背景图片。url(‘URL’)
c)background-repeat:图片平铺方式,repeat默认。背景图像将在垂直方向和水平方向重复。
d)background-attachment:图片是否固定或者随着页面的其余部分滚动。scroll默认值。背 景图像会随着页面其余部分的滚动而移动。
e)background-position:第一个值是水平位置,第二个值是垂直位置。
注意:简写形式:background:a b c d e 五个值 。
css
background:red url(../img/bg.jpg) no-repeat scoll center center

18.伪类:元素的一些状态;如a标签的状态
伪元素:创造一个虚拟的空间,如first-letter,after,before(after和before当F12时能看到添加的虚拟空间),为了区分伪类,在css中,可以 用双冒号,如“::after”
19.盒了模型中:display属性值
a)inline
b)block
c)none
d)inline-block
e)table
f)inline-table
20.table设置border后,会有双边框,这时可以设置table元素标签一个css样式: border-collapse: collapse;
21.text-align:文本水平对齐方式;vertical-align:是table专有的垂直对齐方式;如果要在文本中垂直对齐,可以设置文本height和line-height一致(行内元素先设置block)
22.圣杯布局和双飞翼布局区别https://www.jianshu.com/p/81ef7e7094e8
23.绝对定位元素相对的元素是它最近的一个祖先,该祖先满足:position的值必须是:relative、absolute、fixed,若没有这样的祖先则相对于body进行定位
24.z-index:只对定位元素有效,普通文档流的z-index永远是0

韩顺平41~

1.dom操作
2.正则表达式:创建正则表达式
a)var reg=/regexp/gi;//gi,g表示global全局,表示ignore大小写,可不写
b)var reg=new RegExp(“regexp”,”gi”);
reg.test(str)方法用来返回true和false,reg.exec(str)返回匹配的字符串
字符串也有支持的正则表达式使用方法:str.match(reg);
3.正则表达式:group组,捕获,反向引用
group:用()围起来的表达式,可以能过反向引用\1到\9出来,最多9号
匹配112233这样的字符串表达式:var reg=/(\d)\1(\d)\2(\d)\3/gi
4.正则表达式:定位符^匹配字符串行首,$匹配字符串行尾。
/^han$/gi; 字符串”han”,必须行首行尾匹配一致;
/^han/gi; 匹配”han1111han”,匹配行首的han
/han$/gi; 匹配”han1111han”,匹配行尾的han

韩顺平29~

1.js中一切都是对象!!!js确定是函数还是类,看调用的方法:这是方法cat();这是类var cat1=new cat();
2.创建类后,类中的属性和函数可以动态添加
3.创建对象的方法:
a)工厂方法
b)构造函数
c)prototype
d)构造函数及混合方式
e)字面量模式:var data={msg:”hello”};更强调是键值对形式
4.在类中this关键字给添加默认公开属性及值,this.name=90(表示公开,声明函数也一样);不能用var name=90(表示私有);不在类中使用this,那么this一般指window对象本身;
5.哪个对象实例调用this所在的函数或属性,那么this就代表哪个对象实例!!!!
6.给类添加公共函数,常用this.xxx=function(){},还可以使用原型的方法prototype在类外面指定,这样的好处是把原型方法公用给多个不同的类来使用。不支持函数重载
7.js闭包与gc有关联,涉及到对象属性何时被gc回收处理的问题,一般是return返回类中的方法,而方法体中有属性。只要让对象中的对象不被gc回收,都可以叫做闭包
8.js也有封装继承多态

韩顺平18~

1.数据类型,运算符,控制语句(顺序,分支,循环),函数/对象/类库,跟css一样,不同的浏览器,可能有不同的解释.大部分语言基本语法差不多(类型,运算符,控制语言),不同的是函数/对象/类库
2.js变量的弱类型,由js引挚在解释的时候决定(js是解释语言)
3.数据类型分为:值类型(数值,字符串,布尔,Null,Undefined),引用类型(对象,数组,函数)
4.严格来说,编译型语言是直接转换为能执行机器码的,纯编译型语言(c/c++)。所以说java,c#属于编译-解释型语言,因为都是一次性编译成中间码,再依赖解释器多次解释,即有编译也有解释的好处。而php,js,python属于解释型语言。
5.运算符:分为算术运算符,比较运算符,逻辑运算符,位运算符(不常用)
6.js全局函数;js对象;browser对象
7.eval:动态把文本为js代码执行
escape:编码;unescape:解码

韩顺平9~17

1.div+css代替table布局的优势,并不是抛弃table该用的时候还是用,比如显示数据的时候
div:包含html元素
css:定义元素的样式
外部样式,内部样式,内联样式
2.网站所有内容变灰:用css滤镜
3.css三大选择器:id选择器 > 类选择器 > 元素选择器
4.通配符选择器,子选择器。(常使用*选择器初始化html文档为margin:0;padding:0;)
5.当多个类选择器同时修饰时,后面的css代码会覆盖前面的,跟元素引用类名称前后位置无关
6.chrome和ff最新版不再支持a:visited的更多css属性设置,但兼容颜色设置
7.每一个元素都有一个display属性用来分类
a)行内元素: 宽高由内容决定,设置宽高是不生效,除了line-height。一般放置文本和行内元素。行内元素不会自动换行,行内元素和其他行内元素全部在一行。
b)块元素:放置文本/行内元素/块元素(一般),块元素默认会自动换行,并占一行,不管宽是多少。
c)行内元素和块元素可以互换性质常用:display{inline/block/inline-block}指定互相转换, float指定后行内会转为块元素,position指定后行内会转为块元素
d)行内块元素属性:display:inline-block,即有块的特性也有行内的特性,有块的可以设置宽高和行内的排成一行。比如img和input元素默认为些属性。
e)text-align不能对行内元素起效的原因是:行内元素是由内容撑开的,没有左中右之分。
f)margin,padding对行内元素的特别之外:margin左右有效,上下无效;pading左右有效,上下影响背景高度(其实不影响文档高度,所以用错位来表现出来)!!!!但行内元素的line-height还是占文档高度
g)在元素嵌套时,应块级元素与块级元素并列,行内元素与行内元素并列,如果不并列,用元素嵌套(此时这个元素并无语义,只是为了这个嵌套规则)
8.css标准流/非标准流:
a)标准流,默认是此布局,在网页中就像流水,写在前面的元素出现在前面,写在后同的元素出现在后面
b)非标准流,网页布局中,可能需要使用非标准流方式布局,某个元素脱离它本身的位置
9.盒子模型:外边距,边框,内边距,内容
a)多使用margin布局,少用padding,因为padding可能会影响元素的大小,有弹性一样,会对布局有影响,元素的原始实际宽高是border以内的东西,margin只是影响其布局宽高
b)包含图片时,用js获取宽高要在onload事件中执行,文档加载完成后执行。
10.float浮动:左浮动,右浮动,清除浮动
a)必要性:div默认是块元素的纵向排列,如果需要横向排列,则用到浮动
b)尽量向左/右移动,直到遇到父边框或者别的浮动元素,并未完全脱离标准流;浮动后,相当于把自己的右/左边让出来,让其他元素排列,但其他元素的文本会认同float元素(会出现文字围绕的情况)。当一起浮动的某一个元素过高时,会卡住下一排的元素,到它的后面显示
11.position定位:static,relative,absolute,fixed;
a)默认为static,是标准流。
b)relative:相对原元素正常位置/原位置进行定位,left向右移动,top向下移动,原位置仍保留,像未脱离标准流一样。
c)absolute:相对于最近的位于非标准流父级元素进行定位,left向右移动,top向下移动,原位置不保留,让出原空间,就像不存在一样,脱离标准流
d)fixed,类似于absolute,但是相对于浏览器窗口来对元素进行定位,且不保留原位置 ,脱离标准流
12.div设置float后,里面的图片怎么居中显示:valign表格中内容垂直居中

 <div class="picad">
   <table height="100%" width="100%" valign="middle" style="text-align:center;">
      <tr>
          <td> <img src="./images/1.jpg" alt=""></td>
       </tr>
   </table>
</div>

其他方式:https://www.cnblogs.com/formybestlife/p/10191548.html

韩顺平1-8

1.html本身也有一些样式属性,比如表格标签
2.meta标签的常用属性:name,http-equiv,content,其中,content是对name,http-equiv定义的键赋值
3.html基本结构:

<html>
 <title>这是Title</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<meta http-equiv="set-cookie" content="name=value expires=Fri, 12 Jan 2001 18:18:18 GMT,path=/"/>
<meta name="keywords" content="标题,段落">
<meta name="description" content="这是一个标题和段落演示">
<body>
    <h1>标题</h1>
    <p>内容</p>
</body>
</html>

4.ul无序列表,ol有序列表,dl自定义列表(不仅表示项目还有注释)

***无序列表
<ul>
<li>项目标题</li>
<li>项目标题</li>
</ul>
***有序列表
<ol start="5" type="1" reversed="reversed">
<li>项目标题</li>
<li>项目标题</li>
</ol>
***自定义列表(不仅表示项目还有注释)
<dl>
    <dt>项目标题</dt>
    <dd>项目描述说明</dd>
</dl>

5.frameset 标签不能与body共存,rols表示行比例,cols表示列比例,frame不能与frameset脱离;产生的是一个完整的独立的html文档;而iframe是与当前html文档还是一个整体,iframe可以独立使用,iframe用起来更灵活,不需要frame那么多讲究
6. a)form里面常用的输入元素:input,select,option,textarea,button
b)input button与button的区别:功能几乎一样,在form表单中但button在结束标签之前,可以包含更丰富的展示,button默认是submit提交,除非指定type=button;
c)H5中,有更多的元素和属性
7.块元素,内联元素(行内元素)