html
素心如月桠
实习第一年 要努力呀
展开
-
HTML5新增
下面列出的 HTML5 的新元素,以及对它们的描述。原创 2022-09-22 18:29:55 · 205 阅读 · 0 评论 -
CSS显示与隐藏遮罩层
css显示和隐藏遮罩层原创 2022-09-19 19:26:04 · 385 阅读 · 0 评论 -
HTML零基础入门教程完整版
HTML零基础入门教程完整版原创 2022-09-11 17:42:34 · 26699 阅读 · 3 评论 -
meta标签属性
meta的属性先看代码注释<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <!--设置网页的作者--> <meta name="author" content="徐美琪"/> <!--设置网页的关键词--> <meta name="keywords" content="IT培训"/> <!--设置网页的描述--&g原创 2021-12-21 16:23:00 · 201 阅读 · 0 评论 -
拖动窗口
<!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>Document.原创 2021-05-17 16:22:30 · 96 阅读 · 0 评论 -
history对象例题
<body> <a href="login.html">点我回到刚刚页面</a> <button>点击后退</button> <script> var btn = document.querySelector('button'); btn.addEventListener('click', function () { history.back();原创 2021-05-13 11:25:54 · 154 阅读 · 0 评论 -
获取URL参数
1. login.html页面代码<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title></head><body> <form action="Index.html"> 用户名:原创 2021-05-13 10:45:21 · 123 阅读 · 0 评论 -
location跳转页面
<!DOCTYPE html><html> <head> <meta name="" content="" charset="utf-8" /> <title>clearInterval</title> </head> <body> <script type="text/javascript"> window.addEventListener('load', func..原创 2021-05-13 09:14:27 · 499 阅读 · 0 评论 -
点击按钮倒计时
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>setInterval使用方法</title> <style type="text/css"> .com { width: 200px; height: 30px; background-color: burlywood; /* color: or...原创 2021-05-12 15:37:36 · 482 阅读 · 0 评论 -
停止setInterval的clearInterval函数
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>setInterval使用方法</title> <style type="text/css"> .com { width: 200px; height: 30px; background-color: burlywood; /* color: oran.原创 2021-05-12 15:18:52 · 360 阅读 · 0 评论 -
setInerval倒计时
通过调用setInterval函数实现不断刷新的倒计时<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>setInterval使用方法</title> <style type="text/css"> .com { width: 200px; height: 30px; background-colo原创 2021-05-12 15:01:55 · 182 阅读 · 0 评论 -
循环播放图片
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>setInterval使用方法</title> <style type="text/css"> img { width: 100%; height: 100%; } </style> </head> <body>原创 2021-05-12 14:40:06 · 200 阅读 · 0 评论 -
图片跟着鼠标走
<!DOCTYPE ><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img { width: 90px; height: 90px; position: absolute; /*不加position:absolute图片不会跟着鼠标走*/ } </原创 2021-05-10 20:54:45 · 82 阅读 · 0 评论 -
禁止右键禁止全选
// ‘contextment’禁止右键菜单//‘selectstart’禁止全选<!DOCTYPE ><html> <head> <meta charset="utf-8"> <title></title> </head> <body> 知否知否应是绿肥红瘦 <script type="text/javascript"> document.addEventList原创 2021-05-10 20:31:06 · 110 阅读 · 0 评论 -
事件委托---addEventListener()+e.targetd返回当前点击的对象
<!DOCTYPE ><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul> <li>知否知否应是绿肥红瘦</li> <li>知否知否应是绿肥红瘦</li> <li>知否知否应是绿肥红瘦</li> .原创 2021-05-10 20:24:45 · 516 阅读 · 0 评论 -
DOM总结
原创 2021-05-10 18:27:37 · 88 阅读 · 0 评论 -
innerHTML、createElement()、document.write()三者对比
innerHTML创建多个元素销量更高,但要注意不要凭借字符串,要采取数组形式拼接 <script> var inner = document.querySelector('.inner'); var arr = []; for (var i = 0; i < 100; i++) { arr.push('<a href="#">百度</a>') } inner.原创 2021-05-10 18:20:54 · 188 阅读 · 0 评论 -
动态生成表格案例
点击删除链接,删除本行<!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"> &原创 2021-05-10 17:54:32 · 121 阅读 · 0 评论 -
删除节点+复制节点
<body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> <button>删除</button> <script> document.querySelect...原创 2021-05-08 22:18:26 · 151 阅读 · 0 评论 -
发布+删除留言例题
<!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>D.原创 2021-05-08 21:47:16 · 116 阅读 · 0 评论 -
添加新的元素节点
<!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>Doc原创 2021-05-08 21:26:09 · 269 阅读 · 0 评论 -
字符截取等综合例题
字符截取等综合例题<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.js"> </script> <script src="vue.min.js"></script></head><bo原创 2021-05-08 20:59:30 · 95 阅读 · 0 评论 -
新浪下拉菜单
ul.nav>li * 44个小li里面都放一个标签、一个ul、ul里面再放li>a * 4,如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="..原创 2021-05-08 20:56:54 · 104 阅读 · 0 评论 -
倒计时-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"> <titl原创 2021-05-08 13:33:22 · 200 阅读 · 0 评论 -
tab栏切换
<!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>Document</t转载 2021-05-07 20:04:14 · 81 阅读 · 0 评论 -
自定义属性值
一、获取属性值和自定义属性值getAttribute<body> <!-- tage_list为自定义的属性值 --> <div id="app" class="name" tage_list="1"></div> <script> var div_l=document.querySelector('div'); console.log(div_l.id); // console.log(div_1.tage_list);错误原创 2021-05-07 19:27:51 · 314 阅读 · 0 评论 -
js例题
表单全选和取消全选原创 2021-05-07 17:23:13 · 115 阅读 · 0 评论 -
表单全选和取消全选
<!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>Document</t原创 2021-05-07 17:21:53 · 101 阅读 · 0 评论 -
innerText改变元素内容
点击鼠标显示当前时间<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> div { width:300px; height: 20px; background-color: aqua; line-height: 20px; text-align: center; } <原创 2021-05-02 21:47:06 · 752 阅读 · 0 评论 -
JavaScript常见的鼠标事件
JavaScript常见的鼠标事件原创 2021-05-02 21:03:10 · 154 阅读 · 0 评论 -
getElementBy....(获取元素)
一、getElementById <div id="time"> 2021-5-2 </div> <script> var timer = document.getElementById('time'); console.log(timer);//得到id为time的div console.dir(timer); // 通过dir获取timer对象的属性和方法 console.log(typeof timer);// timer类型的原创 2021-05-02 17:59:37 · 4796 阅读 · 0 评论 -
简易计算器
<script> function Counter (a, b, c) { var sum = 0; if (c == 1) { sum = a + b; } else if (c == 2) { sum = a - b; } else if (c == 3) { sum = a * b; } else if (c == 4) { sum = a / b; } return sum; } var pop = parseInt(prompt...原创 2021-05-02 16:13:40 · 85 阅读 · 0 评论 -
对象,构造函数(一)
1. 简单创建对象的两种方式 <script> var obj = { uname: '张三疯', age: 14, sex: '男', sayHi: function () { console.log('Hi~'); } }; console.log(obj.uname); console.log(obj['uname']);//两种方式 </script>2. 利用new Object()的方法创建对象,再利用 等号原创 2021-04-30 21:07:38 · 236 阅读 · 1 评论 -
简洁版小米侧边栏案例
<!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>D.原创 2021-04-16 21:07:45 · 421 阅读 · 0 评论 -
行内元素和块级元素的转化
赛赛原创 2021-04-16 13:46:51 · 880 阅读 · 0 评论 -
选择器
一、子代选择器和后代选择器例题:把a标签的 百度改为红色 酷狗改为蓝色<!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, ini原创 2021-04-16 13:30:46 · 108 阅读 · 0 评论 -
使用vscode学习HTML5+CSS3
把 行内元素 a 转化成 块级元素……原创 2021-04-16 10:54:00 · 584 阅读 · 0 评论 -
emmet快速生成HTML结构语法+ 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.原创 2021-04-16 10:52:17 · 172 阅读 · 0 评论 -
JavaScript函数(一)
JavaScript函数一、定义:函数就是封装了一段可以被重复执行调用的代码块,目的:让大量代码重复使用二、函数的使用<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Document</title> <script> // 函数使用分为两步: 声明函数 和 调用函数原创 2021-03-31 19:20:37 · 145 阅读 · 1 评论 -
JavaScript数组
JavaScript1.声明数组<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>Document</title> <script> var arr=[2,0,6,1,77,0,52,0,25,7]; var newArr=[];原创 2021-03-29 22:35:14 · 108 阅读 · 0 评论