Web前端最全学习基础HTML、CCS、JavaScript 知识实现抽奖页面，java面试题

最新推荐文章于 2024-05-31 16:59:51 发布
最新推荐文章于 2024-05-31 16:59:51 发布
阅读量928 收藏 28
点赞数 19
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_82244330/article/details/138985462
版权

最后

你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我特地针对初学者整理一套前端学习资料

前端路线图

vue.js的36个技巧

  1. ⼀个head标签对：

⻚⾯的“头部”，⻚⾯的相关信息，⽐如标题，作者等等就写在这，这⾥内容是不会显示在浏览器的

  1. ⼀个body标签对：

⻚⾯的“身体”，⼀般⽹⻚绝⼤多数的标签代码都是在这⾥编写。主要显示在浏览器屏幕中的内容

第⼀个⻚⾯

标题

标题

段落标签

段落标签

⽂本标签

⽂本标签

⽂本标签

⽂本标签

⽂本标签

123 234 123 234 345 123 234 345

在这里插入图片描述

样式层CSS

  • 我们可以使⽤style属性，为标签添加样式，如：

标题

标题

段落标签

  • 我们可以把这⼀类的样式，提出来包起来，并给它⼀个名字test。之后我们就⽤这个test为我们的标签添加样式

标题

段落标签

这个也就叫类选择器，选择出⼀类的标签添加样式。

选择器

顾名思义，就是选择到相应的标签进⾏修饰，其中主要的选择器有：

  1. 标签选择器（根据标签名称获取标签） 对⻚⾯中的所有该标签都有效

  2. ID选择器（获取标签id=xxx的标签）对⻚⾯中指定id的标签进⾏修饰，⼀般都是修饰唯⼀的标签

  3. 类选择器（获取标签class=xxx的标签）可以选择⻚⾯中的⼀组标签，class=”xxx”的⼀组标签进⾏

修饰

  1. 包含选择器（获取某类标签中的所有的⼦标签）

  2. …

  • CSS⽂字属性

font-family 字体类型 font-family：微软雅⿊,Arial,Times New Roman;

font-size 字体⼤⼩ font-size：16px;

font-weight 字体粗细 font-weight: normal/lighter/bold/bolder;

font-style 字体斜体 font-style: italic;

color 颜⾊ color: red;

  • 边框的三个属性

border-width 边框的宽度

border-style 边框的外观

border-color 边框的颜⾊

  • CSS背景图像属性

background-image 定义背景图像的路径，这样图⽚才能显示嘛

background-repeat 定义背景图像显示⽅式，例如纵向平铺、横向平铺

background-position 定义背景图像在元素哪个位置

background-attachment 定义背景图像是否随内容⽽滚动

background:url(images/11.jpg) no-repeat;定义背景图像不重复出现

  • 盒⼦模型

外边距margin，边框border，内边距padding

对于child块标签，边框到⽗标签之间的距离是外边距margin，边框是border，⽽child的内容到边框的距离就叫做内边距padding，他们都是有上下左右之分。

在这里插入图片描述

⾏为层JavaScript

  • avaScript是⼀⻔编程语⾔，有很多的内容，⽐如变量、操作符、分⽀循环语句、函数⽅法等等，再深⼊还有⾯向对象、原型、闭包、作⽤域等等内容
  1. 动态改变⻚⾯内容

HTML⻚⾯是静态的，⼀旦编写，内容是⽆法改变的。JavaScript可以弥补这个不⾜，可以将内容动态地显示在⽹⻚中。

  1. 动态改变⽹⻚的外观

JavaScript通过修改⽹⻚元素的CSS样式，达到动态地改变⽹⻚的外观。

  1. 验证表单数据

我们常⻅的在各⼤⽹站中的注册中的验证功能，就是JavaScript实现的。

  1. 响应事件

JavaScript是基于事件的语⾔。例如点击⼀个按钮弹出⼀个对话框，就是⿏标点击触发的事件

⻚⾯中试试看

  • 实现点击改变子颜色和点击显示倒计时
第一个页面

标题一

标题二

段落内容

段落内容

段落内容

段落内容

文本标签1也叫做文本行标签

文本标签2也叫做文本行标签

<span class=“test2” id=“content2” οnclick=“clickme()”>文本标签3也叫做文本行标签

块标签

块标签

块标签

我是列 我跨越俩列 我是列 我是列 我跨越俩行 我是列 我是列 我是列 我是列
2301_82244330
关注
  • 19
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Java学习笔记CCS AJAX DMS JSP servlet JavaScript等中文笔记整理.rar
11-23
Java学习笔记CCS AJAX DMS JSP servlet JavaScript等中文笔记整理，可供学习设计参考。
HTML、XHTML、CSS与JavaScript入门经典_html_javascript_CCS_xhtml_
10-04
HTML和XHTML:HTML和XHTML用千解释网页的结构。如果查看这种页面， 就会发现它们由大址的单词构成。
室内运动场馆管理系统源码（后端QT开发，前端设备ESP32，html+js+ccs）.zip
02-19
室内运动场馆管理系统源码（后端QT开发，前端设备ESP32，html+js+ccs）.zip室内运动场馆管理系统源码（后端QT开发，前端设备ESP32，html+js+ccs）.zip室内运动场馆管理系统源码（后端QT开发，前端设备ESP32，...
html+ccs+JavaScript的网页课程大作业
12-16
html+ccs+JavaScript的网页课程大作业，解压后点击index.html即可打开网页。成品课程大作业，完整网页，可以作为网页设计的简单模板。
毕设项目：室内运动场馆管理系统，后端QT开发，前端设备ESP32，html+js+ccs.zip
10-21
毕设项目：室内运动场馆管理系统，后端QT开发，前端设备ESP32，html+js+ccs.zip 1、该资源内项目代码经过严格调试，下载即用确保可以运行！ 2、该资源适合计算机相关专业(如计科、人工智能、大数据、数学、电子信息...
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 334
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
记录一次前端页面崩溃的产生及处理
weixin_51123079的博客
05-30 411
记录一次前端页面崩溃的产生及处理
web前端三大主流框架
低调做人，低调编码，神码都是浮云
05-30 877
Web前端三大主流框架介绍：Angular、React、Vue
【JS实战案例汇总——不定时更新版】
微木
05-30 217
练习JS的实用案例
python前端通过API接口调用与后端进行数据交互前端如何调用api接口通过关键词获取电商平台热销商品数据
2301_78159247的博客
05-23 777
请求参数：q=女装&start_price=0&end_price=0&page=1&cat=0&discount_only=&sort=&page_size=&seller_info=&nick=&ppath=&imgid=&filter=参数说明：q:搜索关键字。
Flutter 中的 SizeChangedLayoutNotifier 小部件：全面指南
smileKH的博客
05-28 475
是一个混合了和行为的布局小部件。它允许子组件在尺寸变化时发送通知，而其他组件可以订阅这些通知来响应尺寸变化。
前端知识1-4：性能优化进阶
kuangjianming的博客
05-29 836
开始解析渲染DOM树的时间 => readyState变成loading => readystatechange。表示从上一个文档卸载结束时 => 如果没有上一个文档，这个值和fetchStart相等。b. 整体化内容插入 => 影响整体布局 => 重排 => 重绘。第一个http重定向发生和结束的时间。完成解析 => dom树解析完成时间。浏览器准备好使用请求获取文档的时间。HTTP开始建立连接的时间。TCP开始建立连接的时间。HTTPS连接开始的时间。a. 减少JS的执行时间。加载网页内资源的时间。
低代码开发与前端架构
最新发布
dsgdauigfs的博客
05-31 754
这篇文章将深入探讨低代码开发如何改变前端开发的方式，以及如何有效地将低代码工具与现代前端架构原则结合起来，以提高开发效率和应用质量。
初级前端开发岗
软件猿扫地僧
05-31 176
日常任务的辅助执行者，前端基础建设的参与者。
go 针对 time类型字段，前端查询，后端返回数据格式为UTC时间
赴前尘
05-30 192
go 针对 time类型字段，前端查询，后端返回数据格式为UTC时间
前端 --- 检测当前页面(窗口)的可见性状态
weixin_55932347的博客
05-30 215
事件的行为在不同的浏览器中可能有所不同，因此在使用时需要注意浏览器兼容性。此外，一些移动设备或电脑的节能模式也可能会影响页面的可见性状态，进而触发这个事件。当用户切换到其他标签页、最小化浏览器窗口、或者将浏览器窗口隐藏在其他窗口后面时，页面的可见性会发生变化，此时就会触发visibilitychange事件。事件是一个在浏览器中的 Document 对象上触发的事件，用于检测当前页面的可见性状态是否发生变化。
前端项目上线
每天都要努力学习哦~~
05-28 946
其中的#SUBD1605080062959435就是 hash 值，hash 值只在客户端（如浏览器）中使用，是不会带给服务器的，所以使用 hash 模式时，不存在刷新 404 问题。istory 去掉了URL中的#号，可以让应用的URL看起来更美观，带来的问题就是刷新时，会将前端路由携带给后端，而后端没有对应资源的匹配，就出现了 404 问题。新建一个文件夹，执行npm init -y命令，生成package.json，再执行npm add express命令，下载express，成功之后如下图。
什么是前端标签：HTML标签的深入解析与运用
liyrbtqe_66w的博客
05-28 224
综上所述，前端标签是构建网页的基石，它们通过定义网页的内容、格式和结构，使得我们能够浏览到丰富多彩的网页内容。通过深入了解前端标签的定义、特性、常用标签及其作用、嵌套与组合方式以及未来发展与趋势等方面，我们可以更好地掌握前端开发的核心技能，为构建更加优秀的网页作品奠定坚实的基础。前端标签，即HTML标签，是HTML语言的基本单位，也是其最重要的组成部分。这些标签在网页中发挥着举足轻重的作用，它们定义了网页的内容、格式和结构，使得网页能够以我们熟悉的方式呈现在我们眼前。标签用于定义标题，其中。
WebGL实现医学教学软件
super_Dev_OP的博客
05-29 387
使用WebGL实现医学教学软件是一个复杂但非常有益的项目，可以显著提升医学教育的互动性和效果。以下是详细的实现步骤，包括需求分析、技术选型、开发流程和注意事项。北京木奇移动技术有限公司，专业的软件外包开发公司，欢迎交流合作。
html+ccs+js 登录注册页面
07-14
### 回答1： HTML、CSS和JS是构建登录注册页面的常用技术。 HTML（超文本标记语言）是用于构建页面结构和内容的标记语言，能够创造出标题、段落、列表等基本元素。在登录注册页面中，可以使用HTML来创建输入框、按钮、表单等元素，以便用户输入账号密码信息。 CSS（层叠样式表）用于设置页面的样式和布局，可以通过CSS定义元素的颜色、字体、大小、边框等样式属性，使登录注册页面具有美观的外观和用户友好的交互效果。 JavaScript（JS）是一种脚本语言，可以用于网页的动态交互和动态效果。在登录注册页面中，可以使用JavaScript来验证用户输入的账号密码是否符合要求，并进行相关提示或操作，例如检查密码强度、检查用户名是否已存在等。 在登录注册页面的开发中，可以先使用HTML构建页面的基本结构，包括输入框、按钮和表单等元素。然后，通过CSS设置页面的样式，使页面具有吸引人的外观。最后，使用JavaScript编写相应的逻辑代码，实现用户输入的验证和交互效果。 总之，HTML、CSS和JS是登录注册页面开发中不可或缺的技术，通过它们的结合使用，可以实现一个功能完善、外观美观的登录注册页面。 ### 回答2： HTML是一个网页的结构语言，它定义了网页的内容和组织结构。CSS是一种样式语言，用于定义网页的外观和布局。而JavaScript是一种脚本语言，用于实现网页的交互功能和动态效果。 登录注册页面是网站常见的功能之一，它允许用户创建账号并登录。下面是一个简单的登录注册页面的示例： HTML部分： ```html <!DOCTYPE html> <html> <head> <title>登录注册页面</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="container"> <h1>欢迎登录</h1> <form id="loginForm"> <label for="username">用户名:</label> <input type="text" id="username" required> <br> <label for="password">密码:</label> <input type="password" id="password" required> <br> <input type="submit" value="登录"> </form> <h1>创建新账号</h1> <form id="registerForm"> <label for="newUsername">用户名:</label> <input type="text" id="newUsername" required> <br> <label for="newPassword">密码:</label> <input type="password" id="newPassword" required> <br> <input type="submit" value="注册"> </form> </div> <script src="script.js"></script> </body> </html> ``` CSS部分（styles.css）： ```css .container { width: 300px; margin: 0 auto; } h1 { text-align: center; } form { margin-bottom: 20px; } label { display: block; } input[type="submit"] { margin-top: 10px; } ``` JavaScript部分（script.js）： ```javascript document.getElementById("loginForm").addEventListener("submit", function(event) { event.preventDefault(); // 阻止表单的默认提交行为 var username = document.getElementById("username").value; var password = document.getElementById("password").value; // 在这里进行登录验证，比如通过Ajax请求发送到后端进行验证 console.log("登录信息：", username, password); }); document.getElementById("registerForm").addEventListener("submit", function(event) { event.preventDefault(); var newUsername = document.getElementById("newUsername").value; var newPassword = document.getElementById("newPassword").value; // 在这里进行注册逻辑，比如创建新用户并保存到数据库中 console.log("注册信息：", newUsername, newPassword); }); ``` 以上是一个简单的登录注册页面的示例，用户可以输入用户名和密码进行登录，或者创建新账号进行注册。利用HTML定义页面结构，CSS设置样式，JavaScript实现登录和注册逻辑，实现了用户交互的功能。当用户点击登录或注册按钮时，对应的表单将会提交，并通过JavaScript进行处理。用户输入的信息可以通过JavaScript代码进行验证、保存或其他操作。 ### 回答3： HTML、CSS和JavaScript组成了登录注册页面的基本架构。 HTML用于创建页面的结构和内容，CSS用于设置页面的样式和布局，JavaScript用于实现页面的交互和动态效果。 登录注册页面需要包含以下内容： 1. 标题和Logo：使用HTML来创建页面的标题和Logo，可以使用h1标签添加标题，img标签添加Logo。 2. 表单：使用HTML中的form标签创建登录和注册表单。表单包含输入框和提交按钮，可以使用input标签创建输入框，并设置type属性为"text"或"password"，使用button或input标签创建提交按钮。 3. 样式：使用CSS来设置页面的样式，可以设置背景颜色、字体样式、输入框样式、按钮样式等。可以使用选择器来选择不同的元素，并设置相应的样式。 4. 验证：使用JavaScript来实现表单的验证。可以使用JavaScript中的事件监听器来监听表单提交事件，通过获取表单输入框的值进行验证，如检查输入框是否为空、密码是否符合要求等。可以使用alert弹窗或修改页面元素来显示验证结果。 5. 动态效果：使用JavaScript来实现页面的动态效果，如输入框聚焦时的样式变化、页面的过渡效果等。使用JavaScript中的事件监听器来监听输入框的聚焦事件，并通过修改元素的样式来实现效果。 总结： 通过HTML创建页面的结构和内容，通过CSS设置页面的样式和布局，通过JavaScript实现页面的交互和动态效果，可以创建出一个功能完善的登录注册页面。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值