Dawn_Dusk_
Dawn_Dusk_

HTML+CSS入门学习

一、网页构成

HTML+CSS+JS

二、HTML（超文本语言）

基础框架

注意：本文中<标签名/>为自结束标签，<标签名>（无 “ / ”则省略了）

进入VS Code，选择HTML语言输入 “  ！”，再按 “Tab”   后，会有以下代码出现




    
    
    
    Document

1.          是文档声明，声明当前网页版本，是html5的写法

2.             是默认语言为英文，但可以输出中文，只是会让你的浏览器提示你要不要翻译此页，改成zh就没有翻译选项（即变成了中文页面）

3.               是头部的标签，帮助浏览器或搜索引擎来解析网页

4.用meta标签设置网页的元数据

    charset用来设置网页的字符集，避免乱码问题

    name 指定的数据的名称

    content 指定的数据内容 

    选定字符集为UTF-8

 是个是IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式

   指定一个元数据名为viewport(设备屏幕上显示网页的区域），它的内容值在content（属性值）里

5.  网页标题，搜索引擎根据title中内容判断网页主要内容

6.是html的子元素，用来书写网页的主体

常用基础标签

（一）框架标签

        <body></p> <h4 id="%EF%BC%88%E4%BA%8C%EF%BC%89%E6%A0%87%E9%A2%98%E5%92%8C%E6%AE%B5%E8%90%BD%EF%BC%8C%E6%96%87%E6%9C%AC%E6%A0%BC%E5%BC%8F%E5%8C%96%E6%A0%87%E7%AD%BE">（二）标题和段落，文本格式化标签</h4> <table border="1" style="width:500px;"> <tbody> <tr> <td> 标题标签</td> <td><h1><h2><h3><h4><h5><h6></td> </tr> <tr> <td> 段落标签</td> <td><p></td> </tr> <tr> <td>换行</td> <td><br/>(自结束标签）</td> </tr> <tr> <td> 分割线</td> <td><hr/></td> </tr> <tr> <td>加粗</td> <td><strong>    /    <b></td> </tr> <tr> <td>倾斜</td> <td><em>     /    <i></td> </tr> <tr> <td> 删除线 </td> <td><del>      /     <s></td> </tr> <tr> <td>下划线 </td> <td><ins>    /    <u></td> </tr> </tbody> </table> <h4 id="%C2%A0%EF%BC%88%E4%B8%89%EF%BC%89%E5%88%86%E5%8C%BA%EF%BC%8C%E8%B7%A8%E5%BA%A6%EF%BC%8C%E6%A0%87%E7%AD%BE"> （三）分区，跨度，标签</h4> <table border="1" style="width:500px;"> <tbody> <tr> <td><div></td> <td>大盒子，独占一行</td> </tr> <tr> <td><span>   </td> <td>小盒子，可以多个占用一行</td> </tr> <tr> <td>注释 Ctrl+/ </td> <td><!--  --></td> </tr> <tr> <td>链接标签</td> <td><a herf="(网址)"   target=“_blank">   </a></td> </tr> </tbody> </table> <h4 id="%C2%A0%EF%BC%88%E5%9B%9B%EF%BC%89HTML%E4%B8%AD%E7%9A%84%E5%AE%9E%E4%BD%93%EF%BC%88%E8%BD%AC%E4%B9%89%E5%AD%97%E7%AC%A6%EF%BC%89"> （四）HTML中的实体（转义字符）</h4> <table border="1" style="width:500px;"> <tbody> <tr> <td> </td> <td>空格</td> </tr> <tr> <td>></td> <td>大于符号</td> </tr> <tr> <td><</td> <td>小于符号</td> </tr> <tr> <td>©</td> <td>版权符号</td> </tr> </tbody> </table> <h4 id="%C2%A0%EF%BC%88%E4%BA%94%EF%BC%89%E5%88%97%E8%A1%A8%E5%92%8C%E8%A1%A8%E5%8D%95%E6%A0%87%E7%AD%BE"> （五）列表、表格、表单</h4> <ul> <li>列表 <ul> <li>无序标签<ul>（里面用<li>）</li> <li>有序标签<ol>（里面用<li>）</li> <li>自定义标签<dl>，标题<dt>，内容<dd> <table border="1" style="width:500px;"> <tbody> <tr> <td style="text-align:center;"><strong>ul属性</strong></td> <td style="text-align:center;"><strong>备注</strong></td> </tr> <tr> <td style="text-align:center;">list-style</td> <td style="text-align:center;">无序列表样式none</td> </tr> <tr> <td style="text-align:center;">默认竖着排列</td> <td style="text-align:center;">设置左右浮动，横向排列，（清除浮动）</td> </tr> <tr> <td style="text-align:center;">type</td> <td style="text-align:center;">circle空心圆、disc实心圆、square正方形</td> </tr> <tr> <td style="text-align:center;"><strong>ol属性</strong></td> <td style="text-align:center;"><strong>备注</strong></td> </tr> <tr> <td style="text-align:center;">type</td> <td style="text-align:center;">A、a、1、i、l</td> </tr> </tbody> </table></li> </ul></li> <li>表格<table     (可以写属性）> <ul> <li>表格属性 <table border="1" style="width:500px;"> <tbody> <tr> <td>align / valign</td> <td>表格位置 / 表格内文字位置</td> </tr> <tr> <td>border /width / height</td> <td>边框 / 宽 / 高</td> </tr> <tr> <td>cellspacing</td> <td>单元格于内容之间的距离</td> </tr> <tr> <td>cellpadding</td> <td>单元格之间的距离</td> </tr> <tr> <td>background / bgcolor</td> <td>背景 / 背景颜色</td> </tr> </tbody> </table></li> </ul><pre><code class="language-html"><table> <thead> <tr> <th>……</th> </tr> </thead> <tbody> <td> <th>……</th> </td> </tbody> </table> </code></pre> </li> </ul> <p></p> <ul> <li>表单标签（普遍属性：name标签名称 / <strong>检索值</strong>，disabled禁用效果，readonly只读针对input的text/password和textarea，value设定或获取输入值） <ul> <li>form表单： action = "url"（接口请求地址，不常用）,method = 提交方式 get（获取）  post（发送）</li> <li><span style="color:#4d4d4d;">label标签名：for="以下表单的id属性"（非必须）</span></li> <li>提交（button / input） <ul> <li>input代替  <ul> <li>value：按钮上的名称</li> <li>type： submit提交  reset重置  button 按钮</li> <li>button按钮 type="subumit"提交</li> <li>textarea文本框： cols规定文本可见区域宽度，rows行数</li> <li>select选择下拉框：<select>需要name（里面用<option>，option需要value)</li> <li>input标签：包含在<form>中，<input type = "属性值”/> <table border="1" style="width:500px;"> <caption> input类型（type） </caption> <tbody> <tr> <td>text  文本  /  password  密码</td> <td><span style="color:#1a439c;">name（必须）</span></td> </tr> <tr> <td>radio  单选框  /  checkbox  多选框</td> <td>value/name</td> </tr> <tr> <td>datetime-local 日期（不够美观）</td> <td></td> </tr> </tbody> </table></li> </ul></li> </ul></li> </ul></li> </ul> <h4 id="%C2%A0%20(%E5%85%AD%EF%BC%89%E5%9B%BE%E5%83%8F%E6%A0%87%E7%AD%BE">  (六）图像标签</h4> <p>        <img />图像标签，例：<img src="img.jpg"/></p> <table border="1" style="width:500px;"> <caption> 图像属性 </caption> <tbody> <tr> <td>src</td> <td>图片路径</td> </tr> <tr> <td>alt </td> <td>替换文本</td> </tr> <tr> <td>title </td> <td>提示文本</td> </tr> <tr> <td>width/height </td> <td>设置图像宽高</td> </tr> <tr> <td>border</td> <td>设置图像边框粗细</td> </tr> </tbody> </table> <p></p> <h3 id="%E7%9B%92%E5%AD%90%E5%88%86%E7%B1%BB">盒子分类（设置居中见盒模型）</h3> <h4 id="%E5%9D%97%E5%85%83%E7%B4%A0%EF%BC%88div%2Ch1-h6%2Cp.table%2Cul%2Csection%2Ccontent...)">块元素（div,h1-h6,p,table,ul,section,content...)</h4> <p><span style="color:#1a439c;">可自动换行，可设置宽高</span></p> <p><span style="color:#1a439c;">margin（外边框），padding（内边框）上下左右有效</span></p> <p></p> <h4 id="%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0(a%2Cspan%2Cinput%2Cselect%2Cbutton)">内联元素/内联块(a,span,input,select,button)</h4> <p><span style="color:#1a439c;">内联元素（a,span）：不自动换行，设置宽高无效</span></p> <p><span style="color:#1a439c;">margin仅左右有效，padding都有效</span></p> <p>默认排列方式从左到右</p> <p></p> <p><span style="color:#1a439c;">内联块（input,select,button）：可设置宽高，margin可变</span></p> <p><span style="color:#fe2c24;">消除默认边距html,body{margin和padding均设为0}</span></p> <p></p> <h4 id="%E8%BD%AC%E5%8C%96%EF%BC%88%E5%9C%A8CSS%E5%86%85%EF%BC%89">转化（在CSS内）</h4> <p>display：inline（块转行内）</p> <p>display：block（行内转块）</p> <p>display：inline-block（转换为内联块）</p> <p></p> <h3 id="%E9%A1%B5%E9%9D%A2%E7%BB%93%E6%9E%84">页面结构</h3> <table border="1" style="width:500px;"> <tbody> <tr> <td> <p><header> </p> </td> <td> <p>标题头部区域内容（用于页面或页面中一块区域）</p> </td> </tr> <tr> <td> <p><fooder> </p> </td> <td> <p>标题脚步区域内容</p> </td> </tr> <tr> <td> <p><section></p> </td> <td> <p> web网页中一块独立区域</p> </td> </tr> <tr> <td> <p><article> </p> </td> <td> <p>独立文章内容</p> </td> </tr> <tr> <td> <p><aside> </p> </td> <td> <p>侧边栏（相关内容和应用）</p> </td> </tr> <tr> <td><nav></td> <td>导航类辅助内容</td> </tr> </tbody> </table> <p></p> <h2 id="%E4%B8%89%E3%80%81CSS">三、CSS</h2> <h3 id="%EF%BC%88%E4%B8%80%EF%BC%89%E9%80%89%E6%8B%A9%E5%99%A8">（一）选择器</h3> <h3 id="%EF%BC%88%E4%BA%8C%EF%BC%89%E5%B8%B8%E8%A7%81%E5%B1%9E%E6%80%A7">（二）常见属性</h3> <h4 id="1.%E5%AD%97%E4%BD%93%E5%B1%9E%E6%80%A7%C2%A0%20%C2%A0">1.盒模型</h4> <p><strong>（1）外边距margin的应用</strong></p> <ul> <li>margin 清除周围的（外边框）元素区域， 没有背景颜色，是完全透明的。</li> <li>margin 可以单独改变元素的上，下，左，右边距，可以一次改变所有的属性</li> </ul> <p>        （设置方式1：margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;）</p> <p>        （设置方式2：margin:25px 50px 75px 100px;上 右 下 左</p> <p>                                margin:25px 50px 75px<strong>;</strong>上 左右 下</p> <p>                                margin:25px 50px;上下 左右</p> <p>                                margin:25px;全部）</p> <ul> <li><strong>设置居中：</strong></li> </ul> <p>        <span style="color:#1a439c;"><strong>块元素居中：盒子必须设置了宽度，两外边距设置为auto</strong></span></p> <p><span style="color:#1a439c;"><strong>        行内元素或行内块元素的居中，给其父元素添加<code>text-align:center</code>即可</strong></span></p> <ul> <li><strong>嵌套块元素垂直外边距合并造成的塌陷</strong>：对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值</li> </ul> <p>        解决方案：</p> <p>                为父元素定义上边框（透明的） border:1px solid transparent;</p> <p>                为父元素定义上（细细的）内边距 padding：1px;</p> <p>                为父元素添加overflow:hidden;（常用）</p> <h4 id="5.%E5%85%B6%E4%BB%96%E5%B1%9E%E6%80%A7(%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80%EF%BC%89">5.其他属性(网页布局）</h4> <p><strong>(1)流动布局</strong></p> <p></p> <p><strong><span style="color:#1a439c;">(2)浮动布局：</span></strong><span style="color:#1a439c;">（要求一浮全浮，否则当前浮动元素会影响后面的标准流）</span></p> <p>          <span style="color:#1a439c;"> float：left/right</span></p> <p><strong>         清除浮动（清除浮动元素造成的影响）</strong></p> <ul> <li>如果父盒子本身有高度，则不需要清楚浮动</li> <li><strong>清楚浮动后，父级就会根据浮动的子盒自动检测高度，父级有了高度，就不会影响下面的标准流了</strong></li> <li>方法：(一般使用clear：both；） <ul> <li> <p>额外标签法（隔墙法）：<strong>（只有块元素可以，不常用）</strong>找到最后浮动的盒子，写一个标签(<div class="clear">)，在style内加上</p> <pre><code class="language-html">.clear{ clear:both; }</code></pre> </li> <li> <p>给父级元素添加overflow属性，将其属性值设置为hidden、auto或scroll。常用overflow:hidden;（缺点：无法显示溢出部分）</p> </li> <li> <p><span style="color:#1a439c;"><strong>给父级元素添加after伪元素</strong></span></p> <pre><code class="language-html">clearfix:after{     content:'';     display:block;     height:0;     clear:both;     visibility:hidden; overflow:hidden; } .clearfix{     /*IE6、7专有*/     *zoom:1; } <!--父元素内 <div class = "box">改为<div class = "box clearfix"> --></code></pre> </li> <li> <p>给父元素添加双伪元素(使用同上）</p> <pre><code class="language-html">.clearfix:before, .clearfix:after{     content:"";     display:table; } .clearfix:after{    clear:both; } .clearfix{     *zoom:1; }</code></pre> </li> </ul></li> </ul> <p></p> <p><span style="color:#1a439c;"><strong>(3)定位：</strong></span></p> <ul> <li>相对定位：（以自己原来的位置为顶点，地面上的位置谁都不许占）</li> </ul> <p>           position：relative</p> <p>           left    500px（距离<strong>原来位置</strong>左边500像素）</p> <p>           top    10px（距离原来位置底部10像素）</p> <ul> <li>绝对定位：从里到外找第一个有定位的的外层元素作为起点，没有就用浏览器原点</li> </ul> <p>           position:absolute; </p> <p>           left    500px（距离<strong>起点</strong>左边500像素）</p> <p>           top    10px（距离<strong>起点</strong>底部10像素）</p> <ul> <li>固定定位：相对于浏览器可视窗口进行定位，起飞后在xoy面移动，固定定位会固定在浏览器的某个位置，不会随滚动条滚动（特殊的绝对定位）</li> </ul> <p>          position：fixed</p> <p></p> <p><span style="color:#1a439c;"><strong>（4）flex布局</strong></span><br><span class="link-card-box"><span class="link-title">    CSS flex布局（弹性布局/弹性盒子）</span><span class="link-desc">CSS flex布局也称弹性布局，或者弹性盒子，当页面需要适应不同的屏幕大小以及设备类型时，flex布局非常有用。flex布局是CSS3新增的功能，需要借助若干CSS属性来实现。</span><span class="link-link">http://c.biancheng.net/css3/flex.html</span></span></p> <p>        <strong>常用属性</strong></p> <table border="1" style="width:500px;"> <tbody> <tr> <td><strong>display</strong></td> <td><strong>Flex</strong></td> </tr> <tr> <td><strong>flex-direction</strong></td> <td><strong>指定弹性盒子中子元素的排列方式</strong></td> </tr> <tr> <td><strong>flex-wrap</strong></td> <td><strong>设置当弹性盒子的子元素超出父容器时是否换行</strong></td> </tr> <tr> <td><strong>justify-content</strong></td> <td><strong>设置弹性盒子中元素在主轴（横轴）方向上的对齐方式</strong></td> </tr> <tr> <td><strong>align-items</strong></td> <td><strong>设置弹性盒子中元素在侧轴（纵轴）方向上的对齐方式</strong></td> </tr> </tbody> </table> <p>        <strong>设置居中（注意设置html和body）</strong></p> <pre><code class="language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

（三）引入CSS

方法一：标签引入

  • 基础选择器
    • （类选择器：用class属性值）（标签选择器）（id选择器）
类选择器
    .hhh{
        width:400px;
        height:400px;
        background-color:   rgb(104,219,27);
        }


标签选择器
    div{
            ......
        }

id选择器
    #id名称{
            ......
           }
  • 复合选择器
    • 并集选择器（多个选择器应用相同样式时使用）
    • 后代选择器
    • 交集选择器
    • 伪类选择器/伪元素（见底下链接的补充一）
并集选择器:
多种选择器应用相同样式
选择器,选择器,……{属性名称:属性值}

后代选择器：
定义子标记的样式进行子标记定位
父标记选择器+空格+子标记的选择器{属性名称:属性值}

方法二：行内引入


                    
                    
  • B端模块（1）：用户管理模块的定义、功能、页面和设计原则。
                        

                        
    B端管理系统都是各个模块的有机结合，保证系统的正常运转，这点和人体系统一样，比如消化、呼吸、循环系统等等。从本期开始，贝格前端工场将详细B端各个模块，一共分为20期，本期是第一期，欢迎老铁们持续关注。B端的用户管理指的是针对企业或者组织内部的业务用户进行管理和控制的一种系统功能。在B端（BusinesstoBusiness）场景中，企业通常需要对其内部员工、合作伙伴、供应商等业务用户进行管理，以确
    
                    
    • 
                    
  • 钉钉企业应用开发系列：前端实现钉钉扫码登录功能
                        脑袋大大的
钉钉生态创业者专栏钉钉前端第三方登录
                        
    本文将围绕“钉钉扫码登录”这一功能点展开讲解，并结合前端技术栈（HTML+JavaScript+Vue3）进行实现。我们将通过调用钉钉开放平台提供的JSAPI来实现扫码登录的功能，并展示完整的代码示例。一、前置准备1.注册钉钉开发者账号并创建企业应用访问钉钉开放平台。创建一个企业内部应用或第三方企业应用。获取corpId和redirect_uri等信息，用于后续配置。2.获取扫码登录权限确保你的应
    
                    
    • 
                    
  • 【CSS】文本超过行数显示“展开”、“收起”
                        扶我起来还能学_
css前端
                        
    使用css样式控制文本超过行数显示“展开”、“收起”css代码如下：.container{width:800px;position:relative;padding-bottom:20px;}.content{overflow:hidden;line-height:1;/*最多展示几行就(n*line-height)em，*/height:3em;background:yellow;}.more{
    
                    
    • 
                    
  • Web端版本更新提示--前端处理
                        扶我起来还能学_
前端javascriptvue.js前端框架
                        
    Web端版本更新提示–前端处理原理：webpack每次打包jshash值不同import{MessageBox}from'element-ui'letlastScripts=[]//最新一次js文件src名constDURATION=5*60*1000//设置5分钟检查更新一次//提取html中的script标签的src属性asyncfunctionextractNewScripts(htmlSt
    
                    
    • 
                    
  • spring-data-jpa+spring+hibernate+druid配置
                        

                        
    参考链接：http://doc.okbase.net/liuyitian/archive/109276.htmlhttp://my.oschina.net/u/1859292/blog/312188最新公司的web项目需要用到spring-data-jpa作为JPA的实现框架，同时使用阿里巴巴的开源数据库连接池druid。关于这两种框架的介绍我在这里就不多赘述。直接进入配置页面：spring的配置
    
                    
    • 
                    
  • SpringBoot ThreadLocal 全局动态变量设置
                        xdscode
springbootjavaThreadLocal
                        
    需求说明：现有一个游戏后台管理系统，该系统可管理多个大区的数据，但是需要使用大区id实现数据隔离，并且提供了大区选择功能，先择大区后展示对应的数据。需要实现一下几点：1.前端请求时，area_id是必传的1.数据隔离，包括查询及增删改：使用mybatis拦截器实现2.多个用户同时操作互不影响3.非前端调用场景的处理：定时任务、mq1.前端决定area_id为了解决多个用户可以互不影响的使用不同的a
    
                    
    • 
                    
  • 深入剖析开源AI阅读器项目Saga Reader基于大模型的文本转换与富文本渲染优化方案
                        魑魅丶小鬼
人工智能
                        
    引言AI阅读器作为一种新型的内容消费工具，正在改变人们获取和处理信息的方式。本文将介绍SagaReader项目中如何利用大型语言模型(LLM)进行网页内容抓取、智能优化和富文本渲染，特别是如何通过精心设计的提示词(prompt)引导LLM生成样式丰富的HTML内容，提升用户阅读体验。关于SagaReader基于Tauri开发的著名开源AI驱动的智库式阅读器（前端部分使用Web框架），能根据用户指定
    
                    
    • 
                    
  • 04_JavaWeb回顾笔记
                        skping-go
javajavaweb
                        
    JavaWeb回顾笔记[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wh1nKopi-1605668744709)(F:\资料\Java\笔记\笔记\assets\javaweb阶段知识体系.png)]Day01HTML1.1HTML简介HTML：HyperTextMarkupLanguage，超文本标记/标签语言。超文本:超出了普通文本的能力标记:标签W3C(Wo
    
                    
    • 
                    
  • 前端面试的话术集锦第 25 篇博文——CSS面试题上
                        互联网全栈开发实战
面试专栏-前端后端面试前端面试css跳槽职场和发展职场发展求职招聘
                        
    这是记录前端面试的话术集锦第二十五篇博文——CSS面试题上，我会不断更新该博文。❗❗❗1.介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？标准盒子模型：宽度=内容的宽度(content)+border+padding+margin低版本IE盒子模型：宽度=内容宽度(content+border+padding)+margin2.box-sizing属性用来控制元素的盒子模型的解
    
                    
    • 
                    
  • Softhub软件下载站实战开发（四）：代码生成器设计与实现
                        叹一曲当时只道是寻常
softHubpython低代码mysql
                        
    文章目录Softhub软件下载站实战开发（四）：代码生成器设计与实现1.前言2.技术选型3.架构概览️3.1架构概览3.2工作流程详解4.核心功能实现⏳4.1配置管理系统4.2数据库表结构解析4.3模板渲染引擎4.4智能类型转换4.5动态文件生成4.6智能覆盖策略4.7运行5.附录ℹ️5.1生成器代码5.2后端模板5.3前端模板Softhub软件下载站实战开发（四）：代码生成器设计与实现1.前言在
    
                    
    • 
                    
  • Softhub软件下载站实战开发（十四）：软件收藏集设计
                        叹一曲当时只道是寻常
softHub前端golang
                        
    文章目录Softhub软件下载站实战开发（十四）：软件收藏集设计引言：为什么我们需要收藏集功能？收藏集功能的核心价值1.资源整合与分类管理技术架构设计数据库设计核心接口设计后端实现详解1.收藏集服务层2.列表查询实现3.添加软件实现前端实现详解1.收藏集列表页面2.软件管理弹窗组件3.软件选择与添加逻辑Softhub软件下载站实战开发（十四）：软件收藏集设计前面几篇我们讲了软件管理相关实现，本篇我
    
                    
    • 
                    
  • 使用ENO将您的JSON对象生成HTML显示
                        土族程序员
jsonhtmljavascripteno前端
                        
    ENO是简单易用，性能卓越，自由灵活开源的WEB前端组件；实现JSON与HTML互操作的JavaScript函数库。没有任何其它依赖，足够轻量。WEBPackNPM工程安装。npminstall@joyzl/eno然后在JS中引用import"@joyzl/eno";将JS实体对象填充到表单假设有一个如下的HTML表单TYPE1TYPE2通过以下代码将实体对象，设置到表单中，实体对象可以从服务器请
    
                    
    • 
                    
  • Java程序设计（二十七）：基于SSM框架的OA办公自动化管理平台的设计与实现
                        人工智能_SYBH
2025年java程序设计java数据挖掘开发语言vue.js后端人工智能springboot
                        
    1.项目概述办公自动化（OA，OfficeAutomation）管理平台是企业实现内部管理信息化的重要工具。本文提出并实现了一个基于Java的OA办公自动化管理平台。该平台基于SSM架构（Spring+SpringMVC+MyBatis），数据库采用MySQL，并通过HTML、CSS、JavaScript等技术实现用户界面。1.1平台功能简介平台提供了管理员、普通用户和部门三类角色，分别具有不同的
    
                    
    • 
                    
  • 从零开始学前端（HTML篇）：9、嵌入另一个页面的iframe元素
                        

                        
    iframe元素通常用于在页面中嵌入另一个页面可以理解为在自己的页面里弄出一个区域，里面放置另一个页面iframe是可替换元素可替换元素：是指会被替换的元素。例如图片元素img等，书写img时没有在里门添加内容，而img元素把加载出来的图片作为内容。通常是行盒通常显示的内容取决于元素的属性css不能完成控制其中的样式具有行块盒的特点
    
                    
    • 
                    
  • Softhub软件下载站实战开发（十七）：用户端API设计
                        

                        
    文章目录Softhub软件下载站实战开发（十七）：用户端API设计前言用户端API概览1.分类管理API2.首页API3.资源集管理API4.软件管理API5.资源下载API⬇️API设计原则‍Softhub软件下载站实战开发（十七）：用户端API设计前言在Softhub软件下载站的开发过程中，我们终于来到了用户端API的设计阶段！用户端API是整个系统与前端交互的核心桥梁，良好的API设计能极大
    
                    
    • 
                    
  • Mammoth.js 使用详解
                        啃火龙果的兔子
开发DEMO前端javascript
                        
    Mammoth.js使用详解Mammoth.js是一个用于将Word文档（.docx）转换为HTML或Markdown的JavaScript库，支持浏览器和Node.js环境。安装浏览器环境Node.js环境npminstallmammoth#或yarnaddmammoth基本使用1.将DOCX转换为HTML//浏览器中使用input[type=file]获取文件document.getEleme
    
                    
    • 
                    
  • 前端自动化测试最佳实践：Jest与Cypress详解
                        

                        
    目录前言自动化测试概述Jest详解Jest基础配置单元测试实践组件测试Mock与Stub快照测试Cypress详解Cypress环境搭建端到端测试实践页面交互测试API模拟测试策略与最佳实践测试金字塔测试覆盖率持续集成常见问题与解决方案总结前言随着前端应用的复杂度不断提高，确保代码质量和稳定性变得越来越重要。自动化测试作为保障代码质量的重要手段，已成为现代前端开发流程中不可或缺的一环。本文将详细介
    
                    
    • 
                    
  • 【前端工程化】前端工作中如何协同管理开发任务？
                        
前端
                        
    在企业级后台系统开发中，任务管理是保障团队协作效率、控制交付质量的核心环节。相比C端产品强调敏捷响应和快速迭代，B端更注重任务拆解的合理性、流程的可控性以及多人协作下的责任清晰。本文主要围绕需求拆解、任务分配、进度跟踪与闭环机制展开，适用于使用Git+PR流程+看板式工具的开发团队。一、任务管理目标职责明确每位成员清楚自己的任务范围与交付标准；避免多人重复处理同一功能模块；可视化进度使用看板或列表
    
                    
    • 
                    
  • Web 前端性能优化：从代码到加载速度的全面剖析
                        码力无边-OEC
前端性能优化web
                        
    Web前端性能优化：从代码到加载速度的全面剖析当用户访问你的网站时，如果页面加载时间超过3秒，跳出率会飙升至40%以上。更糟糕的是，移动端用户的耐心只有2秒。这意味着性能优化不仅仅是技术问题，更直接关系到业务成果。经过多年的前端开发实践，我发现很多开发者在性能优化时存在一个误区：过分关注工具和框架的选择，却忽略了最基础但最关键的优化策略。今天我们就来深入剖析前端性能优化的核心要点。性能优化的核心指
    
                    
    • 
                    
  • python汇率_用Python抓取汇率
                        

                        
    抓取的是中行的数据:网址代码#-*-coding:utf-8-*-importreimporturllib.requesturl='http://www.boc.cn/sourcedb/whpj/index.html'#网址req=urllib.request.Request(url)response=urllib.request.urlopen(req)the_page=response.rea
    
                    
    • 
                    
  • 让你的 AI 更聪明，这 7 个开源 MCP 项目不要错过
                        霍格沃兹测试开发学社
人工智能人工智能测试用例开发语言selenium驱动开发开源python
                        
    你还在用AI只是写写文档、改改代码？那你真的小看它了。现在，通过一套叫MCP（ModelControlPlane）的系统，AI不再只是“语言模型”，而是能直接操作网页、调用工具、自动化执行复杂任务的“智能助手”！今天整理了7个超实用的开源MCP项目，让你的AI立刻“开挂”。01｜PagePublisherMCP：HTML页面一键上线还在发愁怎么把AI生成的HTML页部署上线？PagePublish
    
                    
    • 
                    
  • SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版：整体布局、架构调整（二）
                        喜欢敲代码的程序员
前后端分离SpringBootSpringspringbootmybatismysqlvue.jselementui
                        
    目录一、前言二、后端调整1.实体类调整2.菜单相关接口3.用户相关接口4.新增工具类5.新增菜单树返回类6.配置类、拦截器三、前端调整1.请求调整2.页面布局、样式调整1.user.vue2.index.vue3.请求拦截四、开发过程中的问题五、附：源码1.源码下载地址六、结语一、前言此文章在上次的基础上进行了部分调整，并根据用户体验（我自己）确认了页面整体布局和数据呈现，暂定就先这样，后续有需要
    
                    
    • 
                    
  • Fiddler中文版如何提升API调试效率：本地化优势与开发者实战体验汇总
                        代码背锅人日志
ios小程序uni-appiphoneandroidwebviewhttps
                        
    在现代软件开发中，调试网络请求是不可或缺的一环。无论是Web前端、移动App，还是后端微服务，只要涉及到API通信，就离不开高效的抓包工具。Fiddler作为全球使用最广泛的抓包调试工具之一，凭借功能强大、灵活扩展和跨平台支持，深受开发者喜爱。而对于中文用户而言，Fiddler中文版的出现，让这款专业工具变得更加亲民、高效和易于掌握。本文将结合开发者日常使用场景，解析Fiddler中文版如何通过本
    
                    
    • 
                    
  • 深入解析：v0、Cursor、Manus等AI编程助手的系统提示词、工具与模型
                        张道宁
人工智能
                        
    引言在当今快速发展的AI编程领域，涌现出了许多强大的AI编程助手工具，如v0、Cursor、Manus、Same.dev、Lovable、Devin和ReplitAgent等。这些工具通过智能化的代码生成、补全和优化，正在彻底改变开发者的工作流程。v0：Vercel的AIUI生成器系统提示词设计v0的系统提示词专注于将自然语言描述转换为可用的UI代码（主要是React和TailwindCSS）。其
    
                    
    • 
                    
  • #TypeScript高频面试题总结（2025版）
                        沈大大520
typescript前端面试
                        
    本文将分享TypeScript高频面试题的一些面试点以及相应的示列作者：沈大大更新时间：2025-03-11前言TypeScript作为JavaScript的超集，已经成为前端开发中不可或缺的技术。本文整理了最常见的TypeScript面试题，从基础到高级，帮助你全面准备技术面试。基础概念篇1.TypeScript与JavaScript的区别是什么？TypeScript是JavaScript的超集
    
                    
    • 
                    
  • 前端开发实践：疑难问题与解决方案总结
                        沈大大520
实际开发所遇见的问题vue.js前端
                        
    本文将分享前端开发实践：疑难问题与解决方案总结，希望对大家在面试过程中有一定的帮助！作者：沈大大更新时间：2025-03-13前言在前端开发过程中，我们经常会遇到各种各样的技术难题。本文将分享在实际开发中遇到的一些典型问题及其解决方案，希望能给其他开发者一些参考和启发。性能优化类问题1.首屏加载过慢问题描述页面首次加载时间超过3秒用户等待时间过长白屏时间明显问题分析打包体积过大第三方库引入过多未进
    
                    
    • 
                    
  • js实现百度地图的自定义marker与css3动画的交互
                        沈大大520
css3动画扩展自定义百度地图makerjscss3javascript前端html5
                        
    使用过百度地图，业务需求需要对某些特定标记物进行高亮和动画标记，因此采用css3对百度地图的marker组件进行动态效果的调试，一：调用百度地图的apiDocument.map{width:100%;height:100%;background:#d5e6f5;position:absolute;float:left;}二：初始化百度地图创建实例varmap=newBMapGL.Map("map"
    
                    
    • 
                    
  • springBoot服务之间的转发
                        

                        
    场景：前端请求的服务里没有关于该业务相关的代码。另一台服务有，这时候转发过去再处理明显方便多了。设前端请求的服务为A，实际处理的服务为B在服务A，我们这样写@PostMapping("delHlpxglHlcfjl")publicObjectdelHlpxglHlcfjl(@RequestBodyMapparam){try{Stringurl=baseUrl+"服务B实际接口名称";log.inf
    
                    
    • 
                    
  • 实现el-date-picker带时分秒（附默认时间）
                        

                        
    htmldatatime:'',pickerOptions:{showTime:true,format:'yyyy-MM-ddHH:mm:ss'//可以根据需要设置日期时间的显示格式},带默认时间，需要到一个插件momentdataCreateTime:[moment().subtract(30,'days').format('YYYY-MM-DD'),moment().format('YYYY-
    
                    
    • 
                                
  • iOS http封装
                                    374016526
ios服务器交互http网络请求
                                    
    程序开发避免不了与服务器的交互，这里打包了一个自己写的http交互库。希望可以帮到大家。 
  
内置一个basehttp，当我们创建自己的service可以继承实现。 
  
KuroAppBaseHttp *baseHttp = [[KuroAppBaseHttp alloc] init]; 
[baseHttp setDelegate:self]; 
[baseHttp 
    
                                
    • 
                                
  • lolcat ：一个在 Linux 终端中输出彩虹特效的命令行工具
                                    brotherlamp
linuxlinux教程linux视频linux自学linux资料
                                    
      
那些相信 Linux 命令行是单调无聊且没有任何乐趣的人们，你们错了，这里有一些有关 Linux 的文章，它们展示着 Linux 是如何的有趣和“淘气” 。 
在本文中，我将讨论一个名为“lolcat”的小工具 – 它可以在终端中生成彩虹般的颜色。 
何为 lolcat ? 
Lolcat 是一个针对 Linux，BSD 和 OSX 平台的工具，它类似于 cat 命令，并为 cat
    
                                
    • 
                                
  • MongoDB索引管理（1）——[九]
                                    eksliang
mongodbMongoDB管理索引
                                    
    转载请出自出处：http://eksliang.iteye.com/blog/2178427 一、概述 
      数据库的索引与书籍的索引类似，有了索引就不需要翻转整本书。数据库的索引跟这个原理一样，首先在索引中找，在索引中找到条目以后，就可以直接跳转到目标文档的位置，从而使查询速度提高几个数据量级。 
      不使用索引的查询称
    
                                
    • 
                                
  • Informatica参数及变量
                                    18289753290
Informatica参数变量
                                    
    下面是本人通俗的理解，如有不对之处，希望指正 info参数的设置：在info中用到的参数都在server的专门的配置文件中（最好以parma）结尾 下面的GLOBAl就是全局的，$开头的是系统级变量，$$开头的变量是自定义变量。如果是在session中或者mapping中用到的变量就是局部变量，那就把global换成对应的session或者mapping名字。 
 
 
[GLOBAL] $Par
    
                                
    • 
                                
  • python 解析unicode字符串为utf8编码字符串
                                    酷的飞上天空
unicode
                                    
    php返回的json字符串如果包含中文，则会被转换成\uxx格式的unicode编码字符串返回。 
在浏览器中能正常识别这种编码，但是后台程序却不能识别，直接输出显示的是\uxx的字符，并未进行转码。 
  
转换方式如下 
  
  
>>> import json
>>> q = '{"text":"\u4
    
                                
    • 
                                
  • Hibernate的总结
                                    永夜-极光
Hibernate
                                    
    1.hibernate的作用,简化对数据库的编码,使开发人员不必再与复杂的sql语句打交道 
  
做项目大部分都需要用JAVA来链接数据库，比如你要做一个会员注册的 页面，那么 获取到用户填写的 基本信后，你要把这些基本信息存入数据库对应的表中，不用hibernate还有mybatis之类的框架，都不用的话就得用JDBC，也就是JAVA自己的，用这个东西你要写很多的代码，比如保存注册信
    
                                
    • 
                                
  • SyntaxError: Non-UTF-8 code starting with '\xc4'
                                    随便小屋
python
                                    
    刚开始看一下Python语言，传说听强大的，但我感觉还是没Java强吧！ 
写Hello World的时候就遇到一个问题，在Eclipse中写的，代码如下 
'''
Created on 2014年10月27日

@author: Logic
'''
print("Hello World!"); 
 运行结果 
SyntaxError: Non-UTF-8 
    
                                
    • 
                                
  • 学会敬酒礼仪 不做酒席菜鸟
                                    aijuans
菜鸟
                                    
    俗话说，酒是越喝越厚，但在酒桌上也有很多学问讲究，以下总结了一些酒桌上的你不得不注意的小细节。 
 细节一：领导相互喝完才轮到自己敬酒。敬酒一定要站起来，双手举杯。  
 细节二：可以多人敬一人，决不可一人敬多人，除非你是领导。  
 细节三：自己敬别人，如果不碰杯，自己喝多少可视乎情况而定，比如对方酒量，对方喝酒态度，切不可比对方喝得少，要知道是自己敬人。  
 细节四：自己敬别人，如果碰杯，一
    
                                
    • 
                                
  • 《创新者的基因》读书笔记
                                    aoyouzi
读书笔记《创新者的基因》
                                    
    创新者的基因 
  
创新者的“基因”，即最具创意的企业家具备的五种“发现技能”：联想，观察，实验，发问，建立人脉。 
  
第一部分破坏性创新，从你开始 
第一章破坏性创新者的基因 
如何获得启示： 
发现以下的因素起到了催化剂的作用：(1) -个挑战现状的问题；(2)对某项技术、某个公司或顾客的观察；(3) -次尝试新鲜事物的经验或实验；(4)与某人进行了一次交谈，为他点醒
    
                                
    • 
                                
  • 表单验证技术
                                    百合不是茶
JavaScriptDOM对象String对象事件
                                    
    js最主要的功能就是验证表单,下面是我对表单验证的一些理解,贴出来与大家交流交流  ,数显我们要知道表单验证需要的技术点, String对象,事件,函数 
  
一:String对象;通常是对字符串的操作; 
  
1,String的属性; 
  
    字符串.length;表示该字符串的长度;
   var str= "java"
    
                                
    • 
                                
  • web.xml配置详解之context-param
                                    bijian1013
javaservletweb.xmlcontext-param
                                    
    一.格式定义： 
<context-param>  
	<param-name>contextConfigLocation</param-name>  
	<param-value>contextConfigLocationValue></param-value>  
</context-param> 
作用：该元
    
                                
    • 
                                
  • Web系统常见编码漏洞（开发工程师知晓）
                                    Bill_chen
sqlPHPWebfckeditor脚本
                                    
    1.头号大敌：SQL Injection 
原因：程序中对用户输入检查不严格，用户可以提交一段数据库查询代码，根据程序返回的结果， 
获得某些他想得知的数据，这就是所谓的SQL Injection，即SQL注入。 
本质: 
对于输入检查不充分，导致SQL语句将用户提交的非法数据当作语句的一部分来执行。 
示例： 
String query = "SELECT id FROM users
    
                                
    • 
                                
  • 【MongoDB学习笔记六】MongoDB修改器
                                    bit1129
mongodb
                                    
    本文首先介绍下MongoDB的基本的增删改查操作，然后，详细介绍MongoDB提供的修改器，以完成各种各样的文档更新操作    MongoDB的主要操作 
 
 show dbs 显示当前用户能看到哪些数据库 
 use foobar 将数据库切换到foobar 
 show collections 显示当前数据库有哪些集合 
 db.people.update，update不带参数，可
    
                                
    • 
                                
  • 提高职业素养，做好人生规划
                                    白糖_
人生
                                    
      
培训讲师是成都著名的企业培训讲师，他在讲课中提出的一些观点很新颖，在此我收录了一些分享一下。注：讲师的观点不代表本人的观点，这些东西大家自己揣摩。 
  
1、什么是职业规划：职业规划并不完全代表你到什么阶段要当什么官要拿多少钱，这些都只是梦想。职业规划是清楚的认识自己现在缺什么，这个阶段该学习什么，下个阶段缺什么，又应该怎么去规划学习，这样才算是规划。 
  
    
                                
    • 
                                
  • 国外的网站你都到哪边看？
                                    bozch
技术网站国外
                                    
    学习软件开发技术，如果没有什么英文基础，最好还是看国内的一些技术网站，例如：开源OSchina，csdn，iteye,51cto等等。 
个人感觉如果英语基础能力不错的话，可以浏览国外的网站来进行软件技术基础的学习，例如java开发中常用的到的网站有apache.org 里面有apache的很多Projects,springframework.org是spring相关的项目网站,还有几个感觉不错的
    
                                
    • 
                                
  • 编程之美-光影切割问题
                                    bylijinnan
编程之美
                                    
    
package a;

public class DisorderCount {

	/**《编程之美》“光影切割问题”
	 * 主要是两个问题：
	 * 1.数学公式（设定没有三条以上的直线交于同一点）：
	 * 两条直线最多一个交点，将平面分成了4个区域；
	 * 三条直线最多三个交点，将平面分成了7个区域；
	 * 可以推出：N条直线 M个交点，区域数为N+M+1。

    
                                
    • 
                                
  • 关于Web跨站执行脚本概念
                                    chenbowen00
Web安全跨站执行脚本
                                    
    跨站脚本攻击(XSS)是web应用程序中最危险和最常见的安全漏洞之一。安全研究人员发现这个漏洞在最受欢迎的网站,包括谷歌、Facebook、亚马逊、PayPal,和许多其他网站。如果你看看bug赏金计划,大多数报告的问题属于 XSS。为了防止跨站脚本攻击,浏览器也有自己的过滤器,但安全研究人员总是想方设法绕过这些过滤器。这个漏洞是通常用于执行cookie窃取、恶意软件传播,会话劫持,恶意重定向。在
    
                                
    • 
                                
  • [开源项目与投资]投资开源项目之前需要统计该项目已有的用户数
                                    comsci
开源项目
                                    
     
 
 
        现在国内和国外,特别是美国那边,突然出现很多开源项目,但是这些项目的用户有多少,有多少忠诚的粉丝,对于投资者来讲,完全是一个未知数,那么要投资开源项目,我们投资者必须准确无误的知道该项目的全部情况,包括项目发起人的情况,项目的维持时间..项目的技术水平,项目的参与者的势力,项目投入产出的效益.....
    
                                
    • 
                                
  • oracle alert log file（告警日志文件）
                                    daizj
oracle告警日志文件alert log file
                                    
    The alert log is a chronological log of messages and errors, and includes the following items: 
 
All internal errors (ORA-00600), block corruption errors (ORA-01578), and deadlock errors (ORA-00060) 
    
                                
    • 
                                
  • 关于 CAS SSO 文章声明
                                    denger
SSO
                                    
    由于几年前写了几篇 CAS 系列的文章，之后陆续有人参照文章去实现，可都遇到了各种问题，同时经常或多或少的收到不少人的求助。现在这时特此说明几点： 
 
1.  那些文章发表于好几年前了，CAS 已经更新几个很多版本了，由于近年已经没有做该领域方面的事情，所有文章也没有持续更新。 
 
2. 文章只是提供思路，尽管 CAS 版本已经发生变化，但原理和流程仍然一致。最重要的是明白原理，然后
    
                                
    • 
                                
  • 初二上学期难记单词
                                    dcj3sjt126com
englishword
                                    
    lesson 课 
traffic 交通 
matter 要紧；事物 
happy 快乐的，幸福的 
second 第二的 
idea 主意；想法；意见 
mean 意味着 
important 重要的，重大的 
never 从来，决不 
afraid 害怕 的 
fifth 第五的 
hometown 故乡，家乡 
discuss 讨论；议论 
east 东方的 
agree 同意；赞成 
bo
    
                                
    • 
                                
  • uicollectionview 纯代码布局, 添加头部视图
                                    dcj3sjt126com
Collection
                                    
    #import <UIKit/UIKit.h>

@interface myHeadView : UICollectionReusableView
{
    UILabel   *TitleLable;
}
-(void)setTextTitle;
@end
 
#import "myHeadView.h"

@implementation m
    
                                
    • 
                                
  • N 位随机数字串的 JAVA 生成实现
                                    FX夜归人
javaMath随机数Random
                                    
    /**
 * 功能描述 随机数工具类<br />
 * @author FengXueYeGuiRen
 * 创建时间 2014-7-25<br />
 */
public class RandomUtil {
    //  随机数生成器
    private static java.util.Random random = new java.util.R
    
                                
    • 
                                
  • Ehcache（09）——缓存Web页面
                                    234390216
ehcache页面缓存
                                    
    页面缓存 
目录 
1       SimplePageCachingFilter 
1.1      calculateKey 
1.2      可配置的初始化参数 
1.2.1     cach
    
                                
    • 
                                
  • spring中少用的注解@primary解析
                                    jackyrong
primary
                                    
    这次看下spring中少见的注解@primary注解，例子 
 
 

@Component
public class MetalSinger implements Singer{

    @Override
    public String sing(String lyrics) {
        return "I am singing with DIO voice
    
                                
    • 
                                
  • Java几款性能分析工具的对比
                                    lbwahoo
java
                                    
    Java几款性能分析工具的对比 
摘自：http://my.oschina.net/liux/blog/51800 
  
在给客户的应用程序维护的过程中，我注意到在高负载下的一些性能问题。理论上，增加对应用程序的负载会使性能等比率的下降。然而，我认为性能下降的比率远远高于负载的增加。我也发现，性能可以通过改变应用程序的逻辑来提升，甚至达到极限。为了更详细的了解这一点，我们需要做一些性能
    
                                
    • 
                                
  • JVM参数配置大全
                                    nickys
jvm应用服务器
                                    
    JVM参数配置大全 
 
/usr/local/jdk/bin/java -Dresin.home=/usr/local/resin -server -Xms1800M -Xmx1800M -Xmn300M -Xss512K -XX:PermSize=300M -XX:MaxPermSize=300M -XX:SurvivorRatio=8 -XX:MaxTenuringThreshold=5 -
    
                                
    • 
                                
  • 搭建 CentOS 6 服务器(14) - squid、Varnish
                                    rensanning
varnish
                                    
    （一）squid 
 
安装 
 
# yum install httpd-tools -y
# htpasswd -c -b /etc/squid/passwords squiduser 123456
# yum install squid -y 
 
设置 
 
# cp /etc/squid/squid.conf /etc/squid/squid.conf.bak
# vi /etc/
    
                                
    • 
                                
  • Spring缓存注解@Cache使用
                                    tom_seed
spring
                                    
    参考资料 
http://www.ibm.com/developerworks/cn/opensource/os-cn-spring-cache/ 
http://swiftlet.net/archives/774 
  
缓存注解有以下三个： 
@Cacheable      @CacheEvict     @CachePut
    
                                
    • 
                                
  • dom4j解析XML时出现"java.lang.noclassdeffounderror: org/jaxen/jaxenexception"错误
                                    xp9802

                                    
    java.lang.NoClassDefFoundError: org/jaxen/JaxenExc 
关键字: java.lang.noclassdeffounderror: org/jaxen/jaxenexception 
使用dom4j解析XML时，要快速获取某个节点的数据，使用XPath是个不错的方法，dom4j的快速手册里也建议使用这种方式 
执行时却抛出以下异常： 
Exceptio
    
                                
    •