HTML

1、<meta charset="UTF-8">  #设置页面编码，这个设置英文则现在国内浏览器会弹出是否要转换中文

2、<title>我的第一个页面</title>   #设置网页的抬头名称

3、<body><!--页面中所有要展现的内容都要写在body标签内--></body>

4、<meta charset="UTF-8">  #定义字符编码

5、<!doctype + 类型>  #规定文档类型

6、<!-- 注释 -->  #注释的格式

7、&； #转义字符

8、>   #创建父子结构标签的

9、+   #创建兄弟标签的

10、. + 名字   #可以在标签下快速创建标签并且给到属性值

11、$    # 叫计数器从1开始（如果是$$$，就是001开始）\ ul>li{$}*5通过table键直接可以生成1~5的带内容的标签 \  ul>li.li${$$$}*5这样的格式可以直接生成带内容和带顺序类名的标签

12、<h1>一级标题</h1>

13、<h2>二级标题</h2>

14、<h3>三级标题</h3>

15、<h4>四级标题</h4>

16、<h5>五级标题</h5>

17、<h6>六级标题</h6>

18、<p>段落标签</p>

19、<span>文本标签</span>

20、<i>斜体标签，能让字体斜体</i>

21、<b>加粗标签</b>

22、<em>是强调标签，显示效果和i标签一抹一样</em>

23、<strong>是强调标签，以加粗方式强调</strong>

24、<br>   #换行标签

25、<hr>   #分割线标签

26、<a href="http://www.w3school.com.cn/">前往w3school网站</a>   #超链接标签

27、<img src="" alt="狗狗" title="这是狗狗图片"></img>   #title就是鼠标悬停后出现的提示

28、<img src="./111111.jpg" alt="狗狗"></img>   #alt 当图片没有被加载出来出现的提示文本

29、<li></li>   #列表标签

30、<th>单元格标题</th>   #表格标签

31、<input type="text" name="user">   #输入框标签  /  type就是输入的类型，type就是文本明文的  /  password就是密码类型是密文的  /  file就是选择文件的  /  radio就是圆点选择框（圆点框必须建立起练习才能选择其一，否则变成多选框而且无法取消）/  checkbox就是方形点选框（可以多选可取消）

32、<textarea name="" id="" cols="30" rows="10"></textarea>   #文本域标签  /  textarea 就是文本域，文本域是可以鼠标拖动缩放的

33、<input type="file">   #文件选择标签

34、<select name="" id="">   #下拉选择列表标签

　　　　<option value="">语文</option>

　　　　<option value="">数学</option>

　　　　<option value="">外语</option>

　　</select>

35、<label for="">性别</label>   #展示标签

36、男<input type="radio" name="sex" checked>   #圆点选择标签

37、西瓜<input type="checkbox" name="like">   #方形复选框标签

38、<button type="submit">提交按钮</button>   #按钮标签

39、<input type="submit" values="input也可以做提交按钮">   #标签提交按钮

CSS

1、<link rel="stylesheet" href="./css/index.css">   #这个是外联式需要导入的写法，用link标签在href里面用相对路径导入外联css样式文件

2、/**/   #css注释

3、<style> </style>   #将样式与页面中的某一个或某些标签建立联系，只要使用选择器，将需要的标签写在这个style标签下，设置属性即可，这就是选择器

基础选择器

4、div{}   #标签选择器

5、*{}   #通配选择器

3、.class{}   #类选择器

4、#box    #id选择器

5、div{">!important;}   #！import选择器

PS：这个语法比较特殊，在语句的值和结束符中间写

6、border-radius   #这个是圆角设置,参数用百分比

7、border;2px solid blue；    #broder边框，2px就是边框的粗细，solid就是边框实线，blue就是定义边框的颜色

高级选择器

8、div,p,h1{}   #群组选择器

9、.sup .sub{}   #后代选择器

10、.sup > .sub{}   #.sup只能为.sub的父亲

11、.div1 ~　.div2{}   #兄弟选择器

12、h2.hd{}   #交叉选择器

13、.h.h61{}   #多类名选择器

14、color: red;   #字体颜色

15、class-name:nth-child(number){}   #伪类选择器

16、width: 200px;   #宽度

17、height: 200px;   #高度

18、background-color: yellowgreen;   #区域颜色

19、transition: 1s 1s all linear   #transition动画过渡效果，有几个属性： 1、（1s 1s过渡效果展开的时间和延迟时间）延迟时间一般不会写，用户体验度不好 2、动画属性默认all 3、过渡曲线linear（线性）

20、hover    #鼠标悬停动画效果

21、text-align: center;   #改变文本的水平居中方式

22、top;   #从顶部往下移动

23、font-weight: 900;   #字重:字越粗越重，越细越轻，范围100~900的整数

24、font-size: 30px;   #字体大小

25、font-family: SimSun-ExtB,Shruti;   #字族=字体，可以写备用字体，就是字体后面以逗号分隔，再写一个字体，备用字体一般选用系统默认字体

26、font: 900 30px/100px "SimSun-ExtB","Shruti"   #多个基础功能的简写方式(字重 字体大小/行高 字族)

27、background-image: url("img/bg.png");   #加载背景图片

28、background-repeat: no repeat;   #处理平铺:repeat-x就是x轴平铺 | repeate-y就是y轴平铺 | no repeate就是没有平铺

29、background-size: 100px 200px   #背景尺寸(这个不常用)，会缩放背景图

30、background-position: 10px 20px;   #背景定位，往右移10（x轴左右偏移）、往下移20（y轴上下偏移）（-10、20往左移10，往下移20）

31、background: url("img/bg.png") red no-repeat 10px 20px;   #以上几个功能简写（加载背景图片 | 区域颜色 | 处理平铺 | 背景定位）

32、text-decoration: none;   #清除字体下划线

33、list-style: none;   #清除列表样式

34、margin: 0;   /   padding: 0;   #清除列表默认的距离值

35、float: left;   #浮动布局

36、.sup:after{   #清浮动的写法，子浮动,父级开启清浮动,父级的兄弟显示区域正常

　　　　content: "";

　　　　display: block;

　　　　clear: both;}

37、solid black   #设置边框线的样式（实线/虚线）

38、border: 10px solid black;   #border就是色块区域的边框线，用来设置边框线的粗细以及类型

39、padding: 10px 20px 30px 40px;   #pading用来也是四个参数上下左右，用来设置margin区域在色块区域的位置

40、margin: 100px 0 0 200px;   #margin也是四个参数上下左右，用来设置整个标签在页面的什么位置

41、ul {   #ul中有系统默认样式，重置默认样式，然后自定义样式，这个过程就叫reset操作

　　margin: 0;

　　padding: 0;

　　list-style: none;}

42、父相子绝 （子级在父级的区域内可以随意设置位置）  #具体查看14

43、margin-right; 10px;  #盒模型的margin区域右边增加指定的空白像素区域

44、margin; 0 auto;   #区域居中，详细参数看盒模型篇

45、bottom  10px；   #底部开始向上移动指定像素,底部开始居上指定像素

46、right 10px;   #右边开始居上指定像素

47、text-indent: 20px;    #文本缩进，按照像素缩进

48、text-indent: 2em;   #文本缩进,em代表当前字体大小进行缩进

49、line-height: 1em;   #行高，按照当前字体大小进行距离分配

50、line-height: 100px;   #行高，按照像素进行距离分配

51、

PS:！import > 行间式 > id > class> 标签 > 通配

PS：什么是行间式，行间式就是在标签的内部书写格式

javaScript

1、alert('弹出警告')   #alert就是警告的意思

2、<script src="js的引入.js">   #通过script从外部引入脚本

3、var 变量名 = 变量值；   #var是定义变量的关键词

4、new   #创建对象的关键词

5、print   #这个功能就是通过浏览器调用打印机打印页面

6、console.log （xxx）   #就是js语法用来打印的

7、//   #这个是js的注释

8、!   #是取反的意思

9、isNaN  #检查是不是NaN

8、<script src="js的引入.js">   #从外部引入脚本

9、var n=10;   #定义一个数字类型

10、var s = 'str' ;   #定义一个字符串

11、var b = true;   #定义一个布尔值

12、console.log(m,typeof (m))   #查看值的类型，查看类型m时候可以不加括号

13、var m = new Number(100);   #创建一个新的对象

14、var x = Number('123');   #值类型的转换,这里是将字符串123转换成数字123

15、var s = '字符串';  #定义字符串，'' "" 单双引号都可，js中没有 ''' '''三引号

16、var b = true;   #定义布尔值

17、var abc;   #定义一个未定义类型

18、==   #这个是用来判断值是否相等，这个是做值比较

19、===   #判断本质上是否相等，就是做值与类型比较

20、var num = 666 + '';  #数字转换成字符串

21、var res1 = '10' + 5;   #js中字符串的拼接优先级高于数字运算的加法，所以这里识别成字符串的拼接

22、var res2 = '10' - 5;   #这里有减法，字符串不能做减法，所以字符串10识别成数字做了减法

23、var res = '888' - 0;   #字符串转换成数字,-0就是表示值不变，字符串不能做减法，所以自动识别成数字做计算，类型也改变了

24、var ress = +'888';   #字符串转换成数字的另外一种方式，字符串必须是纯数字的字符串，不能是数字加字幕的字符串

25、 isNaN（结果） #判断转换的结果是否是非数字类型

26、res = parseInt('3.1.4abc');   #将非纯数字的字符串转换成数字类型，这个方法就会从前往后找，找到的第一个数字就是返回值

27、res = parseFloat('3.1.4abc');   #将非纯数字的字符串转换成数字类型，这个方法就会从前往后找，找到的第一个小数点后的第一个数字就是返回值

28、var arr = [1,2,5,3,4];   #定义数组

29、console.log(arr[2]);   #数组的查询 => 索引即可

30、delete arr[4];   #数组的删除

31、delete arr[arr.length - 1];   #删除数组中最后一个,arr.length - 1就是最后一个，以此类推-2就就是删除最后第二个

32、arr[4] = 100;   #修改数组中的指定位置值

33、arr.unshift(123);   #在数组的头位置增加值

34、arr.shift();   #删除数组头位置的值

35、arr.push(888);   #在数组的尾部增加一个值

36、arr.pop();  #将数组的尾部的值删除

37、arr.splice(1,1,999);   #splice可以完成除了查的所有功能，包含插入。spilce（从什么索引开始，操作多少位，操作成什么(这个可以用逗号添加多个值，如果是空不写值就是删除)）（省略第三个参数就是从第几位开始索引，操作几个位进行删除）

38、newarr = arr.splice(1,2);   #slice 切片操作,切片之后数组内的值就没有了，被切掉了。slice (n,m) 从索引位置n开始截取到索引位置m之前。这里将切片后的值放入一个新的变量中

39、var str =arr.join('-');   #将数组中的值以指定的符号拼接成字符串

40、narr = str.split('-');   #字符串对应有一个逆运算,将字符串以指定的符号拆分成数组，拆分后数组内的值是以字符串形式存在，可以通过索引修改类型

41、narr[2] = narr[2] - 0;   #索引数组内指定位置的值改变类型

42、var dic = {name:'liuxx',age:'100'};   #js没有字典类型，但可以通过对象完全表现字典类型，对象可以当成字典来使用

43、console.log(dic.name);   #查找字典中指定的值，对象的调用就是对象加.来调用

44、console.log(dic['age']);   #查找字典中指定的值，对象中对象中所有的key都是字符串形式，和42的指令是一样的效果，知识写法不同

45、dic.sex = 'male';   #字典的增加

46、dic.age = 99;   #修改字典内的指定key的值

47、delete dic.age;   #字典内的值删除

48、函数的定义

function fn1() {
    console.log('我是函数fn1');
}

49、   fn1();   #函数的调用

50、#定义函数的另一种方式

var fn2 = function () {
    console.log('我是函数fn2');
};

51、匿名函数的定义 （匿名函数只能在定义阶段被调用一次）（第一个()，是将定义的代码作为整体拿到内存地址，后面的()就是调用的意思，这就是匿名函数的定义方式和原理）

(function () {
    console.log('我是匿名函数')
})();

52、onmouseout  \  onmouseover   #添加鼠标悬浮事件out是离开，over是悬浮（就是鼠标悬停）

53、流程控制（语句的循环）   #看16

jQuery   #详见jQuery 

常用标签

语义标签： h1~h6（页面标题，出现1 次或者不出现） |  p（段落标签） |  span（文本标签） | i（斜体标签，给字体加效果） | em（强调标签字体加粗） |  b（字体加粗标签） | strong（强调标签字体加粗）

功能性标签： a(超链接标签)  |  img（图片标签） | hr（分割线标签） | br（换行标签） | ul>li（列表标签） | table（表格标签） |  form（表单标签-重点）

PS:在body外面的内容会被自动解析到body标签下，但是不要写body外面，不规范

盒模型

margin  #外边距，控制居上 margin-top, 居左 margin-left 的距离

bordr   #边框设置 1px solid black

padding  #内边距，将内容‘内挤’，本质在content 与 border区域之间添加了留白区域

content   #width * heigth

浮动

float:left\right  #这个就是浮动，设置左\右（让原来一行一行显示的标签能够同行显示）

.header:after{     #这个是清浮动，如果不知道子级的固定高度则采用清浮动，这样自动会根据子级的高度位置撑开

　　　　content: " ";

　　　　display: block;   #display 就是显示方式，目的就是让x标签支持宽高，为block时支持宽高，显示方式为inline时不支持宽高

　　　　clear: both;  #清除左右浮动

　　　　}

reset操作（用css写）

body, h1,h2,h3,ul {

　　margin 0;

　　padding 0;

}

ul {

　/*清除列表样式*/

　list-style:none

}

a {

/*设置字体默认颜色和清除下划线*/

color: black;

　text-decoration:none;

}

定位布局

position: relative;  #相对定位，是父级设置的（fixed就是固定定位）

position: absolute;   #绝对定位，是子级设置的（static就是静态的，初始默认就是这个静态定位，意思就是没有定位）

z-index  #一个父级下多个子级产生重叠，可以用这个设置层级，以整数大小来排序显示

PS：border就是色块区域的边框线，用来设置边框线的粗细以及类型

PS：这个位置属于content区域，就是盒模型最内层的区域，用来设置标签的范围，其实就是整个色块区域的大小

PS：padding也是四个参数上下左右，用来设置margin区域在色块区域的位置

PS：margin也是四个参数上下左右，用来设置整个标签在页面的什么位置

PS：最小的字号12号，要设置比12号还小的子，只能自己倒入字库，用小号字体，如果要在粗体上更粗，也只能导入自定意义的字库

 

 

（0）前端总结（HTML + CSS + JQ）的更多相关文章

  1. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  2. 前端Html和Css面试题

    前端Html和Css面试题Html篇:1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Ope ...

  3. 2.前端笔记之css

    title: 1.前端笔记之CSS date: 2016-04-05 23:05:51 tags: 前端 categories: w3c --- 作者:刘耀 **出处:http://www.liuya ...

  4. 前端html、CSS快速编写代码插件-Emmet使用方法技巧详解

    前端html.CSS快速编写代码插件-Emmet使用方法技巧详解   Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生.它使用仿CSS选择器的语法来 ...

  5. 李洪强和你一起学习前端之(6)css行高,盒模型,外边距

    李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...

  6. 前端基础：CSS样式选择器

    前端基础:CSS样式选择器 CSS概述 CSS是Cascading Style Sheets的简称,中文意思是:层叠样式表,对html标签的渲染和布局.CSS规则由两个主要的部分组成:1.选择器:2. ...

  7. web前端篇：CSS使用，样式表特征，选择器

    目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...

  8. Web前端篇：CSS常用格式化排版、盒模型、浮动、定位、背景边框属性

    目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...

  9. 常用前端布局，CSS技巧介绍

    常用前端布局,CSS技巧介绍 对前端常用布局的整理总结,并对其性能优劣,兼容等情况进行介绍 css常用技巧之可变大小正方形的绘制 1:若通过设置width为百分比的方式,则高度不能通过百分比来控制. ...

  10. 前端常用得CSS代码分享

    前端常用得CSS代码分享 本文首发于公众号:小夭同学,同步更新个人博客:故事影片,转载请署名.代码不断更新中!! 1,垂直居中对齐 .vc { position: absolute; top: 50% ...

随机推荐

  1. ID基本操作（新建文档，页面编码）5.8

    “文件”“新建”“文档”选择页数,页面大小.页面方向,“边距和分栏”设置上下左右的边距,栏数,如三栏 还可以改变分栏距离·改变排版方向,如图,垂直 单击“页面”可以查看我们的页面情况 超过两页会可以看 ...

  2. 【转】java提高篇(二)-----理解java的三大特性之继承

    [转]java提高篇(二)-----理解java的三大特性之继承 原文地址:http://www.cnblogs.com/chenssy/p/3354884.html 在<Think in ja ...

  3. 逆袭之旅DAY16.东软实训.Oracle.匿名块

    2018-07-1216:41:19 六.匿名块 .定义匿名块: declare 定义部分: ---可选部分 begin 执行部分: ---必选部分 exception 异常处理部分: ---可选部分 ...

  4. poj1226

    题解: 后缀数组 把所有串先翻转,用一个没有出现过的字符连接 然后再把所有串接起来 然后用一个没有出现过的字符连接 然后二分 在后缀数组上判断lcp 代码: #include<cstdio> ...

  5. python 调用zabbix api实现查询主机信息,输出所有主机ip

    之前发现搜索出来的主机调用zabbix api信息都不是那么明确,后来通过zabbix官方文档,查到想要的api信息,随后写一篇自己这次项目中用到的api. #!/usr/bin/env python ...

  6. nginx+tomcat集群

    参考: 简单:http://blog.csdn.net/wang379275614/article/details/47778201 详细:http://www.jb51.net/article/77 ...

  7. [HDU1890]RoboticSort

    Problem 每次找到最小值,然后把它和它前面的数翻转,然后找第二小数······ 然后输出这些数的下标. Solution 用splay维护,每次找到最小值,然后翻转前面区间. Notice 细节 ...

  8. day044 cssy其他样式 js初识

    float: 浮动 .t1{ float: right/left; } 关于浮动的两个特点: 1.浮动的框可以向左或向右移动,知道他的外边缘碰到包括框或另一个浮动框的边框为止. 2.由于浮动框不在文档 ...

  9. 读书笔记 C# yield return与yield break执行顺序的浅析

    yield return可一次返回一个元素,并保留当前在代码中的位置,下次调用当前迭代器函数时,将从该位置从新执行.也就是说执行了yield return的时候,迭代器函数就返回了一个元素给forea ...

  10. Iterator，迭代器模式，C++描述

    body, table{font-family: 微软雅黑; font-size: 13.5pt} table{border-collapse: collapse; border: solid gra ...