landaiqing/HTML
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
landaiqing
2023-05-01 19:37:40 +08:00
commit da2c0fadf7
133 changed files with 29002 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
Html-Notes/00-html-start.html Normal file
View File

@@ -0,0 +1,42 @@
<!-- html代码注释-->
<!-- 单标签 -->
<标签名>
<标签名/>
<!-- 双标签 -->
<标签名>
<!-- 标签内部 -->
</标签名>
<!DOCTYPE html>
<!-- 告诉浏览器,我是哪个版本的内容 -->
<html>
<!-- 网页 -->
<head>
<!-- 网页设置 -->
<title>网页栏标题</title>
<link rel="icon" href="_sitegray/_sitegray_d.css"/>
<!-- rel="icon" 设置网页小图标 -->
<meta charset="UTF-8">
<!-- 设置文件编码格式 -->
</head>
<body>
<!-- 网页的内容部分 -->
网页的内容部分
<div></div>
</body>
</html>

58
Html-Notes/01-块标签.html Normal file
View File

@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<!-- 网页 -->
<head>
<!-- 网页设置 -->
<title>网页栏标题</title>
<link rel="icon" href="_sitegray/_sitegray_d.css"/>
<!-- rel="icon" 设置网页小图标 -->
<meta charset="UTF-8">
<!-- 设置文件编码格式 -->
</head>
<body>
<!-- 网页内容 -->
正常网页内容
<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>
<!-- 注意：
h1 标签，正常来说在网页中有且只有一个
为了方便搜索引擎检索
-->
<hr>
<!-- 分割线 -->
<p>p标签</p>
<p style="color: pink;">p标签</p>
<!-- 段落标签: 段落之间有一定的距离 -->
<!--注意：
p标签内部，不能放块标签
如果放了，会阻断p标签
-->
<hr>
<!-- div标签就是朴素的块标签 -->
<div>div标签</div>
<div>div标签</div>
<div>div标签</div>
</body>
</html>
<!-- 快捷注释
ctrl + / 行注释
h${我是h$}*6 h1-h6一下子写完
-->

33
Html-Notes/02-行内标签.html Normal file
View File

@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html>
<!-- 网页 -->
<head>
<!-- 网页设置 -->
<title>网页栏标题</title>
<link rel="icon" href="_sitegray/_sitegray_d.css"/>
<!-- rel="icon" 设置网页小图标 -->
<meta charset="UTF-8">
<!-- 设置文件编码格式 -->
</head>
<body>
<p><b>【第一章】</b> <strong>人之初</strong>,<br>性本善.性相近,习相远,苟不教,性乃迁。
<span>教之道,贵以专。昔孟母,择邻处。子不学,</span>
<i>【译文】</i> </p>
<!-- b strong 加粗
br(单标签) 回车换行
i em 倾斜标签
span 朴素的行内标签
-->
</body>
</html>

43
Html-Notes/03-列表.html Normal file
View File

@@ -0,0 +1,43 @@
<!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>列表</title>
<style>
ul>li{
/* 取消无序列表前的序 */
list-style: none;
}
</style>
</head>
<body>
<!-- 有序列表 -->
<!-- ol>li -->
<ol>
<li>我是li1</li>
<li>我是li2</li>
<li>我是li3</li>
<li>我是li4</li>
<li>我是li5</li>
</ol>
<!-- 无序列表 -->
<!-- ul>li -->
<ul>
<li>我是无序列表1</li>
<li>我是无序列表2</li>
<li>我是无序列表3</li>
<li>我是无序列表4</li>
<li>我是无序列表5</li>
</ul>
</body>
</html>
<!-- 列表也是块标签的一种 -->

42
Html-Notes/04-特殊标签.html Normal file
View File

@@ -0,0 +1,42 @@
<!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>特殊标签</title>
</head>
<body>
<!-- a 标签 :超链接标签
herf 跳转路径
target 跳转方式
_self 默认
_blank 打开新窗口
-->
<a href="http://www.jd.com" target="_blank">点击进入京东</a>
<!-- img标签
src 路径
alt 图片出现问题时显示的文本
-->
<img src="https://img1.baidu.com/it/u=81509397,1274712705&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=708" alt="图片加载错误">
<!-- 路径：
网络路径
相对路径
相对当前文件
绝对路径
当前主机，当前项目
-->
</body>
</html>

60
Html-Notes/05-表格-基础.html Normal file
View File

@@ -0,0 +1,60 @@
<!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><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD></title>
</head>
<body>
<!-- <20><><EFBFBD><EFBFBD>
<20>У<EFBFBD>tr
<20>У<EFBFBD>td,th(<28>Ӵ<EFBFBD>)
-->
<table border="1">
<tr>
<td><EFBFBD><EFBFBD><EFBFBD><EFBFBD></td>
<td><EFBFBD>Ա<EFBFBD></td>
<td><EFBFBD><EFBFBD><EFBFBD><EFBFBD></td>
</tr>
<tr>
<td>˾ͽ</td>
<td><EFBFBD><EFBFBD></td>
<td>20</td>
</tr>
<tr>
<td><EFBFBD><EFBFBD></td>
<td>Ů</td>
<td>20</td>
</tr>
</table >
<hr>
<table border="1">
<tr>
<td><EFBFBD><EFBFBD><EFBFBD><EFBFBD></td>
<td><EFBFBD>Ա<EFBFBD></td>
<td><EFBFBD><EFBFBD><EFBFBD><EFBFBD></td>
</tr>
<tr>
<td>˾ͽ</td>
<td><EFBFBD><EFBFBD></td>
<td>20</td>
</tr>
<tr>
<td><EFBFBD><EFBFBD></td>
<td>Ů</td>
<td>20</td>
</tr>
</table>
</body>
</html>

55
Html-Notes/06-表格-进阶.html Normal file
View File

@@ -0,0 +1,55 @@
<!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>表格进阶</title>
</head>
<body>
<!-- 表格
单元格的合并
列：rowspan
行：clospan
-->
<table border="1">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>司徒</td>
<td rowspan="2">女</td>
<td>20</td>
</tr>
<tr>
<td>无</td>
<!-- <td>女</td> -->
<td rowspan="3">21</td>
</tr>
<tr>
<td>司徒瑞祥</td>
<td>男</td>
<!-- <td>21</td> -->
</tr>
<tr>
<td>LDQ</td>
<td>男</td>
<!-- <td>21</td> -->
</tr>
<tr>
<td colspan="3"> <hr> </td>
</tr>
</table >
</body>
</html>

78
Html-Notes/07-表格demo.html Normal file
View File

@@ -0,0 +1,78 @@
<!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> 表格demo</title>
<style>
table {
background-color: #E6EAF2;
}
td {
height: 40px;
}
</style>
</head>
<body>
<!-- -->
<table border="1">
<!-- 1 -->
<tr>
<th colspan="2">《课程一》静态网站开发 </th>
</tr>
<!-- 2 -->
<tr>
<td style="text-align: center;">第一章</td>
<td>《基础班》开学典礼</td>
</tr>
<!-- 3 -->
<tr>
<td colspan="2">(互联网概述|什么是网站|什么是网页|构成网页的元素|网站制作流程详解|怎样才能学号拿高弱|web前端开发职业的前途|web前端开发课程目标及）</td>
</tr>
<!-- 4 -->
<tr>
<td style="text-align: center;">第二章</td>
<td> HTML常用标签+背景 </td>
</tr>
<!-- 5 -->
<tr>
<td colspan="2"></td>
</tr>
<!-- 6 -->
<tr>
<td style="text-align: center;">第三章</td>
<td> 元素选择符+背景 </td>
</tr>
<!-- 7 -->
<tr>
<td colspan="2"></td>
</tr>
<!-- 8 -->
<tr>
<td rowspan="3" style="text-align: center;">第四章</td>
<td>
css样式(FOnt+Text)+特殊符号
</td>
</tr>
<!-- 9 -->
<tr>
<td>特殊符号</td>
</tr>
<!-- 10 -->
<tr>
<td>(Font+Text)</td>
</tr>
<!-- 11 -->
<tr>
<td colspan="2"></td>
</tr>
</table>
</body>
</html>

20
Html-Notes/08-特殊字符.html Normal file
View File

@@ -0,0 +1,20 @@
<!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> <20><><EFBFBD><EFBFBD><EFBFBD>ַ<EFBFBD></title>
</head>
<body>
<!-- ʵ<><CAB5><EFBFBD><EFBFBD> -->
<!-- https://www.w3school.com.cn/charsets/ref_html_8859.asp -->
</body>
</html>

110
Html-Notes/09-表单.html Normal file
View File

@@ -0,0 +1,110 @@
<!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> 表单</title>
</head>
<body>
<!-- 表单
action 提交地址 跟a标签的herf很像
method 提交方式
-->
<form action="https://www.baidu.com" method="" target="_blank">
<!-- 表单控件 -->
<!--
输入类
文本输入框： type="text"
密码输入框： type="password"
数字输入框： type="number"
选择类
单选
type="radio"
多选
type="checkbox"
按钮类
button
type="sumbit"
type="reset"
type="button"
-->
<h2>输入类</h2>
<hr>
<input type="text" value="默认值">
<hr>
<input type="password" placeholder="请输入密码">
<hr>
<input type="number" placeholder="请输入数字" disabled="true">
<h2>选择类</h2>
<!-- 选择类的，的要有个name属性进行分组，且需要有个value进行赋值 -->
<p>选择你的性别</p>
<label>
男<input type="radio" name="sex" value="男" checked>
</label>
<label title="你是女的吗？">
女<input type="radio" name="sex" value="男">
</label>
<p>选择城市</p>
<select name="city">
<option value="null">---请选择城市---</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
<option value="">深圳</option>
</select>
<h2> css3扩展</h2>
<!-- min 最小 max 最大 -->
<input type="range" min="10" max="100" value="20">
<!-- 颜色 -->
<input type="color">
<!-- 时间 -->
<input type="time"/> 时间
<input type="date"/> 年月日
<input type="month"/> 年月
<input type="week"/> 年周
<!-- 文件上传 -->
<input type="file">
<h2>按钮类</h2>
<!-- button
无值=sumbit 提交（前提在表单内）
sumbit 提交
reset 重置
button 普通按钮
-->
<button>提交</button>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>
</form>
<!-- 表单控件属性
name 表单控件中数据的key 必需有
value 1.输入类：设置默认值
2.选择类：设置此选项值
placeholder 提示文本
disable 禁止此表单控件 true
checked 默认选择
title 鼠标悬置时提示文本
-->
</body>
</html>

23
Html-Notes/10-表单demo.html Normal file
View File

@@ -0,0 +1,23 @@
<!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</title>
</head>
<body>
<form action="https://www.baidu.com/s" target="_blank">
<!-- %E4%B8%80%E4%BA%BA%E4%B9%8B%E4%B8%8B&fenlei -->
<input type="text" placeholder="你要搜索啥？" name="wd">
<button>搜索</button>
</form>
</body>
</html>

22
Html-Notes/index.html Normal file
View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
.v3 .btn {
background-color: salmon;
}
</style>
</head>
<body>
<dev id="v1"><h1 style="background-color:white;">软件21-5班兰代清</h1></dev>
<dev id="v2"><img src="https://cdn.imgcn.top/202105/88747d21aab415745d89f3237ae966ae.jpeg!logo"></dev>
<dev id="v3"><button id="btn">log in</button></dev>
<dev><input></dev>
</body>
</html>

177
Html-Notes/个人导航页面.html Normal file
View File

@@ -0,0 +1,177 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Web 导航 Web 实验室</title>
<meta name="keywords" content="网页实验室,Web 实验室,博客">
<!--修改这里的路径-->
<!-- font-awesome 图标字体 -->
<link media="screen" rel="stylesheet" type="text/css">
<!--修改这里的路径-->
<!-- 实验室核心样式文件 -->
<link rel="stylesheet" >
</head>
<body>
<header class="header">
<!-- 动画展示区域 -->
<div id="victor-container"><div id="victor-output"></div></div>
<div class="welcome">
<p>— 欢迎访问 —</p>
<!--修改这里的路径 LOGO-->
<img class="web-title" src="http://hc.********/bg.png" alt="Web 实验室" draggable="false"
onerror="onerror=null;src='http://hc.********/bg.png'">
</div>
<!--向下滚动提示-->
<a class="scroll-down-tips" href="#product">
<i class="fa fa-angle-double-down" aria-hidden="true"></i>
向下滚动
</a>
</header> <!-- header -->
<div class="container">
<section class="section">
<a name="product"></a>
<h3 class="mk-sub-title">
<span>Product</span>
<span>/</span>
原创作品
</h3>
<p class="mk-title-describe">没错，这些都是我的原创作品</p>
<!--修改这里 自己添加自己的网站链接-->
<div class="mk-item-box">
<div class="mk-item">
<a href="/music/" target="_blank">
<article class="mk-color-item color2">
<div class="item-logo">
<i class="fa fa-music" aria-hidden="true"></i>
</div>
<h3>歌曲搜索</h3>
<p>基于第三方API 的音乐搜索引擎</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a target="_blank">
<article class="mk-color-item color1">
<div class="item-logo">
<i class="fa fa-film" aria-hidden="true"></i>
</div>
<h3>免费影视</h3>
<p>基于第三方API 的影视网站</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
<div class="mk-item">
<a href="/qrcode/" target="_blank">
<article class="mk-color-item color3">
<div class="item-logo">
<i class="fa fa-battery-three-quarters" aria-hidden="true"></i>
</div>
<h3>给我充充电吧！！</h3>
<p>午饭能不能吃好，全靠它啦！</p>
<i class="light"></i>
</article>
</a>
</div> <!-- mk-item -->
</div> <!-- mk-item-box -->
</section> <!-- class="section" -->
<section class="section"> <!-- class="section" -->
<div class="mk-big-title">
<h4>About</h4>
</div>
<div class="about-content">
<p>Web 实验室用来陈列一些新鲜、好玩的 Html 作品。这些作品中，有一些是本人原创或改写的，
还有一些是别人的开源大作，但因其很有特色，值得学习玩味，因此也出现在这里。</p>
<p>本人崇尚开源精神，因此“实验室”中大部分作品是开源的。
即使没有开源，您也可以通过右键>查看源代码以进行查阅。
请注意，开源不代表可以滥用，转载或使用这些源代码时，请务必保留原始的版权信息！
这是一个程序员最基本的修养，也是对原作者最起码的尊重。</p>
<p>欲了解更多内容，请访问我的 <a target="_blank">个人博客</a>。</p>
</div>
</section>
</div> <!-- class=container -->
<footer class="footer">
<p>Copyright (c) 2019. Design by
<a href="#http://my.********" rel="nofollow">Web 导航</a>.</p>
<p>ICP证：<a target="_blank">ICP备********号</a></p>
</footer>
<!-- 返回顶部 -->
<div class="mk-uptop" title="点击返回顶部"></div>
<!-- jq -->
<!--修改这里的路径-->
<script src="http://hc.********/jquery.min.js"></script>
<script src="http://hc.********/vector.js"></script>
<script>
$(function(){
// 页面加载完毕后固定页头高度，防止在某些自动隐藏工具栏的移动浏览器上出现页面抖动现象
$(".header").height($(window).height());
// 初始化 传入dom id
var victor = new Victor("victor-container", "victor-output");
var theme = [
["#002c4a", "#005584"],
["#35ac03", "#3f4303"],
["#ac0908", "#cd5726"],
["#18bbff", "#00486b"]
];
var color = theme[fRandomBy(0, 3)];
victor(color).set();
// 监听滚动变化
$(window).scroll(function() {
if($(window).scrollTop() < 300) {
$(".mk-uptop").removeClass("show");
} else {
$(".mk-uptop").addClass("show");
}
});
// 返回顶部
$(".mk-uptop").click(function(){
$("html, body").animate({scrollTop:0}, "normal");
return false;
});
// 烦人的 CNZZ，输出一大堆错误信息、、清除掉！
console.clear();
});
/*******************************
* 函数名：生成指定范围的随机数
* 输入： (under)下限 (over)上限
* 输出： 所需要的数值
* *****************************/
function fRandomBy(under, over) {
switch(arguments.length){
case 1: return parseInt(Math.random()*under+1);
case 2: return parseInt(Math.random()*(over-under+1) + under);
default: return 0;
}
}
</script>
<style>