前端语法整理

前言

很久都没有更新随笔了，一方面这段时间自己确实有所懈怠，另一方面确实最近工作中的事情多而杂，没有好好沉下来专注一方面的成长。其实这段时间，也并不是毫无所获，还是发表了一些比较系统的文章（比如“大数据测试环境全量迁移docker之路”），在公司内部的论坛里，由于涉及一些关键技术和敏感信息，所以不便在此发表。另外，这段时间学习了spring-boot开发的一些知识，并将之前的关于java基础和设计模式、以及jvm虚拟机相关的内容做了整理，放到自己的个人github上：https://github.com/znifeng。

最近在负责开发组里的一个“大数据测试平台”，用的是spring-boot，由于经常性地要查一些前端语法，因此索性将前段时间学习的前端相关知识整理于此，同时想借此篇开启2018年的博客之旅。

一、HTML

参考地址：w3school_html

1.basic

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

!DOCTYPE声明了doc type为HTML5

body中的内容才是可见的

h1～h6为标题，h1为最大

2.超链接

<a href="https://www.w3schools.com">This is a link</a>

3.图片

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

4.空行（不需要end tag）

<br>

5.attributes

属性提供了关于元素的额外信息，定义在start tag中，类似name="value"

href：链接地址

src：图片地址

width: 图片宽度(pixel)

height: 图片高度(pixel)

alt: 图片显示不出时，显示的替代文本

6.水平线

<hr>

7.head元素

置于html和body元素之间，定义html文件的元数据（metadata）

<!DOCTYPE html>
<html>

<head>
  <title>My First HTML</title>
  <meta charset="UTF-8">
</head>

<body>

8.styles

定义元素的格式。基本格式:

<tagname style="property:value;">

其中property为CSS属性，value为CSS值。

<!--背景颜色-->
<body style="background-color:powderblue;">
<!--字体颜色-->
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<!--字体大小-->
<p style="font-size:36px;">I am big</p>
<p style="font-size:160%;">I am big</p>
<!--字体格式-->
<p style="font-family:courier;">I am big</p>
<!--对齐方式-->
<p style="text-align:center;">Centered paragraph.</p>
</body>

9.formatting

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text （下划线）
<sub> - Subscript text（下标）
<sup> - Superscript text（上标）

10.quatation 引用

<!-- q -->
<p>WWF‘s goal is to: <q>Build a future where people live in harmony with nature.</q></p>
<p>Here is a quote from WWF‘s website:</p>

<!-- blockquote -->
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world‘s leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

11.Color

https://www.w3schools.com/html/html_colors.asp

<!--background -->
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>

<!--text -->
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

<!--border -->
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

<!--using RGB, HEX, HSL, RGBA, HSLA-->
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

12.CSS

  • Inline CSS
<h1 style="color:blue;">This is a Blue Heading</h1>
  • Internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
  • Extennal CSS (recommend)

test.html:

<!DOCTYPE html>
<html>
<head>
<!-- 本地引入与website同目录的styles.css文件 -->
  <link rel="stylesheet" href="styles.css">
<!-- 本地引入与website目录相对路径的styles.css文件 -->
  <link rel="stylesheet" href="/html/styles.css">
<!-- 外部引入css -->
  <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

styles.css:

body {
    background-color: powderblue;
}
h1 {
    color: blue;
}
p {
    color: red;
}

/* for an element with id "p01" */
#p01 {
    color: blue;
}

/* for elements with class "error" */
p.error {
    color: red;
}

13.table

<table style="width:100%">
  <caption>User Info</caption>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

tr: a table row
th: a table head
td: a table data/cell
caption：标题

14.javascript

example1: show date

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<button type="button"
onclick="document.getElementById(‘demo‘).innerHTML = Date()">
Click me to display Date and Time.</button>

<p id="demo"></p>

</body>
</html>

example2: change style and content

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p>JavaScript can change the content of an HTML element:</p>

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo">This is a demonstration.</p>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
     document.getElementById("demo").style.fontSize = "25px";
    document.getElementById("demo").style.color = "red";
    document.getElementById("demo").style.backgroundColor = "yellow";
}
</script>

</body>
</html>

example3: change attribute

<!DOCTYPE html>
<html>
<body>
<script>
function light(sw) {
    var pic;
    if (sw == 0) {
        pic = "pic_bulboff.gif"
    } else {
        pic = "pic_bulbon.gif"
    }
    document.getElementById(‘myImage‘).src = pic;
}
</script>

<img id="myImage" src="pic_bulboff.gif" width="100" height="180">

<p>
<button type="button" onclick="light(1)">Light On</button>
<button type="button" onclick="light(0)">Light Off</button>
</p>

</body>
</html>

15.using bootstrap CSS

<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

16.form表单提交

Test input:

<form action="/action/api">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action/api".</p>

Radio Button input:

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

Select input:

<form action="/action_page.php">
  <select name="cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="fiat">Fiat</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit">
</form>

Multiple Select:

<select name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

textarea:

<form action="/action_page.php" target="_blank" method="get">
  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>
  <br>
  <input type="submit">
</form>

target="_blank" ：默认会在当前窗口进行跳转。如果加上此属性，会打开一个新的空白窗口进行跳转。

method="get"或method="post"：限定http请求的方法

必须包含name属性，否则数据不会被发送

二、CSS

A CSS rule-set consists of a selector and a declaration block:

1.Selector

(1) element selector

p {
    text-align: center;
    color: red;
}

(2) id selector

#para1 {
    text-align: center;
    color: red;
}

(3) class selector

.center {
    text-align: center;
    color: red;
}
/* 只针对<p>生效 */
p.center {
    text-align: center;
    color: red;
}
/* group selectors */
h1, h2, p {
    text-align: center;
    color: red;
}

2.multiple stytle sheets

如果一个元素在多个css文件中被定义了属性，则会使用最后一个加载的css文件的值

三、JavaScript

1.在HTML中，JS代码插入在块中。可以插入多个js脚本，可以放在body中也可以放在head中，或者both。

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

<button type="button" onclick="document.getElementById(‘demo‘).style.fontSize=‘35px‘">Click Me!</button>

2.外部加载js代码的方式

<script src="myScript.js"></script>

外部的js脚本不能包含script tag：

function myFunction() {
   document.getElementById("demo").innerHTML = "Paragraph changed.";
}

外部脚本的引用可以使用完整的URL，或者一个相对路径。

<script src="https://www.w3schools.com/js/myScript1.js"></script>
<script src="/js/myScript1.js"></script>
<script src="myScript.js"></script>

3.display

  • Writing into an HTML element, using innerHTML.
  • Writing into the HTML output using document.write(). ——only for testing
  • Writing into an alert box, using window.alert().
  • Writing into the browser console, using console.log(). --for debugging purposes
<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My First Paragraph</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

<script>
document.write(5 + 6);
</script>

<script>
window.alert(5 + 6);
</script>

<script>
console.log(5 + 6);
</script>

</body>
</html>

4.在HTML中，JavaScript程序是由浏览器来执行。

JS Statements组成：

  • Values
  • Operators
  • Expressions
  • Keywords
  • Comments

4.1 Values

常量：

  1. 数字: 10.50、1001
  2. 字符："zni"、‘zni‘

变量：

//没有赋值的变量默认值为undefined
var x;
//赋值参数
x = 6;
//在一行中声明多个变量
var person = "John Doe", carName = "Volvo", price = 200;

4.2 Operators

( + - * / ) =
//x1="John Doe"
var x1 = "John" + " " + "Doe";
//x2=10
var x2 = 5 + 2 + 3;
//x3="523"
var x3 = "5" + 2 + 3;
//x4="55"
var x4 = 2 + 3 + "5";
Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus (Remainder)
++ Increment
-- Decrement
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator
&& logical and
|| logical or
! logical not
typeof Returns the type of a variable
instanceof Returns true if an object is an instance of an object type

位操作：

4.3 Expressions

一条表达式由values和operators组成

4.4 Keywords

关键字，如var

4.5 Comments

注释

var x = 5;   // I will be executed
// var x = 6;   I will NOT be executed

4.6 Identifiers标识符

identifier: values（keywords、functions、labels）的命名

规则：

  • 以字母或下划线或$开头
  • 后面跟字母、数字、下划线或$
  • 区分大小写
  • 不允许出线中划线-，专门用作减法操作符

推荐写法：firstName，小写字母开头的驼峰式命名

5.关键字keywords

Keyword Description
break Terminates a switch or a loop
continue Jumps out of a loop and starts at the top
debugger Stops the execution of JavaScript, and calls (if available) the debugging function
do ... while Executes a block of statements, and repeats the block, while a condition is true
for Marks a block of statements to be executed, as long as a condition is true
function Declares a function
if ... else Marks a block of statements to be executed, depending on a condition
return Exits a function
switch Marks a block of statements to be executed, depending on different cases
try ... catch Implements error handling to a block of statements
var Declares a variable

6.注释

// Change heading:

/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
in my web page:
*/

7.data types

var length = 16;                               // Number
var lastName = "Johnson";                      // String
//Object properties are written as name:value pairs, separated by commas.
var x = {firstName:"John", lastName:"Doe"};    // Object
//first item is [0], second is [1], and so on.
var cars = ["Saab", "Volvo", "BMW"];           // Arrays,

typeof操作符

typeof ""                  // Returns "string"
typeof "John"              // Returns "string"
typeof "John Doe"          // Returns "string"

undefined和 null的区别

typeof undefined           // undefined
typeof null                // object

null === undefined         // false
null == undefined          // true

8.function

function name(parameter1, parameter2, parameter3) {
    code to be executed
}
function toCelsius(f) {
    return (5/9) * (f-32);
}
//返回函数结果25
document.getElementById("demo").innerHTML = toCelsius(77);
//返回函数的object本身：function toCelsius(f) { return (5/9) * (f-32); }
//document.getElementById("demo").innerHTML = toCelsius;

9.object

var person = {
    firstName : "John",
    lastName  : "Doe",
    age       : 50,
    eyeColor  : "blue",
    //method
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }
};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
//call method
document.getElementById("demo").innerHTML = person.fullName();

10.域：local 和 global

  • 大部分同一般的变成语言
  • 注意：没有用var声明的变量，如果被直接赋值，会自动成为全局变量
myFunction();

// code here can use carName as a global variable
document.getElementById("demo").innerHTML = "I can display " + carName;

function myFunction() {
    carName = "Volvo";
}

变量生命周期：

从变量声明开始，local变量会在函数完成时被删除，全局变量会在浏览器窗口关闭时被删除。

11.Events

  • An HTML web page has finished loading
  • An HTML input field was changed
  • An HTML button was clicked
<element event=‘some JavaScript‘>
<element event="some JavaScript">

button


<! --change element content -->
<button onclick="this.innerHTML = Date()">The time is?</button>

<! -- change this -->
<button onclick="displayDate()">The time is?</button>

<! -- call function -->
<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>
Event Description
onchange An HTML element has been changed
onclick The user clicks an HTML element
onmouseover The user moves the mouse over an HTML element
onmouseout The user moves the mouse away from an HTML element
onkeydown The user pushes a keyboard key
onload The browser has finished loading the page

12.转义字符

Code Outputs
‘ single quote
" double quote
\ backslash
\b Backspace
\f Form Feed
\n New Line
\r Carriage Return
\t Horizontal Tabulator
\v Vertical Tabulator

13.String Methods

方法 作用
txt.length 返回长度
txt.indexOf("hello") 返回第一次出现hello的index（从0开始）。如果不存在，则返回-1
txt.lastIndexOf("hello") 同上，返回最后一次出现hello的index
txt.search("hello") 类似indexOf，区别是search可以接受正则，而且不支持第二个参数来定义查找的起始index
txt.slice(start,end) 提取字符串
txt.substring 同上，区别是不能接受负数
txt.substr(start，length) 同slice，区别是第二个参数规定长度
txt.replace("hello", "hi") 把hello替换成hi，默认只替换第一个hello。区分大小写
txt.replace(/HELLO/i, "hi") 同上，不区分大小写
txt.toUpperCase() 转为大写
txt.toLowerCase() 转为小写
txt.concat(a,b,c) 在txt字符后再连接多个字符，此处a，b，c都是变量
txt.charAt(i) 提取第i个字符，不推荐使用txt[i]的方式，unsafe
txt.charCodeAt(i) 提取第i个字符的unicode
txt.split(",") 以逗号分割字符串成array

14.RegExp 正则表达式

/pattern/modifiers

var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "W3Schools");

Modifiers修饰符：

Modifier Description
i 忽略大小写
g 全局匹配
m 多行匹配

Patterns模型

Patterns Description
[abc] 匹配中括号中的任一字符
[0-9] 匹配任一数字
(x y)
\d 代表一个数字
\s 代表一个空格字符
n+ 代表至少一个n字符
n* 代表0或多个n
n? 代表0或1个n

test()：正则表达式方法

patt.test(str)：判断str字符串中是否包含正则表达式patt，返回true或false

exec()：正则表达式方法

patt.exec(str)：判断str字符串中是否包含正则表达式patt，如果存在，则返回patt，否则返回null

完整正则参考：https://www.w3schools.com/jsref/jsref_obj_regexp.asp

四、jQuery

1.jQuery: a JavaScript Library

2.Basic syntax：

 $(selector).action()

3.jQuery uses CSS syntax to select elements. Examples：

$(this).hide() - hides the current element.

$("p").hide() - hides all <p> elements.

$(".test").hide() - hides all elements with class="test".

$("#test").hide() - hides the element with id="test"

4.ready：等待document完全加载后，再进行jQuery代码的执行

$(document).ready(function(){

   // jQuery methods go here...

});

<!-- 为了简化写法，可以替换成下面的方式 -->
$(function(){

   // jQuery methods go here...

});

5.Selectors

6.functions in s separate file

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

7.syntax for event methods:

click:

$("p").click(function(){
  // action goes here!!
});

double click:

$("p").dblclick(function(){
    $(this).hide();
});

mouse enter：鼠标移到某元素

$("#p1").mouseenter(function(){
    alert("You entered p1!");
});

mouse leave：鼠标离开

$("#p1").mouseleave(function(){
    alert("Bye! You now leave p1!");
});

mousedown()、mouseup()

hover()：combination of mouseenter() and mouseleave()

focus：表单的输入框正在输入时

$("input").focus(function(){
    $(this).css("background-color", "#cccccc");
});

blur：失去焦点时

8.effects

  • hide()
  • show()
  • toggle()：在hide和show之间切换

9.Callback

$("button").click(function(){

$("p").hide("slow", function(){

alert("The paragraph is now hidden");

});

});

例子中hide()方法传了两个额外参数，第一个“slow”规定了慢隐藏，第二个则是callback方法，该方法会在动作完全执行完成后被调用

10.chain链式调用

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

11.jQuery HTML

  • 获取元素内容
<!--显示元素内容-->
$("#btn1").click(function(){
    alert("Text: " + $("#test").text());
});

<!--显示元素内容，包含html标签-->
$("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
});

<!--显示表单元素的内容-->
$("button").click(function(){
    alert("Value: " + $("#test").val());
});

<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>
  • 获取属性attributes
$("button").click(function(){
    alert($("#w3s").attr("href"));
});
  • 修改元素内容
$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("Dolly Duck");
});

$("button").click(function(){
    $("#w3s").attr({
        "href" : "https://www.w3schools.com/jquery",
        "title" : "W3Schools jQuery Tutorial"
    });
});
  • 增加元素
append() - Inserts content at the end of the selected elements
prepend() - Inserts content at the beginning of the selected elements
after() - Inserts content after the selected elements
before() - Inserts content before the selected elements
  • 删除元素
remove() - Removes the selected element (and its child elements)
empty() - Removes the child elements from the selected element

12.jQuery CSS

Methods Description
addClass() Adds one or more classes to the selected elements
removeClass() Removes one or more classes from the selected elements
toggleClass() Toggles between adding/removing classes from the selected elements
css() Sets or returns the style attribute 
<!-- 增加class -->
$("button").click(function(){
    $("h1, h2, p").addClass("blue");
    $("div").addClass("important");
});

<!-- 同时增加两个class：important 和 blue-->
$("button").click(function(){
    $("#div1").addClass("important blue");
});

<!-- 删除class -->
$("button").click(function(){
    $("h1, h2, p").removeClass("blue");
});

<!-- 获取css属性的值 -->
$("p").css("background-color");

<!-- 修改css属性的值 -->
$("p").css("background-color", "yellow");

<!-- 批量修改多个css属性的值 -->
$("p").css({"background-color": "yellow", "font-size": "200%"});

13.AJAX

参考：https://www.w3schools.com/jquery/jquery_ref_ajax.asp

AJAX = Asynchronous JavaScript and XML.

In short; AJAX is about loading data in the background and display it on the webpage, without reloading the whole page.

异步加载机制，使得浏览器可以在后端加载数据，然后更新部分页面，而不需要重新载入整个页面

  • load

    $(selector).load(URL,data,callback);
  • get
$.get(URL,callback);
$("button").click(function(){
    $.get("demo_test.asp", function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});

callback函数中的第一个参数是请求的内容，第二个参数是请求的状态。

  • post
$.post(URL,data,callback);
$("button").click(function(){
    $.post("demo_test_post.asp",
    {
        name: "Donald Duck",
        city: "Duckburg"
    },
    function(data, status){
        alert("Data: " + data + "\nStatus: " + status);
    });
});

原文地址：https://www.cnblogs.com/znicy/p/8566058.html

时间： 2024-11-01 12:02:31

前端语法整理的相关文章

Web前端，HTML5开发，前端资源，前端网址，前端博客，前端框架整理 - 转

Web前端/H5开发,前端资源,前端网址,前端博客,前端框架整理 - 转 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v2.2 免费的编程中文书籍索引 前端书籍 前端免费书籍大全 前端知识体系 免费的编程中文书籍索引 智能社 - 精通JavaScript开发 重新介绍 JavaScript(JS 教程) 麻省理工学院公开课:计算机科学及编程导论 JavaScript中的this陷阱的最全收集--没有之一 JS

Markdown语法整理

Markdown语法整理 目录 6.1.竖杠|下划线-写法 6.2.htmltable写法 5.1.无需列表 5.2.有序列表 5.3.定义型列表 5.4.列表缩进 5.5.包含段落的列表 4.1.页内超链接 4.2.文章内部标题链接 3.1.行内式: 3.2.参考式 3.3.自动连接 一.分级目录 二.斜体与粗体 三.超链接 四.锚点 五.列表 六.表格 说明:本文中中语法里面的代码就是需要写的Markdown语法,展示效果就是最后生成的页面此语法编写和测试环境:windows上使用Markd

前端重点整理集合

一.XHTML+CSS重点 一.各浏览器兼容问题和解决方法 1.3px的Bug:ie6下一个容器的浮动和文字之间会产生3px的间距, 解决方法:给浮动的盒子添加一个margin-right:-3px;(与浮动方向反方向). 2.浮动双边距Bug:当一个盒子像左浮动的同时有一个向左的margin-left的时候,IE6解析这段代码时就会把margin-left解析为原来的2倍,这个就是所谓的浮动双边距BUG. 解决方法:浮动盒子添加属性display:inline;将浮动盒子属性改为内联,或单使用

移动端 Web 开发前端知识整理

文章来源: http://www.restran.net/2015/05/14/mobile-web-front-end-collections/ 最近整理的移动端 Web 开发前端知识,不定期更新. HTML5 可以做什么 拍照 获取地理位置 手势 canvas 绘图和动画(硬件加速) localstorage,本地缓存 HTML5 动画效果 demo http://fff.cmiscm.com/#!/main CSS3 动画 http://isux.tencent.com/css3/inde

前端面试整理

第一阶段 1.XHTML与HTML与HTML5的有何异同? HTML是一种超文本标记语言 HTML5 最先由whatwg命名的一种超文本标记语言,随后与W3Cxhtml2.0相结合,生成现代最新的一种超文本标记语言 h5=html+css3+js+API html与html5主要区别是语义化的标签<header><footer><article> html特性: 标识文本.例如:定义标题文本.段落文本.列表文本.预定义文本. 建立超链接,便于页面链接的跳转. 创建列表,

web前端素材整理汇总

最近一直搞前端开发,整理下前端用的一些常用素材,分享给大家 框架类 Vue:https://cn.vuejs.org/ iview:https://www.iviewui.com/ 插件类 Jquery插件库:http://www.jq22.com/ UI类 Bootstrap模板大全:https://wrapbootstrap.com/ Bootstrap_Metro风格:https://linghucong.js.org/Bootstrap_Metro_Dashboard/ 字体类 Font

前端知识点整理03

75.说说你对前端架构师的理解 负责前端团队的管理及与其他团队的协调工作,提升团队成员能力和整体效率: 带领团队完成研发工具及平台前端部分的设计.研发和维护: 带领团队进行前端领域前沿技术研究及新技术调研,保证团队的技术领先 负责前端开发规范制定.功能模块化设计.公共组件搭建等工作,并组织培训. 实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number.String.Object.Array.Boolean)进行值复制 Object.prototype.clon

前端资源整理

下面的项目都列出了github的星数和npmjs上最近一个月的下载数例如 github 106.5k/stars npmjs 93.3k/lm 指有10万6千个github星,上个月在npmjs有9万3千次下载.每个项目都给出了官网地址,github地址,npmjs地址. 注:在一个自分类里按stars数量排序,一般老框架的stars很高,但是npmjs下载量很低,新框架stars不太高,npmjs下载量很高,请特别留意lodash的下载量和bootstrap的stars数-- UI框架Boot

前端试题整理

阻止事件冒泡和默认事件 function stopBubble(e) { if(e && e.stopPropagation){ e.stopPropagation(); } else { window.event.cancelBubble = true; } }; // 阻止浏览器的默认事件 function stopDefault(e){ if(e && e.preventDefault) { e.preventDefault(); } else { window.ev