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

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

方法二：行内引入


                    
                    
  • VUE纯前端导出excel表格功能
                        KAGHQ
项目遇到的问题前端vue.jsexcel
                        
    插件：使用vue-json-excel插件实现Vue纯前端导出简单的Excel表格功能。1.安装依赖npminstallvue-json-excel2.引入组件全局引入importVuefrom'vue'importJsonExcelfrom'vue-json-excel'Vue.component('downloadExcel',JsonExcel)局部引入importJsonExcelfrom
    
                    
    • 
                    
  • Spring MVC执行流程
                        HW--
springmvc
                        
    整体流程：用户向前端控制器发送请求前端控制器接收到请求后调用处理映射器处理器映射器找到具体的处理器，生成处理器对象以及处理器拦截器，再一起返回给前端控制器然后前端控制器调用处理器适配器处理器适配器调用具体的处理器处理器适配器将处理器执行结果ModelAndView返回给前端控制器然后前端控制器将ModelAndView传给视图解析器解析View前端控制器将视图解析器返回的View进行渲染，然后响应
    
                    
    • 
                    
  • vue+elementui+mybatis-plus实现分页
                        一抹清风似少年
elementuivue.js前端
                        
    前端：-->{{scope.row.id}}{{scope.row.username}}{{scope.row.rolename}}权限修改封停账号//下面这个组件是页数的组件constaxios=require('axios');exportdefault{data(){return{tableData:[],currentPage:1,pageSize:9,total:null}},creat
    
                    
    • 
                    
  • 28.前端工程化背后的项目组织设计（下）
                        ikonan

                        
    承接上一节的内容，本节来继续学习前端工程化中依赖关系相关的内容。在此之前，先回顾一下「项目组织」主题的知识点：说到项目中的依赖关系，我们往往会想到使用yarn/npm解决依赖问题。依赖关系大体上可以分为：嵌套依赖扁平依赖项目中，我们引用了三个包：PackageA、PackageB、PackageC，它们都依赖了PackageD的不同版本。那么在安装时，如果PackageA、PackageB、Pac
    
                    
    • 
                    
  • 结合Vue与Mybatis-plus优雅的设计分页展示
                        程序员小徐同学
springbootvue.jsmybatis前端
                        
    分页技术组件的实现与前端显示在这个示例中，我们将结合Vue.js前端代码、请求处理逻辑、以及后端Java代码，实现分页功能。该功能的核心是通过前端传递分页参数给后端，后端处理请求并返回相应的数据，最后前端显示分页后的数据。1.前端Vue.js代码在Vue.js中，我们使用了ElementUI的Pagination组件来处理分页。前端代码中listQuery包含了分页所需的参数，例如currentP
    
                    
    • 
                    
  • 智能数字矿山钻机机械设备类网站模板
                        酷讯网络工作室A
学习开源html5
                        
    智能数字矿山钻机设备类网站模板，非常高端大气上档次！易优内容管理系统是一套专注中小型企业信息传播解决方案的管理系统，更是一套后台管理框架，可以通过个性定制导航入口，扩展前端多个场景，比如可以用于小程序开发、公众号互通，短信公众号消息推送等多项技术能力，还有更多场景在应用市场里得到扩展。
    
                    
    • 
                    
  • 国际版多语言点赞任务分享发布平台脸书快手亚马逊抖音Youtube做任务平台带前端源文件
                        酷讯网络工作室A
开源学习
                        
    程序说明：国际版多语言抖音TIKTOK点赞分享脸书推特任务平台源码带余额宝云管家代理功能。1、会员任务等级分为七种，每种等级可以领取的任务数量不同。2、三级代理分销功能，代理有单独的管理后台，代理可以在后台单独管理自己。3、用户可查看个人信誉度、可自由发布任务、自定义价格。4、后台可以设置域名、名称、客服QQ、APP下载地址、短信开关、审核开关、邀请码开关等。5、新增余额宝理财功能，用户存入一定量
    
                    
    • 
                    
  • 点击旋转箭头样式
                        aleluye
vue.jsjavascript前端
                        
    实现效果：html界面，主要通过isdown来控制箭头是上还是下退出登录import{ref}from'vue'constisdown=ref(false)return{isdown}scss.user{.down{transition:all0.3s;transform:rotate(180deg);transform-origin:center;}.expand{transition:all0
    
                    
    • 
                    
  • vue中css使用变量
                        aleluye

                        
    1、在css中使用变量1、css中声明变量--color：red2、使用变量color:var(--color)//color:red获取到全局声明变量值为red2、使用vue中的变量1、再htm标签中data中声明变量colordata(){retrun{color:red}}或者使用this.$refs.devcolor.style.setProperty('--color',this.col
    
                    
    • 
                    
  • layui 树形表格
                        小贵子的博客
layui树形表格
                        
    最近的一个项目，用layui里的表格要实现树形表格功能，去官网查找没有，最后在网上找了一位大神开发的插件—treeTable。插件地址演示地址：https://whvse.gitee.io/treetable-lay/项目地址：https://gitee.com/whvse/treetable-lay使用方法按照文档介绍或者下载demo自己在此基础上实现了功能，效果如下：html文件js文件lay
    
                    
    • 
                    
  • 一篇文带你使用js实现拖拽排序
                        她说她一如既往的爱我
javascript开发语言ecmascript
                        
    先介绍一下html5的drag属性,拖放（Drag和drop）是HTML5标准的组成部分。想要启用drag，只要给元素加上draggable="true"就行了（Safari5.1.2除外）。  实际效果：拖动事件(了解事件详情)  事件分为两类，当前拖动的元素上的事件，以及要放置的位置接收到的事件。  一.发生在拖动元素上的事件：事件名触发时机触发次数dragstart当拖动开始时触发一次1dr
    
                    
    • 
                    
  • 前端路线--ES6（day03）
                        喝西瓜汁的兔叽Yan
前端前端
                        
    day03-01-箭头函数Document//this指向问题//1、普通函数默认this指向Window//定义一个普通函数functionfn(){console.log("fn");console.log(this);}fn()//将fn函数改造成箭头函数//箭头函数是一个匿名函数varfn2=()=>{console.log("fn2");}fn2()//函数传递参数，并且给一个默认值fu
    
                    
    • 
                    
  • Bootstrap - 表单
                        廖马儿

                        
    Bootstrap给HTML大部分表单都设置了默认样式，我们可以给表单添加相应类名，以实现表单的水平排列，个性化定制等。代码：这是一个输入框:这是一个输入框:北京北京北京这是一个输入框:效果：图片.pngclass:对标签添加：class="form-inline"可以让它水平排列：图片.png对Input设置大小可以添加class：input-sminput-lg应该使用form-group设置
    
                    
    • 
                    
  • vue nuxt scss node express MongoDB 实现的简单文章发布系统
                        qq_36320160
前端Node.jsVue.jsMongoDBExpress
                        
    mynuxt是一个文章增删改查系统因为目前的spa单页项目对seo很不友好，如果你希望自己的网站在seo这块有较好的支持，可以尝试一下SSR技术，nuxt.js就是专门针对vue这一问题实现的技术，因此这一次我就尝试写了一个项目，主要实现的一个简单的文章的增删改查系统，主要为实现nuxt集合node实现ssr功能。新人可以学习下https://github.com/ITCNZ/mynuxt（如果觉
    
                    
    • 
                    
  • 使用 Nginx 部署前端 Vue 项目：跨平台详细指南
                        Hello.Reader
运维web前端vue.jsjavascriptnginx
                        
    一、为什么选择Nginx？Nginx是一个高性能的Web服务器和反向代理服务器，以其稳定性和高并发处理能力而闻名。它可以快速处理静态内容，同时支持负载均衡、反向代理等功能，非常适合部署前端应用，如Vue项目。二、准备工作：构建Vue项目在部署之前，首先需要将Vue项目进行打包构建，生成可部署的静态文件。以下是构建步骤：确保你的项目依赖已经安装完毕：npminstall运行以下命令进行项目构建：np
    
                    
    • 
                    
  • JavaEE(2)
                        无柳丶先生
java-eejava
                        
    Servlet创建一个类继承HttpServlet，重写dogetdopost方法，并在web.xml中配置Servlet作用1.接收用户发送的请求数据2.调用其他的Java程序来处理请求3.向前端做出响应请求地址ip:端口/项目名/servlet程序地址IP和端口找服务器Servlet生命周期创建：第一次访问Servlet程序时，由服务器创建初始化:在构造方法执行完成后，调用init()执行一些
    
                    
    • 
                    
  • 使用脚本一键打包并上传docker镜像
                        春深是蔚蓝
微前端docker微前端
                        
    笔者搞了一年多微前端项目，一个团队管理十个微应用，换成docker镜像部署后，发布操作一下从原来的脚本直连服务器的1分钟变成了几十分钟，尤其上传每个应用到各自的阿里云仓库。这里就再写个脚本一键打包docker镜像并上传阿里云。本文只讲怎么制作一个脚本帮助去减轻开发人员负担，关于docker-compose的配置见：使用各种姿势舒服的部署微前端项目（上：打包与上传）效果图[外链图片转存失败,源站可能
    
                    
    • 
                    
  • Java爬虫开发：Jsoup库在图片URL提取中的实战应用
                        小白学大数据
pythonjava爬虫开发语言测试工具前端javascript
                        
    在当今的互联网时代，数据的获取和处理变得尤为重要。对于网站内容的自动化抓取，爬虫技术扮演着不可或缺的角色。Java作为一种广泛使用的编程语言，拥有丰富的库支持网络爬虫的开发。其中，Jsoup库以其简洁、高效的特点，成为处理HTML内容和提取数据的优选工具。本文将详细介绍如何使用Jsoup库开发Java爬虫，以实现图片URL的提取。Jsoup库简介Jsoup是一个用于解析HTML文档的Java库，它
    
                    
    • 
                    
  • web3.0中使用的前端开发
                        alankuo
人工智能人工智能
                        
    在Web3.0中，前端开发有一些新的特点和技术应用：一、技术栈1.编程语言：-JavaScript/TypeScript：仍然是主流的前端开发语言。用于构建交互式用户界面和与区块链节点进行交互。例如，使用TypeScript可以提供更好的类型安全和代码可读性，在处理复杂的Web3应用逻辑时非常有帮助。-Solidity：虽然主要用于智能合约开发，但前端开发人员也需要了解一些Solidity知识，以
    
                    
    • 
                    
  • Performance Tips
                        ngugg

                        
    相关链接：https://developer.apple.com/library/archive/documentation/FileManagement/Conceptual/FileSystemProgrammingGuide/PerformanceTips/PerformanceTips.html#//apple_ref/doc/uid/TP40010672-CH7-SW1Relativet
    
                    
    • 
                    
  • 前端echarts地图3D效果+点击地域出现弹出框可以有确定取消操作
                        小小红色无花果
echartsecharts前端javascript
                        
    效果图如下：代码如下：点击的弹框内容Content{{area}}取消确定import*asechartsfrom"echarts";importjiangsufrom"../assets/jiangsu.js";import"echarts-gl";exportdefault{data(){return{centerDialogVisible:false,};},mounted(){this.i
    
                    
    • 
                    
  • css渐变边框的两种方案
                        冰眸js
前端javascripthtml
                        
    方案一：双层元素，使用一个单独的元素作为渐变色背景放在最下层，上层设置一个透明的border和纯色的背景（需要设置background-clip:padding-box以避免盖住下层元素的border）,上下两层设置相同的border-radius。Loremipsumdolor,sitametconsecteturadipisicingelit.Isterationenecessitatibus
    
                    
    • 
                    
  • vue 高德地图api爬坑之路（一）初始化
                        小C_cao
javavue高德地图API
                        
    由于使用vue-amap插件有点问题，所以使用了原生高德地图api。集成：public/index.html添加vue.config.js添加高德地图配置configureWebpack:{externals:{'AMap':'AMap'//高德地图配置}},vue代码（初步实现添加marker及点击弹出详情示例）importAMapfrom'AMap'exportdefault{name:'ma
    
                    
    • 
                    
  • JAVA毕业设计酒店管理系统设计与实现计算机源码+lw文档+系统+调试部署+数据库
                        妮维网络
java开发语言jvm
                        
    JAVA毕业设计酒店管理系统设计与实现计算机源码+lw文档+系统+调试部署+数据库JAVA毕业设计酒店管理系统设计与实现计算机源码+lw文档+系统+调试部署+数据库本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQL5.7/8.0
    
                    
    • 
                    
  • vue Element-ui el-table合计行样式自定义、不换行显示
                        一撇一画
笔记vue.jshtmljavascript
                        
    本项目由于合计汇总数字太多太长，又不能改变原width的情况下，就自定义样式超出点点点了，又要鼠标悬浮看全。js（设置‘title’）配合css（不换行）watch:{//loading为v-loadingloading(bool){!bool&&setTimeout(()=>{constnodeList=this.footerTr||[]nodeList.forEach<
    
                    
    • 
                    
  • C#与C++交互
                        c++真香
c#与c++交互
                        
    原文出处：https://www.cnblogs.com/xpvincent/p/5800945.html感谢作者。
    
                    
    • 
                    
  • 如何将超出范围的文本显示为...？
                        BANaanaa
css前端javascript
                        
    在CSS中，将超出容器范围的文本显示为省略号（...）是一个常见的需求，特别是在处理标题、描述或任何可能因长度过长而需要截断显示的文本时。这里有几种方法可以实现这一效果：1.单行文本省略对于单行文本，你可以使用text-overflow:ellipsis;属性结合white-space:nowrap;和overflow:hidden;来实现。css代码.single-line{width:200p
    
                    
    • 
                                
  • 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
    
                                
    •