前端开发介绍

最新推荐文章于 2024-05-02 15:42:51 发布
最新推荐文章于 2024-05-02 15:42:51 发布
阅读量516 收藏 1
点赞数
文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46597615/article/details/130093257
版权

前端开发介绍

前端开发，主要开发的是网页，如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vGFfxKjK-1681217507690)(assets/1667829415386.png)]

万维网联盟（ World Wide Web Consortium ），创建于1994年10月，主要工作是对 web 进行标准化。

该组织定义了网页的开发需要如下3门技术：

  • HTML:定义网页的结构
  • CSS: 定义网页的表现，样式
  • JavaScript: 定义网页的行为

前端框架。例如：vue,elementui等等

前端的3天课程安排如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-obrRU54p-1681217507691)(assets/1667829877388.png)]

2 HTML

2.1 介绍&快速入门

2.1.1 HTML介绍

HTML（HyperText Markup Language）：超文本标记语言。比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。简单理解是：由标签构成的语言，HTML中的标签都是预定义好的。

1668010269268

html代码经过浏览器解析，呈现的效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CSe6wXNG-1681217507691)(assets/1667830388905.png)]

2.1.2 快速入门

第一步:创建一个名为HTML的文件夹，然后找到课程资料中的1.jpg文件放到该目录下，此时HTML文件夹中内容如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tYe4XMvV-1681217507692)(assets/1668011569718.png)]

第二步：创建一个文本文件，然后修改文件名为hello.html,注意文件的后缀是.html,如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-szcOeRwx-1681217507693)(assets/1668012052140.png)]

第三步：选中文件，鼠标右击，选择使用记事本打开文件，并且编写前端代码:

首先html有固定的基本结构：

<html>
	<head>
    	<title> </title>
    </head>
    <body>
        
    </body>
</html>

其中<html>是根标签，<head>和<body>是子标签，<head>中的字标签<title>是用来定义网页的标题的，里面定义的内容会显示在浏览器网页的标题位置，如下图红框内容所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1xWRzNJ4-1681217507693)(assets/1668096182111.png)]

然后<body>中的内容会显示在浏览器的内容区域，如下图红框内容所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kodUndEb-1681217507694)(assets/1668096294983.png)]

上图展示的是黑色加粗的字体，可以使用<h1>标签来包裹文本内容，代码如下

<html>
	<head>
		<title>HTML 快速入门</title>
	</head>
	<body>
		<h1>Hello HTML</h1>
	</body>
</html>

通过浏览器打开，看到如上图所示的效果。

html是超文本标记语言，还能修饰超文本，通过<img>来引入图片，其中该标签的src属性，用来指定图片的地址，代码如下：

<HTml>
	<head>
		<title>HTML 快速入门</title>
	</head>
	<body>
		<h1>Hello HTML</h1>
		<img src='1.jpg'></img>
	</body>
</html>

然后选中文件，鼠标右击，选择使用浏览器打开文件，浏览器呈现效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ckj5b5O4-1681217507695)(assets/1668229100646.png)]

快速入门案例就到此结束，html有其基本的结构如下：

<html>
	<head>
    	<title> </title>
    </head>
    <body>
       
    </body>
</html>

<title>中定义标题显示在浏览器的标题位置，<body>中定义的内容会呈现在浏览器的内容区域

2.2 开发工具

Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器。VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）。VS Code 提供了非常强大的插件库，大大提高了开发效率。官网： https://code.visualstudio.com

详细安装教程：参考 资料/VSCode安装/安装文档/VS Code安装文档.md

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r48Vlg3W-1681217507696)(assets/1668012492155.png)]

注意:不应该将软件软装在包含中文名的路径中

2.3 基础标签

2.3.1 文本标签

文本标签顾名思义，都是用来修饰文本的，包括标题，段落，加粗等

标签描述
<h1> ~ <h6>定义标题，h1最大，h6最小
<font>定义文本的字体、字体大小、字体颜色
<b>定义粗体文本
<i>定义斜体文本
<u>定义文本下划线
<center>定义文本居中
<p>定义段落
<br>定义折行
<hr>定义水平线
2.3.1.1 标题标签

第一步：首先我们需要打开VS Code工具，点击File->Open Folder->选择之前快速入门创建的html目录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eNiEBV7d-1681217507696)(assets/1667840837334.png)]

第二步：然后我们需要创建一个文件，并且给文件重命名，注意文件的后缀是.html

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iLiRghts-1681217507697)(assets/1667840991261.png)]

第三步：在文件中编写代码：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ubGsp90z-1681217507697)(assets/1668097398103.png)]

标题标签<h1>定义最大的标题，<h6>定义最小的标题，代码如下：

<!-- 标识当前文档是HTML5 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 字符集 -->
    <meta charset="UTF-8">
    <!-- 浏览器兼容问题 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-基础文本标签</title>
</head>
<body>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
</body>
</html>

可以通过浏览器打开查看效果：具体操作如下：

注意：需要安装open in browser插件，可以参考安装教程

1667841197255

然后浏览器中呈现如下所示的效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-isOdvrtc-1681217507698)(assets/1668229223510.png)]

2.3.1.2 字体标签
标签属性描述
<font>字体标签，修饰文本的颜色、大小、样式
color设置文本的颜色
size设置文本的大小，取值为1-7，其中1最小，7最大
face用来设置字体。如 “楷体”、"宋体"等

对于color属性取值有3种，分别是

  • 英文单词：颜色的单词，例如red,blue等等，但是表示的颜色有限制
  • rgb(值1，值2，值3)：三原色表示法，取值范围为0-255之间
  • #值1值2值3：还是三原色表示法，上述的简写方式，取值是16进制法，所以在00-FF之间

我们可以添加如下代码：

 <font color="#00FF00" size="6" face="楷体">HTML,基础标签</font>

浏览器打开效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sW3LZVTx-1681217507698)(assets/1668098311751.png)]

2.3.1.3 水平线标签
<hr>

浏览器打开呈现的效果如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qEhWa1Ut-1681217507699)(assets/1668098529577.png)]

2.3.1.4 居中标签
<center>HTML</center>
<hr>

浏览器刷新观察效果如图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YGyGtctu-1681217507699)(assets/1668098726749.png)]

2.3.1.5 斜体、加粗、下划线标签
标签描述
<b>加粗
<i>斜体
<u>下划线

添加如下代码：

HTML 
<i>HTML</i> 
<b>HTML</b> 
<u>HTML</u>
<hr>

浏览器效果如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OHgTmu6M-1681217507699)(assets/1668099261565.png)]

2.3.1.6 换行标签
HTML <br>
<i>HTML</i> <br>
<b>HTML</b> <br>
<u>HTML</u> <br>
<hr>

浏览器重新刷新效果如下所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NOq191Dh-1681217507700)(assets/1668099466667.png)]

2.3.1.7 段落标签
已经有包括上汽、吉利、百度、斑马智行等20余家汽车、自动驾驶相关企业在沪开放体验。<br>
而在更南的位置，粤港澳大湾区在广州、深圳二城的引领下，正在自动驾驶赛道上加速。
<hr>

刷新浏览器效果如图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-huNgouxK-1681217507700)(assets/1668099678835.png)]

<p>已经有包括上汽、吉利、百度、斑马智行等20余家汽车、自动驾驶相关企业在沪开放体验。</p>
<p>而在更南的位置，粤港澳大湾区在广州、深圳二城的引领下，正在自动驾驶赛道上加速。</p>

刷新浏览器如图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tqL94R3u-1681217507701)(assets/1668099816024.png)]

全部代码如下：

<!-- 标识当前文档是HTML5 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 字符集 -->
    <meta charset="UTF-8">
    <!-- 浏览器兼容问题 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-基础文本标签</title>
</head>
<body>
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
    
    <!-- 
        HTML颜色描述:
            1. 英文单词: red, green, blue
            2. RGB(值1, 值2, 值3): 红色, 绿色, 蓝色 ---- 0-255  (不推荐)
            3. #值1值2值3 : 红色, 绿色, 蓝色 ----------- 00-FF (十六进制)
     -->
    <font color="#00FF00" size="6" face="楷体">HTML,基础标签</font>

    <hr>

    <center>HTML</center>

    <hr>

    HTML <br>
    <i>HTML</i> <br>
    <b>HTML</b> <br>
    <u>HTML</u> <br>

    <hr>

    已经有包括上汽、吉利、百度、斑马智行等20余家汽车、自动驾驶相关企业在沪开放体验。<br>

    而在更南的位置，粤港澳大湾区在广州、深圳二城的引领下，正在自动驾驶赛道上加速。

    <hr>

    <p>已经有包括上汽、吉利、百度、斑马智行等20余家汽车、自动驾驶相关企业在沪开放体验。</p>

    <p>而在更南的位置，粤港澳大湾区在广州、深圳二城的引领下，正在自动驾驶赛道上加速。</p>
    
</body>
</html>

整个网页效果如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NSLAirWr-1681217507701)(assets/1668099928582.png)]

2.3.2 图片音频视频标签

标签属性描述
<img>在页面上引入图片的
height用来定义图片的高度
width用来定义图片的宽度
src规定显示图像的 url（统一资源定位符）
<audio>定义音频(支持MP3、MAV、OGG)
src规定音频的 url
controls显示播放控件
<video>定义视频(支持MP4、WebM、OGG)
src规定视频的 url
controls显示播放控件

第一步：首先在html目录下分别创建用于存放视频，音频，图片的video,audio,img文件夹，然后把资料提供的视频，音频，图片分别复制到对应的目录下，最后效果如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2tGMuoWR-1681217507702)(assets/1668013517401.png)]

第二步：创建名为02. HTML-图片音频视频标签.html的文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KEHD8sRD-1681217507702)(assets/1668100655848.png)]

然后我们编写3个标签，分别去引入资源

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-图片音视频标签</title>
</head>
<body>
    
    <!-- 
        路径: 
            1. 绝对路径: 绝对磁盘路径 , 绝对网络路径
            2. 相对路径: 
                当前路径: .     ./img/01.jpg  == img/01.jpg
                上级目录: ..
        尺寸单位:
            1. 像素 px
            2. 百分比 %
     -->
    <!-- <img src="C:\Users\Administrator\Pictures\Camera Roll\1.jpg" > -->
    <!-- <img src="https://p2.img.cctvpic.com/photoworkspace/contentimg/2022/09/19/2022091919443292317.jpg" > -->
    <img src="img/01.jpg" height="200" width="300">

    <audio src="audio/01.mp3" controls></audio>

    <video src="video/01.mp4" controls height="200" width="300"></video>
     
</body>
</html>

第三步：使用浏览器打开后，呈现的完整效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jEQ7DkSX-1681217507703)(assets/1667841948519.png)]

注意：在此案例中，需要填写视频等资源的路径，路径建议采用相对路径，如果路径写错了，那么浏览器上是不会展示对应的资源的

2.3.3 超链接表格标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2eRcXLmb-1681217507703)(assets/1667842460626.png)]

标签属性描述
<a>定义超链接，用于连接到另一个资源
href指定需要访问的资源的URL·
target_self,默认值，在当前页面打开, _blank在空白页打开
<table>定义表格
broder规定表格边框的粗细
width规定表格的宽度
cellspacing规定单元格之间的空白
<tr>定义表格的行
align定义表格行的内容对齐方式
<td>定义普通单元格
<th>定义表头单元格，会有加粗居中的效果

第一步：创建名为03. HTML-超链接表格标签.html的文件，如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jm9bystB-1681217507704)(assets/1668014394364.png)]

第二步：编写如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-超链接表格标签</title>
</head>
<body>

    <a href="https://www.itcast.cn" target="_self">传智教育</a> <br>

    <a href="https://www.itheima.com" target="_blank">黑马程序员</a>

</body>
</html>

打开浏览器，效果如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cRSBhmYq-1681217507704)(assets/1668104421608.png)]

表格标签，添加如下代码；

<hr><hr>  
<table width="50%" border="1" cellspacing="0">
        <tr>
            <th>序号</th>
            <th>品牌Logo</th>
            <th>品牌名称</th>
            <th>企业名称</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td><img src="img/huawei.jpg" height="50" width="70"></td>
            <td>华为</td>
            <td>华为技术有限公司</td>
        </tr>
        <tr align="center">
            <td>002</td>
            <td><img src="img/alibaba.jpg" height="50" width="70"></td>
            <td>阿里</td>
            <td>阿里巴巴集团控股有限公司</td>
        </tr>
    </table>

刷新浏览器，显示如下效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JejM0MYN-1681217507705)(assets/1668104530206.png)]

2.3.4 布局标签

标签描述
<div>定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局页面。
<span>用来组合行内元素。一般用来展示文本

如下图所示的网页：我们需要先针对网页进行排版，即把网页分成不同的区域，然后再在各区域内填充内容，这就是布局，需要借助div标签来完成。而<span>一般修饰文本内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CeJg9FO6-1681217507705)(assets/1667959196932.png)]

第一步：在VS Code中创建名为04. HTML-布局标签.html的文件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-08SlLIr9-1681217507706)(assets/1668014566080.png)]

第二步：编写如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-布局标签</title>
</head>
<body>

    <div>我是div1</div>
    <div>我是div2</div>

    <span>我是span1</span>
    <span>我是span2</span>

</body>
</html>

第三步：使用浏览器打开，效果如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ekm8qtYO-1681217507706)(assets/1667959468972.png)]

注意：

  • div占据一整行，span仅仅占据文本部分
  • div的高度想要高一点，可以通过css设置高度，此处我们不做演示。

2.3.5 表单标签

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PKnrPXD7-1681217507707)(assets/1668055779440.png)]

表单标签以及其含义如下表格所示：

标签属性描述
<form>定义表单的
action定义表单数据提交的服务器地址
method定义表单数据提交的方式，一般有get和post这2种

表单项标签如下：

标签属性描述
<input>定义表单项，通过type属性控制输入形式,接受用户的信息
type定义input表单项的表现形式，例如：文本框，密码框等
<select>定义下拉列表，字标签定义选项
<textarea>定义文本域

表单项标签和表单标签是配合在一起工作的，表单项标签必须书写在表单标签中

第一步：创建名为05. HTML-表单标签.html的文件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MPWllvI6-1681217507707)(assets/1668014985661.png)]

第二步：编写如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-表单标签</title>
</head>
<body>
    <form>
        <input type="text" name="username">
        <input type="text" name="age">
        <input type="submit" value="提交">
    </form>

</body>
</html>

第三步：浏览器打开，页面展示效果如下所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EqwMRoVs-1681217507708)(assets/1667960791586.png)]

当我们点击提交时，我们数据提交到哪里去呢？以什么方式去提交呢？

<form action="" method="get">

第四步：然后我们编写内容，f12打开浏览器开发者工具，此处建议使用谷歌浏览器，来到network标签页进行抓包

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DdISuAC9-1681217507709)(assets/1668015339041.png)]

第五步：点击提交按钮，观察抓包的结果

此处需要注意，表单提交的方式如果是get，那么提交表单时，参数会遵循 url?key=value&key=value的格式跟在地址的后面，其中，value就是用户填写的内容，自习观察key，key是表单项标签name的属性值。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zgpuKaTk-1681217507709)(assets/1668015534555.png)]

第六步：然后我们修改表单标签的method属性值为post，然后再次提交表单，并且抓包，效果如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W53eCCBY-1681217507709)(assets/1668015886516.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZzGGd7KY-1681217507710)(assets/1668016085857.png)]

此时我们发现，提交的方式是post，但是地址的后面没有提交的参数了，我们可以去Payload页去查看post请求提交的参数：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-158ofqzH-1681217507710)(assets/1668016321733.png)]

最终完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-表单标签</title>
</head>
<body>

    <!-- 
        action: 表单数据提交的url , 如果未指定, 默认提交到当前页面.

                表单项要想被提交必须指定name属性

        method: 表单提交方式 ; 
            get: 默认值 , 表单数据在url后面拼接  ?username=java&age=22 ; url长度有限 .
            post
     -->
    <form action="" method="post">
        <input type="text" name="username">
        <input type="text" name="age">
        <input type="submit" value="提交">
    </form>

</body>
</html>

2.3.6 表单项标签

标签属性描述
<input>定义表单项，通过type属性控制输入形式,接受用户的信息
type定义input表单项的表现形式，例如：文本框，密码框等
<select>定义下拉列表，<option>字标签定义选项
<textarea>定义文本域

type取值以及表现形式如下：

type取值描述描述形式
text默认值，定义单行的输入字段[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TSSmCEZ1-1681217507711)(assets/1668016526099.png)]
password定义密码字段[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-23kTuhJT-1681217507711)(assets/1668016722147.png)]
radio定义单选按钮[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uYGBdJi5-1681217507712)(assets/1668016732096.png)]
checkbox定义复选框[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WhX9O5bh-1681217507712)(assets/1668016743982.png)]
file定义文件上传按钮[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-07XUcOeo-1681217507712)(assets/1668016758205.png)]
hidden定义隐藏域
submit定义提交按钮，提交按钮会把表单数据发送到服务器端[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aNHL4fqy-1681217507713)(assets/1668016767325.png)]
reset定义重置按钮，重置按钮会清除表单中的所有数据[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MpJMZgPQ-1681217507713)(assets/1668016779793.png)]
button定义可点击按钮[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bueelPzq-1681217507714)(assets/1668016788307.png)]

第一步：在VS Code中创建名为06. HTML-表单项标签.html的文件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dJ9gHbOe-1681217507714)(assets/1668016882968.png)]

第二步：编写如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML-表单项标签</title>
</head>
<body>
<!-- value: 表单项提交的值 -->
<form action="http://wwww.baidu.com" method="post">
     姓名: <input type="text" name="name"> <br><br>

     密码: <input type="password" name="password">  <br><br> 

     性别: <input type="radio" name="gender" value="1"> 男
          <input type="radio" name="gender" value="2"> 女  <br><br>

     爱好: <input type="checkbox" name="hobby" value="java"> java 
          <input type="checkbox" name="hobby" value="game"> game 
          <input type="checkbox" name="hobby" value="sing"> sing  <br><br>

     图像: <input type="file" name="image">  <br><br>

     学历: <select name="degree">
               <option value="">----------- 请选择 -----------</option>
               <option value="1">初中</option>
               <option value="2">高中</option>
               <option value="3">大专</option>
               <option value="4">本科</option>
               <option value="5">硕士</option>
               <option value="6">博士</option>
          </select>  <br><br>
     描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br>
     
     <input type="hidden" name="id" value="1">
     <!-- 表单常见按钮 -->
     <input type="submit" value="提交">  
     <input type="reset" value="重置"> 
     <input type="button" value="按钮">  <br>
</form>

</body>
</html>

第三步：使用浏览器打开，页面展示效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JTaJQoyO-1681217507715)(assets/1668229905732.png)]

第四步：填写完数据，f12打开浏览器的开发者工具，选择网络，进行抓包，然后点击提交按钮，抓包效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gwIRCK5p-1681217507715)(assets/1667961431464.png)]

抓包结果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-m19yGqSQ-1681217507716)(assets/1667962429330.png)]

数据提交的原始格式是：key=value&key=value，其中key是表单的name的属性值，value就是表单提交的值。

3 CSS

3.1 css介绍

第一步：在VS Code中创建名为07. CSS-介绍.html的文件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iVDe00N0-1681217507716)(assets/1668017205875.png)]

第二步: 编写如下代码，需要注意的是<style>标签中书写的是css样式，我们先照着写即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-介绍</title>
    <style>
        div{
            color:red;
            font-size: 40px;
        }
    </style>
</head>
<body>
    
    <div>Hello CSS</div>

</body>
</html>

第三步：浏览器打开页面，效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XjXixPJY-1681217507717)(assets/1667963055406.png)]

3.2 css引入方式

名称语法描述示例
内联样式在标签内使用style属性，属性值是css属性键值对[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HAVEVEMi-1681217507717)(assets/1668017757493.png)]
内部样式定义<style>标签，在标签内部定义css样式[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3AKwm9Jt-1681217507718)(assets/1668017702953.png)]
外部样式定义<link>标签，通过href属性引入外部css文件[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Or09z0Fu-1681217507718)(assets/1668017774832.png)]

对于上述3种引入方式，企业开发的使用情况如下：

  1. 内联样式, 会出现大量的代码冗余，不方便后期的维护，所以不常用。
  2. 内部样式，通过定义css选择器，让样式作用于指定的标签上
  3. 外部样式，html和css实现了完全的分离，企业开发常用方式。

第一步：我们CS Code中创建名为08. CSS-引入方式.html的文件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vxez9pK6-1681217507719)(assets/1668018322115.png)]

第二步：我们首先演示内联样式，按照内联样式的语法，我们编写如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-引入方式</title>
</head>
<body>
    <!-- 内联样式 -->
    <div style="color: red; font-size:40px">CSS 引入方式</div>
</body>
</html>

第三步：我们通过浏览器打开观察效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PvS6Kh1j-1681217507720)(assets/1668018581006.png)]

第四步：我们接下来注释掉内联样式，按照内部样式的语法演示内部样式，修改代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-引入方式</title>
    <!-- 内部样式 -->
    <style>
        div{
            color: red; 
            font-size:40px
        }
    </style>
</head>
<body>

    <!-- 内联样式 -->
    <!-- <div style="color: red; font-size:40px">CSS 引入方式</div> -->
    <div>CSS 引入方式</div>
    <div>CSS 引入方式</div>
</body>
</html>

新增内容：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Okls2mG4-1681217507720)(assets/1668018794824.png)]

第五步：打开浏览器观察效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WdQaOD85-1681217507721)(assets/1668018832540.png)]

第六步：接下来我们演示外部样式，我们先在VS Code中创建css目录，然后创建文件，重命名为demo.css,

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nmER8PrJ-1681217507721)(assets/1668018155880.png)]

第七步：在demo.css文件中编写如下的css代码：

div{
    color:aqua; 
    font-size:40px
}

第八步：我们注释掉内部样式，新增<link>标签来引入外部css文件，完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-引入方式</title>
    <!-- 内部样式 -->
    <!-- <style>
        div{
            color: red; 
            font-size:40px
        }
    </style> -->
    <!-- 外部样式 -->
    <link rel="stylesheet" href="css/demo.css">
</head>
<body>

    <!-- 内联样式 -->
    <!-- <div style="color: red; font-size:40px">CSS 引入方式</div> -->
    <div>CSS 引入方式</div>
    <div>CSS 引入方式</div>
</body>
</html>

新增内容：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-msuM0FMm-1681217507721)(assets/1668019011221.png)]

第九步：打开浏览器观察效果如图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dD5XK6dV-1681217507722)(assets/1668019050385.png)]

3.3 选择器和属性

选择器通用语法如下：

选择器名   {
    css样式名：css样式值;
    css样式名：css样式值;
}

我们需要学习的3种选择器是元素选择器，id选择器，class选择器，语法以及作用如下：

1.元素（标签）选择器：

  • 选择器的名字必须是标签的名字
  • 作用：选择器中的样式会作用于所有同名的标签上
元素名称 {
    css样式名:css样式值；
}

例子如下：

 div{
     color: red;
 }

2.id选择器:

  • 选择器的名字前面需要加上#
  • 作用：选择器中的样式会作用于指定id的标签上，而且有且只有一个标签
#id属性值 {
    css样式名:css样式值；
}

例子如下：

#did{
    color: blue;
}

3.类选择器：

  • 选择器的名字前面需要加上.
  • 作用：选择器中的样式会作用于所有class的属性值和该名字一样的标签上，可以是多个
.class属性值 {
    css样式名:css样式值；
}

例子如下：

.cls{
     color: aqua;
 }

接下来我们需要通过代码来演示3种选择器的作用：

第一步：在VS Code中创建名为09. CSS-选择器.html的文件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-otmSy8ST-1681217507722)(assets/1668020096836.png)]

第二步：遵循上述的3种选择器语法，编写如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-选择器</title>
    <style>
        div{
            color: red;
        }

        #did{
            color: blue;
        }

        .cls{
            color: aqua;
        }
    </style>
</head>
<body>

    <div>Hello CSS</div>

    <div id="did">Hello CSS id</div>

    <div class="cls">Hello CSS class</div>
    
</body>
</html>

第三步：打开浏览器，观察效果如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WMMFp8rv-1681217507723)(assets/1668020166666.png)]

css的属性有很多，参考文档https://www.w3school.com.cn/cssref/index.asp

4 JavaScript

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oTA4XFgQ-1681217507723)(D:\heima2023\讲师资料\03-Web开发14天\day01-HTML-CSS-JavaScript\讲义\assets\JS介绍.jpg)]

4.1 介绍

打开代码/js效果演示提供资料

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dRQC7U6g-1681217507723)(assets/1668020635987.png)]

通过浏览器打开，我们点击主题5按钮，页面的主题发生了变化，所以js可以让我们的页面更加的智能，让页面和用户进行交互。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g2lYVyBi-1681217507724)(assets/1667964998343.png)]

4.2 引入方式

**第一种方式：**内部脚本，将JS代码定义在HTML页面中

  • JavaScript代码必须位于<script></script>标签之间
  • 在HTML文档中，可以在任意地方，放置任意数量的<script>
  • 一般会把脚本置于<body>元素的底部，可改善显示速度

例子：

<script>
    alert("Hello JavaScript")
</script>

**第二种方式：**外部脚本将， JS代码定义在外部 JS文件中，然后引入到 HTML页面中

  • 外部JS文件中，只包含JS代码，不包含&ltscript>标签
  • 引入外部js的<script>标签，必须是双标签

例子：

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

注意：demo.js中只有js代码，没有<script>标签

第一步：在VS Code中创建名为10. JS-引入方式.html的文件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rh9mTL3A-1681217507724)(assets/1668020876108.png)]

第二步：按照上述第一种内部脚本的方式引入js，编写如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-引入方式</title>
    <!-- 内部脚本 -->
    <script>
        alert('Hello JS');
    </script>
</head>
<body>
</body>
</html>

第三步：浏览器打开效果如图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GXV5taXY-1681217507724)(assets/1668020985363.png)]

第四步：接下来演示外部脚本，注释掉内部脚本，然后在css目录同级创建js目录，然后创建一个名为demo.js的文件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZRvGVxv0-1681217507725)(assets/1668021080890.png)]

第五步：在demo.js中编写如下js内容：

alert('Hello JS2');

第六步：注释掉之前的内部脚本代码，添加<script>标签来引入外部demo.js文件,具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-引入方式</title>
    <!-- 内部脚本 -->
    <!-- <script>
        alert('Hello JS');
    </script> -->

    <!-- 外部脚本 -->
    <script src="js/demo.js"></script>
</head>
<body>

</body>
</html>

第七步：浏览器刷新效果如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YYk8AFMf-1681217507725)(assets/1668021241174.png)]

4.3 基础语法

4.3.1 书写语法

  • 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的

  • 每行结尾的分号可有可无

  • 大括号表示代码块

  • 注释：

    • 单行注释：// 注释内容

    • 多行注释：/* 注释内容 */

我们需要借助js中3钟输出语句，来演示书写语法

api描述
window.alert()警告框
document.write()在HTML 输出内容
console.log()写入浏览器控制台

第一步：在VS Code中创建名为11. JS-基础语法-输出语句.html的文件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WzBmmzt0-1681217507725)(assets/1668021614357.png)]

第二步：按照基本语法规则，编写3种输出语句的代码，并且添加注释，具体代码如下；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-基本语法</title>
</head>
<body>
    
</body>
<script>
    /* alert("JS"); */
    //方式一: 弹出警告框
    window.alert("hello js");
</script>
</html>

浏览器打开如图所示效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SWedZof0-1681217507726)(assets/1668101592422.png)]

添加代码 document.write(“hello js”); 来输出内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-基本语法</title>
</head>
<body>
    
</body>
<script>
    /* alert("JS"); */

    //方式一: 弹出警告框
    // window.alert("hello js");

    //方式二: 写入html页面中
    document.write("hello js");

</script>
</html>

刷新浏览器，效果如图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TrpVH3oc-1681217507726)(assets/1668101718354.png)]

console.log(“hello js”); 写入到控制台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-基本语法</title>
</head>
<body>
    
</body>
<script>
    /* alert("JS"); */

    //方式一: 弹出警告框
    // window.alert("hello js");

    // //方式二: 写入html页面中
    // document.write("hello js");

    //方式三: 控制台输出
    console.log("hello js");
</script>
</html>

浏览器f12抓包，去控制台页面，如图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9B9jrYP4-1681217507726)(assets/1668101840992.png)]

4.3.2 变量

js中主要通过如下3个关键字来声明变量的：

关键字解释
var早期ECMAScript5中用于变量声明的关键字
letECMAScript6中新增的用于变量声明的关键字，相比较var，let只在代码块内生效
const声明常量的，常量一旦声明，不能修改

在js中声明变量还需要注意如下几点：

  • JavaScript 是一门弱类型语言，变量可以存放不同类型的值 。
  • 变量名需要遵循如下规则：
    • 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
    • 数字不能开头
    • 建议使用驼峰命名

第一步：在VS Code中创建名为 12. JS-基础语法-变量.html的文件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OZ3kqzgy-1681217507727)(assets/1668022078783.png)]

第二步：编写代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-基础语法</title>
</head>
<body>
    
</body>
<script>

    //var定义变量
    var a = 10;
    a = "张三";
    alert(a);

</script>
</html>

可以看到浏览器弹出张三

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fTPPkGBH-1681217507727)(assets/1668101996370.png)]

在js中，我们var声明的变量可以接受任何数据类型的值。并且var声明的变量的作用于是全局的

<script>
    //var定义变量
    // var a = 10;
    // a = "张三";
    // alert(a);

    //特点1 : 作用域比较大, 全局变量
    {
        var x = 1;
    }
    alert(x);
</script>

浏览器照样成功弹出：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V5jjfqnW-1681217507727)(assets/1668102183766.png)]

var关键字声明的变量可以重复定义，修改代码如下：

{
     var x = 1;
     var x = "A";
}
alert(x);

浏览器弹出内容是A

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LMicFmBZ-1681217507728)(assets/1668102256305.png)]

所以在ECMAScript 6 新增了 let关键字来定义变量，它的用法类似于 var，但是所声明的变量，只在 let关键字所在的代码块内有效，且不允许重复声明。注释掉之前的代码，添加代码如下：

<script>

    //var定义变量
    // var a = 10;
    // a = "张三";
    // alert(a);

    //特点1 : 作用域比较大, 全局变量
    //特点2 : 可以重复定义的
    // {
    //     var x = 1;
    //     var x = "A";
    // }
    // alert(x);
    
    //let : 局部变量 ; 不能重复定义 
    {
        let x = 1;
    }
    alert(x);

</script>

浏览器打开，f12抓包，来到控制台页面，发现报错，变量没有定义，说明let声明的变量在代码块外不生效

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cKcRIQpM-1681217507728)(assets/1668102426953.png)]

let声明的变量不能重复定义

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wUR6R3Dc-1681217507728)(assets/1668102527993.png)]

在ECMAScript6中，还新增了const关键字用来声明常量，但是一旦声明，常量的值是无法更改的

    const pi = 3.14;
    pi = 3.15;
    alert(pi);

浏览器f12抓包，来到控制台页面发现直接报错了，

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7f3Le9tP-1681217507728)(assets/1668102736759.png)]

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-基础语法</title>
</head>
<body>
    
</body>
<script>

    //var定义变量
    // var a = 10;
    // a = "张三";
    // alert(a);

    //特点1 : 作用域比较大, 全局变量
    //特点2 : 可以重复定义的
    // {
    //     var x = 1;
    //     var x = "A";
    // }
    // alert(x);

    //let : 局部变量 ; 不能重复定义 
    // {
    //     let x = 1;
    //     alert(x);
    // }
    
    //const: 常量 , 不能给改变的.
    const pi = 3.14;
    pi = 3.15;
    alert(pi);

</script>
</html>

4.3.3 数据类型和运算符

js中的数据类型分为 ：原始类型 和 引用类型，具体有如下类型

数据类型描述
number数字（整数、小数、NaN(Not a Number)）
string字符串，单双引皆可
boolean布尔。true，false
null对象为空
undefined当声明的变量未初始化时，该变量的默认值是 undefined

第一步：在VS Code中创建名为13. JS-基础语法-数据类型.html的文件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VCAA8f4Z-1681217507729)(assets/1668022626367.png)]

第二步：编写如下代码，然后直接挨个观察数据类型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-数据类型</title>
</head>
<body>

</body>
<script>

    //原始数据类型
    alert(typeof 3); //number
    alert(typeof 3.14); //number

    alert(typeof "A"); //string
    alert(typeof 'Hello');//string

    alert(typeof true); //boolean
    alert(typeof false);//boolean

    alert(typeof null); //object 

    var a ;
    alert(typeof a); //undefined
    
</script>
</html>

js中的具体运算符如下：

运算规则运算符
算术运算符+ , - , * , / , % , ++ , –
赋值运算符= , += , -= , *= , /= , %=
比较运算符> , < , >= , <= , != , == , ===
逻辑运算符&& , || , !
三元运算符条件表达式 ? true_value: false_value

注意:

​ == 会进行类型转换

​ === 不会进行类型转换

第一步：在VS Code中创建名为14. JS-基础语法-运算符.html的文件：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p9Qs19c6-1681217507729)(assets/1668022845725.png)]

第二步：编写代码

在js中，绝大多数的运算规则和java中是保持一致的，但是js中的==和===是有区别的。

  • ==：只比较值是否相等，不区分数据类型，哪怕类型不一致，==也会自动转换类型进行值得比较
  • ===：不光比较值，还要比较类型，如果类型不一致，直接返回false
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-运算符</title>
</head>
<body>
    
</body>
<script>
     var age = 20;
     var _age = "20";
     var $age = 20;
    
     alert(age == _age);//true ，只比较值
     alert(age === _age);//false ，类型不一样
     alert(age === $age);//true ，类型一样，值一样

</script>
</html>

js中可以通过parseInt()函数来进行将其他类型转换成数值类型。

// 类型转换 - 其他类型转为数字
alert(parseInt("12")); //12
alert(parseInt("12A45")); //12
alert(parseInt("A45"));//NaN (not a number)

0,null,undefined,“”,NaN理解成false,反之理解成true。

 if(0){ //false
    alert("0 转换为false");
 }

浏览器刷新页面，发现没有任何弹框

if(1){ //true
    alert("除0和NaN其他数字都转为 true");
}

浏览器刷新，因为1理解成true，条件成立，所以浏览器效果如下；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RxyyYuOM-1681217507729)(assets/1668103531260.png)]

完整代码如下：

    // if(0){ //false
    //     alert("0 转换为false");
    // }
    // if(NaN){//false
    //     alert("NaN 转换为false");
    // }
    if(1){ //true
        alert("除0和NaN其他数字都转为 true");
    }

    // if(""){ //false
    //     alert("空字符串为 false, 其他都是true");
    // }
        
    // if(null){ //false
    //     alert("null 转化为false");
    // }
    // if(undefined){ //false
    //     alert("undefined 转化为false");
    // }

流程控制语句if，switch，for等和java保持一致

**需要注意的是：**在js中，0,null,undefined,“”,NaN理解成false,反之理解成true

一个处女座的暖男程序猿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
前端开发简介
m0_72410588的博客
04-27 814
在本篇博客中，我们介绍了前端开发的一些关键知识点，包括HTML、CSS、JavaScript和前端框架。随着互联网的快速发展，前端开发已经成为了一个非常重要的职业。如果想要成为一名优秀的前端开发人员，那么务必掌握这些技术，不断学习和实践。
前端开发6项基础知识（掌握必备）移动Web开发篇
heiioworld_的博客
04-09 1119
GPU英文全称是，中文翻译为图形处理器。GPU渲染是指使用图形处理单元（GPU）来渲染图像或视频的过程。GPU 是专门为处理图形数据而设计的硬件加速器，它可以比 CPU 更快地完成渲染任务。速度更快：GPU 可以比 CPU 更快地完成渲染任务，从而提高渲染效率。画质更好：GPU 可以支持更复杂的渲染技术，从而提高渲染质量。能耗更低：GPU 的能耗通常比 CPU 更低，从而提高设备的续航能力。游戏：游戏需要大量的渲染工作，因此 GPU 渲染在游戏中得到了广泛应用。
前端Web开发基础知识
2301_77599154的博客
05-02 1029
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
前端开发总结
Peanutfight的博客
05-01 1300
文章目录前言一、H5开发1.vscode使用live server1.h5获取url参数二、css样式1.设置属性保持同一水平 前言 记录一下工作，学习中遇到的H5开发的小技巧~ ~ 不定期更新 一、H5开发 1.vscode使用live server 1.插件直接搜索live server安装 2.设置setting.json "liveServer.settings.donotShowInfoMsg": true, "liveServer.settings.port": 9000, //设置本地服
在html中可以写div样式么,style样式写在<style></style>中，与写在<div></div>中有什么区别...
weixin_39915505的博客
05-31 645
这一段代码直接放到网页上运行，div是无法拖动的，但是如果把#div的样式，内联在div标签中，就可以拖动了，这是为什么？(js实现拖动div块#div{width: 500px;height: 300px;border: 2px solid #ccc;position: absolute;}var px,py;var div = document.getElementById('div');di...
HTML之样式定义、div布局、按钮布局
晴天的博客
03-13 1万+
HTML之样式定义、div布局、按钮布局
前端开发框架介绍.pdf
最新发布
05-28
以下是对前端开发框架的详细介绍，包括一些主流框架的特性、优点、应用场景以及性能对比。 一、前端开发框架的基本概念 前端开发框架是一套提供可重用组件、工具和方法论的代码库，旨在帮助前端开发人员更高效地...
前端开发框架对比
02-26
近几年随着jQuery、Ext以及CSS3的发展，以Bootstrap为代表的前端开发框架如雨后春笋般挤入视野，可谓应接不暇。不论是桌面浏览器端还是移动端都涌现出很多优秀的框架，极大丰富了开发素材，也方便了大家的开发。这些...
HBuilder前端开发工具
11-26
本文将详细介绍HBuilder的主要功能、特点以及如何使用它来提升前端开发效率。 一、HBuilder概述 HBuilder是由DCloud（数字天堂）开发的一款集成开发环境（IDE），专为HTML5、CSS、JavaScript等前端技术打造。它的...
前端开发HTML5
03-26
内有两个文件，其中一个为HTML5从入门到精通，适合小白下载学习。
CSS全局样式的设置，醍醐灌顶！
m0_60226911的博客
07-21 1312
二.技术基础知识 基础知识一直都是重点考察的内容，包含有HTML（5）、CSS（3）、JavaScript到Vue，React等等所有可能考察的知识。 基础知识不仅仅要知道是什么，更要明白怎么用，为什么这么用。死记硬背能应付一时，如果你遇到了想深入聊聊的面试官，死记硬背就没用了。所以每个知识点都要理解透彻，讲的清楚。 每次面试都要提前做好准备，下面是一些常考的面试知识点，大家可以提前准备 HTML(5)： 1）H5的新特性有哪些？ 2）Label的作用是什么？是怎么用的？ 3）HTML5的form如何关闭自
web前端开发（一）—HTML基础
热门推荐
mdxiaohu的博客
07-31 10万+
  目录 web前端简介 什么是HTML？ HTML标签 HTML基本结构 HTML 段落标签 HTML 换行标签 HTML标题 HTML 水平线 HTML注释 HTML 标签 HTML 列表标签 HTML表格 HTML超链接 HTML 图片 HTML表单 表单元素-文本、密码框 表单元素-多行文本框 表单元素-选择框 表单元素-下拉选择框 表单元素-按钮...
送给大家一套完整的web前端开发学习路线
liuyingv8的博客
11-21 2万+
本文来源：千锋web前端开发 近几年IT业可谓是发展火热，而且新生了很多的职业。在这众多的新生职业中备受瞩目的当属web前端工程师了，web前端在IT行业真正受到重视的时间不超过五年，但是web前端的发展前景却是非常的可观，好前景高薪资吸引了众多的人投入到前端开发的学习当中去，想学好web前端，这份web前端开发学习路线分享给你。     好的学习方法和掌握好正确的学习路线可以让我们的...
快速入门Web前端开发
Kevinvcc200的博客
09-30 2万+
入门标准 入门标准很简单，就一条：达到能参与 Web 前端实际项目的开发水平。请注意，是实际项目，这就需要了解如今的实际项目开发都用了哪些技术栈。HTML/CSS/JavaScript 这三大基础技术栈肯定是需要掌握的，但要能参与实际项目开发，肯定还要掌握其他一些主流的框架体系。 几年前， jQuery + Bootstrap 可以说是一统江湖，是前端领域的绝对霸主。而这几年，随着 Angul...
大前端开发：前端如何开发 APP
GitChat
07-03 8万+
做为一个前端开发人员，有时候除去传统的前端开发还需要进行其他开发，比如公众号开发，小程序开发，APP 开发。 本场 Chat 将带你从0开始，基于 APICloud 进行 APP 开发，你只需要会前端就可以。 本场 Chat 主要内容为下: 什么是APICloud？ 开发工具的了解； 提供的前端框架； 相关 API； 控制台； 开始你的 APP 开发。 本场 Chat 将会用一个新的案例从0来...
前端开发规范手册（第一版）
caoyan0829的博客
07-12 3943
未经允许不得转载   伙伴行前端开发手册 伙伴行研发中心前端组    编     目录   一、     Airbnb...................................................................................... 6 （一）       JavaScript 编码规范.....................
真正意义上的前端开发
ccnanxi的博客
08-08 809
不说全栈这个词，我们先来看看web前端开发，有多少同学能直言不讳的说自己是前端工程师呢？比如我们办公室的程序员小哥，注意：此小哥是写PHP，但是我发现，他不光撸php也撸前端，同时也会点设计，当然我们每个人电脑出问题也会去找他，说全栈前端不是打击谁谁谁，而是我们需要反思一个问题：什么才是真正意义上的前端开发呢？     前端开发这个职业始于几年前，至今已发展的初步成熟了。如果你打算进入这个行
Python驱动的前端开发与挑战
它由潘俊勇分享，介绍了如何利用Python简化前端开发，特别是在B/S（浏览器/服务器）架构下的实践。 1. **前端开发的历史演变**： - **C/S时代**：传统的客户端-服务器模式，如PowerBuilder，以桌面应用为主，易于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值