画布 1
前端开发基础学习路线
  HTML
    文档结构
      <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>首页</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
    常用标签
      <br>: 换行标签
      <hr>: 分割线标签
      <img>: 图片标签，用于展示图片
      <a></a>: 超链接标签，用来插入一个链接地址
      <div></div>: 用来布局页面结构
      <span></span>: 范围标签，一般用来包含一段需要特殊处理的文字时使用。
      <h1></h1> ~ <h6></h6>: 标题标签，共有6级。
      <p></p>: 段落标签，用来显示文字段落
      <ul></ul>: 无序列表标签
      <ol></ol>: 有序列表标签
      <li></li>: 列表项标签，无序列表和有序列表都使用 li 标签做为列表项标签
      <table></table>: 表格标签，用来定义一个表格
        <tr></tr>: 表格行标签，需要配合 table 标签使用，用来定义表格中的行
        <th></th>: 表头标签，需要配合 tr 标签使用，用来定义表格中的表头元素
        <td></td>: 单元格标签，需要配合 tr 标签使用，用来定义表格中的单元格元素
      <form></form>: 表单标签，用于收集页面中用户的输入数据，并提交到服务器
        <input></input>: 表单元素标签，用来定义输入项，通过 type 属性控制元素类型
          type="text" 定义单行文本输入框
          type="password" 定义密码输入框
          type="radio" 定义单选框
          type="checkbox" 定义复选框
          type="file" 定义上传文件
          type="submit" 定义提交按钮
          type="reset" 定义重置按钮
          type="button" 定义一个普通按钮
      <textarea></textarea>: 多行文本输入框
      <select></select>: 下拉标签
      <option></option>: 下拉项标签，需配合 select 标签使用
    标签常用属性
      全局属性
        id：规定元素的唯一 id。
        class：规定元素的类名。
        style：规定元素的行内样式。
      用户操作
        onclick：这是一个全局事件属性，当用户单击鼠标时会触发相应的脚本。
      特有属性
        src：规定显示资源的路径。
        href：规定链接的目标 URL。
        name: 规定数据的标记名称。
        value: 表单数据中的数据。
        action: 规定提交数据的目标 URL。
        method: 规定提交数据的方式。
  CSS
    引入方式
      行内式 ：通过 style 属性，直接在标签上为标签设置样式
      内嵌式（内部样式）：通过 style 标签批量编写样式，一般在 head 标签中编写
      外链式 ：样式代码编写在 CSS 文件中，在页面文件的 head 标签中通过 <link> 标签引入样式文件。
    选择器
      标签选择器
        p{
color: red;
}
      类选择器
        .text{
color: red;
}
      id 选择器
        #text{
color:red;
}
      层级选择器
        div p span{
color: red;
}
      组选择器
        p, div, h1{
color: red;
}
    样式属性
      布局类属性
        width: 设置元素宽度
        height: 设置元素高度
        background: 设置元素背景色和背景图片，设置背景图片需要使用 url() 函数
        border: 设置边框样式
        margin: 设置外边距
        padding: 设置内边距
        display: 设置元素布局状态等
      文本类属性
        color: 设置字体颜色
        font-size: 设置字体大小
        font-weight: 设置字体加粗
        line-height: 设置行高
        text-align: 设置平水对齐方式
        text-decoration: 设置文字下划线
        text-indent: 设置文字首行缩进
  JavaScript
    引入方式
      行内式：直接在标签上编写 JS 代码，一般用于事件处理。
      内嵌式：通过 <script></script> 来编写 JS 代码
      外链式：通过 <script src="js文件路径"></script> 引入 JS 文件中的代码
    定义变量
      使用 var 或 let 关键字定义变量
        var n = 100;
        let x = 10;
    定义函数
      使用 function 关键字定义函数，函数体使用 {} 包裹
        function show(){
consolg.log("Show Run")
}
    条件语句
      if(条件1){
}else if(条件2){
}else if(条件3){
}
...
else{
}
    循环语句
      FOR 循环
        for(var i=0;i<10;i++){
}
    字符串操作
      字符串.length ： 获取字符串长度
      字符串.substring(): 提取字符串中介于两个指定下标之间的字符。
      字符串.indexOf(): 搜索字符串，并从起始位置（0）开始计算返回字符串出现的位置。
    数组操作
      数组.length 可获取数组元素个数
      数组.push(值) 可向数组中添加数据
      数组.pop() 从数组中删除最后一个元素
      数组.splice(start,num, ele1,...,eleN) 向数组中插入，删除，替换数据
    对象
      var oObj = {
name:"Tom",
age:88
}
    获取当前页面地址
      window.location.href 返回当前页面的 URL
        window.location 对象在编写时可不使用 window 这个前缀
      location.pathname 返回 URL 的路径名
    JQuery
      引用方式
        <script src="jquery.min.js">
      基础语法
        $(selector).action()
          $ 为 jQuery 对象
          选择符 (selector) 查询和查找` HTML 元素
          action() 执行对元素的操作
      文档就绪事件
        // 默认事件
window.onload = function(){
alert("onload");
}
        // jquery ready 事件
$(document).ready(function(){
alert("ready");
})
        // jquery ready 事件简化形式
$(function(){
alert("ready简化形式")
})
      获取元素
        $(".box")
      操作元素
        html(): 设置，获取元素中的内容，如果内容文本包含HTML代码会渲染。
        text(): 设置，获取元素中的内容，如果内容文本包含HTML代码不会渲染，直接以文本形式显示
        append(): 向元素中追加 HTML 内容
        remove(): 删除被选元素（及其子元素）
        empty(): 从被选元素中删除子元素
      操作属性
        prop(): 设置，获取属性值
        val(): 设置，获取 input 标签中的 value 属性中的值。
      AJAX
        发送 GET 方式的请求
          $.get("/login", {"username": "Tom","passwd":"123"}, function (data){
console.log(data);
}, json)
        发送 POST 方式的请求
          $.post("/login", {"username": "Tom","passwd":"123"}, function (data){
console.log(data);
}, json)