web前端
关注
分享
扫一扫
HTML5+CSS3+js学习笔记
Code进阶狼人
Stay hungry and modest
展开
-
Javascript高级：BOM与DOM
Javascript高级DOM简单学习：为了满足案例要求* 功能：控制html文档的内容* 获取页面标签(元素)对象：Element * document.getElementById("id值"):通过元素的id获取元素对象* 操作Element对象： 1. 修改属性值： 1. 明确获取的对象是哪一个？ 2. 查看API文档，找其中有哪些属性可以设置 2. 修改标签体内容...原创 2020-04-01 14:18:29 · 321 阅读 · 0 评论 -
JavaScript第一篇：什么是JavaScript
JavaScript* 概念： 一门客户端脚本语言 * 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎 * 脚本语言：不需要编译，直接就可以被浏览器解析执行了* 功能： * 可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。 * JavaScript = ECMAScript + JavaScr...原创 2020-04-01 14:17:09 · 286 阅读 · 0 评论 -
Bootstrap开发旅游网站
Bootstrap开发旅游网站Bootstrap：1. 概念： 一个前端开发的框架，Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。 * 框架:一个半成品软件，开发人员可以在框架基础上，在进行开发，简化编码。 * 好处： 1. 定义了很多的css样式和js...原创 2020-04-01 14:14:52 · 2109 阅读 · 0 评论 -
前端学习笔记——HTML与CSS
HTML概念：是最基础的网页开发语言Hyper Text Markup Language 超文本标记语言超文本:超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本.标记语言:由标签构成的语言。<标签名称> 如 html，xml标记语言不是编程语言快速入门：语法：html文档后缀名 .html 或者 .htm...原创 2020-04-01 12:23:09 · 454 阅读 · 0 评论 -
HTML+CSS+JS实例——匀速动画与轮播图的实现
回顾以前的博文，我们用HTML+CSS+JS实现了很多有趣的功能，有：模拟日历发布会倒计时鼠标跟随商品图片局部放大现在我们用HTML+CSS+JS来实现匀速动画与轮播图匀速动画：每间隔30ms，移动盒子10px【重要】代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset...原创 2019-12-26 17:11:07 · 2095 阅读 · 0 评论 -
HTML+CSS+JS实例——商品图片局部放大
event应用举例：获取鼠标距离所在盒子的距离关键点： 鼠标距离所在盒子的距离 = 鼠标在整个页面的位置 - 所在盒子在整个页面的位置代码演示：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title&g...原创 2019-12-26 17:03:10 · 4063 阅读 · 0 评论 -
HTML实例——鼠标跟随
Event举例1：鼠标跟随代码实现：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { height: 500...原创 2019-12-26 16:34:54 · 3333 阅读 · 0 评论 -
HTML实例——发布会倒计时
上篇博文我们用HTML+CSS+JS实现了一个模拟日历HTML实例——模拟日历今天我们用HTML+CSS+JS来实现一个发布会倒计时的实例<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> &...原创 2019-12-26 15:13:48 · 531 阅读 · 0 评论 -
HTML实例——模拟日历
今天我们用HTML+CSS+JS来实现一个模拟日历<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: ...原创 2019-12-26 15:06:54 · 935 阅读 · 0 评论 -
JavaScript中的选择结构
前两篇博文我们对JavaScript有了初步的认识与学习JavaScript入门Javascript中的变量JavaScript中的运算符今天我们来学习JavaScript中的选择结构代码块用{}包围起来的代码，就是代码块。JS中的代码块，只具有分组的作用，没有其他的用途。代码块中的内容，在外部是完全可见的。举例： { var a = 2; ...原创 2019-12-26 12:10:09 · 786 阅读 · 0 评论 -
HTML——Web存储
Web 存储随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。H5 中有两种存储的方式1、window.sessionStorage 会话存储：保存在内...原创 2019-12-26 11:26:13 · 352 阅读 · 0 评论 -
HTML实例——简单的视频播放器
前两篇博文我们学习了HTML的表单事件与实现一个鼠标点击时，tab栏切换的实例今天我们来实现一个简单的视频播放器HTML——表单事件HTML举例-鼠标点击时，tab栏切换<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title><...原创 2019-12-26 11:20:26 · 5916 阅读 · 3 评论 -
HTML举例-鼠标点击时，tab栏切换
上篇博文我们学习了HTML的表单事件HTML——表单事件现在我们来学习一个HTML实例-鼠标点击时，tab栏切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Tab 标签</title> <sty...原创 2019-12-26 11:09:57 · 3427 阅读 · 0 评论 -
HTML——表单事件
表单事件oninput()：用户输入内容时触发，可用于输入字数统计。oninvalid()：验证不通过时触发。比如，如果验证不通过时，想弹出一段提示文字，就可以用到它。举例：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <titl...原创 2019-12-26 11:02:56 · 1218 阅读 · 0 评论 -
HTML标签图文详解（三）
前两篇博文我们学习了HTML的基础知识与标签HTML标签图文详解（一）HTML标签图文详解（二）现在我们开更加深入的学习本文主要内容列表标签：<ul>、<OL>、<dl>表格标签：<table>框架标签及内嵌框架<iframe>表单标签：<form>多媒体标签滚动字幕标签：<marquee>...原创 2019-12-26 10:54:31 · 534 阅读 · 0 评论 -
HTML标签图文详解（二）
上篇博文我们对HTML有了大致的认识并且熟悉了一些基本的标签HTML标签图文详解（一）接下来我们开始更加深入的学习<body>标签的属性其属性有：bgcolor：设置整个网页的背景颜色。background：设置整个网页的背景图片。text：设置网页中的文本颜色。leftmargin：网页的左边距。IE浏览器默认是8个像素。topmargin：网页的上边距。rig...原创 2019-12-25 17:41:08 · 847 阅读 · 0 评论 -
HTML标签图文详解（一）
前两篇博文我们熟悉了前端的开发利器VSCodeVSCode的安装与基本使用VSCode的好用的插件本文主要内容头标签排版标签：<p>、 <div>、 <span>、<br> 、 <hr> 、 <center> 、 <pre>字体标记：<h1>、 <font>、 <b>...原创 2019-12-25 17:08:47 · 1483 阅读 · 0 评论 -
VSCode的好用的插件
上篇博文我们介绍了VSCode的安装与基本使用VSCode的安装与基本使用这篇博文我们来介绍一波VSCode中精美好用的插件插件扩展 / 插件推荐VS Code 有一个很强大的功能就是支持插件扩展。上图中，点击红框部分，即可在输入框里，查找你想要的插件名，然后进行安装。我来列举几个常见的插件，这些插件都很实用。GitLens我强烈建议你安装插件GitLens，它是 VS Code...原创 2019-12-25 16:36:35 · 7859 阅读 · 6 评论 -
VSCode的安装与基本使用
VS Code 的介绍VS Code 的全称是 Visual Studio Code是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面，都做的很不错。VS Code 本来是前端人员专用，但由于它实在是太好用了，于是，各种开发方向的码农也正在用 VS Code 作为他们的主力编程工具。甚至是一些写作的同学，也把 VS Code 作为 markdo...原创 2019-12-25 16:09:08 · 1380 阅读 · 0 评论