[开发工具] 前端基本知识介绍

我们通常需要代码提示我们辅助编写，这个时候就涉及到VSCODE提供的一系列的插件插件安装在 Extension 中，点击即可看到一个搜索按钮，可以输入关键字搜索自己想要的插件。如图：

三.HTML基础标签

HTML基础知识

1.HTML为何物？

HTML是超文本标记语言（Hyper Text Markup Language）是用来描述网页的一种语言。

简单来说，HTML文件也可以直接称为网页，浏览器的作用就是读取HTML文件，并且以网页的形式去展示它们。

2.标签介绍

（1）双标签书写规则：<双标签名称>内容</双标签名称>，例如<html>内容</html>；

3.HTML属性

HTML属性指的是标签属性，HTML标签可以拥有属性，给相关的HTML元素提供更多的信息。

（3）属性总是以名称/键值对的形式出现，比如：class="method";

4.HTML标签骨架

基本的HTML标签

1.HTML标题标签

HTML的文章标题标签，如：<h1></h1>~<h6></h6>分六个级别，效果一次减少，并且每个标题都是独占一行空间。

2.换行与空格

扩展：对于HTML语言，没有严格的语义，即<br>与<br/>或者<br? ? >浏览器都可以识别出来。

?html1.0~5.0 ?xhtml(严格) 五大浏览器联合更新自己的版本HTML5(不严格)

3.HTML段落

作用：（1）虽然p标签的文字显示外观来看，和普通文字没有区别，但是它独占一行；

在合适的地方显示合理的标签，搜索引擎也偏好于标签语义化做的更好的页面。

4.字体加粗与倾斜及删除效果

注意：这两个标签没有任何语义区别，而w3c则说明s标签要被del标签替代；

5.图片标签

6.超链接

作用：（1）暂时不知道点击之后跳转到哪里，使用空链接占位；

7.列表

8.布局标签

9.表格标签

（3）cellpadding：单元边沿与其内容之间的空白，默认为1像素；

10.表单标签

（1）表单标签：<form action=""></form>。form表单标签里面就是所有用户填写的表单数据；

? ? ? ? ? ? ? ? placeholder：给用户提示（提升用户体验感的属性），并且在为本域中都可以使用；

使用标签：select为下拉框的标签，嵌套若干个option标签。其中每一个option为下拉框中的一个选项。

（3）提交按钮：点击提交按钮可以让表单提交给指定后台处理；

四.CSS基础选择器

CSS介绍

CSS样式表介绍

CSS基础语法

复合选择器

内部样式表（嵌入式）

五.JS基础

Javascript介绍

1.js的介绍

JavaScript简称js，是运行在客户端的脚本语言，现在js也可以基于node.js技术进行服务器编程。

2.js的由来

javascript最开始是为了解决表单动态校验，由布兰登奇在1995年花10天完成了js设计；

3.JavaScript组成

JavaScript基本语法

1.JavaScript的引入方式

2.js注释

3.js的输入输出方法

4.变量?

5.数据类型

在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。

js为弱类型语言（动态语言），所以不需要提前声明变量类型，而是在程序运行过程中，类型会被自动确定。

var age=21;
var PI=3.14;

String：字符串类型，?成对双引号或者成对单引号(推荐) 包裹。

var s='hello world';
var s1='hello world';

// 获取字符串?度： string.length

Boolean：布尔值类型。如：true，false 等价于1 和0

var flag=true; ?// 布尔型
var flag2=false; // 布尔型

Undefined：未定义。在声明变量之后未赋值的通常会有a=undefined

var variable;
console.log(variable); ? ? ?// undefined

Null：声明了变量为空值

var space = null;

6.数据类型转换

（2）使用控制台输出的颜色识别，因为控制台对于不同数据类型颜色不同；

数据类型转换就是把一种数据类型的变量转换为另一种数据类型。

7.更多JS基础

六.JS之DOM

1.DOM简介

什么是DOM？

DOM也叫做文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML）的标准编程接口；W3C已经定义了一系列的DOM接口，可以通过DOM接口可以改变网页的内容，结构，和样式。

DOM树

2.元素：页面中的所有标签都是元素，DOM中使用 element 表示；

3.节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用 node 表示；

2.获取元素

根据ID获取

根据类名获取

根据标签名获取

<body>
 ? ?<ul>
 ? ? ? ?<li>我是第?个li</li>
 ? ? ? ?<li>我是第?个li</li>
 ? ? ? ?<li>我是第三个li</li>
 ? ? ? ?<li>我是第四个li</li>
 ? ? ? ?<li>我是第五个li</li>
 ? ?</ul>
</body>

实现：

<script>
       var tag_var = document.getElementsByTagName("li");
       console.log(tag_var);
       for (ele of tag_var){
            console.log(ele);
         }
 ? 
</script>

注意：

（1）即使只有一个li标签，通过该方式获取的依然是伪数组。

（2）如果没有一个li，通过该方式获取的依然是空的伪数组。

需求2：获取ol下面的li

<body>
 ? ?<div id="index">hello world</div>
 ? ?<ul>
 ? ? ? ?<li>我是第?个li</li>
 ? ? ? ?<li>我是第?个li</li>
 ? ? ? ?<li>我是第三个li</li>
 ? ? ? ?<li>我是第四个li</li>
 ? ? ? ?<li>我是第五个li</li>
 ? ?</ul>
 ? ?<ol id="ol">
 ? ? ? ?<li>ol下?的第?个li</li>
 ? ? ? ?<li>ol下?的第?个li</li>
 ? ? ? ?<li>ol下?的第三个li</li>
 ? ? ? ?<li>ol下?的第四个li</li>
 ? ? ? ?<li>ol下?的第五个li</li>
 ? ?</ol>
</body>

实现2：

<script>
 ?var ol = document.getElementsByTagName('ol');
 ?console.log(ol[0].getElementsByTagName('li'));
</script>

通过选择器获取

使? querySelector(' 选择器 ') ,根据指定选择器返回第?个元素对象。

需求：获取第一个 class 为 box 的 div。

<body>
 ?<div class="box">盒?</div>
 ?<div class="box">盒?</div>
</body>

实现：

<body>
 ?<div class="box">盒?</div>
 ?<div class="box">盒?</div>
 ?<script>
 ? ?var firstBox = document.querySelector('.box');
 ? ?console.log(firstBox);
 </script>
</body>

需求2：获取 id 为 nav 下的 ul 标签。

<body>
 ?<div class="box">盒?</div>
 ?<div class="box">盒?</div>
 ?<div id="nav">
 ? ? ?<ul>
 ? ? ? ? ?<li>??</li>
 ? ? ? ? ?<li>产品</li>
 ? ? ?</ul>
 </div>
</body>

实现：

<script>
 ? ?var nav = document.querySelector('#nav>ul');
 ? ?console.log(nav);
</script>

通过选择器获取（多个）

通过选择器选中所有的对象，则需要使? querySelectorAll(' 选择器 ') ?法。

需求：获取所有 class 为 box 的 div。

<script>
 ? ?var allBox = document.querySelectorAll('.box');
 ? ?console.log(allBox);
</script>

定位body标签

使? document.body 定位 body 标签。

<script>
 ? ?var bodyEle = document.body;
 ? ?console.log(bodyEle);
</script>

定位html标签

使? document.documentElement 定义html标签。

<script>
 ? ?var htmlEle = document.documentElement;
    console.log(htmlEle);
</script>

3.事件基础

事件基础介绍

事件基础指的是??中的每个元素(标签)都可以产?某些可以触发 JavaScript 的事件,然后去执

?某些操作。

事件基础三要素：

????????事件源

????????事件类型

????????事件处理程序