你的微光

网页设计详解（一）-HTML简介

本文作为博主学习笔记：2023-05-04星期四

一、网页介绍

网页是构成网站的基本元素，它是一个包含HTML标签的纯文本文件，是超文本标记语言格式(文件扩展名为.html或.htm)。网页通常用图像档来提供图画，通过浏览器来阅读。

超文本介绍：
（1）加入图片、声音、动画、多媒体内容，超出了文本的限制.
（2）可以从一个文件中跳转到另一个文件，与世界各地的主机的文件连接（超级链接文本）。
前端技术核心元素的是HTML、CSS和JavaScript，还要学习一些Ajax、SEO知识,但是前端只能开发静态的网页，后端技术能开发一个用户交互性更好、功能更加强大的网站。
学习路线：HTML入门→CSS入门→HTML进阶→CSS进阶→JavaScript入门→jQuery入门→ASP.NET入门（或PHP入门）→Ajax→ASP.NET进阶（或PHP进阶）。

二、HTML介绍

1、html基本架构

2、HTML基本内容

2.1 根元素

元素是 HTML 页面的根元素，整个网页是从开始到结束。

2.2 头部

元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8；
元素包含了所有的头部标签元素。在元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: </code>, <code><style></code>,<br> <code><meta></code>, <code><link></code>, <code><script></code>, <code><noscript></code> ,<code><base></code></p> <p><strong>使用场景：</strong></p> <p><code><meta></code><br> 为搜索引擎定义关键词:</p> <pre><code class="prism language-bash"><span class="token operator"><</span>meta <span class="token assign-left variable">name</span><span class="token operator">=</span><span class="token string">"keywords"</span> <span class="token assign-left variable">content</span><span class="token operator">=</span><span class="token string">"HTML, CSS, XML, XHTML, JavaScript"</span><span class="token operator">></span> </code></pre> <p>为网页定义描述内容:</p> <pre><code class="prism language-bash"><span class="token operator"><</span>meta <span class="token assign-left variable">name</span><span class="token operator">=</span><span class="token string">"description"</span> <span class="token assign-left variable">content</span><span class="token operator">=</span><span class="token string">"免费 Web & 编程教程"</span><span class="token operator">></span> </code></pre> <p>定义网页作者:</p> <pre><code class="prism language-bash"><span class="token operator"><</span>meta <span class="token assign-left variable">name</span><span class="token operator">=</span><span class="token string">"author"</span> <span class="token assign-left variable">content</span><span class="token operator">=</span><span class="token string">"Runoob"</span><span class="token operator">></span> </code></pre> <p>每30秒钟刷新当前页面:</p> <pre><code class="prism language-bash"><span class="token operator"><</span>meta http-equiv<span class="token operator">=</span><span class="token string">"refresh"</span> <span class="token assign-left variable">content</span><span class="token operator">=</span><span class="token string">"30"</span><span class="token operator">></span> </code></pre> <p><code><style></code> 标签定义了HTML文档的样式文件引用地址.</p> <p>在<code><style></code> 元素中你也可以直接添加样式来渲染 HTML 文档:</p> <pre><code class="prism language-bash"><span class="token operator"><</span>head<span class="token operator">></span> <span class="token operator"><</span>style <span class="token assign-left variable">type</span><span class="token operator">=</span><span class="token string">"text/css"</span><span class="token operator">></span> body <span class="token punctuation">{</span> background-color:yellow<span class="token punctuation">;</span> <span class="token punctuation">}</span> p <span class="token punctuation">{</span> color:blue <span class="token punctuation">}</span> <span class="token operator"><</span>/style<span class="token operator">></span> <span class="token operator"><</span>/head<span class="token operator">></span> </code></pre> <p><code><base></code> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:</p> <pre><code class="prism language-bash"><span class="token operator"><</span>head<span class="token operator">></span> <span class="token operator"><</span>base <span class="token assign-left variable">href</span><span class="token operator">=</span><span class="token string">"http://www.runoob.com/images/"</span> <span class="token assign-left variable">target</span><span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span> <span class="token operator"><</span>/head<span class="token operator">></span> </code></pre> <p><code><link></code> 标签定义了文档与外部资源之间的关系。</p> <p><code><link></code> 标签通常用于链接到样式表:</p> <pre><code class="prism language-bash"><span class="token operator"><</span>head<span class="token operator">></span> <span class="token operator"><</span>link <span class="token assign-left variable">rel</span><span class="token operator">=</span><span class="token string">"stylesheet"</span> <span class="token assign-left variable">type</span><span class="token operator">=</span><span class="token string">"text/css"</span> <span class="token assign-left variable">href</span><span class="token operator">=</span><span class="token string">"mystyle.css"</span><span class="token operator">></span> <span class="token operator"><</span>/head<span class="token operator">></span> </code></pre> <p><code><base></code> :标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接:</p> <pre><code class="prism language-bash"><span class="token operator"><</span>head<span class="token operator">></span> <span class="token operator"><</span>base <span class="token assign-left variable">href</span><span class="token operator">=</span><span class="token string">"http://www.runoob.com/images/"</span> <span class="token assign-left variable">target</span><span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span> <span class="token operator"><</span>/head<span class="token operator">></span> </code></pre> <table> <thead> <tr> <th>标签</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code><head></code></td> <td>定义了文档的标题</td> </tr> <tr> <td><code><base></code></td> <td>定义了页面链接标签的默认链接地址</td> </tr> <tr> <td><code><link></code></td> <td>定义了一个文档和外部资源之间的关系</td> </tr> <tr> <td><code><meta></code></td> <td>定义了HTML文档中的元数据</td> </tr> <tr> <td><code><script></code></td> <td>定义了客户端的脚本文件</td> </tr> <tr> <td><code><style></code></td> <td>定义了HTML文档的样式文件</td> </tr> </tbody> </table> <p>代码展示</p> <pre><code class="prism language-bash"><span class="token operator"><</span><span class="token operator">!</span>DOCTYPE html<span class="token operator">></span> <span class="token operator"><</span>html <span class="token assign-left variable">lang</span><span class="token operator">=</span><span class="token string">"zh-CN"</span><span class="token operator">></span> <span class="token operator"><</span>head<span class="token operator">></span> <span class="token operator"><</span>meta <span class="token assign-left variable">charset</span><span class="token operator">=</span><span class="token string">"UTF-8"</span><span class="token operator">></span> <span class="token operator"><</span>meta http-equiv<span class="token operator">=</span><span class="token string">"X-UA-Compatible"</span> <span class="token assign-left variable">content</span><span class="token operator">=</span><span class="token string">"IE=edge"</span><span class="token operator">></span> <span class="token operator"><</span>meta <span class="token assign-left variable">name</span><span class="token operator">=</span><span class="token string">"viewport"</span> <span class="token assign-left variable">content</span><span class="token operator">=</span><span class="token string">"width=device-width, initial-scale=1.0"</span><span class="token operator">></span> <span class="token operator"><</span>title<span class="token operator">></span>你的微光<span class="token operator"><</span>/title<span class="token operator">></span> <span class="token operator"><</span>base <span class="token assign-left variable">href</span><span class="token operator">=</span><span class="token string">"http://www.runoob.com/images/"</span> <span class="token assign-left variable">target</span><span class="token operator">=</span><span class="token string">"_blank"</span><span class="token operator">></span> <span class="token operator"><</span>link <span class="token assign-left variable">rel</span><span class="token operator">=</span><span class="token string">"stylesheet"</span> <span class="token assign-left variable">type</span><span class="token operator">=</span><span class="token string">"text/css"</span> <span class="token assign-left variable">href</span><span class="token operator">=</span><span class="token string">"mystyle.css"</span><span class="token operator">></span> <span class="token operator"><</span>style <span class="token assign-left variable">type</span><span class="token operator">=</span><span class="token string">"text/css"</span><span class="token operator">></span> body <span class="token punctuation">{</span> background-color:blue<span class="token punctuation">;</span> <span class="token punctuation">}</span> p <span class="token punctuation">{</span> color:blue <span class="token punctuation">}</span> <span class="token operator"><</span>/style<span class="token operator">></span> <span class="token operator"><</span>/head<span class="token operator">></span> <span class="token operator"><</span>/html<span class="token operator">></span> </code></pre> <p>效果<br> <a href="http://img.e-com-net.com/image/info8/6333ec1339da4eb3b7483aeee615a2ac.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6333ec1339da4eb3b7483aeee615a2ac.jpg" alt="网页设计详解（一）-HTML简介_第3张图片" width="512" height="343" style="border:1px solid black;"></a></p> <h6>2.3 身部</h6> <h4>三、HTML编辑器</h4> <p>可以下载subline text3 代码编辑好工具,博主目前使用的。</p> <pre><code class="prism language-sql"><span class="token operator"><</span><span class="token operator">!</span>DOCTYPE html<span class="token operator">></span> <span class="token operator"><</span>html lang<span class="token operator">=</span><span class="token string">"zh-CN"</span><span class="token operator">></span> <span class="token operator"><</span>head<span class="token operator">></span> <span class="token operator"><</span>meta <span class="token keyword">charset</span><span class="token operator">=</span><span class="token string">"UTF-8"</span><span class="token operator">></span> <span class="token operator"><</span>meta http<span class="token operator">-</span>equiv<span class="token operator">=</span><span class="token string">"X-UA-Compatible"</span> content<span class="token operator">=</span><span class="token string">"IE=edge"</span><span class="token operator">></span> <span class="token operator"><</span>meta name<span class="token operator">=</span><span class="token string">"viewport"</span> content<span class="token operator">=</span><span class="token string">"width=device-width, initial-scale=1.0"</span><span class="token operator">></span> <span class="token operator"><</span>title<span class="token operator">></span>你的微光<span class="token operator"><</span><span class="token operator">/</span>title<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>head<span class="token operator">></span> <span class="token operator"><</span>body<span class="token operator">></span> <span class="token operator"><</span>h1<span class="token operator">></span>我是一级标题<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token operator"><</span>p<span class="token operator">></span> 我的第一个段落。<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span> 正常正文换行标签<span class="token operator"><</span>br<span class="token operator">></span> 强制换行标签效果<span class="token operator"><</span>br<span class="token operator">></span> <span class="token operator"><</span>strong<span class="token operator">></span>加粗标签<span class="token operator"><</span><span class="token operator">/</span>strong<span class="token operator">></span><span class="token operator"><</span>b<span class="token operator">></span>加粗但不是很常用<span class="token operator"><</span><span class="token operator">/</span>b<span class="token operator">></span> <span class="token operator"><</span>em<span class="token operator">></span>倾斜<span class="token operator"><</span><span class="token operator">/</span>em<span class="token operator">></span><span class="token operator"><</span>i<span class="token operator">></span>倾斜<span class="token operator"><</span><span class="token operator">/</span>i<span class="token operator">></span> <span class="token operator"><</span>del<span class="token operator">></span>删除<span class="token operator"><</span><span class="token operator">/</span>del<span class="token operator">></span> <span class="token operator"><</span>s<span class="token operator">></span>删除<span class="token operator"><</span><span class="token operator">/</span>s<span class="token operator">></span> <span class="token operator"><</span>ins<span class="token operator">></span>下划线<span class="token operator"><</span><span class="token operator">/</span>ins<span class="token operator">></span> <span class="token operator"><</span>u<span class="token operator">></span>下划线<span class="token operator"><</span><span class="token operator">/</span>u<span class="token operator">></span> <span class="token operator"><</span>h2<span class="token operator">></span>我是二级标题<span class="token operator"><</span><span class="token operator">/</span>h2<span class="token operator">></span> <span class="token operator"><</span>h3<span class="token operator">></span>我是三级标题<span class="token operator"><</span><span class="token operator">/</span>h3<span class="token operator">></span> <span class="token operator"><</span>h4<span class="token operator">></span>我是四级标题<span class="token operator"><</span><span class="token operator">/</span>h4<span class="token operator">></span> <span class="token operator"><</span>h5<span class="token operator">></span>我是五级标题<span class="token operator"><</span><span class="token operator">/</span>h5<span class="token operator">></span> <span class="token operator"><</span>h6<span class="token operator">></span>我是六级标题<span class="token operator"><</span><span class="token operator">/</span>h6<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>html<span class="token operator">></span> </code></pre> <p><a href="http://img.e-com-net.com/image/info8/37ca9d8671574f0c830feeeaa1e62c0b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/37ca9d8671574f0c830feeeaa1e62c0b.jpg" alt="网页设计详解（一）-HTML简介_第4张图片" width="559" height="612" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/9142acacbd2044a79c839ab20f2da6bb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9142acacbd2044a79c839ab20f2da6bb.jpg" alt="网页设计详解（一）-HTML简介_第5张图片" width="650" height="372" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/fa15516f7eb043a2b6766420dff417ed.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fa15516f7eb043a2b6766420dff417ed.jpg" alt="网页设计详解（一）-HTML简介_第6张图片" width="650" height="142" style="border:1px solid black;"></a><br> 按照如上步骤保存为.HTML，双击打开后在浏览器中呈现的页面如图所示<br> <a href="http://img.e-com-net.com/image/info8/29049ab8e12f42e284a2eb5c742f8e72.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/29049ab8e12f42e284a2eb5c742f8e72.jpg" alt="网页设计详解（一）-HTML简介_第7张图片" width="562" height="525" style="border:1px solid black;"></a></p> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1726874878373605376"></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">  <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>  <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>  <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">你可能感兴趣的:(html,前端)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1897494396287381504.htm" title="VSCode 配置优化指南：打造极致高效的前端开发环境" target="_blank">VSCode 配置优化指南：打造极致高效的前端开发环境</a> <span class="text-muted">超级小狗</span> <a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a> <div>VSCode配置优化指南：打造极致高效的前端开发环境一、基础环境配置：让开发更流畅1.性能优化设置//settings.json{"files.autoSave":"afterDelay",//自动保存（延迟1秒）"files.exclude":{//隐藏非必要文件"**/.git":true,"**/.DS_Store":true,"**/node_modules":true//大型项目建议保留</div> </li> <li><a href="/article/1897489097161764864.htm" title="Spring Boot整合Thymeleaf模板引擎实战——从静态页面到动态表单处理全流程解析" target="_blank">Spring Boot整合Thymeleaf模板引擎实战——从静态页面到动态表单处理全流程解析</a> <span class="text-muted">Sendingab</span> <a class="tag" taget="_blank" href="/search/%E9%9B%B6%E5%9F%BA%E7%A1%807%E5%A4%A9%E7%B2%BE%E9%80%9ASpring/1.htm">零基础7天精通Spring</a><a class="tag" taget="_blank" href="/search/Boot/1.htm">Boot</a><a class="tag" taget="_blank" href="/search/Spring/1.htm">Spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E7%B2%BE%E9%80%9A/1.htm">从入门到精通</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/cloud/1.htm">cloud</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>https://example.com/thymeleaf-spring-demo前言在前后端不分离的传统Web项目中，Thymeleaf凭借自然的HTML语法与强大的表达式功能成为SpringBoot官方推荐的模板引擎。本文将带你从零实现用户注册功能，涵盖表单验证、页面碎片化、国际化等核心场景，并分享性能调优实战经验。一、快速整合Thymeleaf1.1添加基础依赖 xmlorg.springf</div> </li> <li><a href="/article/1897465641175150592.htm" title="react精简面试题" target="_blank">react精简面试题</a> <span class="text-muted">懒人村杂货铺</span> <a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>一、React基础1.React的核心特性是什么？答案：组件化开发：将UI拆分为独立可复用的组件。虚拟DOM（VirtualDOM）：通过内存中的轻量级DOM结构优化真实DOM操作。单向数据流：数据通过props从父组件传递到子组件，状态变化可预测。JSX：允许在JavaScript中编写类似HTML的语法，增强代码可读性。2.类组件和函数组件的区别？答案：类组件：使用class定义，继承Reac</div> </li> <li><a href="/article/1897461426549747712.htm" title="园区环境数字化管理系统（源码+文档+讲解+演示）" target="_blank">园区环境数字化管理系统（源码+文档+讲解+演示）</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D/1.htm">开源项目介绍</a> <div>引言随着工业化和城市化的快速发展，园区环境管理面临着越来越多的挑战。园区环境数字化管理系统通过数字化手段，为园区管理者提供了一个高效、透明、智能的管理平台。本文将详细介绍园区环境数字化管理系统的功能、技术架构以及其在提升园区环境管理效率中的优势。系统概述园区环境数字化管理系统采用前后端分离的架构设计，服务端基于MySQL5.7+、JDK1.8+和Redis，前端则采用Vue2.6.14和Eleme</div> </li> <li><a href="/article/1897461355783450624.htm" title="python和单片机能一块学吗_现在学单片机还有前途吗" target="_blank">python和单片机能一块学吗_现在学单片机还有前途吗</a> <span class="text-muted">weixin_39927288</span> <a class="tag" taget="_blank" href="/search/python%E5%92%8C%E5%8D%95%E7%89%87%E6%9C%BA%E8%83%BD%E4%B8%80%E5%9D%97%E5%AD%A6%E5%90%97/1.htm">python和单片机能一块学吗</a> <div>0培训班现状观察如今的软件职业培训行业发展如火如荼，变着花样推出各种前端定向就业班，Python就业班，UI设计班等培训课程，这样的广告更是铺天盖地，席卷整个网络世界。它给很多人的感觉就是做程序员真赚钱。做前端、互联网的程序员更赚钱，我要立刻报名改变自身的处境，哪怕以一头如黑珍珠般亮丽的秀发为代价。而我从事的单片机行业，前几年的培训风还是吹起了浪，似于Linux驱动开发，安卓底层开发等，但是这阵风</div> </li> <li><a href="/article/1897452525955641344.htm" title="深入理解 React.js：构建现代 Web 应用的核心技术" target="_blank">深入理解 React.js：构建现代 Web 应用的核心技术</a> <span class="text-muted">布兰妮甜</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/-/1.htm">-</a><a class="tag" taget="_blank" href="/search/%E8%A1%8C%E4%B8%BA/1.htm">行为</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>Hi，我是布兰妮甜！React.js是由Facebook开发并开源的一个用于构建用户界面的JavaScript库。自2013年发布以来，React迅速成为前端开发领域的主流工具之一。其组件化、声明式编程模型以及高效的虚拟DOM技术，使得开发者能够轻松构建高性能、可维护的Web应用。本文将深入探讨React.js的核心概念、优势以及如何在实际项目中应用。文章目录一、React.js的核心概念二、Re</div> </li> <li><a href="/article/1897451517569462272.htm" title="使用Webpack搭建React脚手架（下篇）" target="_blank">使用Webpack搭建React脚手架（下篇）</a> <span class="text-muted">Web_linlan</span> <a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一套完善的开发环境配置可以极大的提升开发效率，提高代码质量，方便多人合作，以及后期的项目迭代和维护。所以说，前端代码格式规范和语法检测的工具可以提高代码的质量和可读性，减少低级错误和维护成本，提高团队的协作效率和开发效率，是非常有必要的。本篇我们将完善脚手架的搭建。代码格式规范和语法检测工具1，EditorConfig：EditorConfig是一个用于统一编辑器和IDE的配置文件的工具。它可以帮</div> </li> <li><a href="/article/1897444713124917248.htm" title="一文掌握python中正则表达式的各种使用" target="_blank">一文掌握python中正则表达式的各种使用</a> <span class="text-muted">数据知道</span> <a class="tag" taget="_blank" href="/search/2025%E5%B9%B4%E7%88%AC%E8%99%AB%E5%92%8C%E9%80%86%E5%90%91%E6%95%99%E7%A8%8B/1.htm">2025年爬虫和逆向教程</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>文章目录1.正则表达式基础1.1常用元字符1.2基本用法2.正则表达式高级功能2.1分组捕获2.2命名分组2.3非贪婪匹配2.4零宽断言2.5编译正则表达式2.6转义字符3.常见应用场景3.1验证邮箱格式3.2提取URL3.3提取日期3.4提取HTML中的链接3.5提取HTML中的图片链接3.6提取JSON中的特定字段4.总结在Python爬虫中，正则表达式（RegularExpression，简</div> </li> <li><a href="/article/1897444460975943680.htm" title="工程化与框架系列（19）--前端安全防护" target="_blank">工程化与框架系列（19）--前端安全防护</a> <span class="text-muted">一进制ᅟᅠ ‌‍‎‏ </span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96%E4%B8%8E%E6%A1%86%E6%9E%B6/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/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a> <div>前端安全防护引言随着Web应用的普及，前端安全问题日益突出。本文将深入探讨前端安全的各种威胁及其防护措施，帮助开发者构建更加安全的Web应用。在当今复杂的网络环境中，理解并实施有效的安全策略已经成为前端开发者的必备技能。前端安全概述前端安全是指保护Web应用的客户端部分免受恶意攻击的一系列技术和实践。虽然后端安全同样重要，但前端作为直接面向用户的界面，往往成为攻击者的首要目标。前端安全威胁主要包括</div> </li> <li><a href="/article/1897441308960681984.htm" title="wangeditor html编辑,Vue整合wangEditor富文本编辑器" target="_blank">wangeditor html编辑,Vue整合wangEditor富文本编辑器</a> <span class="text-muted">莫姐</span> <a class="tag" taget="_blank" href="/search/wangeditor/1.htm">wangeditor</a><a class="tag" taget="_blank" href="/search/html%E7%BC%96%E8%BE%91/1.htm">html编辑</a> <div>最近在做项目时，客户有个发布新闻动态的功能，具体页面内容让客户自己编写，所以要选择富文本编辑器，这样用户体验好一点。网上有很多的富文本编辑器，因为项目的功能并不是很复杂，所以选择了wangEditor，界面简洁，使用起来也挺方便的；image.png实现思路1.安装wangEditor2.封装成组件3.父组件中直接调用一、wangEditor安装这里使用npm命令安装；npminstallwang</div> </li> <li><a href="/article/1897438283986694144.htm" title="文件上传和下载前后端交互逻辑" target="_blank">文件上传和下载前后端交互逻辑</a> <span class="text-muted">前端_yu小白</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0/1.htm">文件上传</a><a class="tag" taget="_blank" href="/search/%E4%B8%8B%E8%BD%BD/1.htm">下载</a> <div>上传】1、后端给前端一个上传接口：进行文件上传，上传成功后，该接口返回文件的路径，名称，id2、表单提交接口，提交表单时，将文件的id和表单信息一块提交给后台，实现文件和表单的绑定下载】后端给前端提供一个下载接口，前端调用后，返回二进制文件流。具体请求和接收文件流的方式，参考我之前另一篇博客：后端返回字节流，前端接收下载_后端返回字节数组,前端下载-CSDN博客</div> </li> <li><a href="/article/1897433991829581824.htm" title="Vue 3 实现富文本内容导出 Word 文档：前端直出方案与优化实践" target="_blank">Vue 3 实现富文本内容导出 Word 文档：前端直出方案与优化实践</a> <span class="text-muted">茶颜悅色</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a> <div>本文将深入讲解如何通过纯前端方案将富文本内容直接导出为符合中文排版规范的Word文档，对比传统服务端生成方案，本方案可降低服务器压力80%以上，同时支持即时下载功能。一、功能全景图该方案实现以下核心能力：✅纯前端Word文档生成✅中文仿宋字体完美支持✅智能分页与页边距控制✅内存安全回收机制✅浏览器全兼容方案二、技术方案对比方案响应速度服务器压力兼容性要求实现复杂度服务端生成（传统方案）慢高低高前端</div> </li> <li><a href="/article/1897432979039383552.htm" title="新手教程，小白学web前端开发—HTML5+css3" target="_blank">新手教程，小白学web前端开发—HTML5+css3</a> <span class="text-muted">皆非本人</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a> <div>小白教程，一起来跟我学简单的网页制作吧！本书教材：web前端开发案例教程—HTML5+css3简介：2005年以后，互联网进入了web2.0的时代，各种类似的桌面软件的web应用大量涌现，网站的前端，由此发生了翻天覆地的变化。网站不再只承载单一的文字和图片，各种丰富的媒体让网页的内容更加生动，网页的各种交互形式为用户带来了更好的体验，都基于前端的技术实现，好了废话不多说，让我们简单的体验一下如何制</div> </li> <li><a href="/article/1897431842563354624.htm" title="【Web前端开发】---web简介" target="_blank">【Web前端开发】---web简介</a> <span class="text-muted">爱学习的小何同学！</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1、前端开发能干什么能干：网页、小程序（例如：微信小程序、抖音小程序），数据可视化前端工程师不仅可以开发上面所说的东西，而且也可以开发：服务器、客户端。2、计算机基础计算机由硬件与软件构成。所谓的硬件就是能看得见、摸得着的一些零部件。比如：CPU、内存、硬盘、键盘、鼠标、音箱、显示器。所谓的软件就是看得见、摸不着的东西。软件由系统软件和应用软件构成。系统软件：Windows、Linux、Max、H</div> </li> <li><a href="/article/1897425408974974976.htm" title="在 Vue 2 项目中集成使用 WangEditor 富文本编辑器" target="_blank">在 Vue 2 项目中集成使用 WangEditor 富文本编辑器</a> <span class="text-muted">VueVirtuoso</span> <a class="tag" taget="_blank" href="/search/%E6%88%91%E7%9A%84%E5%AD%A6%E4%B9%A0%E4%B9%8B%E8%B7%AF/1.htm">我的学习之路</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>WangEditor是一款轻量级、开源、简洁的Web富文本编辑器，支持HTML5和现代浏览器，适合用于简单的内容编辑场景。本文将介绍如何在Vue2项目中集成并使用WangEditor，帮助你快速构建一个支持富文本编辑的应用。一、项目初始化首先，确保你已经安装了VueCLI，如果还未安装，可以通过以下命令全局安装：npminstall-gvue-cli接着，使用VueCLI初始化一个Vue2项目：v</div> </li> <li><a href="/article/1897420112395300864.htm" title="手写精简版TinyHttpd项目(二)" target="_blank">手写精简版TinyHttpd项目(二)</a> <span class="text-muted">Not_full</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/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a> <div>在上一章中，我们基本完了socket通信的建立和消息的处理，那么这一章我们就来看如何生成一个静态的网页。1.新建网页首先我们再代码的同级目录下新建一个index.html文件(当然也可以自己选择一个路径)然后将如下的代码复制到新建的index.html中：Thisisatextareawithaborder.SubmitForm结果如下：2.显示静态网页。我们现在已经有了一个本地的网页，接下来我们</div> </li> <li><a href="/article/1897414814427312128.htm" title="前端基础之动画效果" target="_blank">前端基础之动画效果</a> <span class="text-muted">青红光硫化黑</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>简单的入场与出场显示/隐藏helloexportdefault{name:'Test',data(){return{isShow:true}}}h1{background-color:orange;}.hello-enter-active{/*进入的动画*/animation:atguigu0.5s;}.hello-leave-active{/*退出的动画*/animation:atguigu0.</div> </li> <li><a href="/article/1897411410216939520.htm" title="探索微前端新境界：microfe 框架深度解析与应用推荐" target="_blank">探索微前端新境界：microfe 框架深度解析与应用推荐</a> <span class="text-muted">吴毓佳</span> <div>探索微前端新境界：microfe框架深度解析与应用推荐microfe-clientamicrofrontendinfrastructure项目地址:https://gitcode.com/gh_mirrors/mi/microfe-client在前端技术的浩瀚星海中，一个新兴的概念逐渐浮出水面——“微前端”（MicroFrontends）。为了响应这一趋势，并简化开发者在实现微前端架构时面临的挑战</div> </li> <li><a href="/article/1897409643903250432.htm" title="Nginx 部署 Vue.js 项目指南：结合慈云数据服务器的实践" target="_blank">Nginx 部署 Vue.js 项目指南：结合慈云数据服务器的实践</a> <span class="text-muted">慈云数据</span> <a class="tag" taget="_blank" href="/search/%E5%8D%9A%E5%AE%A2/1.htm">博客</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>一、部署Vue前端项目1.1Nginx的下载安装与SSL配置首先，检查服务器是否已安装Nginx：whereisnginx如果已安装，会显示Nginx的安装路径；否则，需要进行安装。安装必要环境：yuminstallgcc-c++yuminstall-ypcrepcre-develyuminstall-yzlibzlib-develyuminstall-yopensslopenssl-devel</div> </li> <li><a href="/article/1897396652336017408.htm" title="路由之间是怎么跳转的？有哪些方式?" target="_blank">路由之间是怎么跳转的？有哪些方式?</a> <span class="text-muted">秋恬意</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>1.React路由跳转方式（ReactRouter）在React中，路由跳转通常使用ReactRouter来管理。ReactRouter提供了不同的跳转方式。组件跳转使用组件来进行路由跳转，它会渲染为一个HTML标签，不会引起页面的刷新，而是通过路由机制实现视图切换。import{Link}from'react-router-dom';constMyComponent=()=>{return(Go</div> </li> <li><a href="/article/1897388328374824960.htm" title="Python提取评论（使用pycharm+Python）" target="_blank">Python提取评论（使用pycharm+Python）</a> <span class="text-muted">发光的大猫</span> <a class="tag" taget="_blank" href="/search/Python%2Bpycharm/1.htm">Python+pycharm</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/pycharm/1.htm">pycharm</a> <div>一、安装调用所要用到的库函数importrequestsfrombs4importBeautifulSoup二、自定义根据每页影评的url爬取影评的方法#1.请求urldefgetData(url):三、请求头为字典格式headers={ 'User-Agent':'Mozilla/5.0(WindowsNT10.0;Win64;x64)AppleWebKit/537.36(KHTML,l</div> </li> <li><a href="/article/1897388326604828672.htm" title="使用HTML，CSS和JavaScript创建Chrome扩展程序" target="_blank">使用HTML，CSS和JavaScript创建Chrome扩展程序</a> <span class="text-muted">海拥✘</span> <a class="tag" taget="_blank" href="/search/Google/1.htm">Google</a><a class="tag" taget="_blank" href="/search/100%E4%B8%AA%E5%89%8D%E7%AB%AF%E4%BC%98%E8%B4%A8%E9%A1%B9%E7%9B%AE/1.htm">100个前端优质项目</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a> <div>介绍谷歌浏览器是开发人员和普通用户最喜欢的浏览器之一。我在所有设备上都使用了GoogleChrome浏览器，它可以帮助我同步书签，浏览器历史记录，密码管理器等等。对于台式机，除了可以在Internet上浏览以外，您还可以做很多事情。您可以测试您的网页和全部。通过使用扩展程序，谷歌浏览器变得更加强大。因此，今天，我们将研究如何使用HTML，CSS和JavaScript创建您的第一个GoogleChr</div> </li> <li><a href="/article/1897387946940624896.htm" title="如何为 Web 前端开发面试做好准备" target="_blank">如何为 Web 前端开发面试做好准备</a> <span class="text-muted">贵州数擎科技有限公司</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a> <div>大家好！我是[数擎AI]，一位热爱探索新技术的前端开发者，在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！开发领域：前端开发|AI应用|Web3D|元宇宙技术栈：JavaScript、React、ThreeJs、WebGL、Go经验经验：6年+前端开发经验，专注于图形渲染和AI技术开源项目：智简未来、晓智科技、数擎科技1.确定目标岗位</div> </li> <li><a href="/article/1897387820599799808.htm" title="使用 Three.js 创建动态光效" target="_blank">使用 Three.js 创建动态光效</a> <span class="text-muted">贵州数擎科技有限公司</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>大家好！我是[数擎AI]，一位热爱探索新技术的前端开发者，在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！开发领域：前端开发|AI应用|Web3D|元宇宙技术栈：JavaScript、React、ThreeJs、WebGL、Go经验经验：6年+前端开发经验，专注于图形渲染和AI技术开源项目：AI简历、元宇宙、数字孪生本篇文章将使用Th</div> </li> <li><a href="/article/1897387818120966144.htm" title="小白也能看得懂的基于HTML+CSS+JS实现的五子棋小游戏" target="_blank">小白也能看得懂的基于HTML+CSS+JS实现的五子棋小游戏</a> <span class="text-muted">Roc-xb</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>五子棋是一种起源于中国的传统棋类游戏，具有悠久的历史。基本规则棋盘：五子棋通常在一个15x15的棋盘上进行，但也可以在更大的棋盘上进行。棋盘上的每个交叉点称为一个“点”。棋子：五子棋使用黑白两色的棋子。两名玩家分别持有一种颜色的棋子。游戏目标：游戏的目标是先在棋盘上形成连续五个同色棋子的一方获胜。这些棋子可以是水平、垂直或对角线排列的。下棋规则：游戏开始时，棋盘是空的。黑方先行，然后双方轮流在棋盘</div> </li> <li><a href="/article/1897385926968012800.htm" title="多租户适配、多租户隔离" target="_blank">多租户适配、多租户隔离</a> <span class="text-muted">Java掌门人</span> <a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E8%B5%84%E6%96%99/1.htm">技术资料</a><a class="tag" taget="_blank" href="/search/%E5%85%AC%E6%9C%89%E4%BA%91/1.htm">公有云</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%A7%9F%E6%88%B7/1.htm">多租户</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/%E6%B7%B7%E5%90%88%E4%BA%91/1.htm">混合云</a> <div>多租户适配很多产品只有专属化版本，需要从产品底层进行尽量少的改造，满足上云之后多租户的数据、缓存、定时任务等隔离多租户适配条目条目名称适配方案持久层适配支持schema和字段隔离两种方案quartz定时任务上下文无法获取租户信息，通过JobGroup识别reids缓存缓存key体现租户id即可websocket场景从cookie获取、前端调用diwork的api获取租户信息塞到cookie，后端w</div> </li> <li><a href="/article/1897380632871366656.htm" title="Threejs实现加载loading动画" target="_blank">Threejs实现加载loading动画</a> <span class="text-muted">贵州数擎科技有限公司</span> <a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>大家好！我是[数擎AI]，一位热爱探索新技术的前端开发者，在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！开发领域：前端开发|AI应用|Web3D|元宇宙技术栈：JavaScript、React、ThreeJs、WebGL、Go经验经验：6年+前端开发经验，专注于图形渲染和AI技术开源项目：智简未来、晓智科技、数擎科技核心实现原理1.</div> </li> <li><a href="/article/1897378241048539136.htm" title="前端怎么实现聊天输入框？怎么实现类似b站评论的输入并发送自定义表情包？输入回显、发送时表情包转义为[emoji]字符串、页面展示回显" target="_blank">前端怎么实现聊天输入框？怎么实现类似b站评论的输入并发送自定义表情包？输入回显、发送时表情包转义为[emoji]字符串、页面展示回显</a> <span class="text-muted">旅行中的伊蕾娜</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>之前做项目实现聊天功能，有几个功能点我觉得挺复杂的。今天我来说一下，我是如何实现图片小表情在输入框中显示，发送给后端时只发送一个含义字符串如：[emoji]，然后正常回显在页面上。此demo使用vue3源码已上传：源码地址实现效果图：输入自定义表情发送并回显声明：这只是个demo，不涉及与后端交互，不过会在该交互的地方标记，如需实际应用于项目，请根据实际情况进行改造完善！父组件定义及逻辑实现父组件</div> </li> <li><a href="/article/1897376348138172416.htm" title="PostgreSQL中的分区表" target="_blank">PostgreSQL中的分区表</a> <span class="text-muted">MambaCloud</span> <a class="tag" taget="_blank" href="/search/postgresql/1.htm">postgresql</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/database/1.htm">database</a> <div>PostgreSQL中的分区表参考：https://www.xmmup.com/pgzhongdefenqubiao.html#PG_11xin_te_xingPostgreSQL分区的意思是把逻辑上的一个大表分割成物理上的几块。分区不仅能带来访问速度的提升，关键的是，它能带来管理和维护上的方便。分区表的具体好处：某些类型的查询性能可以得到极大提升更新的性能也可以得到提升，因为表的每块的索引要比在</div> </li> <li><a href="/article/1897352009082793984.htm" title="(undone) MIT6.S081 2023 学习笔记 (Day9: LAB8 locks)" target="_blank">(undone) MIT6.S081 2023 学习笔记 (Day9: LAB8 locks)</a> <span class="text-muted">shimly123456</span> <a class="tag" taget="_blank" href="/search/MIT6.S081/1.htm">MIT6.S081</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">学习笔记</a><a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a> <div>url:https://pdos.csail.mit.edu/6.1810/2023/labs/lock.htmlInthislabyou’llgainexperienceinre-designingcodetoincreaseparallelism.Acommonsymptomofpoorparallelismonmulti-coremachinesishighlockcontention.Im</div> </li> <li><a href="/article/15.htm" title="Spring4.1新特性——Spring MVC增强" target="_blank">Spring4.1新特性——Spring MVC增强</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/spring+4.1/1.htm">spring 4.1</a> <div>目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T</div> </li> <li><a href="/article/142.htm" title="mysql 性能查询优化" target="_blank">mysql 性能查询优化</a> <span class="text-muted">annan211</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E4%BC%98%E5%8C%96/1.htm">优化</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a> <div> 1 时间到底花在哪了？ mysql在执行查询的时候需要执行一系列的子任务，这些子任务包含了整个查询周期最重要的阶段，这其中包含了大量为了检索数据列到存储引擎的调用以及调用后的数据处理，包括排序、分组等。在完成这些任务的时候，查询需要在不同的地方花费时间，包括网络、cpu计算、生成统计信息和执行计划、锁等待等。尤其是向底层存储引擎检索数据的调用操作。这些调用需要在内存操</div> </li> <li><a href="/article/269.htm" title="windows系统配置" target="_blank">windows系统配置</a> <span class="text-muted">cherishLC</span> <a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div>删除Hiberfil.sys ：使用命令powercfg -h off 关闭休眠功能即可： http://jingyan.baidu.com/article/f3ad7d0fc0992e09c2345b51.html 类似的还有pagefile.sys msconfig 配置启动项 shutdown 定时关机 ipconfig 查看网络配置 ipconfig /flushdns</div> </li> <li><a href="/article/396.htm" title="人体的排毒时间" target="_blank">人体的排毒时间</a> <span class="text-muted">Array_06</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> <div>======================== || 人体的排毒时间是什么时候？|| ======================== 转载于： http://zhidao.baidu.com/link?url=ibaGlicVslAQhVdWWVevU4TMjhiKaNBWCpZ1NS6igCQ78EkNJZFsEjCjl3T5EdXU9SaPg04bh8MbY1bR</div> </li> <li><a href="/article/523.htm" title="ZooKeeper" target="_blank">ZooKeeper</a> <span class="text-muted">cugfy</span> <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a> <div>Zookeeper是一个高性能，分布式的，开源分布式应用协调服务。它提供了简单原始的功能，分布式应用可以基于它实现更高级的服务，比如同步，配置管理，集群管理，名空间。它被设计为易于编程，使用文件系统目录树作为数据模型。服务端跑在java上，提供java和C的客户端API。 Zookeeper是Google的Chubby一个开源的实现，是高有效和可靠的协同工作系统，Zookeeper能够用来lea</div> </li> <li><a href="/article/650.htm" title="网络爬虫的乱码处理" target="_blank">网络爬虫的乱码处理</a> <span class="text-muted">随意而生</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>下边简单总结下关于网络爬虫的乱码处理。注意，这里不仅是中文乱码，还包括一些如日文、韩文、俄文、藏文之类的乱码处理，因为他们的解决方式是一致的，故在此统一说明。网络爬虫，有两种选择，一是选择nutch、hetriex，二是自写爬虫，两者在处理乱码时，原理是一致的，但前者处理乱码时，要看懂源码后进行修改才可以，所以要废劲一些；而后者更自由方便，可以在编码处理</div> </li> <li><a href="/article/777.htm" title="Xcode常用快捷键" target="_blank">Xcode常用快捷键</a> <span class="text-muted">张亚雄</span> <a class="tag" taget="_blank" href="/search/xcode/1.htm">xcode</a> <div>一、总结的常用命令：隐藏xcode command+h 退出xcode command+q 关闭窗口 command+w 关闭所有窗口 command+option+w 关闭当前</div> </li> <li><a href="/article/904.htm" title="mongoDB索引操作" target="_blank">mongoDB索引操作</a> <span class="text-muted">adminjun</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/%E7%B4%A2%E5%BC%95/1.htm">索引</a> <div>一、索引基础： MongoDB的索引几乎与传统的关系型数据库一模一样，这其中也包括一些基本的优化技巧。下面是创建索引的命令： > db.test.ensureIndex({"username":1}) 可以通过下面的名称查看索引是否已经成功建立： &nbs</div> </li> <li><a href="/article/1031.htm" title="成都软件园实习那些话" target="_blank">成都软件园实习那些话</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/%E6%88%90%E9%83%BD+%E8%BD%AF%E4%BB%B6%E5%9B%AD+%E5%AE%9E%E4%B9%A0/1.htm">成都软件园实习</a> <div>无聊之中，翻了一下日志，发现上一篇经历是很久以前的事了，悔过~~ 　　断断续续离开了学校快一年了，习惯了那里一天天的幼稚、成长的环境，到这里有点与世隔绝的感觉。不过还好，那是刚到这里时的想法，现在感觉在这挺好，不管怎么样，最要感谢的还是老师能给这么好的一次催化成长的机会，在这里确实看到了好多好多能想到或想不到的东西。　　都说在外面和学校相比最明显的差距就是与人相处比较困难，因为在外面每个人都</div> </li> <li><a href="/article/1158.htm" title="Linux下FTP服务器安装及配置" target="_blank">Linux下FTP服务器安装及配置</a> <span class="text-muted">ayaoxinchao</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/FTP%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">FTP服务器</a><a class="tag" taget="_blank" href="/search/vsftp/1.htm">vsftp</a> <div>检测是否安装了FTP [root@localhost ~]# rpm -q vsftpd 如果未安装：package vsftpd is not installed 安装了则显示：vsftpd-2.0.5-28.el5累死的版本信息安装FTP 运行yum install vsftpd命令，如[root@localhost ~]# yum install vsf</div> </li> <li><a href="/article/1285.htm" title="使用mongo-java-driver获取文档id和查找文档" target="_blank">使用mongo-java-driver获取文档id和查找文档</a> <span class="text-muted">BigBird2012</span> <a class="tag" taget="_blank" href="/search/driver/1.htm">driver</a> <div>注：本文所有代码都使用的mongo-java-driver实现。在MongoDB中，一个集合（collection）在概念上就类似我们SQL数据库中的表（Table），这个集合包含了一系列文档（document）。一个DBObject对象表示我们想添加到集合（collection）中的一个文档（document），MongoDB会自动为我们创建的每个文档添加一个id，这个id在</div> </li> <li><a href="/article/1412.htm" title="JSONObject以及json串" target="_blank">JSONObject以及json串</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/JSONObject/1.htm">JSONObject</a> <div>一.JAR包简介要使程序可以运行必须引入JSON-lib包，JSON-lib包同时依赖于以下的JAR包： 1.commons-lang-2.0.jar 2.commons-beanutils-1.7.0.jar 3.commons-collections-3.1.jar &n</div> </li> <li><a href="/article/1539.htm" title="[Zookeeper学习笔记之三]Zookeeper实例创建和会话建立的异步特性" target="_blank">[Zookeeper学习笔记之三]Zookeeper实例创建和会话建立的异步特性</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a> <div>为了说明问题，看个简单的代码， import org.apache.zookeeper.*; import java.io.IOException; import java.util.concurrent.CountDownLatch; import java.util.concurrent.ThreadLocal</div> </li> <li><a href="/article/1666.htm" title="【Scala十二】Scala核心六：Trait" target="_blank">【Scala十二】Scala核心六：Trait</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a> <div>Traits are a fundamental unit of code reuse in Scala. A trait encapsulates method and field definitions, which can then be reused by mixing them into classes. Unlike class inheritance, in which each c</div> </li> <li><a href="/article/1793.htm" title="weblogic version 10.3破解" target="_blank">weblogic version 10.3破解</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/weblogic/1.htm">weblogic</a> <div>版本：WebLogic Server 10.3 说明：%DOMAIN_HOME%：指WebLogic Server 域(Domain）目录例如我的做测试的域的根目录 DOMAIN_HOME=D:/Weblogic/Middleware/user_projects/domains/base_domain 1.为了保证操作安全，备份%DOMAIN_HOME%/security/Defa</div> </li> <li><a href="/article/1920.htm" title="求第n个斐波那契数" target="_blank">求第n个斐波那契数</a> <span class="text-muted">BrokenDreams</span> <div> 今天看到群友发的一个问题：写一个小程序打印第n个斐波那契数。自己试了下，搞了好久。。。基础要加强了。 &nbs</div> </li> <li><a href="/article/2047.htm" title="读《研磨设计模式》-代码笔记-访问者模式-Visitor" target="_blank">读《研磨设计模式》-代码笔记-访问者模式-Visitor</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; interface IVisitor { //第二次分派，Visitor调用Element void visitConcret</div> </li> <li><a href="/article/2174.htm" title="MatConvNet的excise 3改为网络配置文件形式" target="_blank">MatConvNet的excise 3改为网络配置文件形式</a> <span class="text-muted">cherishLC</span> <a class="tag" taget="_blank" href="/search/matlab/1.htm">matlab</a> <div>MatConvNet为vlFeat作者写的matlab下的卷积神经网络工具包，可以使用GPU。主页： http://www.vlfeat.org/matconvnet/ 教程： http://www.robots.ox.ac.uk/~vgg/practicals/cnn/index.html 注意：需要下载新版的MatConvNet替换掉教程中工具包中的matconvnet： http</div> </li> <li><a href="/article/2301.htm" title="ZK Timeout再讨论" target="_blank">ZK Timeout再讨论</a> <span class="text-muted">chenchao051</span> <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a><a class="tag" taget="_blank" href="/search/timeout/1.htm">timeout</a><a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a> <div>http://crazyjvm.iteye.com/blog/1693757 文中提到相关超时问题，但是又出现了一个问题，我把min和max都设置成了180000，但是仍然出现了以下的异常信息： Client session timed out, have not heard from server in 154339ms for sessionid 0x13a3f7732340003</div> </li> <li><a href="/article/2428.htm" title="CASE WHEN 用法介绍" target="_blank">CASE WHEN 用法介绍</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/group+by/1.htm">group by</a><a class="tag" taget="_blank" href="/search/case+when/1.htm">case when</a> <div>CASE WHEN 用法介绍 1. CASE WHEN 表达式有两种形式 --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END --Case搜索函数 CASE WHEN sex = '1' THEN </div> </li> <li><a href="/article/2555.htm" title="PHP技巧汇总:提高PHP性能的53个技巧" target="_blank">PHP技巧汇总:提高PHP性能的53个技巧</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div>PHP技巧汇总:提高PHP性能的53个技巧　　用单引号代替双引号来包含字符串，这样做会更快一些。因为PHP会在双引号包围的字符串中搜寻变量，　　单引号则不会，注意：只有echo能这么做，它是一种可以把多个字符串当作参数的函数译注：　　PHP手册中说echo是语言结构，不是真正的函数，故把函数加上了双引号)。　　1、如果能将类的方法定义成static，就尽量定义成static，它的速度会提升将近4倍</div> </li> <li><a href="/article/2682.htm" title="Yii框架中CGridView的使用方法以及详细示例" target="_blank">Yii框架中CGridView的使用方法以及详细示例</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>CGridView显示一个数据项的列表中的一个表。表中的每一行代表一个数据项的数据,和一个列通常代表一个属性的物品(一些列可能对应于复杂的表达式的属性或静态文本)。　　CGridView既支持排序和分页的数据项。排序和分页可以在AJAX模式或正常的页面请求。使用CGridView的一个好处是,当用户浏览器禁用JavaScript,排序和分页自动退化普通页面请求和仍然正常运行。实例代码如下：</div> </li> <li><a href="/article/2809.htm" title="Maven项目打包成可执行Jar文件" target="_blank">Maven项目打包成可执行Jar文件</a> <span class="text-muted">dyy_gusi</span> <a class="tag" taget="_blank" href="/search/assembly/1.htm">assembly</a> <div>Maven项目打包成可执行Jar文件在使用Maven完成项目以后，如果是需要打包成可执行的Jar文件，我们通过eclipse的导出很麻烦，还得指定入口文件的位置，还得说明依赖的jar包，既然都使用Maven了，很重要的一个目的就是让这些繁琐的操作简单。我们可以通过插件完成这项工作，使用assembly插件。具体使用方式如下： 1、在项目中加入插件的依赖： <plugin> </div> </li> <li><a href="/article/2936.htm" title="php常见错误" target="_blank">php常见错误</a> <span class="text-muted">geeksun</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div>1. kevent() reported that connect() failed (61: Connection refused) while connecting to upstream, client: 127.0.0.1, server: localhost, request: "GET / HTTP/1.1", upstream: "fastc</div> </li> <li><a href="/article/3063.htm" title="修改linux的用户名" target="_blank">修改linux的用户名</a> <span class="text-muted">hongtoushizi</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/change+password/1.htm">change password</a> <div>Change Linux Username 更改Linux用户名，需要修改4个系统的文件： /etc/passwd /etc/shadow /etc/group /etc/gshadow 古老/传统的方法是使用vi去直接修改，但是这有安全隐患（具体可自己搜一下），所以后来改成使用这些命令去代替： vipw vipw -s vigr vigr -s 具体的操作顺</div> </li> <li><a href="/article/3190.htm" title="第五章常用Lua开发库1-redis、mysql、http客户端" target="_blank">第五章常用Lua开发库1-redis、mysql、http客户端</a> <span class="text-muted">jinnianshilongnian</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/lua/1.htm">lua</a> <div>对于开发来说需要有好的生态开发库来辅助我们快速开发，而Lua中也有大多数我们需要的第三方开发库如Redis、Memcached、Mysql、Http客户端、JSON、模板引擎等。一些常见的Lua库可以在github上搜索，https://github.com/search?utf8=%E2%9C%93&q=lua+resty。 Redis客户端 lua-resty-r</div> </li> <li><a href="/article/3317.htm" title="zkClient 监控机制实现" target="_blank">zkClient 监控机制实现</a> <span class="text-muted">liyonghui160com</span> <a class="tag" taget="_blank" href="/search/zkClient+%E7%9B%91%E6%8E%A7%E6%9C%BA%E5%88%B6%E5%AE%9E%E7%8E%B0/1.htm">zkClient 监控机制实现</a> <div> 直接使用zk的api实现业务功能比较繁琐。因为要处理session loss，session expire等异常，在发生这些异常后进行重连。又因为ZK的watcher是一次性的，如果要基于wather实现发布/订阅模式，还要自己包装一下，将一次性订阅包装成持久订阅。另外如果要使用抽象级别更高的功能，比如分布式锁，leader选举</div> </li> <li><a href="/article/3444.htm" title="在Mysql 众多表中查找一个表名或者字段名的 SQL 语句" target="_blank">在Mysql 众多表中查找一个表名或者字段名的 SQL 语句</a> <span class="text-muted">pda158</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>在Mysql 众多表中查找一个表名或者字段名的 SQL 语句：　　方法一：SELECT table_name, column_name from information_schema.columns WHERE column_name LIKE 'Name'; 　　方法二：SELECT column_name from information_schema.colum</div> </li> <li><a href="/article/3571.htm" title="程序员对英语的依赖" target="_blank">程序员对英语的依赖</a> <span class="text-muted">Smile.zeng</span> <a class="tag" taget="_blank" href="/search/%E8%8B%B1%E8%AF%AD/1.htm">英语</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E7%8C%BF/1.htm">程序猿</a> <div>1、程序员最基本的技能，至少要能写得出代码，当我们还在为建立类的时候思考用什么单词发牢骚的时候，英语与别人的差距就直接表现出来咯。 2、程序员最起码能认识开发工具里的英语单词，不然怎么知道使用这些开发工具。 3、进阶一点，就是能读懂别人的代码，有利于我们学习人家的思路和技术。 4、写的程序至少能有一定的可读性，至少要人别人能懂吧... 以上一些问题，充分说明了英语对程序猿的重要性。骚年</div> </li> <li><a href="/article/3698.htm" title="Oracle学习笔记(8) 使用PLSQL编写触发器" target="_blank">Oracle学习笔记(8) 使用PLSQL编写触发器</a> <span class="text-muted">vipbooks</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a><a class="tag" taget="_blank" href="/search/Access/1.htm">Access</a> <div> 时间过得真快啊，转眼就到了Oracle学习笔记的最后个章节了，通过前面七章的学习大家应该对Oracle编程有了一定了了解了吧，这东东如果一段时间不用很快就会忘记了，所以我会把自己学习过的东西做好详细的笔记，用到的时候可以随时查找，马上上手！希望这些笔记能对大家有些帮助！这是第八章的学习笔记，学习完第七章的子程序和包之后</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.  </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>