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

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

方法二：行内引入


                    
                    
  • Dockerfile命令详解之 FROM
                        清风怎不知意
容器化java前端javascript
                        
    许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
    
                    
    • 
                    
  • 《HTML 与 CSS—— 响应式设计》
                        陈在天box
htmlcss前端
                        
    一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
    
                    
    • 
                    
  • 【C语言】- 自定义类型：结构体、枚举、联合
                        Cavalier_01
C语言
                        
    【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
    
                    
    • 
                    
  • uniapp实现动态标记效果详细步骤【前端开发】
                        2401_85123349
uni-app
                        
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
    
                    
    • 
                    
  • html+css网页设计 旅游网站首页1个页面
                        html+css+js网页设计
htmlcss旅游
                        
    html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
    
                    
    • 
                    
  • spring mvc @RequestBody String类型参数
                        zoyation
spring-mvcspringmvc
                        
    通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
    
                    
    • 
                    
  • ubuntu安装opencv最快的方法
                        Derek重名了

                        
    最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
    
                    
    • 
                    
  • 处理标签包裹的字符串，并取出前250字符
                        周bro
前端javascript开发语言
                        
    //假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do
    
                    
    • 
                    
  • css设置当字数超过限制后以省略号（...）显示
                        周bro
css前端vuecss3html经验分享
                        
    1、文字超出一行，省略超出部分，显示’…’用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。overflow:hidden;text-overflow:ellipsis;white-space:nowrap;2、多行文本溢出显示省略号display:-webkit-box;-webkit-box-orient:vertical;-webkit-lin
    
                    
    • 
                    
  • 360前端星计划-动画可以这么玩
                        马小蜗

                        
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
    
                    
    • 
                    
  • h5小游戏定制开发
                        红匣子实力推荐

                        
    随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
    
                    
    • 
                                
  • 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
    
                                
    •