Annuo、

WEB开发零基础到入门之HTML+CSS(学习记录)

序言

之前一直想把自己的一个学习记录,以文章形式记录下来,方便于自己后期查找和温故.自己想了想准备建个人博客站来做记录,但是又想到了csdn的大家庭；所以就放弃了用个人站记录的想法，关于这里简单说明下web应用开发学习具体记录方向；

HTML/CSS→Javascript→Jquery→PHP→框架设计→mysql→Linux

关于框架设计这块我个人先推荐一款比较适合新手学习的YDTDPHP框架；推荐目的不是为了让你必须去看懂,必须就会立刻自己设计出来,而是对于一起初步的前期了解,相对于后面的学习更有助；(该框架也是于2018年低-19年个人所完成的)!

本教程不少案例来源于菜鸟及w3c,或者互联网其它地方如！

本文章目录

为什么从事web开发

什么样的人适合做web开发

学习过程中需要注意什么

有耐心

知行合一

本教程的优点

web应用开发结构：

web应用

web应用概念

网站

网页

web请求

web应用开发结构

开发工具/环境

PhpStorm

Sublime Text

picpick

git

PhpStudy

navicat

Xshell

8uFtp

SourceTree

展现层面（HTML/CSS）

HTML简介

一、网页的构成

展现形式上的构成

代码结构上的构成

二、什么是 HTML

三、如何创建一个HTML文档

四、自己的第一个页面

HTML基础

一、HTML页面主体结构

二、HTML语法结构

1、 HTML标签

2、HTML属性

3、元素

三、HTML注释

四、常用头部标签的含义

五、常见字体标签

标题字(最大)

HTML编码

一、字符编码

常用字符编码

二、乱码产生的原因

HTML链接

一、a标签

普通链接

锚链接

HTML图像

一、img标签

二、图片知识

三、路径知识

绝对路径

相对路径

HTML列表

无序列表

有序列表

定义列表

HTML表单

常用表单元素

input标签共有的一些属性

radio单选和checkbox多选

select元素（下拉列表）

label标签

HTML表格

跨行或跨列的表格单元格

跨列

跨行

表格中的空单元格

HTML 实体

HTML 中有用的字符实体

HTML框架

实现思路

应用场景

缺点

一、 frameset

二、 iframe

在开始整个教程记录前聊聊关于WEB行业的行情：

为什么从事web开发

随着互联网的发展，越来越多的传统企业把产品服务都搬到互联网。而这些企业都需要做web应用，导致这方面的人才需求也随着增加，工资待遇屡创新高。从短期来讲，互联网都是属于上升阶段，所以需求量还是在不断的增加，通过招聘平台得来的数据，单纯北上广这三个地方，日招聘需求量就是高达3万+。

什么样的人适合做web开发

到底是什么样的人适合做开发，并没有绝对的事。任何人都是从不会到会的过程。所以不能说你就不能做开发，其它人就可以做开发。只是说如果有以下条件的朋友，学开发会相对比其它同学容易些。

有其它开发语言基础的。语言都是有共性的，如果有其它语言基础，学起来会容易很多。

英语比较好的，web开发使用的是英语，很多函数通过函数名就可以大概的了解函数的作用，另外特别多的技术文档是英语，所以英语好的人比较有优势。

有计算机基础的，当然如果了解计算机原理的人更好。还有打键盘速度要快，不要一指禅(所谓一指弹就是一个手指头看半天键盘点一下的)。

理科生，对数据比较敏感。在做数据处理时比较有优势。

逻辑能力比较好。业务开发中，离不开对流程的控制。逻辑能力比较好的朋友，思路清晰，效率高。

万事没有绝对的事，并不是说没有以上条件的朋友就不能学，只是可能需要花比大家更多多的时间和精力。

学习过程中需要注意什么

有耐心

很多朋友包括我自己身边的朋友(我推荐去学习)刚开始学习，三分钟热度，(当然我也在高中和大学期间也是自学和在某在线教育机构平台学习也是三分钟热度,可是我现在面临的是毕业,面临出校园后关于自己的未来选择,没办法我开始给自己下更多的功夫每天大概就睡了3-4小时,目的就是为了多学习我还不知道的东西还不能熟练运用的东西)学习一段时间就放松或者放弃，从事开发需要做事认真,有耐性,能耐的住寂寞(这是我之前在教育机构上学习时候老师说的话)。

知行合一

学的过程中，很多人以为自己懂了，但是让自己做又做不出来，知道是一回事，能做出来又是一会事，经验是通过实践积累出来的，纸上谈兵的人大把，想脱颖而出，那么你就得比别人做得更好。看一万遍不如练一遍。古言："读书万卷书，行万里路"；平时多看看大牛分享的干货或站点内的基础视频等之类,但是不能只是看看必须练，因为这东西你不练只是看看,那永远不会有进步的空间！要让自己亲身体验,让你的手指和大脑灵活运用起来！

本教程的优点

1.常用的，不照本宣科讲大量的理论

2.供快捷易懂的学习内容

3.不需要特意去背

4.提升学习能力，解决问题能力

web应用开发结构：

web应用

Web应用程序是一种可以通过Web访问的应用程序。Web应用程序的一个最大好处是用户很容易访问应用程序。用户只需要有浏览器即可，不需要再安装其他软件。通俗的讲，web应用就是大家通常接触到的网站。
应用程序有两种模式C/S、B/S。C/S是客户端/服务器端程序，也就是说这类程序一般独立运行。而B/S就是浏览器端/服务器端应用程序，这类应用程序一般借助IE等浏览器来运行。WEB应用程序一般是B/S模式。Web应用程序首先是“应用程序”，和用标准的程序语言，如C、C++等编写出来的程序没有什么本质上的不同。然而Web应用程序又有自己独特的地方，就是它是基于Web的，而不是采用传统方法运行的。换句话说，它是典型的浏览器/服务器架构的产物。更多关于WEB应用的了解

web应用概念

网站

网站是构成web的基础，所谓网站(Website)，就是指在网际网络（万维网）上，根据一定的规则，使用HTML等工具制作的用于展示特定内容的相关网页的集合, 同时也是构成web的基础。

网页

网页，是网站中的页面，是构成网站的基础。网页是构成网站的基本元素，是承载各种网站应用的平台。简单来说，网站就是由网页组成的。网页通常是HTML格式（文件扩展名为.html 或.htm或.php或.aspx或.asp或.jsp等）。网页要通过网页浏览器来阅读。在浏览器访问相对应的url（地址）就可以往服务器发给送请求

web请求

当客户端向服务器的程序提出请求时，web服务器根据请求响应对应的页面，当页面中含有php脚本时，服务器会交给PHP解释器进行解释执行，将生成的html代码再回传给客户端，客户端的浏览器解释html代码，最终形成网页格式的页面。

web应用开发结构

如何构建一个一个完整的web应用，需要了解到web应用的主要结构。

展现层面

展现层面指用户可以看到的网页，开发一个网页需要学习（html+css+javascript+jq）,也就是通常讲的前端开发

逻辑/业务层面

接受用户的请求或者数据，进行相关业务流程的处理，这部分需要学习（php或者其它语言java,python,ASP等）;也就是通常讲的后端开发

存储层面

一个完整的应用需要把数据进行存储，读取，需要学习（mysql或者其它数据库SQL Server，mongodb等）。

开发工具/环境

优秀的工具，可以使你的开发工作事半功倍，帮助你创建出高品质的Web应用。以下工具在整个web开发过程中慢慢会用到。

PhpStorm

PhpStorm 是 JetBrains 公司开发的一款商业的 PHP 集成开发工具，旨在提高用户效率，可深刻理解用户的编码，提供智能代码补全，快速导航以及即时错误检查。智能PHP编辑器、JavaScript 编辑器、HTML/CSS编辑器、轻量级IDE、智能的环境、可在Windows, Mac OS X, Linux上运行。
下载地址：https://www.jetbrains.com/phpstorm/

Sublime Text

Sublime Text 是一个轻量、简洁、高效、跨平台的编辑器，方便的配色以及兼容vim快捷键等各种优点博得了很多前端开发人员的喜爱!Sublime Text 2这款程序员必备代码编辑器，几乎每位程序员提到Sublime Text 2都是赞不绝口！它体积小巧，无需安装，绿色便携；它可跨平台支持Windows/Mac/Linux；支持32与64位操作系统，它在支持语法高亮、代码补全、代码片段（Snippet）、代码折叠、行号显示、自定义皮肤、配色方案等所有其它代码编辑器所拥有的功能的同时，又保证了其飞快的速度！(个人推荐Sublime Text)
下载地址：
http://www.sublimetext.com/3

picpick

PicPick是一款免费截图软件，它可以抓取全屏幕或是局部的画面，而且操作也很简单，还具备了一般最常用到的基本图像编辑、屏幕尺、角度、测距、及屏幕演示白板等功能。在前端学习开发中非常有。

git

Git是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。管理代码时候用到。

PhpStudy

PhpStudy就是Windows Apache Mysql PHP集成安装环境，即在window下的apache、php和mysql的服务器软件。

支持CentOS、Ubuntu、Debian、Fedora、deepin，Web端管理，QQ群及论坛技术支持
一键创建网站、FTP、数据库、SSL；安全管理，计划任务，文件管理，PHP多版本共存及切换；自带LNMP与LAMP

下载地址：https://www.xp.cn/

navicat

强大的数据库管理和设计工具,支持 Win、Mac 和 linux。直观的 GUI 让用户简单地管理 MySQL、MariaDB、SQL Server、SQLite、Oracle 和 PostgreSQL 的数据库。

Xshell

Xshell 是一个强大的安全终端模拟软件，它支持SSH1, SSH2, 以及Microsoft Windows 平台的TELNET 协议。

8uFtp

8UFTP客户端工具,涵盖其它FTP工具所有的功能。8uftp不占内存,体积小,多线程,支持在线解压缩。

SourceTree

SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端管理工具，同时也是Mercurial和Subversion版本控制系统工具。

展现层面（HTML/CSS）

HTML简介

一、网页的构成

展现形式上的构成

文字，图片和链接是构成一个网页最基本的元素。除此之外，网页的元素还包括表单（控件），表格，动画、音乐、视频等等。

代码结构上的构成

从代码结构上讲，网页的构成就是由html标签组成，我们需要掌握不同的标签分别代表着什么意义，掌握在网页中展现不同的东西分别需要用什么标签。

二、什么是 HTML

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
更多关于HTML的介绍

HTML 文档 = 网页

三、如何创建一个HTML文档

包含HTML标签的文件叫HTML文档，文件扩展名为.html 或.htm等。HTML文档要通过网页浏览器来阅读。浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。

通过谷歌或者火狐浏览器，我们可以很方便的看HTML文档的源代码或者HTML文档的结构。

通过使用任意文本编辑器直接新建一个文件，文件扩展名为.html 或.htm保存就创建了一个HTML文档。通过浏览器访问这个HTML文件。

HTML是一种描述性的语言，没有逻辑性，所以学习起来非常容易

四、自己的第一个页面




	
	YDTD丶Annuo


	这是我的第一个html页面

**PS：**看到这朋友你有心动了嘛？不妨赶快打开你的编辑器跟着我建立自己的第一个网页，并通过浏览器访问吧！

HTML基础

一、HTML页面主体结构

二、HTML语法结构

1、 HTML标签

所有标签：

http://www.w3school.com.cn/tags/index.asp

https://www.runoob.com/tags/html-reference.html

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如
HTML 标签通常是成对出现的，比如和
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
关于HTML基础标签除了上面给出的菜鸟及W3sc之前我也整理过一篇文章 HTML基础标签用于参考

标记符结束中的标记元素用尖括号括起来，带斜杠的元素表示该标记结束，大多数标记符必须成对使用，以表示作用的起始和结束。

结束标记一定要以"/"结束，引号必须使用英文引号，标签之间不能交叉嵌套，例如YDTD丶Annuo

标签特性

用两个尖括号括起来。
不区分大小写，但推荐采用小写
每个标签都是闭合的
同一标签可以同时拥有N个不同属性】

标签类型

对标签

包含起始标签和结束标签
内容写在对标签中间
属性写在起始标签尖括号内
例如YDTD丶Annuo

单标签

只有一个由尖括号括的标签
属性直接写在标签尖括号内
例如

2、HTML属性

必须放在开始标签里面，属性可以为标签提供更多样化的特性。

3、元素

开始和结束标签连同包含在他们之间内容，我们通常叫做元素

三、HTML注释

注释其实就是对代码的解释说明，在代码书写过程中合理运用注释是十分有必要的。浏览器不会解析注释。说白了，注释是给人看的，不是给浏览器看的。在sulime Text 中，用Ctrl+?可快速的注释。

四、常用头部标签的含义


    
    标题标签

例子解释
编码设置
</code>标题标签，显示在浏览器标签中。<br><code><keywords></code> 关键词，多个关键词用英文逗号隔开。<br><code><description></code> 本篇网页的概述，一段话，对网站的进一步描述。</p> <h2 id="%E4%BA%94%E3%80%81%E5%B8%B8%E8%A7%81%E5%AD%97%E4%BD%93%E6%A0%87%E7%AD%BE">五、常见字体标签</h2> <pre><code class="language-html"><h1>标题字(最大)</h1> <h6>标题字(最小)</h6> <strong>粗体字</strong> <em>斜体字</em> <span>无意义的文字标签 </span> <u>添加下划线</u> <i>斜体</i> <b>加粗</b> </code></pre> <blockquote> <h1 id="%E6%A0%87%E9%A2%98%E5%AD%97(%E6%9C%80%E5%A4%A7)">标题字(最大)</h1> <p>标题字(最小)</p> <strong>粗体字</strong> <br> <em>斜体字</em> <br> 无意义的文字标签 <br> <u>添加下划线</u> <br> <em>斜体</em> <br> <strong>加粗</strong> </blockquote> <hr> <blockquote> <p><strong><strong>**PS：**跟着我建一个完整的html文档，并且把常用的字体标签练习几遍吧。</strong></strong></p> </blockquote> <p style="text-align:center;"></p> <p> </p> <hr> <h1 id="HTML%E7%BC%96%E7%A0%81">HTML编码</h1> <h2 id="%E4%B8%80%E3%80%81%E5%AD%97%E7%AC%A6%E7%BC%96%E7%A0%81">一、字符编码</h2> <p>计算机要准确的处理各种文字，需要进行字符编码，以便计算机能够识别和存储各种文字。<br><strong>案例：</strong></p> <blockquote> <p>在显示器上看见的文字、图片等信息在电脑里面其实并不是我们看见的样子，即使你知道所有信息都存储在硬盘里，把它拆开也看不见里面有任何东西，只有些盘片。假设，你用显微镜把盘片放大，会看见盘片表面凹凸不平，凸起的地方被磁化，凹的地方是没有被磁化；凸起的地方代表数字1，凹的地方代表数字0。硬盘只能用0和1来表示所有文字、图片等信息。那么字母”A”在硬盘上是如何存储的呢？可能小张计算机存储字母”A”是1100001，而小王存储字母”A”是11000010，这样双方交换信息时就会误解。比如小张把1100001发送给小王，小王并不认为1100001是字母”A”，可能认为这是字母”X”，于是小王在用记事本访问存储在硬盘上的1100001时，在屏幕上显示的就是字母”X”。也就是说，小张和小王使用了不同的编码表。（谍战密码本）；</p> </blockquote> <h3 id="%E5%B8%B8%E7%94%A8%E5%AD%97%E7%AC%A6%E7%BC%96%E7%A0%81">常用字符编码</h3> <blockquote> <ul> <li>GBK - 汉字内码扩展规范，兼容GB2312。<br> [danger]* UTF-8 - 万国码（推荐）。</li> <li>关于更多字符编码介绍</li> </ul> </blockquote> <h2 id="%E4%BA%8C%E3%80%81%E4%B9%B1%E7%A0%81%E4%BA%A7%E7%94%9F%E7%9A%84%E5%8E%9F%E5%9B%A0">二、乱码产生的原因</h2> <blockquote> <p>文件存储的字符编码与浏览器在解析的字符编码不一致。</p> </blockquote> <p><strong>网页编码可以理解为两部分：</strong></p> <ol> <li>head头部设置的编码(浏览器在解析的字符编码)</li> <li>网页文件本身的编码</li> </ol> <blockquote> <p>解决乱码也很简单，只需要将两部分编码保持一致即可。</p> </blockquote> <blockquote> <p>使用editplus等编辑器可以查看文件的存储编码。</p> </blockquote> <pre><code class="language-html"><meta charset="编码"></code></pre> <hr> <blockquote> <p>**PS：**建一个HTML文件，以utf-8保存，charset设置为gbk,浏览看是否乱码吧！</p> </blockquote> <p style="text-align:center;"></p> <p> </p> <hr> <h1 id="HTML%E9%93%BE%E6%8E%A5">HTML链接</h1> <blockquote> <p>HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。</p> </blockquote> <h2 id="%E4%B8%80%E3%80%81a%E6%A0%87%E7%AD%BE">一、a标签</h2> <p>Html语法中最重要的标签之一。通过使用 href 属性，创建指向另外一个页面的链。通过使用id 属性，创建一个文档内部的文档片段的书签(可直接跳到文档指定位置--锚链接)。</p> <h3 id="%E6%99%AE%E9%80%9A%E9%93%BE%E6%8E%A5">普通链接</h3> <pre><code class="language-html"><a href="https://www.csdn.net/" target="_blank" title="显示">YDTD丶Annuo</a> </code></pre> <p><strong>例子解释</strong></p> <ul> <li><code>href</code> 属性规定链接的目标</li> <li>YDTD丶Annuo 始标签和结束标签之间的文字被作为超级链接来显示。</li> <li><code>target</code>定义被链接的文档在何处显示,<code>target="_blank"</code>新窗口打开</li> <li><code>title</code>鼠标移过时显示的文字</li> </ul> <h3 id="%E9%94%9A%E9%93%BE%E6%8E%A5">锚链接</h3> <p>给页面当中的某个特定位置添加标记，可以通过a链接直接指向这个位置，经常用在页面内容比较多的情况。我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。</p> <pre><code class="language-html"><div class="d1"> <a href="#mao1">点我跳转mao1</a> <div class="d2"> <a name="mao1">我是mao1</a> </div> </div> </code></pre> <p><strong>例子解释</strong></p> <ul> <li><code><a name="mao1"></code>定义锚点</li> <li><code><a href="#mao1"></code>跳转到mao1这个位置</li> </ul> <blockquote> <p>**PS：**页面中增加a链接，指向CSDN，点击新窗口打开。在页面的底部设置一个锚点，点击跳转到顶部。</p> </blockquote> <p style="text-align:center;"></p> <hr> <h1 id="HTML%E5%9B%BE%E5%83%8F">HTML图像</h1> <blockquote> <p>通过使用 HTML，可以在文档中显示图像。</p> </blockquote> <h2 id="%E4%B8%80%E3%80%81img%E6%A0%87%E7%AD%BE">一、img标签</h2> <pre><code class="language-html"><img src="/images/logo.png" alt="网站LOGO" title="LOGO" width="280" height="140"> </code></pre> <p><strong>例子解释</strong></p> <ul> <li><code>src</code>源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。</li> <li><code>alt</code>属性用来为图像定义一串预备的可替换的文本，一般用于图片加载失败时的文本提示。</li> <li><code>title</code>鼠标移过时显示的文字。</li> <li><code>width</code>图片宽度。</li> <li><code>height</code>图片高度。</li> </ul> <blockquote> <p>img标签为单标签，没有结束标签</p> <p>关于更多img标签的介绍https://www.runoob.com/html/html-images.html</p> </blockquote> <h2 id="%E4%BA%8C%E3%80%81%E5%9B%BE%E7%89%87%E7%9F%A5%E8%AF%86">二、图片知识</h2> <table> <thead> <tr> <th>格式</th> <th>透明度</th> <th>动画</th> <th>特点</th> <th>适用场景</th> </tr> </thead> <tbody> <tr> <td>JPG/JPEG</td> <td>×</td> <td>×</td> <td>色彩丰富，压缩比高，画质损失小，体积小</td> <td>色彩丰富、要求体积要小</td> </tr> <tr> <td>PNG</td> <td>√</td> <td>×</td> <td>色彩丰富，w，设置任意透明度，体积较小，但比jpg体积大一些。 IE6不支持png图片透明</td> <td>对色彩有特殊要求、需要透明效果</td> </tr> <tr> <td>GIF</td> <td>√</td> <td>√</td> <td>仅支持256种颜色，体积小，只有透明和不透明两种效果</td> <td>图片颜色少、需要透明效果</td> </tr> <tr> <td>BMP</td> <td>×</td> <td>×</td> <td>色彩丰富，画质清晰，但体积偏大</td> <td>不推荐在网页中使用</td> </tr> </tbody> </table> <h2 id="%E4%B8%89%E3%80%81%E8%B7%AF%E5%BE%84%E7%9F%A5%E8%AF%86">三、路径知识</h2> <h3 id="%E7%BB%9D%E5%AF%B9%E8%B7%AF%E5%BE%84">绝对路径</h3> <p>绝对路径就是指带有域名的完整路径。或者从盘符开始，具体的目标位置。<br> 比如"中国北京市朝阳区建国里二巷27号"这就是一个生活动中的经典" 绝对"方式的描述</p> <h3 id="%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84">相对路径</h3> <p>相对路径则是从当前目录说起，参照起点为本文件。<br> 相对于本目录<code><a href="./1.html">本目录下页面</a></code>。<br> 相对于上级目录<code><img src="../meinv.jpg" title="YDTD" /></code>。</p> <blockquote> <p>**PS：**试一试在网页中分别会绝对路径和相对路径插入不同的图片。</p> </blockquote> <hr> <h1 id="HTML%E5%88%97%E8%A1%A8">HTML列表</h1> <blockquote> <p>在页面设计中，一系列类似的结构或者数据，可以通过列表的形式来处理。</p> </blockquote> <h2 id="%E6%97%A0%E5%BA%8F%E5%88%97%E8%A1%A8">无序列表</h2> <p>无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。<br> 无序列表始于<code><ul></code> 标签。每个列表项始于<code><li></code> 。</p> <pre><code class="language-html"><ul> <li>钰嵩君</li> <li>情感语录平台</li> </ul> </code></pre> <p><strong>效果如下</strong></p> <ul> <li>钰嵩君</li> <li>情感语录平台</li> </ul> <h2 id="%E6%9C%89%E5%BA%8F%E5%88%97%E8%A1%A8">有序列表</h2> <p>同样，有序列表也是一列项目，列表项目使用数字进行标记。<br> 有序列表始于 <code><ol></code> 标签。每个列表项始于 <code><li></code> 标签。</p> <pre><code class="language-html"><ol> <li>钰嵩君</li> <li>情感语录平台</li> </ol> </code></pre> <p><strong>效果如下</strong></p> <ol> <li>钰嵩君</li> <li>情感语录平台</li> </ol> <h2 id="%E5%AE%9A%E4%B9%89%E5%88%97%E8%A1%A8">定义列表</h2> <p>自定义列表不仅仅是一列项目，而是项目及其注释的组合。<br> 自定义列表以 <code><dl></code> 标签开始。每个自定义列表项以 <code><dt></code> 开始。每个自定义列表项的定义以 <code><dd></code> 开始。</p> <pre><code class="language-html"><dl> <dt>钰嵩君</dt> <dd>简单而深情</dd> <dt>总有一句话</dt> <dd>为你而写</dd> </dl> </code></pre> <p><strong>效果如下</strong></p> <p>钰嵩君</p> <p>简短而深情</p> <p>总有一句话</p> <p>为你而写</p> <blockquote> <p>以上效果都是没有做修饰，为默认效果。实际开发中会以css进行修饰。</p> </blockquote> <hr> <blockquote> <p>**PS：**试着把三种列表都练习几遍，理清结构和写法。</p> </blockquote> <hr> <h1 id="HTML%E8%A1%A8%E5%8D%95">HTML表单</h1> <blockquote> <p>HTML 表单用于搜集不同类型的用户输入,是Web浏览器和Web服务器进行通信的最常用的手段，即通过表单，浏览器不仅能从Web服务器中获得信息，而且还能向Web 服务器反馈信息。HTML为此提供了表单(Form)元素来设计和实现这种交互界面。</p> </blockquote> <h2 id="%E5%B8%B8%E7%94%A8%E8%A1%A8%E5%8D%95%E5%85%83%E7%B4%A0">常用表单元素</h2> <blockquote> <p>表单形成的交互界面上有许多元素，负责收集用户输入的各种信息，这些元素一般称为控件。</p> </blockquote> <ul> <li>单行/多行文本框</li> <li>复选框</li> <li>单选按钮</li> <li>文件域</li> <li>隐藏域</li> <li>下拉菜单</li> <li>提交按钮</li> <li>重置按钮</li> </ul> <pre><code class="language-html"><form method="post" action="">  <input type="text" />  <input type="password" />  <input type="radio" />  <input type="checkbox" />  <input type="hidden" />  <input type="submit" />  <input type="file" />  <input type="reset" />  <input type="button"/>  <textarea></textarea>  <select> <option>下拉1</option> <option>下拉2</option> </select> </form> </code></pre> <p><strong>效果如下：</strong></p> <hr> <h3 id="input%E6%A0%87%E7%AD%BE%E5%85%B1%E6%9C%89%E7%9A%84%E4%B8%80%E4%BA%9B%E5%B1%9E%E6%80%A7"><code>input</code>标签共有的一些属性</h3> <ul> <li>type 控件的类型</li> <li>value 指定默认值</li> <li>name 用于服务器获取数据</li> </ul> <h3 id="radio%E5%8D%95%E9%80%89%E5%92%8Ccheckbox%E5%A4%9A%E9%80%89"><code>radio</code>单选和<code>checkbox</code>多选</h3> <ul> <li>checked 默认的选中项</li> <li>value 该选项被选中后提交到服务器的值</li> <li>name 用于服务器获取数据</li> </ul> <h3 id="select%E5%85%83%E7%B4%A0%EF%BC%88%E4%B8%8B%E6%8B%89%E5%88%97%E8%A1%A8%EF%BC%89"><code>select</code>元素（下拉列表）</h3> <blockquote> <p>HTML是通过<code><select></code>和<code><option></code>标记来定义输入列表框的。列表框标记<code><select></code>是成对出现标记，首标记<code><select></code>和尾标记<code></select></code> 之间的内容就是一个列表框的内容。和<code><option></code>标记用于定义列表框中的各个选项</p> </blockquote> <pre><code class="language-html"><select name="" id="" size="" multiple=""> <option value="">下拉1</option> <option value="">下拉2</option> <option value="" selected="">...</option> <option value="">下拉n</option> </select> </code></pre> <p><strong>例子解析</strong></p> <ul> <li><code>name</code>用于服务器获取数据</li> <li><code>sizesize</code>属性是可选的，用于定义列表框的长度。size属性的参数值是数字，表示显示在列表框中的选项数目。当size属性的参数值小于列表框中的列表项数目时，浏览器会为该列表框添加滚动条，用户可以使用滚动条来查看所有的选项。size属性的缺省值为1。<br> *<code>multiple</code>表示可以多选，如果不设置本属性，那么只能单选；按 Ctrl可以多选. 用法：multiple="multiple"</li> <li><code>value</code>当该项被选中并提交后，web浏览器传送给服务器的数据。缺省时，浏览器将传送选项的内容</li> <li><code>selected</code>用来指定选项的初始状态，表示该选项在初始时是被选中的。</li> </ul> <h2 id="label%E6%A0%87%E7%AD%BE">label标签</h2> <blockquote> <p>用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上</p> </blockquote> <pre><code class="language-html"><p>请点击文本标记之一，就可以触发相关控件：</p> <form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form> </code></pre> <p>效果如下：</p> <p>请点击文本标记之一，就可以触发相关控件：</p> <p><strong>例子解析</strong></p> <ul> <li><code>for</code>规定<code>label</code> 绑定到哪个表单元素。</li> <li><code>id</code>需要绑定的元素加个标识。</li> </ul> <blockquote> <p>**PS：**试着把所有常用的表单都练习几遍，理清不同类型表单的作用。</p> </blockquote> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/a9fe1856325c4276b93c03d6a46e5b27.jpg" target="_blank"><img alt="WEB开发零基础到入门之HTML+CSS(学习记录)_第5张图片" src="http://img.e-com-net.com/image/info8/a9fe1856325c4276b93c03d6a46e5b27.jpg" width="650" height="429" style="border:1px solid black;"></a></p> <hr> <h1 id="HTML%E8%A1%A8%E6%A0%BC">HTML表格</h1> <blockquote> <p>表格由 <code><table></code> 标签来定义。每个表格均有若干行（由<code><tr></code> 标签定义），每行被分割为若干单元格（由 <code><td></code> 标签定义）。字母<code><td></code> 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。</p> </blockquote> <pre><code class="language-html"><table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </code></pre> <p><strong>效果如下：</strong></p> <table border="1"> <tbody> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </tbody> </table> <h2 id="%E8%B7%A8%E8%A1%8C%E6%88%96%E8%B7%A8%E5%88%97%E7%9A%84%E8%A1%A8%E6%A0%BC%E5%8D%95%E5%85%83%E6%A0%BC">跨行或跨列的表格单元格</h2> <h3 id="%E8%B7%A8%E5%88%97">跨列</h3> <pre><code class="language-html"><table border="1"> <tr> <th>姓名</th> <th colspan="2">电话</th> </tr> <tr> <td>Annuo</td> <td>183 2070 282</td> <td>183 2070 232</td> </tr> </table> </code></pre> <p><strong>效果如下：</strong></p> <table border="1"> <tbody> <tr> <th>姓名</th> <th colspan="2">电话</th> </tr> <tr> <td>Annuo</td> <td>183 2070 282</td> <td>183 2070 232</td> </tr> </tbody> </table> <p><strong>例子解释</strong></p> <p>属性<code>colspan</code>横跨的列数（合并列）。</p> <h3 id="%E8%B7%A8%E8%A1%8C">跨行</h3> <pre><code class="language-html"><table border="1"> <tr> <td>姓名</td> <td>Annuo</td> </tr> <tr> <td rowspan="2">电话</td> <td>183 2070 282</td> </tr> <tr> <td>183 2070 232</td> </tr> </table> </code></pre> <p><strong>效果如下：</strong></p> <table border="1"> <tbody> <tr> <td>姓名</td> <td>Annuo</td> </tr> <tr> <td rowspan="2">电话</td> <td>183 2070 282</td> </tr> <tr> <td>183 2070 232</td> </tr> </tbody> </table> <p><strong>例子解释</strong></p> <p>属性<code>rowspan</code>横跨的行数</p> <h2 id="%E8%A1%A8%E6%A0%BC%E4%B8%AD%E7%9A%84%E7%A9%BA%E5%8D%95%E5%85%83%E6%A0%BC">表格中的空单元格</h2> <blockquote> <p>在一些浏览器中，没有内容的表格单元显示得不太好。如果某个单元格是空的（没有内容），浏览器可能无法显示出这个单元格的边框。为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。</p> </blockquote> <hr> <blockquote> <p><strong>综合运用</strong>：把所有以上的知识点的全部结合一下，通过以上学习内容，运用表格标签和表单标签，布出下面简历。</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/1969687a96004e6aad102a93c69c97f7.jpg" target="_blank"><img alt="WEB开发零基础到入门之HTML+CSS(学习记录)_第6张图片" src="http://img.e-com-net.com/image/info8/1969687a96004e6aad102a93c69c97f7.jpg" width="650" height="424" style="border:1px solid black;"></a></p> </blockquote> <p style="text-align:center;"></p> <p> </p> <hr> <h1 id="HTML%20%E5%AE%9E%E4%BD%93">HTML 实体</h1> <blockquote> <p>在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（< ）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体。</p> </blockquote> <h2 id="HTML%20%E4%B8%AD%E6%9C%89%E7%94%A8%E7%9A%84%E5%AD%97%E7%AC%A6%E5%AE%9E%E4%BD%93">HTML 中有用的字符实体</h2> <blockquote> <p>在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（< ）和大于号（>），这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体。</p> </blockquote> <h2>HTML 中有用的字符实体</h2> <table> <tbody> <tr> <th>显示结果</th> <th>描述</th> <th>实体名称</th> <th>实体编号</th> </tr> <tr> <td> </td> <td>空格</td> <td> </td> <td> </td> </tr> <tr> <td><</td> <td>小于号</td> <td><</td> <td><</td> </tr> <tr> <td>></td> <td>大于号</td> <td>></td> <td>></td> </tr> <tr> <td>&</td> <td>和号</td> <td>&</td> <td>&</td> </tr> <tr> <td>"</td> <td>引号</td> <td>"</td> <td>"</td> </tr> <tr> <td>'</td> <td>撇号 </td> <td>' (IE不支持)</td> <td>'</td> </tr> <tr> <td>￠</td> <td>分</td> <td>¢</td> <td>¢</td> </tr> <tr> <td>£</td> <td>镑</td> <td>£</td> <td>£</td> </tr> <tr> <td>¥</td> <td>日圆</td> <td>¥</td> <td>¥</td> </tr> <tr> <td>€</td> <td>欧元</td> <td>€</td> <td>€</td> </tr> <tr> <td>§</td> <td>小节</td> <td>§</td> <td>§</td> </tr> <tr> <td>©</td> <td>版权</td> <td>©</td> <td>©</td> </tr> <tr> <td>®</td> <td>注册商标</td> <td>®</td> <td>®</td> </tr> <tr> <td>™</td> <td>商标</td> <td>™</td> <td>™</td> </tr> <tr> <td>×</td> <td>乘号</td> <td>×</td> <td>×</td> </tr> <tr> <td>÷</td> <td>除号</td> <td>÷</td> <td>÷</td> </tr> </tbody> </table> <hr> <h1 id="HTML%E6%A1%86%E6%9E%B6">HTML框架</h1> <blockquote> <p>帧窗口是一种页面技术，应用帧技术可以使得用户在同一个浏览器中，浏览不同的页面，并且各个页面之间相互联系，并且能够相互访问和进行操作。</p> </blockquote> <h3 id="%E5%AE%9E%E7%8E%B0%E6%80%9D%E8%B7%AF">实现思路</h3> <p>将浏览器的窗口按照不同的功能分割成多个小窗口，每个窗口对应自己的HTML页面，按照一定的方式组合起来，实现特殊的效果。</p> <h3 id="%E5%BA%94%E7%94%A8%E5%9C%BA%E6%99%AF">应用场景</h3> <p>网站后台操作界面,内容层级明确的页面</p> <h3 id="%E7%BC%BA%E7%82%B9">缺点</h3> <p>页面布局比较复杂，效率没有单页面高，对搜索引擎的友好程度不高</p> <h2 id="%E4%B8%80%E3%80%81%20frameset">一、 frameset</h2> <ul> <li>不能和body共存。</li> <li>表示框架开始，指定框架的个数以及边框等属性</li> <li>属性：rows="" 、cols=""、值可以是百分比也是可以是具体的数字，也可以是* 进行等分</li> <li>frameborder="" ,0表示没有边框，1表示有边框</li> </ul> <p><strong>例1</strong></p> <pre><code class="language-html"><frameset cols="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> </frameset> </code></pre> <p><strong>例2</strong></p> <pre><code class="language-html"><frameset rows="50%,50%"> <frame src="frame_a.html"> <frameset cols="25%,75%"> <frame src="frame_b.html"> <frame src="frame_c.html"> </frameset> </frameset> </code></pre> <h2 id="%E4%BA%8C%E3%80%81%20iframe">二、 iframe</h2> <blockquote> 用于在网页内显示网页,可以和body体共存，用法和类似，用于早期实现异步传输等视觉效果。 </blockquote> <p><strong>实例</strong></p> <pre><code class="language-html"><iframe class="HtmlEdit" width="100%" frameborder=0 height="100" scrolling="no" src="https://www.csdn.net/" MARGINHEIGHT="1" MARGINWIDTH="1" name="testframename"> </iframe> <a href="http://www.ydtdml.com" target="testframename">点击指向其它框架</a> </code></pre> <table> <tbody> <tr> <th>属性</th> <th>值</th> <th>描述</th> </tr> <tr> <td>align</td> <td> <ul> <li>left</li> <li>right</li> <li>top</li> <li>middle</li> <li>bottom</li> </ul></td> <td> <p>不赞成使用。请使用样式代替。</p> <p>规定如何根据周围的元素来对齐此框架。</p> </td> </tr> <tr> <td>frameborder</td> <td> <ul> <li>1</li> <li>0</li> </ul></td> <td>规定是否显示框架周围的边框。</td> </tr> <tr> <td>height</td> <td> <ul> <li><em>pixels</em></li> <li><em>%</em></li> </ul></td> <td>规定 iframe 的高度。</td> </tr> <tr> <td>longdesc</td> <td><em>URL</em></td> <td>规定一个页面，该页面包含了有关 iframe 的较长描述。</td> </tr> <tr> <td>marginheight</td> <td><em>pixels</em></td> <td>定义 iframe 的顶部和底部的边距。</td> </tr> <tr> <td>marginwidth</td> <td><em>pixels</em></td> <td>定义 iframe 的左侧和右侧的边距。</td> </tr> <tr> <td>name</td> <td><em>frame_name</em></td> <td>规定 iframe 的名称。</td> </tr> <tr> <td>sandbox</td> <td> <ul> <li>""</li> <li>allow-forms</li> <li>allow-same-origin</li> <li>allow-scripts</li> <li>allow-top-navigation</li> </ul></td> <td>启用一系列对 <iframe> 中内容的额外限制。</td> </tr> <tr> <td>scrolling</td> <td> <ul> <li>yes</li> <li>no</li> <li>auto</li> </ul></td> <td>规定是否在 iframe 中显示滚动条。</td> </tr> <tr> <td>seamless</td> <td>seamless</td> <td>规定 <iframe> 看上去像是包含文档的一部分。</td> </tr> <tr> <td>src</td> <td><em>URL</em></td> <td>规定在 iframe 中显示的文档的 URL。</td> </tr> <tr> <td>srcdoc</td> <td><em>HTML_code</em></td> <td>规定在 <iframe> 中显示的页面的 HTML 内容。</td> </tr> <tr> <td>width</td> <td> <ul> <li><em>pixels</em></li> <li><em>%</em></li> </ul></td> <td>定义 iframe 的宽度。</td> </tr> </tbody> </table> <blockquote> <p>**PS：**那么咱们对于HTML的介绍及实例介绍到这就结束了；如果有了解不透的点击下方链接详细了解</p> <p>https://www.runoob.com/html/html-tutorial.html</p> <p>https://www.w3school.com.cn/html5/index.asp</p> </blockquote> <hr> <p>文章持续更新中...下篇是CSS的展现层面介绍！</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1288311347511107584"></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">你可能感兴趣的:(PHP,mysql,WEB)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1943992776169418752.htm" title="Flask框架入门：快速搭建轻量级Python网页应用" target="_blank">Flask框架入门：快速搭建轻量级Python网页应用</a> <span class="text-muted">「已注销」</span> <a class="tag" taget="_blank" href="/search/python-AI/1.htm">python-AI</a><a class="tag" taget="_blank" href="/search/python%E5%9F%BA%E7%A1%80/1.htm">python基础</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99%E7%BD%91%E7%BB%9C/1.htm">网站网络</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>转载：Flask框架入门：快速搭建轻量级Python网页应用1.Flask基础Flask是一个使用Python编写的轻量级Web应用框架。它的设计目标是让Web开发变得快速简单，同时保持应用的灵活性。Flask依赖于两个外部库：Werkzeug和Jinja2，Werkzeug作为WSGI工具包处理Web服务的底层细节，Jinja2作为模板引擎渲染模板。安装Flask非常简单，可以使用pip安装命令</div> </li> <li><a href="/article/1943991891796226048.htm" title="Python Flask 框架入门：快速搭建 Web 应用的秘诀" target="_blank">Python Flask 框架入门：快速搭建 Web 应用的秘诀</a> <span class="text-muted">Python编程之道</span> <a class="tag" taget="_blank" href="/search/Python%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD%E4%B8%8E%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">Python人工智能与大数据</a><a class="tag" taget="_blank" href="/search/Python%E7%BC%96%E7%A8%8B%E4%B9%8B%E9%81%93/1.htm">Python编程之道</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>PythonFlask框架入门：快速搭建Web应用的秘诀关键词Flask、微框架、路由系统、Jinja2模板、请求处理、WSGI、Web开发摘要想快速用Python搭建一个灵活的Web应用？Flask作为“微框架”代表，凭借轻量、可扩展的特性，成为初学者和小型项目的首选。本文将从Flask的核心概念出发，结合生活化比喻、代码示例和实战案例，带你一步步掌握：如何用Flask搭建第一个Web应用？路由</div> </li> <li><a href="/article/1943985462716723200.htm" title="docker-compose方式搭建lnmp环境——筑梦之路" target="_blank">docker-compose方式搭建lnmp环境——筑梦之路</a> <span class="text-muted">筑梦之路</span> <a class="tag" taget="_blank" href="/search/linux%E7%B3%BB%E7%BB%9F%E8%BF%90%E7%BB%B4/1.htm">linux系统运维</a><a class="tag" taget="_blank" href="/search/%E5%9B%BD%E4%BA%A7%E5%8C%96/1.htm">国产化</a><a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/adb/1.htm">adb</a> <div>docker-compose.yml文件#生成docker-compose.ymlcat>docker-compose.ymlnginx/conf.d/default.conf">www/index.phpecho"开始启动服务..."docker-composeup-d#获取本机ipip_addr=$(hostname-I|awk'{print$1}')echo"部署完成！"echo"访问测试页</div> </li> <li><a href="/article/1943976258685693952.htm" title="CentOS7环境卸载MySQL5.7" target="_blank">CentOS7环境卸载MySQL5.7</a> <span class="text-muted">Hadoop_Liang</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</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/mysql/1.htm">mysql</a> <div>备份重要数据切记，卸载之前先备份mysql重要的数据。备份一个数据库例如：备份名为mydatabase的数据库到backup.sql的文件中mysqldump-uroot-ppassword123mydatabase>backup.sql备份所有数据库mysqldump-uroot-ppassword123--all-databases>all_databases_backup.sql注意：-p后</div> </li> <li><a href="/article/1943975880120397824.htm" title="php SPOF" target="_blank">php SPOF</a> <span class="text-muted">贵哥的编程之路(热爱分享为后来者)</span> <a class="tag" taget="_blank" href="/search/PHP%E8%AF%AD%E8%A8%80%E7%BB%8F%E5%85%B8%E7%A8%8B%E5%BA%8F100%E9%A2%98/1.htm">PHP语言经典程序100题</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>1.什么是单点故障（SPOF）？单点故障指的是系统中某个组件一旦失效，整个系统或服务就会不可用。常见的单点有：数据库、缓存、Web服务器、负载均衡、网络设备等。2.常见单点故障场景只有一台数据库服务器，宕机后所有业务不可用只有一台Redis缓存，挂掉后缓存全部失效只有一台Web服务器，挂掉后网站无法访问只有一个负载均衡节点，挂掉后流量无法分发只有一条网络链路，断开后所有服务失联3.消除单点故障的主</div> </li> <li><a href="/article/1943975880678240256.htm" title="php 高并发下日志量巨大，如何高效采集、存储、分析" target="_blank">php 高并发下日志量巨大，如何高效采集、存储、分析</a> <span class="text-muted">贵哥的编程之路(热爱分享为后来者)</span> <a class="tag" taget="_blank" href="/search/PHP%E8%AF%AD%E8%A8%80%E7%BB%8F%E5%85%B8%E7%A8%8B%E5%BA%8F100%E9%A2%98/1.htm">PHP语言经典程序100题</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>1.问题背景高并发系统每秒产生大量日志（如访问日志、错误日志、业务日志等）。单机写入、存储、分析能力有限，容易成为瓶颈。需要支持实时采集、分布式存储、快速检索与分析。2.主流架构方案一、分布式日志采集架构[应用服务器(PHP等)]|v[日志采集Agent（如Filebeat、Fluentd、Logstash）]|v[消息队列/缓冲（如Kafka、Redis、RabbitMQ）]|v[日志存储（如E</div> </li> <li><a href="/article/1943975626671190016.htm" title="centos7安装 mysql5.7(安装包)" target="_blank">centos7安装 mysql5.7(安装包)</a> <span class="text-muted">heiPony</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/mariadb/1.htm">mariadb</a><a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>一.卸载centos7自带数据库查看系统自带的Mariadbrpm-qa|grepmariadbmariadb-libs-5.5.44-2.el7.centos.x86_64卸载rpm-e--nodepsmariadb-libs-5.5.44-2.el7.centos.x86_64删除etc目录下的my.cnfrm/etc/my.cnf二.检查mysql是否存在(有就卸载,删除相关文件)rpm-q</div> </li> <li><a href="/article/1943974618851241984.htm" title="Vue3+Vite+TS+Axios整合详细教程" target="_blank">Vue3+Vite+TS+Axios整合详细教程</a> <span class="text-muted">老马聊技术</span> <a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/Vite/1.htm">Vite</a><a class="tag" taget="_blank" href="/search/TS/1.htm">TS</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>1.Vite简介Vite是新一代的前端构建工具，在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。生产中利用Rollup作为打包工具，号称下一代的前端构建工具。vite是一种新型的前端构建工具，能够显著的提升前端开发者的体验。它主要有俩部分组成：一个</div> </li> <li><a href="/article/1943973357707915264.htm" title="MySQL Explain 详解：从入门到精通，让你的 SQL 飞起来" target="_blank">MySQL Explain 详解：从入门到精通，让你的 SQL 飞起来</a> <span class="text-muted"></span> <div>引言：为什么Explain是SQL优化的“照妖镜”？在Java开发中，我们常常会遇到数据库性能瓶颈的问题。一条看似简单的SQL语句，在数据量增长到一定规模后，可能会从毫秒级响应变成秒级甚至分钟级响应，直接拖慢整个应用的性能。此时，你是否曾困惑于：为什么这条SQL突然变慢了？索引明明建了，为什么没生效？到底是哪里出了问题？答案就藏在MySQL的EXPLAIN命令里。EXPLAIN就像一面“照妖镜”，</div> </li> <li><a href="/article/1943972727534710784.htm" title="Linux/Centos7离线安装并配置MySQL 5.7" target="_blank">Linux/Centos7离线安装并配置MySQL 5.7</a> <span class="text-muted">有事开摆无事百杜同学</span> <a class="tag" taget="_blank" href="/search/LInux%2FCentOS7/1.htm">LInux/CentOS7</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>Linux/Centos7离线安装并配置MySQL5.7超详细教程一、环境准备1.下载MySQL5.7离线包2.使用rpm工具卸载MariaDB（避免冲突）3.创建系统级别的MySQL专用用户二、安装与配置1.解压并重命名MySQL目录2.创建数据目录和配置文件3.设置目录权限4.初始化MySQL5.配置启动脚本6.配置环境变量三、启动与验证1.启动MySQL服务2.获取初始密码3.登录并修改密码</div> </li> <li><a href="/article/1943968187112550400.htm" title="OpenWebUI(12)源码学习-后端constants.py常量定义文件" target="_blank">OpenWebUI(12)源码学习-后端constants.py常量定义文件</a> <span class="text-muted">青苔猿猿</span> <a class="tag" taget="_blank" href="/search/AI%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">AI大模型</a><a class="tag" taget="_blank" href="/search/openwebui/1.htm">openwebui</a><a class="tag" taget="_blank" href="/search/constants%E5%B8%B8%E9%87%8F%E5%AE%9A%E4%B9%89/1.htm">constants常量定义</a> <div>目录文件名：`constants.py`功能概述：主要功能点详解1.**MESSAGES枚举类**2.**WEBHOOK_MESSAGES枚举类**3.**ERROR_MESSAGES枚举类**✅默认错误模板✅认证与用户相关错误✅资源冲突与重复错误✅验证失败类错误✅权限限制类错误✅文件上传与格式错误✅模型与API错误✅请求频率与安全限制✅数据库与配置错误4.**TASKS枚举类**✅总结实际应用场</div> </li> <li><a href="/article/1943964154603827200.htm" title="ssrf漏洞复现" target="_blank">ssrf漏洞复现</a> <span class="text-muted">ξ流ぁ星ぷ132</span> <a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a> <div>目录基础环境查看phpinfo发现线索探测端口+gopher协议基础环境这里发现一些基础协议呗过滤掉了。但是有个提示的info，于是先看看查看phpinfo发现线索发现这台主机的地址了，于是猜测这个网段应该还有其他主机，试了一下172.21.0.1:80172.21.0.3:80果然如下（0.1是陷阱就不浪费时间了，）探测端口+gopher协议然后对这个172.21.0.3这个主机探测端口发现63</div> </li> <li><a href="/article/1943950163496202240.htm" title="JavaScript 基础09：Web APIs——日期对象、DOM节点" target="_blank">JavaScript 基础09：Web APIs——日期对象、DOM节点</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/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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>JavaScript基础09：WebAPIs——日期对象、DOM节点进一步学习DOM相关知识，实现可交互的网页特效能够插入、删除和替换元素节点。能够依据元素节点关系查找节点。一、日期对象掌握Date日期对象的使用，动态获取当前计算机的时间。ECMAScript中内置了获取系统时间的对象Date，使用Date时与之前学习的内置对象console和Math不同，它需要借助new关键字才能使用。1.实例</div> </li> <li><a href="/article/1943946255763828736.htm" title="《Java前端开发全栈指南：从Servlet到现代框架实战》" target="_blank">《Java前端开发全栈指南：从Servlet到现代框架实战》</a> <span class="text-muted"></span> <div>前言在当今Web开发领域，Java依然是后端开发的主力语言，而随着前后端分离架构的普及，Java开发者也需要掌握前端技术栈。本文将全面介绍JavaWeb前端开发的核心技术，包括传统Servlet/JSP体系、现代前端框架集成方案，以及全栈开发的最佳实践。通过本文，您将了解如何构建现代化的JavaWeb应用前端界面。一、JavaWeb前端技术演进1.1传统技术栈Servlet：JavaWeb基础，处</div> </li> <li><a href="/article/1943943105145270272.htm" title="JAVA 高频八股文 Day03" target="_blank">JAVA 高频八股文 Day03</a> <span class="text-muted">Conqueror675</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>12.TCP和Http的区别是什么TCP是传输层协议，负责建立可靠的点对点连接，确保数据有序、完整地传输（如铁路轨道）；HTTP是应用层协议，基于TCP构建，定义了Web服务交互的报文格式和规则（如货运订单）。TCP关注数据如何可靠送达，通过三次握手建立连接、流量控制等机制保证传输；HTTP关注传输内容的意义，提供请求/响应语义（GET/POST等）和无状态通信。补充：说一下什么是三次握手四次挥手</div> </li> <li><a href="/article/1943932016164663296.htm" title="Vue3组件库实战: 打造高复用UI系统" target="_blank">Vue3组件库实战: 打造高复用UI系统</a> <span class="text-muted">武昌库里写JAVA</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/layui/1.htm">layui</a><a class="tag" taget="_blank" href="/search/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/1.htm">毕业设计</a> <div>Vue3组件库实战:打造高复用UI系统介绍什么是Vue3组件库在前端开发中，UI组件库是非常重要的一部分。Vue3组件库是基于Vue.js3.x版本开发的一套可用于构建Web应用的UI组件集合，可以帮助开发者快速搭建页面并保证页面的一致性和美观性。目标关键词：Vue3组件库设计与构建设计原则组件库的设计需要遵循一定的原则，比如易用性、可维护性、扩展性等。在设计阶段需要考虑到不同场景的使用，并且保证</div> </li> <li><a href="/article/1943931763084554240.htm" title="自测魅族手机webview加载h5时ul嵌套li标签js失效问题记录" target="_blank">自测魅族手机webview加载h5时ul嵌套li标签js失效问题记录</a> <span class="text-muted">ZhDan91</span> <a class="tag" taget="_blank" href="/search/%E6%B7%B7%E5%90%88app/1.htm">混合app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a> <div>自测魅族手机ul嵌套li标签js失效问题：可采用div嵌套option实现样式：.hot_list{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;}.hot_listoption{text-align:center;width:30%;padding:.16rem.34rem;border:0.1remso</div> </li> <li><a href="/article/1943929870320988160.htm" title="为Layui Table组件添加前端搜索功能" target="_blank">为Layui Table组件添加前端搜索功能</a> <span class="text-muted">caifox菜狐狸</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85%EF%BC%9A%E4%BB%8E%E6%96%B0%E6%89%8B%E5%88%B0%E4%B8%93%E5%AE%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/layui/1.htm">layui</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/table/1.htm">table</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%90%9C%E7%B4%A2/1.htm">前端搜索</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E6%A0%BC%E6%90%9C%E7%B4%A2/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>在现代Web开发中，数据展示和交互功能是构建高效、用户友好界面的关键要素之一。Layui作为一款广受欢迎的前端UI框架，以其简洁的代码、丰富的组件和强大的功能，为开发者提供了极大的便利。其中，Layui的Table组件更是以其强大的数据展示能力和灵活的配置选项，成为了许多项目中不可或缺的部分。然而，在实际应用中，仅仅展示数据往往是不够的。用户通常需要根据自己的需求快速查找特定信息，这就需要为表格添</div> </li> <li><a href="/article/1943924321755918336.htm" title="Java中的Tomcat，开启Web应用腾飞【基础版】" target="_blank">Java中的Tomcat，开启Web应用腾飞【基础版】</a> <span class="text-muted"></span> <div>目录一、Tomcat初登场：揭开神秘面纱（一）啥是Tomcat（二）为啥要有Tomcat二、Tomcat的安装与启动：开启第一步（一）下载Tomcat（二）启动Tomcat三、Tomcat的目录结构：探秘内部布局（一）核心目录介绍（二）目录间的协同工作四、部署JavaWeb应用到Tomcat：让应用上线（一）打包Web应用为WAR文件（二）部署WAR文件到Tomcat五、Tomcat的配置优化：让</div> </li> <li><a href="/article/1943923817982259200.htm" title="Java Web 之 Session 详解" target="_blank">Java Web 之 Session 详解</a> <span class="text-muted">艾伦~耶格尔</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</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/%E5%90%8E%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/session/1.htm">session</a> <div>在JavaWeb开发中，Session就像网站的专属记忆管家，为每个用户保管着重要的信息和状态，确保用户在网站的旅程顺畅无阻。场景一：想象你去一家大型超市购物，推着购物车挑选商品。这个购物车就如同Session，它记录了你的购物信息，方便你在结账时一次性结算。场景二：你在玩一个在线游戏，登录账号后，你的游戏进度、等级、装备等信息都会被保存在Session中，即使你中途关闭游戏，下次登录时依然可以继</div> </li> <li><a href="/article/1943920918606704640.htm" title="Spring WebFlux 响应式编程原理与实战指南" target="_blank">Spring WebFlux 响应式编程原理与实战指南</a> <span class="text-muted"></span> <div>SpringWebFlux响应式编程原理与实战指南一、技术背景与应用场景随着微服务与高并发的迅速发展，传统的阻塞式编程模型在处理大量并发请求时容易导致线程资源耗尽、响应延迟增高。SpringWebFlux基于ReactiveStreams规范，通过非阻塞、背压机制，实现高吞吐、低延迟的Web服务。典型应用场景包括：实时数据推送：WebSocket或Server-SentEvents场景。高并发AP</div> </li> <li><a href="/article/1943920035919622144.htm" title="2025年渗透测试面试题总结-2025年HW(护网面试) 43（题目+回答）" target="_blank">2025年渗透测试面试题总结-2025年HW(护网面试) 43（题目+回答）</a> <span class="text-muted">独行soc</span> <a class="tag" taget="_blank" href="/search/2025%E5%B9%B4%E6%8A%A4%E7%BD%91/1.htm">2025年护网</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><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E7%A7%91%E6%8A%80/1.htm">科技</a><a class="tag" taget="_blank" href="/search/%E6%B8%97%E9%80%8F%E6%B5%8B%E8%AF%95/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/%E6%8A%A4%E7%BD%91/1.htm">护网</a> <div>安全领域各种资源，学习文档，以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具，欢迎关注。目录2025年HW(护网面试)431.自我介绍与职业规划2.Webshell源码级检测方案3.2025年新型Web漏洞TOP54.渗透中的高价值攻击点5.智能Fuzz平台架构设计6.堆栈溢出攻防演进7.插桩技术实战应用8.二进制安全能力矩阵9.C语言内存管理精要10.Pyth</div> </li> <li><a href="/article/1943919909612351488.htm" title="Vue.js 过渡 & 动画" target="_blank">Vue.js 过渡 & 动画</a> <span class="text-muted">lsx202406</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Vue.js过渡&动画引言在Web开发中，过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架，提供了强大的过渡与动画功能，使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画，包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时，会自动触发过渡效果。过渡</div> </li> <li><a href="/article/1943917011268595712.htm" title="Javaweb学习之Vue模板语法（三）" target="_blank">Javaweb学习之Vue模板语法（三）</a> <span class="text-muted">不要数手指啦</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>目录学习资料前情回顾本期介绍（vue模板语法）文本插值Vue的Attribute绑定使用JavaScript表达式综合实例代码：学习资料Vue.js-渐进式JavaScript框架|Vue.js(vuejs.org)前情回顾项目的创建大家可以看这篇文章Vue学习之项目的创建-CSDN博客本期介绍（vue模板语法）首先，找到我们编写代码的地方找到自己项目的src文件夹，打开之后点击component</div> </li> <li><a href="/article/1943914995217657856.htm" title="swagger【个人笔记】" target="_blank">swagger【个人笔记】</a> <span class="text-muted">撰卢</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>文章目录swagger导入mave坐标在配置类(WebMvcConfiguration)中加入knife4j相关配置设置静态资源映射，主要是让拦截器放行swagger常用注解@Api(tags="\[描述这个类的作用]")@ApiModel(description="\[描述这个类的作用]")@ApiModelProPerty("描述这个类的作用")@ApiOperation("\[描述方法的作用</div> </li> <li><a href="/article/1943914615645728768.htm" title="Tomcat：Java Web应用的幕后英雄" target="_blank">Tomcat：Java Web应用的幕后英雄</a> <span class="text-muted">互联网动态分析</span> <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a> <div>在当今数字化浪潮中，Java作为一门成熟且广泛应用的编程语言，支撑着无数企业级应用和互联网服务的稳定运行。而在JavaWeb开发领域，Tomcat无疑是一个举足轻重的存在，它宛如一位默默耕耘的幕后英雄，为众多Web应用提供了可靠的运行环境。Tomcat的起源与发展Tomcat的故事始于1999年，当时SunMicrosystems（后被Oracle收购）与Apache软件基金会合作，旨在为Java</div> </li> <li><a href="/article/1943913603195269120.htm" title="【个人笔记】负载均衡" target="_blank">【个人笔记】负载均衡</a> <span class="text-muted">撰卢</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E8%B4%9F%E8%BD%BD%E5%9D%87%E8%A1%A1/1.htm">负载均衡</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>文章目录nginx反向代理的好处负载均衡负载均很的配置方式均衡负载的方式nginx反向代理的好处提高访问速度进行负载均衡保证后端服务安全负载均衡负载均衡，就是把大量的请求按照我们指定的方式均衡的分配给集群中的每台服务器负载均很的配置方式upstreamwebservers{server192.168.100.128:8080server192.168.100.129:8080}server{lis</div> </li> <li><a href="/article/1943908312143687680.htm" title="第47章 Python uWSGI 安装配置教程" target="_blank">第47章 Python uWSGI 安装配置教程</a> <span class="text-muted">你得不到的念想</span> <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</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/linux/1.htm">linux</a> <div>本文主要介绍如何部署简单的WSGI应用和常见的Web框架。以Ubuntu/Debian为例，先install依赖包：apt-getinstallbuild-essentialpython-devPythoninstalluWSGI1、通过pip命令：pipinstalluwsgi2、downloadinstall脚本：curlhttp://uwsgi.it/install|bash-sdefaul</div> </li> <li><a href="/article/1943906923720011776.htm" title="Python selenium 库" target="_blank">Python selenium 库</a> <span class="text-muted">AI老李</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>关键要点PythonSelenium库用于自动化Web浏览器，适合测试和爬虫，中文教程资源丰富。推荐菜鸟教程、CSDN博客和Selenium-Python中文文档，涵盖基础到进阶。学习需注意浏览器驱动匹配和动态加载处理，可能需显式等待。资源推荐以下是适合初学者和中级学习者的中文教程：菜鸟教程：提供全面的Selenium教程，包括安装和示例，详见Selenium教程。Selenium-Python中</div> </li> <li><a href="/article/1943906293613916160.htm" title="安装uwsgi" target="_blank">安装uwsgi</a> <span class="text-muted"></span> <div>安装uWSGIpip3installuwsgi启动命令/usr/local/python3/bin/uwsgi--socket0.0.0.0:8889--workersrun_server:app_server--master--processes4--threads2--stats0.0.0.0:9191在项目目录下新建[uwsgi]#web应用的入口模块名称module=run_server:</div> </li> <li><a href="/article/58.htm" title="多线程编程之理财" target="_blank">多线程编程之理财</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E4%BA%A7%E8%80%85/1.htm">生产者</a><a class="tag" taget="_blank" href="/search/%E6%B6%88%E8%B4%B9%E8%80%85/1.htm">消费者</a><a class="tag" taget="_blank" href="/search/%E7%90%86%E8%B4%A2/1.htm">理财</a> <div> 现实生活中，我们一边工作，一边消费，正常情况下会把多余的钱存起来，比如存到余额宝，还可以多挣点钱，现在就有这个情况：我每月可以发工资20000万元（暂定每月的1号），每月消费5000（租房+生活费）元（暂定每月的1号），其中租金是大头占90%，交房租的方式可以选择（一月一交，两月一交、三月一交），理财：1万元存余额宝一天可以赚1元钱，</div> </li> <li><a href="/article/185.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>首先，会话超时是由Zookeeper服务端通知客户端会话已经超时，客户端不能自行决定会话已经超时，不过客户端可以通过调用Zookeeper.close()主动的发起会话结束请求，如下的代码输出内容 Created /zoo-739160015 CONNECTEDCONNECTED .............CONNECTEDCONNECTED CONNECTEDCLOSEDCLOSED </div> </li> <li><a href="/article/312.htm" title="SecureCRT快捷键" target="_blank">SecureCRT快捷键</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/secureCRT/1.htm">secureCRT</a><a class="tag" taget="_blank" href="/search/%E5%BF%AB%E6%8D%B7%E9%94%AE/1.htm">快捷键</a> <div>ctrl + a : 移动光标到行首ctrl + e ：移动光标到行尾crtl + b: 光标前移1个字符crtl + f: 光标后移1个字符crtl + h : 删除光标之前的一个字符ctrl + d ：删除光标之后的一个字符crtl + k ：删除光标到行尾所有字符crtl + u : 删除光标至行首所有字符crtl + w: 删除光标至行首</div> </li> <li><a href="/article/439.htm" title="Java 子类与父类这间的转换" target="_blank">Java 子类与父类这间的转换</a> <span class="text-muted">周凡杨</span> <a class="tag" taget="_blank" href="/search/java+%E7%88%B6%E7%B1%BB%E4%B8%8E%E5%AD%90%E7%B1%BB%E7%9A%84%E8%BD%AC%E6%8D%A2/1.htm">java 父类与子类的转换</a> <div> 最近同事调的一个服务报错，查看后是日期之间转换出的问题。代码里是把 java.sql.Date 类型的对象强制转换为 java.sql.Timestamp 类型的对象。报java.lang.ClassCastException。代码： </div> </li> <li><a href="/article/566.htm" title="可视化swing界面编辑" target="_blank">可视化swing界面编辑</a> <span class="text-muted">朱辉辉33</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/swing/1.htm">swing</a> <div> 今天发现了一个WindowBuilder插件，功能好强大，啊哈哈，从此告别手动编辑swing界面代码，直接像VB那样编辑界面，代码会自动生成。首先在Eclipse中点击help，选择Install New Software,然后在Work with中输入WindowBui</div> </li> <li><a href="/article/693.htm" title="web报表工具FineReport常用函数的用法总结（文本函数）" target="_blank">web报表工具FineReport常用函数的用法总结（文本函数）</a> <span class="text-muted">老A不折腾</span> <a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/web%E6%8A%A5%E8%A1%A8%E5%B7%A5%E5%85%B7/1.htm">web报表工具</a><a class="tag" taget="_blank" href="/search/%E6%8A%A5%E8%A1%A8%E8%BD%AF%E4%BB%B6/1.htm">报表软件</a><a class="tag" taget="_blank" href="/search/java%E6%8A%A5%E8%A1%A8/1.htm">java报表</a> <div>文本函数 CHAR CHAR(number):根据指定数字返回对应的字符。CHAR函数可将计算机其他类型的数字代码转换为字符。 Number:用于指定字符的数字，介于1Number:用于指定字符的数字，介于165535之间（包括1和65535）。示例: CHAR(88)等于“X”。 CHAR(45)等于“-”。 CODE CODE(text):计算文本串中第一个字</div> </li> <li><a href="/article/820.htm" title="mysql安装出错" target="_blank">mysql安装出错</a> <span class="text-muted">林鹤霄</span> <a class="tag" taget="_blank" href="/search/mysql%E5%AE%89%E8%A3%85/1.htm">mysql安装</a> <div>[root@localhost ~]# rpm -ivh MySQL-server-5.5.24-1.linux2.6.x86_64.rpm Preparing... #####################</div> </li> <li><a href="/article/947.htm" title="linux下编译libuv" target="_blank">linux下编译libuv</a> <span class="text-muted">aigo</span> <a class="tag" taget="_blank" href="/search/libuv/1.htm">libuv</a> <div>下载最新版本的libuv源码，解压后执行： ./autogen.sh 这时会提醒找不到automake命令，通过一下命令执行安装（redhat系用yum，Debian系用apt-get）： # yum -y install automake # yum -y install libtool 如果提示错误：make: *** No targe</div> </li> <li><a href="/article/1074.htm" title="中国行政区数据及三级联动菜单" target="_blank">中国行政区数据及三级联动菜单</a> <span class="text-muted">alxw4616</span> <div>近期做项目需要三级联动菜单,上网查了半天竟然没有发现一个能直接用的! 呵呵,都要自己填数据....我了个去这东西麻烦就麻烦的数据上. 哎,自己没办法动手写吧. 现将这些数据共享出了,以方便大家.嗯,代码也可以直接使用文件说明 lib\area.sql -- 县及县以上行政区划分代码（截止2013年8月31日)来源：国家统计局发布时间：2014-01-17 15:0</div> </li> <li><a href="/article/1201.htm" title="哈夫曼加密文件" target="_blank">哈夫曼加密文件</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E5%93%88%E5%A4%AB%E6%9B%BC%E5%8E%8B%E7%BC%A9/1.htm">哈夫曼压缩</a><a class="tag" taget="_blank" href="/search/%E5%93%88%E5%A4%AB%E6%9B%BC%E5%8A%A0%E5%AF%86/1.htm">哈夫曼加密</a><a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%8F%89%E6%A0%91/1.htm">二叉树</a> <div> 在上一篇介绍过哈夫曼编码的基础知识,下面就直接介绍使用哈夫曼编码怎么来做文件加密或者压缩与解压的软件,对于新手来是有点难度的,主要还是要理清楚步骤; 加密步骤: 1,统计文件中字节出现的次数,作为权值 2,创建节点和哈夫曼树 3,得到每个子节点01串 4,使用哈夫曼编码表示每个字节 </div> </li> <li><a href="/article/1328.htm" title="JDK1.5 Cyclicbarrier实例" target="_blank">JDK1.5 Cyclicbarrier实例</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a><a class="tag" taget="_blank" href="/search/Cyclicbarrier/1.htm">Cyclicbarrier</a> <div>CyclicBarrier类一个同步辅助类，它允许一组线程互相等待，直到到达某个公共屏障点 (common barrier point)。在涉及一组固定大小的线程的程序中，这些线程必须不时地互相等待，此时 CyclicBarrier 很有用。因为该 barrier 在释放等待线程后可以重用，所以称它为循环的 barrier。 CyclicBarrier支持一个可选的 Runnable 命令，</div> </li> <li><a href="/article/1455.htm" title="九项重要的职业规划" target="_blank">九项重要的职业规划</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>一. 学习的步伐不停止古人说，活到老，学到老。终身学习应该是您的座右铭。世界在不断变化，每个人都在寻找各自的事业途径。您只有保证了足够的技能储</div> </li> <li><a href="/article/1582.htm" title="【Java范型四】范型方法" target="_blank">【Java范型四】范型方法</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>范型参数不仅仅可以用于类型的声明上，例如 package com.tom.lang.generics; import java.util.List; public class Generics<T> { private T value; public Generics(T value) { this.value = </div> </li> <li><a href="/article/1709.htm" title="【Hadoop十三】HDFS Java API基本操作" target="_blank">【Hadoop十三】HDFS Java API基本操作</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a> <div> package com.examples.hadoop; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.FSDataInputStream; import org.apache.hadoop.fs.FileStatus; import org.apache.hadoo</div> </li> <li><a href="/article/1836.htm" title="ua实现split字符串分隔" target="_blank">ua实现split字符串分隔</a> <span class="text-muted">ronin47</span> <a class="tag" taget="_blank" href="/search/lua+split/1.htm">lua split</a> <div>LUA并不象其它许多"大而全"的语言那样，包括很多功能，比如网络通讯、图形界面等。但是LUA可以很容易地被扩展：由宿主语言(通常是C或 C++)提供这些功能，LUA可以使用它们，就像是本来就内置的功能一样。LUA只包括一个精简的核心和最基本的库。这使得LUA体积小、启动速度快，从而适合嵌入在别的程序里。因此在lua中并没有其他语言那样多的系统函数。习惯了其他语言的字符串分割函</div> </li> <li><a href="/article/1963.htm" title="java-从先序遍历和中序遍历重建二叉树" target="_blank">java-从先序遍历和中序遍历重建二叉树</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class BuildTreePreOrderInOrder { /** * Build Binary Tree from PreOrder and InOrder * _______7______ / \ __10__ ___2 / \ / 4</div> </li> <li><a href="/article/2090.htm" title="openfire开发指南《连接和登陆》" target="_blank">openfire开发指南《连接和登陆》</a> <span class="text-muted">开窍的石头</span> <a class="tag" taget="_blank" href="/search/openfire/1.htm">openfire</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E6%8C%87%E5%8D%97/1.htm">开发指南</a><a class="tag" taget="_blank" href="/search/smack/1.htm">smack</a> <div>第一步官网下载smack.jar包下载地址：http://www.igniterealtime.org/downloads/index.jsp#smack 第二步把smack里边的jar导入你新建的java项目中开始编写smack连接openfire代码 p</div> </li> <li><a href="/article/2217.htm" title="[移动通讯]手机后盖应该按需要能够随时开启" target="_blank">[移动通讯]手机后盖应该按需要能够随时开启</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8/1.htm">移动</a> <div> 看到新的手机，很多由金属材质做的外壳，内存和闪存容量越来越大，CPU速度越来越快，对于这些改进，我们非常高兴，也非常欢迎但是，对于手机的新设计，有几点我们也要注意第一：手机的后盖应该能够被用户自行取下来，手机的电池的可更换性应该是必须保留的设计,</div> </li> <li><a href="/article/2344.htm" title="20款国外知名的php开源cms系统" target="_blank">20款国外知名的php开源cms系统</a> <span class="text-muted">cuiyadll</span> <a class="tag" taget="_blank" href="/search/cms/1.htm">cms</a> <div>内容管理系统，简称CMS，是一种简易的发布和管理新闻的程序。用户可以在后端管理系统中发布，编辑和删除文章，即使您不需要懂得HTML和其他脚本语言，这就是CMS的优点。在这里我决定介绍20款目前国外市面上最流行的开源的PHP内容管理系统，以便没有PHP知识的读者也可以通过国外内容管理系统建立自己的网站。 1. Wordpress WordPress的是一个功能强大且易于使用的内容管</div> </li> <li><a href="/article/2471.htm" title="Java生成全局唯一标识符" target="_blank">Java生成全局唯一标识符</a> <span class="text-muted">darrenzhu</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/uuid/1.htm">uuid</a><a class="tag" taget="_blank" href="/search/unique/1.htm">unique</a><a class="tag" taget="_blank" href="/search/identifier/1.htm">identifier</a><a class="tag" taget="_blank" href="/search/id/1.htm">id</a> <div>How to generate a globally unique identifier in Java http://stackoverflow.com/questions/21536572/generate-unique-id-in-java-to-label-groups-of-related-entries-in-a-log http://stackoverflow</div> </li> <li><a href="/article/2598.htm" title="php安装模块检测是否已安装过, 使用的SQL语句" target="_blank">php安装模块检测是否已安装过, 使用的SQL语句</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div> SHOW [FULL] TABLES [FROM db_name] [LIKE 'pattern'] SHOW TABLES列举了给定数据库中的非TEMPORARY表。您也可以使用mysqlshow db_name命令得到此清单。本命令也列举数据库中的其它视图。支持FULL修改符，这样SHOW FULL TABLES就可以显示第二个输出列。对于一个表，第二列的值为BASE T</div> </li> <li><a href="/article/2725.htm" title="5天学会一种 web 开发框架" target="_blank">5天学会一种 web 开发框架</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/framework/1.htm">framework</a> <div>web framework层出不穷，特别是ruby/python,各有10+个,php/java也是一大堆根据我自己的经验写了一个to do list,按照这个清单，一条一条的学习，事半功倍，很快就能掌握一共25条，即便很磨蹭，2小时也能搞定一条，25*2=50。只需要50小时就能掌握任意一种web框架各类web框架大同小异:现代web开发框架的6大元素，把握主线，就不会迷路建议把本文</div> </li> <li><a href="/article/2852.htm" title="Gson使用三(Map集合的处理,一对多处理)" target="_blank">Gson使用三(Map集合的处理,一对多处理)</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/gson/1.htm">gson</a><a class="tag" taget="_blank" href="/search/Gson+map/1.htm">Gson map</a><a class="tag" taget="_blank" href="/search/Gson+%E9%9B%86%E5%90%88%E5%A4%84%E7%90%86/1.htm">Gson 集合处理</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2175532 一、概述 Map保存的是键值对的形式，Json的格式也是键值对的，所以正常情况下，map跟json之间的转换应当是理所当然的事情。二、Map参考实例 package com.ickes.json; import java.lang.refl</div> </li> <li><a href="/article/2979.htm" title="cordova实现“再点击一次退出”效果" target="_blank">cordova实现“再点击一次退出”效果</a> <span class="text-muted">gundumw100</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>基本的写法如下： document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { //navigator.splashscreen.hide(); document.addEventListener("b</div> </li> <li><a href="/article/3106.htm" title="openldap configuration leaning note" target="_blank">openldap configuration leaning note</a> <span class="text-muted">iwindyforest</span> <a class="tag" taget="_blank" href="/search/configuration/1.htm">configuration</a> <div>hostname // to display the computer name hostname <changed name> // to change go to: /etc/sysconfig/network, add/modify HOSTNAME=NEWNAME to change permenately dont forget to change /etc/hosts</div> </li> <li><a href="/article/3233.htm" title="Nullability and Objective-C" target="_blank">Nullability and Objective-C</a> <span class="text-muted">啸笑天</span> <a class="tag" taget="_blank" href="/search/Objective-C/1.htm">Objective-C</a> <div>https://developer.apple.com/swift/blog/?id=25 http://www.cocoachina.com/ios/20150601/11989.html http://blog.csdn.net/zhangao0086/article/details/44409913 http://blog.sunnyxx</div> </li> <li><a href="/article/3360.htm" title="jsp中实现参数隐藏的两种方法" target="_blank">jsp中实现参数隐藏的两种方法</a> <span class="text-muted">macroli</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a> <div>在一个JSP页面有一个链接，//确定是一个链接?点击弹出一个页面，需要传给这个页面一些参数。//正常的方法是设置弹出页面的src="***.do?p1=aaa&p2=bbb&p3=ccc"//确定目标URL是Action来处理?但是这样会在页面上看到传过来的参数，可能会不安全。要求实现src="***.do"，参数通过其他方法传！//////</div> </li> <li><a href="/article/3487.htm" title="Bootstrap A标签关闭modal并打开新的链接解决方案" target="_blank">Bootstrap A标签关闭modal并打开新的链接解决方案</a> <span class="text-muted">qiaolevip</span> <a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/bootstrap/1.htm">bootstrap</a><a class="tag" taget="_blank" href="/search/%E7%BA%B5%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">纵观千象</a> <div>Bootstrap里面的js modal控件使用起来很方便，关闭也很简单。只需添加标签 data-dismiss="modal" 即可。可是偏偏有时候需要a标签既要关闭modal，有要打开新的链接，尝试多种方法未果。只好使用原始js来控制。 <a href="#/group-buy" class="btn bt</div> </li> <li><a href="/article/3614.htm" title="二维数组在Java和C中的区别" target="_blank">二维数组在Java和C中的区别</a> <span class="text-muted">流淚的芥末</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a><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/%E6%95%B0%E7%BB%84/1.htm">数组</a> <div>Java代码： public class test03 { public static void main(String[] args) { int[][] a = {{1},{2,3},{4,5,6}}; System.out.println(a[0][1]); } } 运行结果： Exception in thread "mai</div> </li> <li><a href="/article/3741.htm" title="systemctl命令用法" target="_blank">systemctl命令用法</a> <span class="text-muted">wmlJava</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/systemctl/1.htm">systemctl</a> <div>对比表，以 apache / httpd 为例任务旧指令新指令使某服务自动启动 chkconfig --level 3 httpd on systemctl enable httpd.service 使某服务不自动启动 chkconfig --level 3 httpd off systemctl disable httpd.service 检查服务状态 service h</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>