首页 仓库（发现） 帮助
登录
guorui
/
html_learn
1
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

首次提交

Naruto 1 年之前
当前提交
55202ea205
共有 20 个文件被更改，包括 322 次插入 和 0 次删除
分列视图 显示文件统计
  1. 8 0
      .idea/.gitignore
  2. 6 0
      .idea/inspectionProfiles/Project_Default.xml
  3. 6 0
      .idea/inspectionProfiles/profiles_settings.xml
  4. 10 0
      .idea/misc.xml
  5. 8 0
      .idea/modules.xml
  6. 6 0
      .idea/vcs.xml
  7. 8 0
      .idea/前端.iml
  8. 44 0
      HTML/demo1_基础.html
  9. 54 0
      HTML/demo2_a标签.html
  10. 27 0
      HTML/demo3_Emmet(快速写代码).html
  11. 13 0
      HTML/demo4_表格.html
  12. 1 0
      HTML/js.js
  13. 0 0
      HTML/layui/css/layui.css
  14. 二进制
      HTML/layui/font/iconfont.eot
  15. 16 0
      HTML/layui/font/iconfont.svg
  16. 二进制
      HTML/layui/font/iconfont.ttf
  17. 二进制
      HTML/layui/font/iconfont.woff
  18. 二进制
      HTML/layui/font/iconfont.woff2
  19. 0 0
      HTML/layui/layui.js
  20. 115 0
      HTML/test.html

+ 8 - 0
.idea/.gitignore
查看文件 

@@ -0,0 +1,8 @@
 
+# 默认忽略的文件
 
+/shelf/
 
+/workspace.xml
 
+# 基于编辑器的 HTTP 客户端请求
 
+/httpRequests/
 
+# Datasource local storage ignored files
 
+/dataSources/
 
+/dataSources.local.xml

+ 6 - 0
.idea/inspectionProfiles/Project_Default.xml
查看文件 

@@ -0,0 +1,6 @@
 
+<component name="InspectionProjectProfileManager">
 
+  <profile version="1.0">
 
+    <option name="myName" value="Project Default" />
 
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
 
+  </profile>
 
+</component>

+ 6 - 0
.idea/inspectionProfiles/profiles_settings.xml
查看文件 

@@ -0,0 +1,6 @@
 
+<component name="InspectionProjectProfileManager">
 
+  <settings>
 
+    <option name="USE_PROJECT_PROFILE" value="false" />
 
+    <version value="1.0" />
 
+  </settings>
 
+</component>

+ 10 - 0
.idea/misc.xml
查看文件 

@@ -0,0 +1,10 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<project version="4">
 
+  <component name="Black">
 
+    <option name="sdkName" value="Python 3.12" />
 
+  </component>
 
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.12" project-jdk-type="Python SDK" />
 
+  <component name="PyPackaging">
 
+    <option name="earlyReleasesAsUpgrades" value="true" />
 
+  </component>
 
+</project>

+ 8 - 0
.idea/modules.xml
查看文件 

@@ -0,0 +1,8 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<project version="4">
 
+  <component name="ProjectModuleManager">
 
+    <modules>
 
+      <module fileurl="file://$PROJECT_DIR$/.idea/前端.iml" filepath="$PROJECT_DIR$/.idea/前端.iml" />
 
+    </modules>
 
+  </component>
 
+</project>

+ 6 - 0
.idea/vcs.xml
查看文件 

@@ -0,0 +1,6 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<project version="4">
 
+  <component name="VcsDirectoryMappings">
 
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
 
+  </component>
 
+</project>

+ 8 - 0
.idea/前端.iml
查看文件 

@@ -0,0 +1,8 @@
 
+<?xml version="1.0" encoding="UTF-8"?>
 
+<module type="PYTHON_MODULE" version="4">
 
+  <component name="NewModuleRootManager">
 
+    <content url="file://$MODULE_DIR$" />
 
+    <orderEntry type="inheritedJdk" />
 
+    <orderEntry type="sourceFolder" forTests="false" />
 
+  </component>
 
+</module>

+ 44 - 0
HTML/demo1_基础.html
查看文件 

@@ -0,0 +1,44 @@
 
+<!DOCTYPE html>      <!--  声明HTML5-->
 
+<html lang="en">
 
+<head><!--头部添加连接等-->
 
+    <meta charset="UTF-8">        <!--编码-->
 
+    <title>基础</title>           <!--网页标题-->
 
+</head>
 
+
 
+<!--正式的可见网页内容-->
 
+<body>
 
+
 
+<!--标题标签H标签-->
 
+    <div>
 
+        <h1>这是一个标题</h1>
 
+        <h2>这是一个标题</h2>
 
+        <h3>这是一个标题</h3>
 
+    </div>
 
+<!--段落标签P标签-->
 
+    <div>
 
+        <p>这是一个段落。</p>
 
+        <p>这是一个段落。</p>
 
+        <p>这是一个段落。</p>
 
+    </div>
 
+
 
+<!--连接标签A标签-->
 
+
 
+    <div>
 
+        <a href="https://www.runoob.com">这是一个链接</a>
 
+    </div>
 
+
 
+
 
+<!--图像标签img标签-->
 
+
 
+    <div>
 
+        <img src="https://www.runoob.com/images/logo.png" width="258" height="39" />
 
+    </div>
 
+
 
+
 
+
 
+
 
+
 
+</body>
 
+
 
+
 
+</html>

+ 54 - 0
HTML/demo2_a标签.html
查看文件 

@@ -0,0 +1,54 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>A标签</title>
 
+</head>
 
+<body>
 
+
 
+<!--a标签（超链接标签）-->
 
+<!--
 
+1.添加一个href属性，可以是绝对路径或者相对路径
 
+2.添加一个target（定义超链接的打开方式）属性：
 
+    _blank在新窗口中打开被链接文档。；
 
+    _self默认。在相同的框架中打开被链接文档。
 
+    _parent在父框架集中打开被链接文档。
 
+    _top在整个窗口中打开被链接文档。
 
+-->
 
+<a style="display: block" href="https://doc.grd.net.cn" target="_blank">我的文档网站</a>
 
+<br>
 
+<a href="demo1_基础.html" target="_blank">本地连接</a>
 
+<br>
 
+<h1 style="text-align: center">这是一级标题</h1>
 
+<!--a标签（锚点链接）-->
 
+<!--
 
+1.跳转目标的定义和锚点的定义
 
+2.给要跳转到的标签添加一个id属性，在a标签的herf属性用“#+id”实现跳转
 
+-->
 
+<a href="#1" target="">锚点连接1</a>
 
+<a href="#2" target="">锚点连接2</a>
 
+<a href="#3" target="">锚点连接3</a>
 
+
 
+<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
+<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
+<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
+<a href="https://doc.grd.net.cn" target="_blank" id="1">（锚点1）我的文档网站</a>
 
+<a href="demo1_基础.html" target="_blank">（锚点1）本地连接</a>
 
+
 
+<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
+<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
+<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
+<a href="https://doc.grd.net.cn" target="_blank" id="2">（锚点2）我的文档网站</a>
 
+<a href="demo1_基础.html" target="_blank">（锚点2）本地连接</a>
 
+
 
+<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
+<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
+<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
 
+<a href="https://doc.grd.net.cn" target="_blank" id="3">（锚点3）我的文档网站</a>
 
+<a href="demo1_基础.html" target="_blank">（锚点3）本地连接</a>
 
+
 
+
 
+
 
+
 
+</body>
 
+</html>

+ 27 - 0
HTML/demo3_Emmet(快速写代码).html
查看文件 

@@ -0,0 +1,27 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Emmet快速写代码</title>
 
+</head>
 
+<body>
 
+<h1>第一种</h1>
 
+<p style="color: crimson">h1{这是一个内容}*“代表创建H1标签，打括号内容是标签内的内容，*4，代表生成4个”<br></p>
 
+
 
+<h1>这是一个内容</h1>
 
+<h1>这是一个内容</h1>
 
+<br>
 
+---------------------------------------------------------------------------------
 
+
 
+<h1>第二种</h1>
 
+<p style="color: crimson">
 
+    h${这是$标签}*6    $代表自动递增的数字
 
+</p>
 
+<h1>这是1级标签</h1>
 
+<h2>这是2级标签</h2>
 
+<h3>这是3级标签</h3><h4>这是4级标签</h4><h5>这是5级标签</h5><h6>这是6级标签</h6>
 
+
 
+
 
+
 
+</body>
 
+</html>

+ 13 - 0
HTML/demo4_表格.html
查看文件 

@@ -0,0 +1,13 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+    <script src="js.js"></script>
 
+
 
+</head>
 
+<body>
 
+
 
+</body>
 
+</html>
 
+

+ 1 - 0
HTML/js.js
查看文件 

@@ -0,0 +1 @@
 
+alert('这是一个js文件')

文件差异内容过多而无法显示
+ 0 - 0
HTML/layui/css/layui.css


二进制
HTML/layui/font/iconfont.eot
查看文件


文件差异内容过多而无法显示
+ 16 - 0
HTML/layui/font/iconfont.svg


二进制
HTML/layui/font/iconfont.ttf
查看文件


二进制
HTML/layui/font/iconfont.woff
查看文件


二进制
HTML/layui/font/iconfont.woff2
查看文件


文件差异内容过多而无法显示
+ 0 - 0
HTML/layui/layui.js


+ 115 - 0
HTML/test.html
查看文件 

@@ -0,0 +1,115 @@
 
+<!DOCTYPE html>
 
+<html>
 
+<head>
 
+  <meta charset="utf-8">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
+  <title>测试 - Layui</title>
 
+  <link rel="stylesheet" href="layui/css/layui.css">
 
+</head>
 
+<body>
 
+
 
+<div class="layui-btn-container">
 
+  <button type="button" class="layui-btn layui-btn">后来尽快赶回来接口连接</button>
 
+
 
+</div>
 
+
 
+<button type="button" class="layui-btn-radius layui-bg-blue">jklhu</button>
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+<div class="layui-container">
 
+  <div class="layui-progress" style="margin: 15px 0 30px;">
 
+    <div class="layui-progress-bar" lay-percent="100%"></div>
 
+  </div>
 
+  
+  
+  <div class="layui-btn-container">
 
+    <button class="layui-btn" test-active="test-form">一个按钮</button>
 
+    <button class="layui-btn layui-btn-normal" id="test2">当前日期</button>
 
+  </div>
 
+  
+  <blockquote class="layui-elem-quote" style="margin-top: 30px;">
 
+    <div class="layui-text">
 
+      <ul>
 
+        <li>您当前预览的是：<span>Layui-v<span id="version"></span></span></li>
 
+        <li>Layui 是一套开源免费的 Web UI（界面）组件库。这是一个极其简洁的演示页面</li>
 
+      </ul>
 
+    </div>
 
+  </blockquote>
 
+</div>
 
+
 
+<!-- body 末尾处引入 layui -->
 
+<script src="layui/layui.js"></script>
 
+<script>
 
+layui.use(function(){
 
+  var layer = layui.layer;
 
+  var form = layui.form;
 
+  var laydate = layui.laydate;
 
+  var util = layui.util;
 
+  
+  // 欢迎信息
 
+  layer.msg('Hello World', {icon: 6});
 
+  
+  // 输出版本号
 
+  lay('#version').html(layui.v);
 
+  
+  // 日期
 
+  laydate.render({
 
+    elem: '#test2',
 
+    value: new Date(),
 
+    isInitValue: true
 
+  });
 
+  
+  // 触发事件
 
+  util.on('test-active', {
 
+    'test-form': function(){
 
+      layer.open({
 
+        type: 1,
 
+        resize: false,
 
+        shadeClose: true,
 
+        area: '350px',
 
+        title: 'layer + form',
 
+        content: ['<ul class="layui-form layui-form-pane" style="margin: 15px;">',
 
+          '<li class="layui-form-item">',
 
+            '<label class="layui-form-label">输入框</label>',
 
+            '<div class="layui-input-block">',
 
+              '<input class="layui-input" lay-verify="required" name="field1">',
 
+            '</div>',
 
+          '</li>',
 
+          '<li class="layui-form-item">',
 
+            '<label class="layui-form-label">选择框</label>',
 
+            '<div class="layui-input-block">',
 
+              '<select name="field2">',
 
+                '<option value="A">A</option>',
 
+                '<option value="B">B</option>',
 
+              '<select>',
 
+            '</div>',
 
+          '</li>',
 
+          '<li class="layui-form-item" style="text-align:center;">',
 
+            '<button type="submit" lay-submit lay-filter="*" class="layui-btn">提交</button>',
 
+          '</li>',
 
+        '</ul>'].join(''),
 
+        success: function(layero, index){
 
+          layero.find('.layui-layer-content').css('overflow', 'visible');
 
+          
+          form.render().on('submit(*)', function(data){
 
+            var field = data.field;
 
+            
+            // 显示填写的表单
 
+            layer.msg(util.escape(JSON.stringify(field)), {
 
+              icon: 1
 
+            });
 
+            // layer.close(index); //关闭层
 
+          });
 
+        }
 
+      });
 
+    }
 
+  });
 
+});
 
+</script>
 
+</body>
 
+</html>

部分文件因为文件数量过多而无法显示