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

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

方法二：行内引入


                    
                    
  • 让你的 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-
    
                    
    • 
                    
  • Qt 图形视图框架4-动画、碰撞检测和图形项组
                        Zy100Papa
Qtc++开发实战qt开发语言
                        
    1.动画1.1.使用QObject包装器1.2.属性动画（QPropertyAnimation）1.3.定时器动画（QTimer）1.4.场景推进动画（QGraphicsScene::advance）2.碰撞检测1.动画在Qt图形视图框架中，实现动画效果有多种常用方法，下面介绍几种主要方式：以下是在Qt5.15.5(MinGW环境)中实现图形视图框架动画的常用方法，代码已亲测可正常运行：1.1.使
    
                    
    • 
                    
  • rk3566开发之rknn npu 部署
                        三十度角阳光的问候
rknnnpurk3566目标检测
                        
    目录NPU使用RKNN模型非RKNN模型RKNN-Toolkit2工具RKNNNPU测试代码如下main.ccssd.cc调用ssd模型进行目标检测测试ssd.hqt中调用rknnnpu接口NPU使用RK3566内置NPU模块。使用该NPU需要下载RKNNSDK，RKNNSDK为带有NPU的RK3566/RK3568芯片平台提供编程接口，能够帮助用户部署使用RKNN-Toolkit2导出的RKNN
    
                    
    • 
                    
  • 实现顶部固定与平滑滑动二级菜单的网页导航设计
                        

                        
    本文还有配套的精品资源，点击获取简介：现代网页设计中，高效的导航菜单对用户体验至关重要。本设计涵盖固定在顶部的导航栏和二级菜单项的平滑滑动效果。通过CSS实现导航栏的固定定位，而JavaScript则负责二级菜单的平滑过渡动画。包含的文件如HTML结构、JavaScript交互逻辑、CSS样式和可能的图像资源，共同构建了这种流行的导航菜单布局。1.顶部固定、二级栏目之间相互滑动的导航菜单在现代网页
    
                    
    • 
                    
  • 7.3 React+CLI双剑合璧：GitHub监控工具界面开发实战全攻略
                        少林码僧
github前端gpt人工智能语言模型
                        
    React+CLI双剑合璧：GitHub监控工具界面开发实战全攻略-GitHubSentinelAgent用户界面原型设计与实现关键词：前端框架选型、React原型设计、API集成策略、CLI开发、组件化测试1.1用户界面功能规划通过ChatGPT交互式规划核心功能模块：
    
                    
    • 
                    
  • vue-element-plus-admin：一套基于vue3、element-plus、ts、vite的后台集成方案
                        

                        
    vue-element-plus-admin：一套基于vue3、element-plus、ts、vite的后台集成方案，中后台前端解决方案的探索与实践。框架示例图：在线预览：https://element-plus-admin.cn摘要：本文主要介绍了vue-element-plus-admin，一个基于element-plus的免费开源中后台前端模版。文章首先介绍了该模版的开发背景和技术栈，然后
    
                    
    • 
                    
  • 爬虫-数据解析
                        打酱油的；
python自动化+爬虫爬虫
                        
    1.解析概述特性re(正则表达式)bs4(BeautifulSoup)xpath(lxml)pyquery本质文本模式匹配HTML/XML解析器(DOM树操作)XML路径语言(节点导航)jQuery式CSS选择器(封装lxml)学习曲线陡峭中等中等简单(熟悉jQuery/CSS)灵活性极高(处理任意文本)高(容错好，DOM操作)高(路径、轴、谓词)高(jQuery语法)可读性差(模式复杂时难懂)好
    
                    
    • 
                                
  • 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
    
                                
    •