本文记录了我学习前端的一些知识，不是学习前端的教程，在文章的第四点列出了我推荐的一些资源。
首先前端是什么？可能你会说前端就是html/css/js，就是我们看到的页面，这样说可能不太准确，前端指的是用于用户响应的部分，它是由html/css/js组成的，下面我列出了它们在页面中所起到的作用。
- html—结构(structure):比如你看到的文字或图片。
- css—样式(presentation)：你看到的文字或图片以什么样的格式显示的，如字体的颜色等等。
- js—行为(behavior)：它定义了网页中的动态行为。
一、html
html是一种标签语言，主要格式如下
<p class="id">helloworld</p>
- 元素():开始标记，加结束标记，加内容，等于元素。
- 标签(tag):<p>为开始标签，</p>为结束标签
- 属性(attribute):包含元素的额外信息，这些信息不会出现在实际的内容中，标签的属性定义了与文档相关联的名称/值对。
- 内容(content):可显示的部分，对应上面元素的
helloworld
html主体分为两大部分
<head></head> //head标签内的内容不会在浏览器中显示，它的作用是包含一些页面的元数据。
<body></body> //body标签内的内容是整个页面的显示部分
其他常见的标签
<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->
<h1>-<h6> 标题（由大到小）
<p> 段落 <b>加粗</b>
<q> 引用，加引号
<div> 元素的 HTML 布局
<a href="url">Link text</a> 超链接
<style> 标签用于为 HTML 文档定义样式信息，位于<head>中，type 属性是必需的，<style type="text/css">内容部分用来写css相关代码
二、CSS
2.1 在html中引入CSS
<style type="text/css"> //使用<style>直接在html文件中写css
h1 {color:red}
p {color:blue}
</style>
<link rel="stylesheet" type="text/css" href="theme.css" /> //引入css文件，rel="stylesheet"表明这是文档的样式表，而 href包含了样式表文件的路径
2.2 选择器
简单选择器：通过元素类型、class 或 id 匹配一个或多个元素。
- 元素选择器：只是一个选择器名和指定的HTML元素名的不区分大小写的匹配。
- 类选择器：由一个点“.”以及类后面的类名组成。
- ID选择器：由哈希/磅符号 (#)组成，后面是给定元素的ID名称。任何元素都可以使用id属性设置唯一的ID名称。
- 通用选择器：(*)它允许选择在一个页面中的所有元素。
三、JavaScript
可插入 HTML 页面的轻量级的编程语言，弱类型语言，对大小写敏感。
3.1 在html中插入js
<script>javascript</script> //直接写在html文件中
<script type="text/javascript" src="/js/myScript.js"></script> //外部使用js代码，在html5可不指定type
3.2 js中函数的创建
JavaScript中，函数及变量的声明都将被提升到函数的最顶部。
函数声明：
function fuctionname(){}//声明式会导致函数提升，function会被解释器优先编译
函数表达式
var fnName = function () {…} //不会出现函数提升，JS解释器逐行解释，如果调用在函数表达式之前，则会调用失败。
匿名函数：function () {}
自调用函数：平常的function(){}则是一种声明式，如果加上()括号后，则会被编译器认为是函数表达式，从而可以用()来直接调用
(fuction(){
return 1;
})();
常见调试函数
alert()
console.log(obj1 [, obj2, ..., objN);
3.3 AJAX
AJAX是一种用于创建快速动态网页的技术。使网页实现异步更新
jQuery 是一个 JavaScript 库
$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
jQuery中的Ajax()方法
jQuery.ajax([settings]) <---> $.ajax()函数依赖服务器提供的信息来处理返回的数据。
下面给个实例：
$.ajax({
type:"get",
url:"http://api.mayitours.com/test?user=nmd&&token=d6560343554db3bed50bf4a23ce2f6&&stock_name=sh601006",
dataType:"json",
async:false,
success:function(data){ //当请求之后调用
console.log(data);
elements[1] = data['sale']; //今日售价
elements[2] = data['buy'];
elements[3] = data['current_price'];//当前价格
elements[4] = data['quantity'];
},
error:function(){
alert("wrong");
}
});
;为可选项
简单的来说，ajax就是在你设定的时间间断后对于特定的url进行访问，做到实时更新网页上的数据。
四、资源
学习Web :
前端调试（包括fiddler、F12）
vscode中文文档
https://legacy.gitbook.com/book/jeasonstudio/vscode-cn-doc/details