前端开发介绍
前端开发,主要开发的是网页,如下图所示:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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中的标签都是预定义好的。
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
详细安装教程:参考 资料/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插件,可以参考安装教程
然后浏览器中呈现如下所示的效果:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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.imgtvpic/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" target="_self">传智教育</a> <br>
<a href="https://www.itheima" 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" 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种引入方式,企业开发的使用情况如下:
- 内联样式, 会出现大量的代码冗余,不方便后期的维护,所以不常用。
- 内部样式,通过定义css选择器,让样式作用于指定的标签上
- 外部样式,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/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代码,不包含<script>标签
- 引入外部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中用于变量声明的关键字 |
let | ECMAScript6中新增的用于变量声明的关键字,相比较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
更多推荐
前端开发介绍
发布评论