html和css关系
- HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
- CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
- JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
HTML文件
//根标签
... //头部标签，头部元素有、<script>、 <style>、<link>、 <meta>等标签
<body>...</body> //内容是网页的主要内
</html></code></pre>
<h3>HTML标签 一</h3>
<pre class="has"><code><p>段落文本</p>
<hx>标题文本</hx> (x为1-6)//<h1>是最高的等级。
<em>表示强调，<strong> 表示更强烈的强调
<span>标签是没有语义的，它的作用就是为了设置单独的样式用的
<q>引用文本</q> //默认样式双引号,语义：引用别人的话
<blockquote>引用文本</blockquote> //对长文本的引用,缩进样式
<br/>换行标签
<hr/>分割线标签
(;分号必不可少)空格
<address>地址信息</address> //显示的样式为斜体
<code>单行代码语言</code>
<pre>多行代码语言</pre> //预格式化的文本</code></pre>
<h3>HTML标签二</h3>
<pre class="has"><code>无序列表，每项li前都自带一个圆点
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
有序列表，每项<li>前都自带一个序号，序号默认从1开
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
容器标签
<div>…</div>
表格
<table>…</table>：整个表格
<tbody>…</tbody>：（这个标签基本上不怎么用了）
<tr>…</tr>：表格的一行
<td>…</td>：表格的一个单元格，一行中包含几对<td>...<td/>，说明一行中就有几列。
<th>…</th>：表格的头部的一个单元格，表格表头。
<table summary="摘要">
<caption>标题</caption>
链接
<a href=”目标网址”>链接显示的文本</a> //外部链接
<a href="文件相对路径"></a> //本站点其它网页
<a href="#描点名"> <a name="描点名"> //描点链接
<a href="#"> //空连接
图片
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本（鼠标滑过图片时显示的文本）">
表单
<form method="传送方式（get/post）" action="服务器文件（浏览者输入的数据被传送到的地方）">
<form>
<input type="text" name=" " value=" " /> //文本输入框
<input type="password" name=" " value=" " /> //密码输入框
<textarea rows="行数" cols="列数">文本</textarea>
<input type="radio" value=" " name=" " checked="checked"/>//单选框
<input type="checkbox" value="值" name="名称" checked="checked"/>//复选框
value：提交数据到服务器的值（后台程序PHP使用）
name：为控件命名，以备后台程序ASP、PHP使用
同一组的单选按钮，name取值一定要一致
<input type="submit" value="按钮上显示的文字"> //只有当type值设置为submit时,提交
<input type="reset" value="按钮上显示的文字"> //只有当type值设置为reset时,重置
</form>
下拉列表（单选）
<form action="save.php" method="post" >
<select>
<option value="提交值1">选项1</option>
<option value="提交值2" selected="selected">选项2</option>
</select>
</form>
下拉列表（多选）
<form action="save.php" method="post" >
<select multiple="multiple">
<option value="提交值1">选项1</option>
<option value="提交值2">选项2</option>
</select>
</form>
</code></pre>
<h3>CSS样式</h3>
<ul>
<li>由选择符（选择器）和声明组成，而声明又由属性和值组成 </li>
<li>选择符{属性:值}</li>
<li>内联样式（区分）</li>
</ul>
<pre class="has"><code>就是把直接写在现有的HTML标签中
<p style="color:red">这里文字是红色。</p>
如果有多条css样式代码设置可以写在一起，中间用分号隔开
<p style="color:red;font-size:12px">这里文字是红色。</p></code></pre>
<ul>
<li>嵌入式css样式（管理页面）</li>
</ul>
<pre class="has"><code>把css样式代码写在<style type="text/css"></style>标签之间</code></pre>
<ul>
<li>外部式css样式（管理网站）</li>
</ul>
<pre class="has"><code>单独的一个文件中以“.css”为扩展名
在<head>内
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。</code></pre>
<ul>
<li> <p>样式优先级原则：1、多重样式可以覆盖。2、就近原则。</p> </li>
</ul>
<h3>选择器</h3>
<ul>
<li>id声明慧覆盖class声明。 </li>
<li>一个元素可以有多个class属性。class="class1 class2"。class2比class1有优先权。</li>
</ul>
<pre class="has"><code>.类选器名称{
css样式代码; （属性：属性值）
}
#ID选器名称{
css样式代码;
}
子选择器/直接子元素
.food>li{
css样式代码; //这行代码会使class名为food下的子元素li有样式。
}
包含(所有后代)选择器
.first span{
css样式代码; //空格作用于元素的所有后代。
}
通用（全局）选择器
* {
css样式代码;
}
伪类选择符 //给html不存在的标签设置样式，例：一个标签元素的鼠标滑过的状态来设置字体颜色
a:hover{
color:red; // 这行代码会使被<a></a>标签包裹的文字内容滑过时变为红色。
}
分组（群组）选择符 //多个标签元素设置同一个样式
h1,span{
css样式代码;
}</code></pre>
<h3>继承</h3>
<ul>
<li> <p>CSS的某些样式是具有继承性的，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。<br> 但注意有一些css样式是不具有继承性的。 </p> </li>
<li> <p>根权值高的就使用哪种css样式。标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。</p> </li>
<li> <p>内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。</p> </li>
<li>为某些样式设置具有最高权值，!important</li>
</ul>
<pre class="has"><code>p{
color:red!important; //注意：!important要写在分号的前面
}</code></pre>
<h3>CSS字体排版</h3>
<pre class="has"><code>【属性】
风格
font-family:"宋体";
字号
font-size:像素值;
颜色
color:#666，rgb(255，255，255)十六进制颜色
粗体
font-weight:normal(正常)，lighter(较细)，bold(较粗)，bolder(很粗)
斜体
font-style:italic;
下划线
text-decoration:underline;
删除线
text-decoration:line-through;
注释
/* */</code></pre>
<h3>CSS段落排版</h3>
<pre class="has"><code>缩进
text-indent:像素值; //注意：2em的意思就是文字的2倍大小。
行高（一行的高度）
line-height:1.5em;
字间距、字母间距
letter-spacing:50px;
英文单词之间的间距
word-spacing:50px;
水平对齐
text-align：center(居中)/left/right/justify(两端对齐)
文本修饰
text-decoration：none(无线)/overline(顶划线)/underline(下划线)/line-through(中线)
大小写
text-transform：none/uppercase(大写)/lowercase(小写)/capitalize(首字母大写)
</code></pre>
<h3>CSS盒模型--元素分类(可相互转换)</h3>
<ul>
<li>html中的标签元素大体被分为三种不同的类型：块状元素、内联(行内)元素和内联块状元素。</li>
<li>块级元素<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form></li>
<li>转换：display：none/block/inline/inline-block;</li>
</ul>
<pre class="has"><code>【display:block就是将元素显示为块级元素】
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
4、元素的height、width、margin、padding都可设置</code></pre>
<ul>
<li>内联（行内）元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code></li>
</ul>
<pre class="has"><code>【display:inline将元素设置为行内元素】
1、和其他元素都在一行上；
2、元素的高度、宽度、行高及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片width、height不可设置。
4、inline元素之间有一个间距问题,设置font-size：0;</code></pre>
<ul>
<li>内联块状元素（同时具备内联元素、块状元素的特点）有：<img>、<input></li>
</ul>
<pre class="has"><code>【display:inline-block就是将元素设置为内联块状元素】
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
</code></pre>
<p> </p>
<h3>CSS列表样式</h3>
<pre class="has"><code>ul/ol的属性
有序列表项符号
list-style-type：decimal(数字)/lower-roman(小罗马)/upper-roman(大罗马)/lower-alpha(小英文)/upper-alpha(大英文)
无序列表项符号
list-style-type：disc(实心圆)/circle(空心圆)/square(正方形)
去除列表项符号
list-style-type：none;
列表项图片
list-style-image:url(路径)；
列表项位置
list-style-position：inside/outside
</code></pre>
<h3>CSS表格样式</h3>
<pre class="has"><code>表格标题位置
caption-side：top(顶部)/bottom(底部)；
表格边框合并
border-collapse：separate(分开有空隙)/collapse(无空隙)
表格边框间距
border-spacing：像素值；
</code></pre>
<h3>CSS图片样式</h3>
<pre class="has"><code>图片大小
width：像素值
height：像素值
图片对齐:图片是在父元素中进行定义，例如div
div{text-align：left/center/right}
垂直对齐（周围的行内元素或文本相对于该元素的垂直方式）
vertical-align：top/middle/baseline(基线)/bottom(底部)
文字环绕
float：left/right
</code></pre>
<h3>CSS背景样式</h3>
<pre class="has"><code>背景颜色
background-color:颜色值；
背景图片
background-image：url(路径)；
背景图片重复
background-repeat：repeat/repeat-x/repeat-y/no-repeat
背景图片位置
background-position：水平距离 垂直距离；（像素）
background-position：top left
top center
top right
left center
center center
right center
bottom left
bottom center
bottom right
背景图片固定
background-attachment：scroll/fixed(固定不动)
</code></pre>
<h3>CSS超链接样式</h3>
<pre class="has"><code>伪类（四种状态，要按顺序来写）
a:link //未访问时 直接就是a
a:visited //访问时
a:hover //鼠标经过时
a:action //点击时
hover伪类可以定义任何一个鼠标元素经过的样式
元素：hover{}
鼠标样式
cursor：属性值；
自定义鼠标样式
cursor：url(路径.cur)，属性值；</code></pre>
<h3>CSS盒模型</h3>
<pre class="has"><code>【内容区】
width:
height:
只有块元素才可以设置width和height
overflow（这个属性处理溢出部分）：scroll(显示滚动条)
hidden(超出部分不可见)
auto(有超出部分显示滚动条)
【内边距：padding】
【外边距：margin】
【边 框：border】
一开始清零
*{
margin:0;
padding:0;
}
【水平居中】
图片、文字：text-align:center;
div：margin:0 auto;
【清楚图片之间的间隙】
font-size:0;</code></pre>
<h3>CSS盒模型--边框</h3>
<pre class="has"><code>边框就是围绕着内容及补白的线，边框三个属性：宽度、外观和颜色。
div{
border:2px solid red; //粗细、外观、颜色
}
等价于
div{
border-width:2px;
border-style:solid; //dashed（虚线）| dotted（点线）| solid（实线）|double
border-color:red;
}
【只为一个方向的边框设置样式】
border-bottom
border-top
border-right
border-left
【box-sizing】
box-sizing:border-box设置的边框和内边距的值是包含在width内。
box-sizing:content-box是默认值，任何边框和内边距的宽度都会被增加到最后绘制出来的元素中
</code></pre>
<h3>CSS盒模型--边界</h3>
<pre class="has"><code>元素与其它元素之间的距离可以使用边界(外边框)
div{
padding/margin:20px 10px 15px 30px; //上、右、下、左
}
等价于
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
【padding和margin的区别，padding在边框里，margin在边框外。】
元素内容与边框之间是可以设置距离的（内边框），称之为填充。
div{
padding:20px 10px15px 30px; //上、右、下、左
}
等价于
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}</code></pre>
<p><span style="color:#f33b45;"><strong>缩写：padding、border的缩写方法和margin是一致的</strong></span></p>
<ol>
<li>、如果top、right、bottom、left的值相同<br> margin:10px 10px 10px 10px;<br> 可缩写为：<br> margin:10px;</li>
<li>如果top和bottom值相同、left和 right的值相同<br> margin:10px 20px 10px 20px;<br> 可缩写为：<br> margin:10px 20px;</li>
<li>如果left和right的值相同<br> margin:10px 20px 30px 20px;<br> 可缩写为：<br> margin:10px 20px 30px;</li>
</ol>
<h3>CSS布局和定位模型</h3>
<p><a href="http://img.e-com-net.com/image/info8/cb59a040310342b7b2b3b9d91bcb2e9a.jpg" target="_blank"><img alt="HTML和CSS_第1张图片" class="has" height="313" src="http://img.e-com-net.com/image/info8/cb59a040310342b7b2b3b9d91bcb2e9a.jpg" width="407" style="border:1px solid black;"></a></p>
<p>如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。 </p>
<pre class="has"><code>流动模型（Flow）：自上而下。
先来说一说流动模型，流动（Flow）是默认的网页布局模式。
1.块状元素会自上而下按顺序垂直延伸分布，因为块宽度都为100%。都会以行的形式占据位置。
右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
2.内联元素都会在所处的包含元素内从左到右水平分布显示。
右侧代码编辑器中内联元素标签a、span、em、strong都是内联元素。</code></pre>
<pre class="has"><code>浮动模型（Float）:
脱离正常文档流，div的宽度由内容决定
如果现在我们想让两个块状元素并排显示，怎么办呢？设置元素。
任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动。
【注意：设置浮动的同时先设置块状元素的宽度，且浮动的几个元素宽度加起来一定要小于容器元素的宽度。】
清楚其他元素浮动带来的影响
clear: left/right/both;
</code></pre>
<p> </p>
<pre class="has"><code>【层模型（position）：相对于XXX精确定位操作】
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
注意：
A、结合top、bottom、left、right一般只用到其中两个。
B、z-index：值大在上面
C、satic为默认值，没有定位，元素出现在正常的流中，z-index无效
【层模型--绝对定位（相对于 static 定位以外的第一个父元素）】
1、定位为absolute的层脱离正常文本流，但与relative的区别:其在正常流中的原位置不再存在
2、对于absolute定位的层,如果其父层中都未定义absolute或relative，则其将相对body进行定位
【层模型--相对定位（相对于直接父元素）】
1、relative定位的层总是相对于其直接父元素，无论其父元素 是什么定位方式。
2、元素脱离正常的文档流中，但其在文档流中的原位置依然存在
【层模型--固定定位（相对于浏览器窗口）】
不会随浏览器窗口的滚动条滚动而变化。
</code></pre>
<pre class="has"><code>Relative与Absolute组合使用
使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位
Relative与Absolute组合使用可以相对于其它元素进行定位
父元素box1：position:relative;
子元素box2：position:absolute;
【三个步骤】
1、参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1"> <!--被参照-->
<div id="box2">相对参照元素进行定位</div>
</div>
2、参照定位的元素必须加入position:relative;
#box1{
position:relative;
}
3、定位元素加入position:absolute，可用top、bottom、left、right来进行偏移定位了。
#box2{
position:absolute;
top:20px;
left:30px;
}
这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。</code></pre>
<table border="0">
<tbody>
<tr>
<td> <p> </p> </td>
<td> <p>相对定位</p> </td>
<td> <p>绝对定位</p> </td>
</tr>
<tr>
<td> <p>position取值</p> </td>
<td> <p>relative</p> </td>
<td> <p>absolute</p> </td>
</tr>
<tr>
<td> <p>文档流中原位置</p> </td>
<td> <p>保留</p> </td>
<td> <p>不保留</p> </td>
</tr>
<tr>
<td> <p>定位参照物</p> </td>
<td> <p>直接父元素</p> </td>
<td> <p>非static的父元素</p> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1290633862937911296"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js"></script>
<!-- 文章页-底部 动态广告位 -->
<div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
</div>
<div class="col-md-3">
<div class="row" id="ad">
<!-- 文章页-右侧1 动态广告位 -->
<div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_1"> </div>
</div>
<!-- 文章页-右侧2 动态广告位 -->
<div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_2"></div>
</div>
<!-- 文章页-右侧3 动态广告位 -->
<div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(web)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1884333583355670528.htm"
title="Netty和Websocket的区别" target="_blank">Netty和Websocket的区别</a>
<span class="text-muted">moton2017</span>
<a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a>
<div>Netty和WebSocket没有直接可比性，因为它们在网络编程环境中具有不同的用途。Netty：Netty是一个高性能、事件驱动的网络框架，用于用Java构建网络应用程序。它提供了一组用于处理各种网络协议（例如TCP和UDP）的工具和抽象。Netty通常用于构建需要低延迟、高吞吐量通信的服务器和客户端。Websocket：WebSocket是一种通信协议，可通过单个长期连接提供全双工通信通道。它</div>
</li>
<li><a href="/article/1884333078571184128.htm"
title="linux-LAMP搭建" target="_blank">linux-LAMP搭建</a>
<span class="text-muted">Theshaye</span>
<a class="tag" taget="_blank" href="/search/linux%E7%B3%BB%E7%BB%9F/1.htm">linux系统</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a>
<div>LAMP1.架构描述LAMP是一个C/S架构的平台：web客户端基于tcp/ip协议，发出http请求，服务端进行回应，用户的请求可能是动态的也可能是静态的。web服务器通过用户发送的url后缀判断动静态请求：静态请求web服务器直接处理静态请求web服务器转发给后台应用服务器去处理：(CGI)php运行的后台程序apache与php所处环境不同决定其通讯方式不同：安装在同一台服务器，就默认使用系</div>
</li>
<li><a href="/article/1884329031298510848.htm"
title="计算机毕业设计ssm旅游景点推荐系统02d989（附源码）新手必备" target="_blank">计算机毕业设计ssm旅游景点推荐系统02d989（附源码）新手必备</a>
<span class="text-muted">毕设程序源码</span>
<a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a>
<div>项目运行环境配置：Jdk1.8+Tomcat7.0+Mysql+HBuilderX（Webstorm也行）+Eclispe（IntelliJIDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：ssm+mybatis+Maven+mysql5.7或8.0等等组成，B/S模式+Maven管理等等。环境需要1.运行环境：最好是javajdk1.8，我们在这个平台上运行的。其他版本理论</div>
</li>
<li><a href="/article/1884322729981702144.htm"
title="Linux（LAMP）" target="_blank">Linux（LAMP）</a>
<span class="text-muted">Jackson~Y</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a>
<div>赛题拓扑：题目：安装WEB服务。服务以用户webuser系统用户运行。限制WEB服务只能使用系统500M物理内存。全站点启用TLS访问，使用本机上的“CSKGlobalRootCA”颁发机构颁发，网站证书信息如下：C=CNST=ChinaL=BeiJingO=skillsOU=OperationsDepartmentsCN=*.chinaskills.com客户端访问https时应无浏览器（含终端</div>
</li>
<li><a href="/article/1884320586260344832.htm"
title="控制webview_flutter导航条返回键行为" target="_blank">控制webview_flutter导航条返回键行为</a>
<span class="text-muted">jocchoc</span>
<a class="tag" taget="_blank" href="/search/Flutter/1.htm">Flutter</a><a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a><a class="tag" taget="_blank" href="/search/webview_flutter/1.htm">webview_flutter</a><a class="tag" taget="_blank" href="/search/%E8%B7%AF%E7%94%B1/1.htm">路由</a>
<div>作为一名web开发人员，也按耐不住来蹭一波flutter的热度。项目中要求用flutter嵌套web，此处采用webview_flutter插件【官方文档】。插件的使用方法不做赘述。此处分享：如何控制内嵌web的返回键行为，返回web上一路由or退出webview?1.自制导航条由于webview_flutter没有封装导航条，首先我们需要自制一个带有返回箭头的导航条。returnnewScaff</div>
</li>
<li><a href="/article/1884310252959100928.htm"
title="[译]Flutter用WebView插件webview_flutter" target="_blank">[译]Flutter用WebView插件webview_flutter</a>
<span class="text-muted">Web_boom</span>
<a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/Android/1.htm">Android</a><a class="tag" taget="_blank" href="/search/framework/1.htm">framework</a><a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a><a class="tag" taget="_blank" href="/search/webview/1.htm">webview</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
<div>本文翻译自pub:webview_flutter|FlutterPackage(flutter-io.cn)译时版本：webview_flutter3.0.0用于Flutter的WebView提供WebView组件的Flutter插件。在iOS上WebView组件基于WKWebView；在Android上WebView组件基于WebView。用法添加webview_flutter依赖到pubspe</div>
</li>
<li><a href="/article/1884308867026841600.htm"
title="webview_flutter 4.10.0 技术文档" target="_blank">webview_flutter 4.10.0 技术文档</a>
<span class="text-muted">LuiChun</span>
<a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a>
<div>https://github.com/flutter/packages/tree/main/packages/webview_flutter/webview_flutter文档一webview_flutter_4.10.0_docs.txtwebview_flutter_4.10.0_docs.txtwebview_flutter_4.10.0_docs.txtwebview_flutter4.1</div>
</li>
<li><a href="/article/1884304311790399488.htm"
title="前端开发实战：创建简易HTML计算器" target="_blank">前端开发实战：创建简易HTML计算器</a>
<span class="text-muted">不胖的羊</span>
<div>本文还有配套的精品资源，点击获取简介：计算器是执行基本数学运算的应用程序，通常在IT和前端开发领域中通过HTML、CSS和JavaScript实现。HTML定义页面结构和布局，JavaScript赋予计算器动态交互功能，例如监听按钮点击事件、执行计算和更新结果显示。该项目涉及HTML的元素结构、JavaScript的事件处理和DOM操作，是学习Web开发基础的理想练习。1.计算器的基本概念和应用1</div>
</li>
<li><a href="/article/1884299521102508032.htm"
title="AWS简介" target="_blank">AWS简介</a>
<span class="text-muted">嫣然细雨红尘路</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%91%E8%AE%A1%E7%AE%97/1.htm">云计算</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E8%AE%A1%E7%AE%97/1.htm">云计算</a>
<div>AWSAWS，全称为AmazonWebServices，是亚马逊公司旗下的云计算服务平台，自2006年起向全球用户提供广泛而深入的云计算服务。AWS是全球最全面、应用最广泛的云平台之一，它从全球的数据中心提供超过200项功能齐全的服务，旨在帮助各种规模的企业、政府机构和非营利组织快速部署和管理应用程序。主要服务领域包括：弹性计算：AmazonElasticComputeCloud(EC2)提供可随</div>
</li>
<li><a href="/article/1884294979027791872.htm"
title="SSM框架探秘：Spring 整合 Mybatis 框架" target="_blank">SSM框架探秘：Spring 整合 Mybatis 框架</a>
<span class="text-muted">苏-言</span>
<a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>搭建和测试MyBatis的环境：编写AccountMapper.xml映射配置文件：select*fromaccount;在web项目中编写SqlMapConfig.xml的配置文件，编写核心配置文件在AccountMapper接口中编写方法：publicinterfaceAccountMapper{publicListfindAll();}编写测试方法(此时数据库还没有数据)：@Testpubl</div>
</li>
<li><a href="/article/1884286026403344384.htm"
title="网络安全在线网站/靶场：全面探索与实践" target="_blank">网络安全在线网站/靶场：全面探索与实践</a>
<span class="text-muted">小熊同学哦</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E5%AE%89%E5%85%A8/1.htm">系统安全</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/1.htm">计算机网络</a>
<div>目录1.CyberPatriot简介功能与特点适用人群2.HackTheBox简介功能与特点适用人群3.OverTheWire简介功能与特点适用人群4.VulnHub简介功能与特点适用人群5.PortSwiggerWebSecurityAcademy简介功能与特点适用人群6.TryHackMe简介功能与特点适用人群7.CTFTime简介功能与特点适用人群8.WebGoat简介功能与特点适用人群结论</div>
</li>
<li><a href="/article/1884277572863324160.htm"
title="《零基础学Nginx：轻松搭建高性能Web服务器-kylin系统》" target="_blank">《零基础学Nginx：轻松搭建高性能Web服务器-kylin系统》</a>
<span class="text-muted">入眼皆含月</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a>
<div>一、概述Nginx（发音为“engineX”）是一款高性能的开源HTTP服务器和反向代理服务器，同时也支持IMAP/POP3代理服务器。它由俄罗斯程序员伊戈尔·西索夫（IgorSysoev）开发，并于2004年首次发布。Nginx以其高并发处理能力、低资源消耗和高性能而闻名，广泛应用于互联网行业，是许多大型网站和高性能需求场景的首选解决方案。二、Nginx的特点（1）高性能：Nginx采用事件驱动</div>
</li>
<li><a href="/article/1884277573429555200.htm"
title="Nginx的常用模块" target="_blank">Nginx的常用模块</a>
<span class="text-muted">入眼皆含月</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a>
<div>一、概述Nginx是一款高性能的开源Web服务器和反向代理服务器，它通过模块化架构提供了丰富的功能。二、模块介绍1、autoindex模块1.1、位置：http、server、location1.2、开启autoindexserver{listen80;server_name_;location/{root/code;indexindex.html;autoindexon;#开启列表功能}}1.3</div>
</li>
<li><a href="/article/1884273915832889344.htm"
title="无线移动通信的关键技术：SOA,WebX.0,Widget/Mashup,P2P/P4P,SaaS/云计算等架构和MIP,SIP,RTSP (实时流协议)等，定义和特点" target="_blank">无线移动通信的关键技术：SOA,WebX.0,Widget/Mashup,P2P/P4P,SaaS/云计算等架构和MIP,SIP,RTSP (实时流协议)等，定义和特点</a>
<span class="text-muted">晓北斗NorSnow</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%9A%E5%AA%92%E4%BD%93%E8%80%83%E8%AF%95/1.htm">多媒体考试</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a>
<div>以下是对无线移动通信中一些关键技术的定义和特点的整理，以表格形式呈现：技术/架构定义特点SOA（面向服务的架构）一种将应用程序划分为自治的、可重用的、可组合的服务，并通过服务之间的松耦合和标准化的接口进行通信的架构模式1.服务导向，将应用程序看作一组互相独立的服务。2.可重用性高，服务可以被不同的应用程序和业务场景复用。3.松耦合，服务之间通过标准化的接口进行通信，不依赖具体的实现细节。4.灵活性</div>
</li>
<li><a href="/article/1884271270619574272.htm"
title="MacOS系统搭建Appium自动化测试环境" target="_blank">MacOS系统搭建Appium自动化测试环境</a>
<span class="text-muted">xiangzhihong8</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/macos/1.htm">macos</a><a class="tag" taget="_blank" href="/search/appium/1.htm">appium</a>
<div>一、Appium简介1.1什么是APPiumAPPium是一个开源测试自动化框架，适用于原生、混合或移动Web应用程序的自动化测试工具。APPium使用WebDriver协议驱动iOS、Android等应用程序。APPium具有如下特点：支持多平台（Android、iOS等）。支持多语言（python、java、ruby、js、c#等)。APPium是跨平台的，可以用在OSX，Windows以及L</div>
</li>
<li><a href="/article/1884268496162975744.htm"
title="R 调用 python" target="_blank">R 调用 python</a>
<span class="text-muted">weixin_33971205</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>上一篇说了python使用rpy2调用R，这里介绍R如何调用python。R的强项在于统计方面，尤其是专业的统计分析，统计检验以及作图功能十分强大，但是在通用性方面，就远不如Python了，比如python可以做web，可以开发GUI，可以爬虫，甚至可以开发游戏，这些R其实也不是完全不行，但是在易用性方面实在是难以与Python相匹敌。所以如果要是能将R与Python相结合，充分发挥二者的优势，那</div>
</li>
<li><a href="/article/1884267103402389504.htm"
title="Spring+MVC+MyBatis综合例子" target="_blank">Spring+MVC+MyBatis综合例子</a>
<span class="text-muted">shenzhenNBA</span>
<a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E7%AE%A1%E7%90%86%E8%80%85%2F%E5%BC%80%E5%8F%91%E8%80%85/1.htm">管理者/开发者</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a>
<div>现在已经很多spring+mvc+mybatis例子，网上已经很多，本例子是在实验时spring整合mybatis的综合情况，以下是例子使用myEclipse建立搭建的各个配置文件，分别如下：1，项目web.xml，spring，listerner等引入；SITE637HuliancontextConfigLocation/WEB-INF/applicationContext.xml-->log4</div>
</li>
<li><a href="/article/1884238105565786112.htm"
title="uni中webview与H5直接的通讯" target="_blank">uni中webview与H5直接的通讯</a>
<span class="text-muted">米粒宝的爸爸</span>
<a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/app/1.htm">app</a>
<div>突然有个需求，要uni中webview与H5直接进行通讯，本来想的找个例子copy下算了。没想到，很多都不能用啊。至于所谓的什么@message和@onPostMessage好像都不行。试验都没任何反应！算了，自己写吧。我这主要用到2种情况，第一种：uni是H5形式的。第二种：uni是app形式的。都写一下。第一种：uniH5形式的通讯。上代码：H5端1.先上js加载。 2.document.a</div>
</li>
<li><a href="/article/1884236468797370368.htm"
title=".NET 5.0 WebAPI部署发布404记录" target="_blank">.NET 5.0 WebAPI部署发布404记录</a>
<span class="text-muted">聿琴丶</span>
<a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a>
<div>前面步骤不用过多介绍，这里是使用dbfrist进行数据库迁移，在部署到本地IIS之后，IIS中点击网站进行浏览，会显示404这里你可以忽略，不用纠结这个界面，因为这里与framework的Api不同，我们使用的是SwaggerUI所以你需要查看的是http://localhost:8082/swagger/index.html（这里我配置的端口是8082，不冲突就行，随意配置）然后你会发现也是错误</div>
</li>
<li><a href="/article/1884231802181185536.htm"
title="使用飞书群机器人监控服务器GPU使用率" target="_blank">使用飞书群机器人监控服务器GPU使用率</a>
<span class="text-muted">sunrise_ccx</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/%E9%A3%9E%E4%B9%A6/1.htm">飞书</a>
<div>目标：如果服务器GPU空置，可以及时推送消息到飞书群。其他类似的监控目标也可以修改代码实现。步骤：(1)首先在群聊设置加入机器人，复制webhook_url(2)在服务器后台运行如下代码。注意替换webhook_url"""nohuppythonmonitor_gpu.pymy_server>monitor_gpu.log2>&1&"""importsysimportsubprocessimpor</div>
</li>
<li><a href="/article/1884227133019058176.htm"
title="linux lamp" target="_blank">linux lamp</a>
<span class="text-muted">山客泛舟游Y</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a>
<div>linuxlamp1.lamp简介有了前面学习的知识的铺垫，今天可以来学习下第一个常用的web架构了。所谓lamp，其实就是由Linux+Apache+Mysql/MariaDB+Php/Perl/Python的一组动态网站或者服务器的开源软件，除Linux外其它各部件本身都是各自独立的程序，但是因为经常被放在一起使用，拥有了越来越高的兼容度，共同组成了一个强大的Web应用程序平台。LAMP指的是</div>
</li>
<li><a href="/article/1884222969270562816.htm"
title="Gradio 快速构建机器学习web可视化界面心得" target="_blank">Gradio 快速构建机器学习web可视化界面心得</a>
<span class="text-muted">算法小菜鸟成长心得</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>1.操作完成提示try:#对输入的字符串代码进行编译运行exec(get_test_code_example)gr.Info("Modeltestingcompletedsuccessfully.")except:raisegr.Error("Modeltestingfailed.")用到了gr.Info()和gr.Errot(）</div>
</li>
<li><a href="/article/1884221328924405760.htm"
title="Python简单Web开发" target="_blank">Python简单Web开发</a>
<span class="text-muted">patrick_wang_bigdata</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>WSGI介绍HTTP协议和HTML的介绍不在这里说明，可以去看廖雪峰老师的教程了解这方面内容。一个web应用的本质是：浏览器发送一个HTTP请求服务器收到请求，生成一个HTML文档服务器把HTML文档作为HTTP响应的Body发送给浏览器浏览器收到HTTP响应，从HTTP响应Body中取出HTML并显示最简单的web应用就是先把HTML保存好，然后需要时直接响应给HTTP请求。对Python而言，</div>
</li>
<li><a href="/article/1884216157230133248.htm"
title="Servlet 总结" target="_blank">Servlet 总结</a>
<span class="text-muted">SAFE20242034</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C/1.htm">二</a><a class="tag" taget="_blank" href="/search/JavaWeb/1.htm">JavaWeb</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a>
<div>Servlet总结Servlet是JavaEE(JakartaEE)技术中的一个核心组件，用于开发基于服务器的动态Web应用程序。它是运行在支持Java的Web服务器或应用服务器上的Java类，能够处理客户端请求并生成响应。Servlet的核心特点：平台无关性：Servlet是基于Java的，具有跨平台特性。高效性：Servlet在服务器端运行，可以在同一进程中处理多个请求，减少了性能开销。生命周</div>
</li>
<li><a href="/article/1884214518318428160.htm"
title="基于 WEB 开发的在线考试系统设计与实现" target="_blank">基于 WEB 开发的在线考试系统设计与实现</a>
<span class="text-muted">赵谨言</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%BA%E6%96%87/1.htm">论文</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/1.htm">毕业设计</a>
<div>标题:基于WEB开发的在线考试系统设计与实现内容:1.摘要基于WEB开发的在线考试系统旨在提供一个便捷、高效、公平的考试环境。本文详细介绍了该系统的设计与实现过程，包括系统架构、功能模块、数据库设计等方面。通过实际应用，证明了该系统具有良好的稳定性和可靠性，能够满足大规模在线考试的需求。关键词：在线考试系统；WEB开发；系统设计；系统实现2.引言2.1.研究背景随着互联网技术的飞速发展，在线考试系</div>
</li>
<li><a href="/article/1884208723203780608.htm"
title="解决Windows Server环境下PPTX转PDF时WebP格式图片缺失" target="_blank">解决Windows Server环境下PPTX转PDF时WebP格式图片缺失</a>
<span class="text-muted">重楼七叶一枝花_1200</span>
<a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E5%B0%8F%E6%8A%84/1.htm">代码小抄</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a>
<div>如果喜欢，欢迎关注WX：攻城狮重楼在WindowsServer环境下，将PPTX文件另存为PDF时，遇到的一个问题是PDF中的图片部分缺失，且这些缺失的图片实际为WebP格式。本文将介绍这一问题的原因及两种解决方案。问题原因在WindowsServer环境下，将PPTX文件另存为PDF时，若PDF中的图片部分缺失，且这些缺失的图片为WebP格式，通常是由于Windows的图片解码器不支持WebP格</div>
</li>
<li><a href="/article/1884203678412369920.htm"
title="Python 3.9它来啦！！！" target="_blank">Python 3.9它来啦！！！</a>
<span class="text-muted">python程序员小'鹏</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/1.htm">编程语言</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a>
<div>Python3.9，来了！小编本身就是一名python开发工程师，我自己花了三天时间整理了一套python学习教程，从最基础的python脚本到web开发，爬虫，数据分析，数据可视化，机器学习，等，这些资料有想要的小伙伴"点击"即可领取过去一年，来自世界各地的开发者们一直在致力于Python3.8的改进。Python3.9beta版本已经存在了一段时间，第一个正式版本于2020年10月5日发布。每</div>
</li>
<li><a href="/article/1884201031139651584.htm"
title="Selenium学习笔记--Webdriver API 2--常用方法" target="_blank">Selenium学习笔记--Webdriver API 2--常用方法</a>
<span class="text-muted">jiang_guo</span>
<a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95/1.htm">自动化测试</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a>
<div>Webdriver重用方法浏览器控制控制浏览器窗口大小控制浏览器后退、前进切换标签页（窗口切换）switch方法获取url使用get方法模拟浏览器刷新关闭浏览器常用方法clearsend_keysclicksubmitsizetextget_attributeis_displayedtitlecurrent_url鼠标操作键盘操作元素等待显示等待隐式等待切换iframe单表单切换嵌套表单切换平行表</div>
</li>
<li><a href="/article/1884198509515698176.htm"
title="【自己动手开发Webpack插件：开启前端构建工具的个性化定制之旅】" target="_blank">【自己动手开发Webpack插件：开启前端构建工具的个性化定制之旅】</a>
<span class="text-muted">Orange301511</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%89%8D%E7%AB%AF/1.htm">大前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a>
<div>在前端开发的世界里，Webpack无疑是构建工具中的“明星”。它强大的功能可以帮助我们高效地打包和管理前端资源。然而，有时候默认的Webpack功能可能无法完全满足我们的特定需求，这时候就需要自定义Webpack插件来大展身手啦！今天，我们就来一起探索如何开发自己的Webpack插件。一、什么是Webpack插件？Webpack插件就像是一个神奇的小助手，在Webpack打包的过程中，在特定的时刻</div>
</li>
<li><a href="/article/1884188424001351680.htm"
title="Heritrix网络爬虫与Tomcat服务器部署指南" target="_blank">Heritrix网络爬虫与Tomcat服务器部署指南</a>
<span class="text-muted">Rubix-Kai</span>
<div>本文还有配套的精品资源，点击获取简介：Heritrix是一款功能强大的开源网络爬虫工具，由互联网档案馆开发，适用于大规模网页抓取。本文将指导读者如何下载、安装Heritrix，并在Tomcat服务器上进行部署和运行。内容包括Heritrix的基本概念、下载与安装步骤、集成到Eclipse的过程、配置Heritrix、构建与运行、部署到Tomcat以及如何访问Heritrix的Web界面。此外，还包</div>
</li>
<li><a href="/article/124.htm"
title="mysql主从数据同步" target="_blank">mysql主从数据同步</a>
<span class="text-muted">林鹤霄</span>
<a class="tag" taget="_blank" href="/search/mysql%E4%B8%BB%E4%BB%8E%E6%95%B0%E6%8D%AE%E5%90%8C%E6%AD%A5/1.htm">mysql主从数据同步</a>
<div>配置mysql5.5主从服务器(转)
教程开始：一、安装MySQL
说明：在两台MySQL服务器192.168.21.169和192.168.21.168上分别进行如下操作，安装MySQL 5.5.22
二、配置MySQL主服务器（192.168.21.169）mysql -uroot -p &nb</div>
</li>
<li><a href="/article/251.htm"
title="oracle学习笔记" target="_blank">oracle学习笔记</a>
<span class="text-muted">caoyong</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a>
<div>1、ORACLE的安装
a>、ORACLE的版本
8i,9i : i是internet
10g,11g : grid (网格)
12c : cloud (云计算)
b>、10g不支持win7
&</div>
</li>
<li><a href="/article/378.htm"
title="数据库，SQL零基础入门" target="_blank">数据库，SQL零基础入门</a>
<span class="text-muted">天子之骄</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E5%85%A5%E9%97%A8/1.htm">数据库入门</a><a class="tag" taget="_blank" href="/search/%E5%9F%BA%E6%9C%AC%E6%9C%AF%E8%AF%AD/1.htm">基本术语</a>
<div>数据库，SQL零基础入门
做网站肯定离不开数据库，本人之前没怎么具体接触SQL，这几天起早贪黑得各种入门，恶补脑洞。一些具体的知识点，可以让小白不再迷茫的术语，拿来与大家分享。
数据库，永久数据的一个或多个大型结构化集合，通常与更新和查询数据的软件相关</div>
</li>
<li><a href="/article/505.htm"
title="pom.xml" target="_blank">pom.xml</a>
<span class="text-muted">一炮送你回车库</span>
<a class="tag" taget="_blank" href="/search/pom.xml/1.htm">pom.xml</a>
<div>1、一级元素dependencies是可以被子项目继承的
2、一级元素dependencyManagement是定义该项目群里jar包版本号的，通常和一级元素properties一起使用，既然有继承，也肯定有一级元素modules来定义子元素
3、父项目里的一级元素<modules>
<module>lcas-admin-war</module>
<</div>
</li>
<li><a href="/article/632.htm"
title="sql查地区省市县" target="_blank">sql查地区省市县</a>
<span class="text-muted">3213213333332132</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
<div>
-- db_yhm_city
SELECT * FROM db_yhm_city WHERE class_parent_id = 1 -- 海南 class_id = 9 港、奥、台 class_id = 33、34、35
SELECT * FROM db_yhm_city WHERE class_parent_id =169
SELECT d1.cla</div>
</li>
<li><a href="/article/759.htm"
title="关于监听器那些让人头疼的事" target="_blank">关于监听器那些让人头疼的事</a>
<span class="text-muted">宝剑锋梅花香</span>
<a class="tag" taget="_blank" href="/search/%E7%94%BB%E5%9B%BE%E6%9D%BF/1.htm">画图板</a><a class="tag" taget="_blank" href="/search/%E7%9B%91%E5%90%AC%E5%99%A8/1.htm">监听器</a><a class="tag" taget="_blank" href="/search/%E9%BC%A0%E6%A0%87%E7%9B%91%E5%90%AC%E5%99%A8/1.htm">鼠标监听器</a>
<div> 本人初学JAVA，对于界面开发我只能说有点蛋疼，用JAVA来做界面的话确实需要一定的耐心（不使用插件，就算使用插件的话也没好多少）既然Java提供了界面开发，老师又要求做，只能硬着头皮上啦。但是监听器还真是个难懂的地方，我是上了几次课才略微搞懂了些。
</div>
</li>
<li><a href="/article/886.htm"
title="JAVA的遍历MAP" target="_blank">JAVA的遍历MAP</a>
<span class="text-muted">darkranger</span>
<a class="tag" taget="_blank" href="/search/map/1.htm">map</a>
<div>Java Map遍历方式的选择
1. 阐述
对于Java中Map的遍历方式，很多文章都推荐使用entrySet，认为其比keySet的效率高很多。理由是：entrySet方法一次拿到所有key和value的集合；而keySet拿到的只是key的集合，针对每个key，都要去Map中额外查找一次value，从而降低了总体效率。那么实际情况如何呢？
为了解遍历性能的真实差距，包括在遍历ke</div>
</li>
<li><a href="/article/1013.htm"
title="POJ 2312 Battle City 优先多列+bfs" target="_blank">POJ 2312 Battle City 优先多列+bfs</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/%E6%90%9C%E7%B4%A2/1.htm">搜索</a>
<div>来源：http://poj.org/problem?id=2312
题意：题目背景就是小时候玩的坦克大战，求从起点到终点最少需要多少步。已知S和R是不能走得，E是空的，可以走，B是砖，只有打掉后才可以通过。
思路：很容易看出来这是一道广搜的题目，但是因为走E和走B所需要的时间不一样，因此不能用普通的队列存点。因为对于走B来说，要先打掉砖才能通过，所以我们可以理解为走B需要两步，而走E是指需要1</div>
</li>
<li><a href="/article/1140.htm"
title="Hibernate与Jpa的关系，终于弄懂" target="_blank">Hibernate与Jpa的关系，终于弄懂</a>
<span class="text-muted">avords</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/jpa/1.htm">jpa</a>
<div>我知道Jpa是一种规范，而Hibernate是它的一种实现。除了Hibernate，还有EclipseLink(曾经的toplink)，OpenJPA等可供选择，所以使用Jpa的一个好处是，可以更换实现而不必改动太多代码。
在play中定义Model时，使用的是jpa的annotations，比如javax.persistence.Entity, Table, Column, OneToMany</div>
</li>
<li><a href="/article/1267.htm"
title="酸爽的console.log" target="_blank">酸爽的console.log</a>
<span class="text-muted">bee1314</span>
<a class="tag" taget="_blank" href="/search/console/1.htm">console</a>
<div>在前端的开发中，console.log那是开发必备啊，简直直观。通过写小函数，组合大功能。更容易测试。但是在打版本时，就要删除console.log，打完版本进入开发状态又要添加，真不够爽。重复劳动太多。所以可以做些简单地封装，方便开发和上线。
/**
* log.js hufeng
* The safe wrapper for `console.xxx` functions
* </div>
</li>
<li><a href="/article/1394.htm"
title="哈佛教授：穷人和过于忙碌的人有一个共同思维特质" target="_blank">哈佛教授：穷人和过于忙碌的人有一个共同思维特质</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/%E6%97%B6%E9%97%B4%E7%AE%A1%E7%90%86/1.htm">时间管理</a><a class="tag" taget="_blank" href="/search/%E5%8A%B1%E5%BF%97%E4%BA%BA%E7%94%9F/1.htm">励志人生</a><a class="tag" taget="_blank" href="/search/%E7%A9%B7%E4%BA%BA/1.htm">穷人</a><a class="tag" taget="_blank" href="/search/%E8%BF%87%E4%BA%8E%E5%BF%99%E7%A2%8C/1.htm">过于忙碌</a>
<div> 一个跨学科团队今年完成了一项对资源稀缺状况下人的思维方式的研究，结论是：穷人和过于忙碌的人有一个共同思维特质，即注意力被稀缺资源过分占据，引起认知和判断力的全面下降。这项研究是心理学、行为经济学和政策研究学者协作的典范。
这个研究源于穆来纳森对自己拖延症的憎恨。他7岁从印度移民美国，很快就如鱼得水，哈佛毕业</div>
</li>
<li><a href="/article/1521.htm"
title="other operate" target="_blank">other operate</a>
<span class="text-muted">征客丶</span>
<a class="tag" taget="_blank" href="/search/OS/1.htm">OS</a><a class="tag" taget="_blank" href="/search/osx/1.htm">osx</a>
<div>一、Mac Finder 设置排序方式，预览栏 在显示－》查看显示选项中
二、有时预览显示时，卡死在那，有可能是一些临时文件夹被删除了，如：/private/tmp[有待验证]
--------------------------------------------------------------------
若有其他凝问或文中有错误，请及时向我指出，
我好及时改正，同时也让我们一</div>
</li>
<li><a href="/article/1648.htm"
title="【Scala五】分析Spark源代码总结的Scala语法三" target="_blank">【Scala五】分析Spark源代码总结的Scala语法三</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a>
<div>1. If语句作为表达式
val properties = if (jobIdToActiveJob.contains(jobId)) {
jobIdToActiveJob(stage.jobId).properties
} else {
// this stage will be assigned to "default" po</div>
</li>
<li><a href="/article/1775.htm"
title="ZooKeeper 入门" target="_blank">ZooKeeper 入门</a>
<span class="text-muted">BlueSkator</span>
<a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/zk/1.htm">zk</a>
<div>ZooKeeper是一个高可用的分布式数据管理与系统协调框架。基于对Paxos算法的实现，使该框架保证了分布式环境中数据的强一致性，也正是基于这样的特性，使得ZooKeeper解决很多分布式问题。网上对ZK的应用场景也有不少介绍，本文将结合作者身边的项目例子，系统地对ZK的应用场景进行一个分门归类的介绍。
值得注意的是，ZK并非天生就是为这些应用场景设计的，都是后来众多开发者根据其框架的特性，利</div>
</li>
<li><a href="/article/1902.htm"
title="MySQL取得当前时间的函数是什么 格式化日期的函数是什么" target="_blank">MySQL取得当前时间的函数是什么 格式化日期的函数是什么</a>
<span class="text-muted">BreakingBad</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/Date/1.htm">Date</a>
<div>取得当前时间用 now() 就行。
在数据库中格式化时间 用DATE_FORMA T(date, format) .
根据格式串format 格式化日期或日期和时间值date，返回结果串。
可用DATE_FORMAT( ) 来格式化DATE 或DATETIME 值，以便得到所希望的格式。根据format字符串格式化date值:
%S, %s 两位数字形式的秒（ 00,01,</div>
</li>
<li><a href="/article/2029.htm"
title="读《研磨设计模式》-代码笔记-组合模式" target="_blank">读《研磨设计模式》-代码笔记-组合模式</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a>
<div>声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/
import java.util.ArrayList;
import java.util.List;
abstract class Component {
public abstract void printStruct(Str</div>
</li>
<li><a href="/article/2156.htm"
title="4_JAVA+Oracle面试题(有答案)" target="_blank">4_JAVA+Oracle面试题(有答案)</a>
<span class="text-muted">chenke</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a>
<div>基础测试题
卷面上不能出现任何的涂写文字，所有的答案要求写在答题纸上，考卷不得带走。
选择题
1、 What will happen when you attempt to compile and run the following code? （3）
public class Static {
static {
int x = 5; // 在static内有效
}
st</div>
</li>
<li><a href="/article/2283.htm"
title="新一代工作流系统设计目标" target="_blank">新一代工作流系统设计目标</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a>
<div>
用户只需要给工作流系统制定若干个需求，流程系统根据需求，并结合事先输入的组织机构和权限结构，调用若干算法，在流程展示版面上面显示出系统自动生成的流程图，然后由用户根据实际情况对该流程图进行微调，直到满意为止，流程在运行过程中，系统和用户可以根据情况对流程进行实时的调整，包括拓扑结构的调整，权限的调整，内置脚本的调整。。。。。
在这个设计中，最难的地方是系统根据什么来生成流</div>
</li>
<li><a href="/article/2410.htm"
title="oracle 行链接与行迁移" target="_blank">oracle 行链接与行迁移</a>
<span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E8%A1%8C%E8%BF%81%E7%A7%BB/1.htm">行迁移</a>
<div>表里的一行对于一个数据块太大的情况有二种(一行在一个数据块里放不下)
第一种情况:
INSERT的时候，INSERT时候行的大小就超一个块的大小。Oracle把这行的数据存储在一连串的数据块里(Oracle Stores the data for the row in a chain of data blocks)，这种情况称为行链接(Row Chain)，一般不可避免(除非使用更大的数据</div>
</li>
<li><a href="/article/2537.htm"
title="[JShop]开源电子商务系统jshop的系统缓存实现" target="_blank">[JShop]开源电子商务系统jshop的系统缓存实现</a>
<span class="text-muted">dinguangx</span>
<a class="tag" taget="_blank" href="/search/jshop/1.htm">jshop</a><a class="tag" taget="_blank" href="/search/%E7%94%B5%E5%AD%90%E5%95%86%E5%8A%A1/1.htm">电子商务</a>
<div>前言
jeeshop中通过SystemManager管理了大量的缓存数据，来提升系统的性能，但这些缓存数据全部都是存放于内存中的，无法满足特定场景的数据更新（如集群环境）。JShop对jeeshop的缓存机制进行了扩展，提供CacheProvider来辅助SystemManager管理这些缓存数据，通过CacheProvider,可以把缓存存放在内存,ehcache,redis，memcache</div>
</li>
<li><a href="/article/2664.htm"
title="初三全学年难记忆单词" target="_blank">初三全学年难记忆单词</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/english/1.htm">english</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a>
<div>several 儿子；若干
shelf 架子
knowledge 知识；学问
librarian 图书管理员
abroad 到国外，在国外
surf 冲浪
wave 浪；波浪
twice 两次；两倍
describe 描写；叙述
especially 特别；尤其
attract 吸引
prize 奖品；奖赏
competition 比赛；竞争
event 大事；事件
O</div>
</li>
<li><a href="/article/2791.htm"
title="sphinx实践" target="_blank">sphinx实践</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/sphinx/1.htm">sphinx</a>
<div>
安装参考地址:http://briansnelson.com/How_to_install_Sphinx_on_Centos_Server
yum install sphinx
如果失败的话使用下面的方式安装
wget http://sphinxsearch.com/files/sphinx-2.2.9-1.rhel6.x86_64.rpm
yum loca</div>
</li>
<li><a href="/article/2918.htm"
title="JPA之JPQL（三）" target="_blank">JPA之JPQL（三）</a>
<span class="text-muted">frank1234</span>
<a class="tag" taget="_blank" href="/search/orm/1.htm">orm</a><a class="tag" taget="_blank" href="/search/jpa/1.htm">jpa</a><a class="tag" taget="_blank" href="/search/JPQL/1.htm">JPQL</a>
<div>1 什么是JPQL
JPQL是Java Persistence Query Language的简称，可以看成是JPA中的HQL， JPQL支持各种复杂查询。
2 检索单个对象
@Test
public void querySingleObject1() {
Query query = em.createQuery("sele</div>
</li>
<li><a href="/article/3045.htm"
title="Remove Duplicates from Sorted Array II" target="_blank">Remove Duplicates from Sorted Array II</a>
<span class="text-muted">hcx2013</span>
<a class="tag" taget="_blank" href="/search/remove/1.htm">remove</a>
<div>Follow up for "Remove Duplicates":What if duplicates are allowed at most twice?
For example,Given sorted array nums = [1,1,1,2,2,3],
Your function should return length </div>
</li>
<li><a href="/article/3172.htm"
title="Spring4新特性——Groovy Bean定义DSL" target="_blank">Spring4新特性——Groovy Bean定义DSL</a>
<span class="text-muted">jinnianshilongnian</span>
<a class="tag" taget="_blank" href="/search/spring+4/1.htm">spring 4</a>
<div>Spring4新特性——泛型限定式依赖注入
Spring4新特性——核心容器的其他改进
Spring4新特性——Web开发的增强
Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC
Spring4新特性——Groovy Bean定义DSL
Spring4新特性——更好的Java泛型操作API
Spring4新</div>
</li>
<li><a href="/article/3299.htm"
title="CentOS安装Mysql5.5" target="_blank">CentOS安装Mysql5.5</a>
<span class="text-muted">liuxingguome</span>
<a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a>
<div>CentOS下以RPM方式安装MySQL5.5
首先卸载系统自带Mysql：
yum remove mysql mysql-server mysql-libs compat-mysql51
rm -rf /var/lib/mysql
rm /etc/my.cnf
查看是否还有mysql软件：
rpm -qa|grep mysql
去http://dev.mysql.c</div>
</li>
<li><a href="/article/3426.htm"
title="第14章 工具函数（下）" target="_blank">第14章 工具函数（下）</a>
<span class="text-muted">onestopweb</span>
<a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a>
<div>index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/</div>
</li>
<li><a href="/article/3553.htm"
title="POJ 1050" target="_blank">POJ 1050</a>
<span class="text-muted">SaraWon</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/%E5%AD%90%E7%9F%A9%E9%98%B5/1.htm">子矩阵</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E5%A4%A7%E5%92%8C/1.htm">最大和</a>
<div>POJ ACM第1050题的详细描述，请参照
http://acm.pku.edu.cn/JudgeOnline/problem?id=1050
题目意思：
给定包含有正负整型的二维数组，找出所有子矩阵的和的最大值。
如二维数组
0 -2 -7 0
9 2 -6 2
-4 1 -4 1
-1 8 0 -2
中和最大的子矩阵是
9 2
-4 1
-1 8
且最大和是15</div>
</li>
<li><a href="/article/3680.htm"
title="[5]设计模式——单例模式" target="_blank">[5]设计模式——单例模式</a>
<span class="text-muted">tsface</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E8%99%9A%E6%8B%9F%E6%9C%BA/1.htm">虚拟机</a>
<div>单例模式：保证一个类仅有一个实例，并提供一个访问它的全局访问点
安全的单例模式：
/*
* @(#)Singleton.java 2014-8-1
*
* Copyright 2014 XXXX, Inc. All rights reserved.
*/
package com.fiberhome.singleton;
</div>
</li>
<li><a href="/article/3807.htm"
title="Java8全新打造，英语学习supertool" target="_blank">Java8全新打造，英语学习supertool</a>
<span class="text-muted">yangshangchuan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/superword/1.htm">superword</a><a class="tag" taget="_blank" href="/search/%E9%97%AD%E5%8C%85/1.htm">闭包</a><a class="tag" taget="_blank" href="/search/java8/1.htm">java8</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BC%96%E7%A8%8B/1.htm">函数式编程</a>
<div>superword是一个Java实现的英文单词分析软件，主要研究英语单词音近形似转化规律、前缀后缀规律、词之间的相似性规律等等。Clean code、Fluent style、Java8 feature: Lambdas, Streams and Functional-style Programming。
升学考试、工作求职、充电提高，都少不了英语的身影，英语对我们来说实在太重要</div>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="container">
<div class="indexes">
<strong>按字母分类：</strong>
<a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
</div>
</div>
</div>
<footer id="footer" class="mb30 mt30">
<div class="container">
<div class="footBglm">
<a target="_blank" href="/">首页</a> -
<a target="_blank" href="/custom/about.htm">关于我们</a> -
<a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
<a target="_blank" href="/sitemap.txt">Sitemap</a> -
<a target="_blank" href="/custom/delete.htm">侵权投诉</a>
</div>
<div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
</div>
</div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>
</body>
</html>
