JavaWeb好用的工具、快捷键以及简单语法

一、VSCode

1. ! + tab生成一组默认页面模板
2. lorem + tab自动的生成一段随机的单词
3. 列模式编辑，将光标放在某个位置，然后按住alt，通过鼠标左键点击，就能选中多个位置一起修改/添加
4. div.类名 + tab可以直接创建一个类名为自己设定的块级元素
5. ctrl + '/'自动标记注释

二、浏览器的开发者工具

通过开发者工具，就可以观察到页面的基本结构

打开操作：右键 -> 检查；F12

1. 元素一栏可以让我们看到每行代码对应在页面中的位置
2. 下面图片中点击小箭头之后，我们可以点击页面的某一项然后就可以在开发者工具中找到对应的代码

1. 前端代码调试，开发者工具中的 Sources ，可以打开某个 html 文件，在左侧打断点，当出现蓝色标签时表示打断点成功，然后在网页上输入信息点击按钮执行，代码会停到断点位置

三、语法

（一）HTML

1. HTML中的注释是
2. a标签，行内元素，表示超链接
   1. href属性，表示跳转到哪里
      1. 可以使用网络地址
      2. 可以使用自己的页面地址
      3. #表示空链接
      4. 可以使用文件，表示下载该文件
   2. 如果把图片放到a标签里，就可以实现点击图片进行跳转的操作
3. form表单标签，负责用户与页面进行交互
   1. input标签，多种形态，都是用来和用户进行交互
      1. type属性，描述input标签是什么形态
         1. text表示单行文本框
         2. password表示单行密码文本框，在我们输入密码又不确定的情况下，可以在开发者工具中将它修改为text
         3. radio单选框，具体选择的内容可以在标签后面添加
         4. checkbox复选框，和单选框相对，同一组复选框，可以选择多个
         5. button表示按钮
         6. file表示选择文件，可以通过该操作进行上传文件操作
      2. name属性，通过相同的名字来来确定哪些选项是一组的，让单选框实现只能选择一组中的一个
      3. checked属性，在选择框的形态中表示默认选中，引号里也填checked
   2. label是特殊标签，是搭配input标签中的选择选项来使用的，可以让用户在点击选择框的时候点击文字也能选上选项，此时选项的文字需要放到lable里面，通过for属性来和input标签关联，for属性中的值要和input中的id值的字符串对应
   3. button标签表示按钮，value属性给按钮中添加内容，onclick属性表示在点击元素的时候触发，触发的内容就是引号里面的代码，会被浏览器直接执行。button标签也可以通过input标签声明，只不过单独的button我们更常用
   4. select下拉菜单标签
      1. 下拉菜单中会有很多的选项，每个选项都通过一个option标签来表示
         1. selected属性可以设置默认选项
   5. textarea多行编辑框，该标签可以配合 markdown编辑器使用，将用户在 markdown 编辑器输入的内容同步保存到 textarea 中，代码示例：

<!-- 放置 md 编辑器 -->
<div id="editor">
    <!-- 为了进行 form 的提交，此处搞一个 textarea 多行编辑框，借助这个编辑框来实现表单中的提交 -->
    <!-- 通过给 editor 设置 editor.md，让编辑器把 markdown 内容也同步的保存到隐藏的 textarea 中，从而可以进行 form 提交 -->
    <!-- 这种操作是 markdown 官方提供的提交内容的解决方案 -->
    <!-- 除了下面的操作，还要在对 deitor 的 script 操作里加上一个选项 -->
    <textarea name="content" style="display: none;"></textarea>
</div>

<script>
    // 初始化编辑器
    let editor = editormd("editor", {
        // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
        width: "100%",
        // 设定编辑器高度
        height: "calc(100% - 50px)",
        // 编辑器中的初始内容
        markdown: "# 在这里写下一篇博客",
        // 指定 editor.md 依赖的插件路径
        path: "editor.md/lib/",
        // 该选项表示将用户在编辑器输入的内容同步保存到隐藏的 textarea 中
        saveHTMLToTextarea: true,
    });
</script>

1. id属性，任意 html 元素，都可以指定id属性，在一个页面中，id属性的取值唯一，就像人的身份证号
2. 无语义标签div和span，这两个标签可以代替上述绝大部分有语义标签，但是form代替不了
   1. div是块级元素，默认独占一行
   2. span是行内元素，默认不换行

（二）CSS

1. CSS的注释是/*......*/
2. 基础选择器中的通配符选择器*，一次性选中页面所有的元素，常用于取消标签的默认样式，因为不同浏览器的对同一个标签的默认样式可能不同，为了保证我们的页面在所有浏览器展现的效果相同，都会取消掉标签的默认样式，自己设置
   1. margin（外边距）：设为0
   2. padding（内边距，边框和内容之间的距离）：设为0
   3. box-sizing：设为border-box（声明，边框只会挤压内容，不会撑大原有的块级元素大小）
3. 通过margin可以将块级元素a中的块级元素b在a中水平居中，具体操作margin: 0 auto，意思就是让水平方向的外边距进行浏览器自适应，这样就会达到水平居中的效果，但是垂直不行
4. overflow属性，可以实现部分窗口滑动而整体不滑动的功能，如果内容溢出一个元素的框，存在五种状态：
   1. visible-默认值。内容不会被修剪，会呈现在元素框之外
   2. hidden-超出内容被修剪且不可见
   3. scroll-超出内容被修剪但会显示滚动条来查看超出内容
   4. auto-如果内容超出，超出内容被修剪但会显示滚动条来查看超出内容，否则将不会看到滚动条
   5. inherit-从父元素继承overflow属性的值。

（三）JS

1. JS的注释是//......

1. DOM API

1. querySelector，querySelectorAll两个API，这两个其实是一个document这样的对象的属性，被称为页面中的全局对象，一个页面加载好之后，就会自动生成一个全局变量，就叫做document，这里面就有一些属性和方法，让我们操作页面的内容
2. 操作元素内容，需要用到对象里的一个属性innerHTML来实现（元素里面包含的html代码是啥样的）,innerHTML的返回值是一个字符串修改可以直接给innerHTML赋值，赋值内容是一个字符串，里面是html语句
3. 操作节点，创建时需要用到createElement，参数指定标签名，创建好后使用appendChild把节点插入到某个节点的子元素中；删除节点需要用到removeChild，得先拿到父节点，然后再拿到待删除的子节点
4. ajax中得到的响应如果是json格式，那么body就会自动被 jquery 给转成一个对象数组了，可以直接进行操作，但是这里的自动转换有一个前提，服务器响应的 header 中的 Content-Type是application/json。如果客户端没有自动转，也可以通过 JSON.parse() 这个函数来手动转
5. 当我们使用 ajax 发送 json 数据时，需要关注两点：
   1. 必须声明传输格式 contentType 是 application/json
   2. 必须将 data 数据使用JSON.stringify()函数对body内容进行转换
6. location.search可以获得自己页面的QueryString中的内容，包括问号
7. location.assign，可以跳转页面
8. 要想取到某个div标签下的某个标签，可以通过>来得到，示例代码如下:

<div class="blog-content">
    <!-- 博客标题 -->
    <h3></h3>
</div>
<script>
    let h3 = document.querySelector('.blog-content>h3');
</script>