前端shuo习
关注
分享
扫一扫
前端三剑客学习
乐乐想学会java
大一新人学习中
展开
-
第一次根据Bootstrap的官方示范来使用bootstrap
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--用指定的IE内核使用-->> <meta name="viewport" content="width=device-width, initial-sca原创 2020-07-24 09:08:27 · 115 阅读 · 0 评论 -
测试onmouseout和onmouseover
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title>测试onmouseover、onmouseout事件</title></head><body><div onmouseover = "mOver(this)" onmouseout = "mOut(this)" style="background-col翻译 2020-07-20 15:29:52 · 164 阅读 · 0 评论 -
测试onchange事件————退出文本类的输入区域后视为一次“修改结束”触发事件
<!DOCTYPE html><html><head><meta charset="utf-8"><title>onload事件触发查看cookie是否可用</title><script> function myFunction(){ var x = document.getElementById("fname"); x.value = x.value.toUpperCas翻译 2020-07-20 15:21:20 · 158 阅读 · 0 评论 -
用onload事件向用户展示是否已经打开了cookie服务（弹窗提示）
<!DOCTYPE html><html><head><meta charset="utf-8"><title>onload事件触发查看cookie是否可用</title></head><body onload = "checkCookies()"><script> function checkCookies() { if(navigator.cooki原创 2020-07-20 15:12:22 · 253 阅读 · 0 评论 -
使用HTML DOM来为HTML分配事件
<!DOCTYPE html><html><head><meta charset="utf-8"><title>使用HTML DOM为元素附加事件触发</title></head><body><p>点击按钮执行<em>showTime()</em>函数</p><button id ="myBtn">点击</button>翻译 2020-07-20 14:57:23 · 193 阅读 · 0 评论 -
从事件处理器调用一个JavaScript函数用以改变文本
<!DOCTYPE html><html><head><meta charset="utf-8"><title>触发事件修改文本的内容</title></head><script> function changetext(id) { id.innerHTML ="爷变了，不爱了"; }</script><body><h1 o原创 2020-07-20 14:41:10 · 157 阅读 · 0 评论 -
获取点击事件以后对文本进行修改
<!DOCTYPE html><html><head><meta charset="utf-8"><title>触发事件修改文本的内容</title></head><body><h1 onclick="this.innerHTML='爷变了,不爱了'">爱你，请点击我</h1></body></html>...原创 2020-07-20 14:28:16 · 588 阅读 · 0 评论 -
用按钮隐藏显示文本
<!DOCTYPE html><html><head><meta charset="utf-8"><title>W3Cschool教程(w3cschool.cn)</title></head><body><p id="p1">这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。</p><input type=转载 2020-07-15 10:25:47 · 307 阅读 · 0 评论 -
点击按钮改变＜p＞样式
<!DOCTYPE html><html><head><meta charset="utf-8"><title>点击按钮改变样式</title></head><body><h1 id="id1">我想要变色qwq</h1><button type="button" onclick="document.getElementById('id1').style.color原创 2020-07-15 10:23:06 · 338 阅读 · 0 评论 -
修改＜p＞标签的样式——在html中
<!DOCTYPE html><html><head><meta charset="utf-8"><title>修改文本的颜色(w3cschool.cn)</title></head><body><p id="p1">原文本</p><p id="p2">修改样式后的文本 </p><script>document.getElement原创 2020-07-15 10:18:47 · 3143 阅读 · 0 评论 -
改变图片的src属性（地址）
一般图片src失败都是绝对路径太复杂搞错最好是用相对路径，qwq<!DOCTYPE html><html><head><meta charset ="utf-8"><title>改变一个图片der链该</title></head><body><img id = "image" src = "photo1.jpg" width ="160" height="120"> <sc原创 2020-07-14 23:22:02 · 767 阅读 · 0 评论 -
改变＜p＞里的内容
<!DOCTYPE html><html><head><meta charset = "utf-8"><title>修改文本</title></head><p id="p1">Hello World!</p><script>document.getElementById("p1").innerHTML= "新文本！";</script><p>以原创 2020-07-14 22:56:20 · 580 阅读 · 0 评论 -
改变html输出流
<!DOCTYPE html><html><head><meta charset = "utf-8"><title>康康时间</title></head><body><script>document.write(Date());</script></body></html>原创 2020-07-14 22:27:35 · 206 阅读 · 0 评论 -
前端学习-javascript-（8）javascript表单验证
javascript表单验证表单数据经常要使用javascript来验证其正确性：验证表单数据是否为空验证输入是否是一个正确的email地址验证日期是否输入正确验证表单中的输入是否为数字型？———————————————————必填（或者必选项目）下面的函数用于检查用户是否已经填写表单中的必填（或者必选）项目。假如必填/必选项为空，那么会弹出警告框，并且函数返回false，否则函数返回值为true（数据没有问题）：标准的结构：function validateForm(){ var原创 2020-07-12 20:34:06 · 266 阅读 · 0 评论 -
前端学习-javascript-（7）javascript正则表达式
什么是正则表达式？正则表达式：使用单个字符串来描述、匹配一系列符合某个符合语法规则的字符串搜索模式。语法：/pattern/modifiers;示例：var patt = /lelejava/i;/lelejava/modifiers是一个正则表达式lelejava是一个模式（用于jiansuo）i 是一个修饰符（搜索不区分大小写）javascript中，正则表达式通常用于两个字符串方法：search（）和replace（）。search（）方法使用正则表达式实例： 使原创 2020-07-12 12:03:54 · 215 阅读 · 0 评论 -
前端学习-javascript-（6）类型转换
在javascript中有五种不同的对象类型：stringnumberbooleanobjectfunction三种对象类型：ObjectDateArray两种不包含数据的类型：nullundefined——————————————————————————typeof操作符：阔以返回对应变量的类型特殊地：NaN的数据类型是number数组（Array）的数据类型是object日期(Date）的数据类型也是objectnull的数据类型还是object未定原创 2020-07-04 17:19:34 · 122 阅读 · 0 评论 -
前端学习-javascript-（5）字符串，===运算符
字符串javascript中的字符串可以储存一系列字符，可以用单双引号一对括起来：var carname = "Volvo XC60";可以使用索引位置来访问字符串中的每个字符：var character = carname[7];字符串中的字符引号应该不与外面的引号相同 ,需要的时候可以使用转义符号:var answer = " HE IS\"RUBY\"";可以使用内置属性length来计算字符串的长度：var txt ="ABCDEFGHIJKLMNOPQR原创 2020-07-01 20:56:06 · 262 阅读 · 0 评论 -
前端学习-javascript-（4）函数、事件
函数在javascript中，函数即对象。函数语法：funciton 函数名(参数列表){执行代码}HTML事件即发生在HTML元素上的事情。可以是浏览器行为或者用户行为常见的键盘事件：事件描述onchangeHTML元素改变onclick用户点击HTML元素onmouseover用户鼠标划过一个HTML元素onmouseout用户从一个HTML元素上移开鼠标onkeydown用户按下键盘按键onload浏览器完成页面的加载原创 2020-07-01 20:44:22 · 114 阅读 · 0 评论 -
前端学习-javascript-（3）基本语法
javascript的语句用逗号分隔javascript语句通常以关键词开头，变量的新建只需要var 变量名（javascript是一种弱类型语言）javascript的注释沿用了//javascript将函数作为一种类型来操作：function 变量（）{}js对大小写敏感javascript使用Unicode字符集继续沿用驼峰命名规范javascript是脚本语言，逐行读取，无需编译——————————————————————————常见的Java..原创 2020-07-01 20:37:50 · 99 阅读 · 0 评论 -
前端学习-javascript-（2）jio本的调用
如何使用一个js脚本？可在HTML文档中《body》《head》位置中定义：head中的javascript函数：<!DOCTYPE html><html ><head ><script >function myFunction(){ document.getElementById("demo").innerHTML= "第一次测试javascript函数";}</script></head><原创 2020-07-01 20:28:24 · 141 阅读 · 0 评论 -
前端学习-javascript-（1）预览
组成DOM—Document Object Model文档对象模型—操作返回到文档（界面）doucument对象————————————————BOM—Browser Object Model浏览器对象模型—操作浏览器本身window对象————————————————ECMAScript解释器————————————————兼容性：ECMA 几乎没有兼容问题DOM 一些操作不兼容BOM 完全不兼容（不用考虑兼容问题）——————————————————变量变原创 2020-07-01 20:13:13 · 120 阅读 · 0 评论 -
前端学习（8）——脚本
脚本：html——JavaScript< script>该标签用于自定义客户端脚本，比如javascript< script>元素既可以包含脚本语句，也可以通过src属性指向外部脚本文件< noscript>该标签用于浏览器不支持脚本或者禁用脚本时的替代内容用途：操作html样式做事件响应在html结构中输出文本段自此基本的html学习结束...翻译 2020-06-23 20:35:04 · 231 阅读 · 0 评论 -
前端学习（7）———框架
HTML语句块创建块级元素组合< div> 和< span>元素———————————————————————————————————————HTML框架< iframe >标签规定一个内联框架内联框架——在当前html文档中嵌套另外一个html文档通过该框架可以在同一个浏览器窗口中浏览不同的多个页面语法：<iframe src ="URL"></iframe>依然同样适用height和widthframeborder用翻译 2020-06-23 20:26:22 · 102 阅读 · 0 评论 -
前端学习（6）——表单
HTML表单和输入表单用于获取不同类型的用户输入创建文本字段（文本输入区）<!DOCTYPE html><html><body><form action="">Name : <input type="text" name="name"><br>Age : <input type="text" name="age"></form><p><b>注意：</b&g翻译 2020-06-23 15:37:19 · 235 阅读 · 0 评论 -
前端学习(5)——表格
表格定义标签：< table >< table >…< /table > 定义表格< th >…< /th > 定义表格的标题栏（文字加粗）< tr >…</ tr> 定义表格的行< td>…</ td> 定义表格的列一行的结构：< tr >< td >< /td >< td ></ td ></ tr >同样w翻译 2020-06-23 15:13:07 · 115 阅读 · 0 评论 -
前端学习(4)—图像
HTML图像必需属性：src 、altsrc属性是图像的储存URL地址，可能在本地路径下或者在网页链接路径下alt属性用于在页面图片无法显示时，告诉用户失去了什么信息备选属性：height 、width等上述两个属性用于设置图像的高度和宽度（而非位置，且以px像素为单位）broder属性用来设置图像的边框，等于0表示图像周围没有边框align属性被设置为“center”“right”可以使得图像中间对齐或右对齐，默认情况下左对齐...原创 2020-06-23 14:54:18 · 113 阅读 · 0 评论 -
前端学习（3）样式表——CSS
CSS也叫作层叠样式表或者级联样式表，用于定义HTML元素的显示效果，原本的样式是在html中内嵌定义的，css的出现使得分工更加清晰内嵌样式修改文字颜色<!DOCTYPE html><html><head><meta charset = "utf-8"><title>内嵌样式</title><style type = "text/css">h1 {color:red;}p{color:blue}<翻译 2020-06-23 14:34:45 · 140 阅读 · 0 评论 -
前端学习（2）—常在html中添加的基本素材
链接HTML使用< a >标签来设置一个超文本链接< a href = "#" > 链接文字 < / a >其中表示空链接，空链接的主要作用是在设置链接之前看看效果如何默认的链接文本会在原来的窗口中打开，要想在新的窗口打开链接，可以使用 _blank值的target属性图片链接用一个< a >标签包围img来为图片增加一个链接<!DOCTYPE html><html><head><meta cha翻译 2020-06-22 14:36:02 · 316 阅读 · 0 评论 -
前端学习（1）——基本的html
HTML——超文本标记语言HTML是一种使用结构化控制web网页基本内容的标记语言最基本的结构——<!DOCTYPE html><html><body><h1>我的标题1</h1><p>我的段落1</p></body></html>大部分情况下，一个完整的结构是一个开标签和一个闭标签。（有些单独完成任务的标签不需要闭标签）一般最基本结构中用到的标签：DOCTYPE原创 2020-06-22 13:19:49 · 155 阅读 · 0 评论