helloyxb
helloyxb

WEB2.0标准教程

Web2.0标准------ http://www.cnblogs.com/hicc/
WEB2.0标准教程
<第一课:WEB2.0标准教程WEB标准是什么？>
2007年12月31日 星期一 05:13

WEB标准
WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAscript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAscript标准。我们来简单了解一下这些标准：

1．结构标准语言
（1）XML
XML是The Extensible Markup Language(可扩展标识语言)的简写。目前推荐遵循的是W3C于2000年10月6日发布的XML1.0，参考（www.w3.org/TR/2000/REC-XML-20001006）。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。关于XML的好处和技术规范细节这里就不多说了，网上有很多资料，也有很多书籍可以参考。

（2）XHTML
XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0（参考http://www.w3.org/TR/xhtml1）。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。

2. 表现标准语言
CSS是Cascading Style Sheets层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2（参考http://www.w3.org/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。

3.行为标准
（1）DOM
DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范（http://www.w3.org/DOM/），DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。

2） ECMAscript
ECMAscript是ECMA(European Computer Manufacturers Association)制定的标准脚本语言（javascript）。目前推荐遵循的是ECMAscript 262（http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM）。

<第二课:WEB2.0标准教程如何应用WEB标准改善现有网站？>

2007年12月31日 星期一 05:31

        我们大部分的设计师依旧在采用传统的表格布局、表现与结构混杂在一起的方式来建立网站。学习使用XHTML CSS的方法需要一个过程，使现有网站符合网站标准也不可能一步到位。最好的方法是循序渐进，分阶段来逐步达到完全符合网站标准的目标。如果你是新手，或者对代码不是很熟悉，也可以采用遵循标准的编辑工具，例如Dreamweaver MX 2004，它是目前支持CSS标准最完善的工具。

1．初级改善

为页面添加正确的DOCTYPE

很多设计师和开发者都不知道什么是DOCTYPE，DOCTYPE有什么用。DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。所以，如果你不注意设置了错误的DOCTYPE，结果会让你大吃一惊。XHTML1.0提供了三种DOCTYPE可选择：

(1)过渡型（Transitional ）
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(2)严格型（Strict ）
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

(3)框架型（Frameset ）
Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

对于我们初级改善来说，只要选用过渡型的声明就可以了。它依然可以兼容你的表格布局、表现标识等，不至于让你觉得变化太大，难以掌握。

Tip:你懒得输入上面过渡型代码的话，可以访问http://www.macromedia.com/网站的首页，然后查看源代码，把head区同样的代码拷贝粘贴就可以了。

设定一个名字空间（Namespace）
直接在DOCTYPE声明后面添加如下代码：

一个namespace是收集元素类型和属性名字的一个详细的DTD，namespace声明允许你通过一个在线地址指向来识别你的namespace。只要照样输入代码就可以。

声明你的编码语言

为了被浏览器正确解释和通过标识校验，所有的XHTML文档都必须声明它们所使用的编码语言。代码如下：

这里声明的编码语言是简体中文GB2312，你如果需要制作繁体内容，可以定义为BIG5。

用小写字母书写所有的标签

XML对大小写是敏感的，所以，XHTML也是大小写有区别的。所有的XHTML元素和属性的名字都必须使用小写。否则你的文档将被W3C校验认为是无效的。例如下面的代码是不正确的：
公司简介
正确的写法是：
公司简介 同样的，

改成

，改成等等。
这步转换很简单。

为图片添加 alt 属性

为所有图片添加alt属性。alt属性指定了当图片不能显示的时候就显示供替换文本，这样做对正常用户可有可无，但对纯文本浏览器和使用屏幕阅读机的用户来说是至关重要的。只有添加了alt属性，代码才会被W3C正确性校验通过。注意的是我们要添加有意义的alt属性，象下面这样的写法毫无意义：
logo_unc_120x30.gif
正确的写法：
UNC公司标志，点击返回首页
给所有属性值加引号
在HTML中，你可以不需要给属性值加引号，但是在XHTML中，它们必须被加引号。
例：height="100"，而不能是height=100。

关闭所有的标签

在XHTML中，每一个打开的标签都必须关闭。就象这样：

每一个打开的标签都必须关闭。

HTML可以接受不关闭的标，XHTML就不可以。
这个规则可以避免HTML的混乱和麻烦。举例来说：如果你不关闭图像标签，在一些浏览器中就可能出现CSS显示问题。用这种方法能确保页面和你设计的一样显示。需要说明的是：空标签也要关闭，在标签尾部使用一个正斜杠"/"来关闭它们自己。例如：


经过上述七个规则处理后，页面就基本符合XHTML1.0的要求。但我们还需要校验一下是否真的符合标准了。我们可以利用W3C提供免费校验服务（http://validator.w3.org/）。发现错误后逐个修改。在后面的资源列表中我们也提供了其他校验服务和对校验进行指导的网址，可以作为W3C校验的补充。当最后通过了XHTML验证，恭喜你已经向网站标准迈出了一大步。不是想象中的那么难吧！

2．中级改善

接下来我们的改善主要在结构和表现相分离上，这一步不象第一步那么容易实现，我们需要观念上的转变，以及对CSS2技术的学习和运用。但学习任何新知识都需要花点时间的，不是吗？诀窍在于边做边学。假如你一直采用表格布局，根本没用过 CSS，也不必急于跟表格布局说再见，你可以先用样式表代替 font 标签。随着你学到的越多，你能做的就越多。好，一起来看看我们需要做哪些事：

用CSS定义元素外观

我们在写标识时已经养成习惯，当希望字体大点就用

，希望在前面加个点符号就用
  • 。我们总是想

    的意思是大的，
  • 的意思是圆点，的意思是“加粗文本”。而实际上，

    能变成你想要的任何样子，通过CSS，

    能变成小的字体，

    文本能够变成巨大的、粗体的，

  • 能够变成一张图片等等。我们不能强迫用结构元素实现表现效果，我们应该使用CSS来确定那些元素的外观。例如，我们可以使原来默认的6级标题可以看起来大小一样：
    h1, h2, h3, h4, h5, h6{ font-family: 宋体, serif; font-size: 12px; }

    用结构化元素代替无意义的垃圾

    许多人可能从来都不知道HTML和XHTML元素设计本意是用来表达结构的。我们很多人已经习惯用元素来控制表现，而不是结构。例如，一段列表内容可能会使用下面这样的标识：
    句子一
    句子二
    句子三

    如果我们采用一个无序列表代替会更好：

    • 句子一
    • 句子二
    • 句子三

    你或许会说“但是
  • 显示的是一个圆点，我不想用圆点”。事实上，CSS没有设定元素看起来是什么样子，你完全可以用CSS关掉圆点。---???


    给每个表格和表单加上id

    给表格或表单赋予一个唯一的、结构的标记，例如


    接下来，在书写样式表的时候，你就可以创建一个“menu”的选择器，并且关联一个CSS规则，用来告诉表格单元、文本标签和所有其他元素怎么去显示。这样，不需要对每个

    • <第三课:WEB2.0标准教程应用WEB标准建设网站有什么好处？>
    2007年12月31日 星期一 05:39

           我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战"，为了兼容Netscape和IE，网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，例如支持手机上网的WAP技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；针对某种浏览器的DHTML特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。

    如何解决这些问题呢？有识之士早已开始思考，需要建立一种普遍认同的标准来结束这种无序和混乱。商业公司(Netscape、Microsoft等)也终于认识到统一标准的好处，因此在W3C（W3C.org）的组织下，网站标准开始被建立（1998年2月10日发布XML1.0为标志），并在网站标准组织（webstandards.org）的督促下推广执行。

    简单说，网站标准的目的就是：
    ● 提供最多利益给最多的网站用户
    ● 确保任何网站文挡都能够长期有效
    ● 简化代码、降低建设成本
    ● 让网站更容易使用，能适应更多不同用户和更多网路设备
    ● 当浏览器版本更新，或者出现新的网络交互设备时，确保所有应用能够继续正确执行。
    对于网站设计和开发人员来说，遵循网站标准就是使用标准；对于你的网站用户来说，网站标准就是最佳体验。

    采用网站标准的好处

    对网站浏览者的好处：
    ● 文件下载与页面显示速度更快；
    ● 内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）；
    ● 内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等）
    ● 用户能够通过样式选择定制自己的表现界面
    ● 所有页面都能提供适于打印的版本

    对网站所有者的好处：
    ● 更少的代码和组件，容易维护
    ● 带宽要求降低（代码更简洁），成本降低。举个例子：当 ESPN.com 使用 CSS改版后，每天节约超过两兆字节（terabytes）的带宽。
    ● 更容易被搜寻引擎搜索到
    ● 改版方便，不需要变动页面内容
    ● 提供打印版本而不需要复制内容
    ● 提高网站易用性。在美国，有严格的法律条款（Section 508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。

    <第四课:选择什么样的DOCTYPE>
    2007年12月31日 星期一 05:44

    前言
    大家好！这个系列文章是W3CN阿捷编写的。是一些制作过程中的心得和经验，希望对大家有点帮助。
    同时，非常感谢阿捷与我们分享经验与心得。好了，让我们开始吧

    WEB2.0标准网页原代码，第一行就是：

    打开一些符合标准的站点，例如著名web设计软件开发商Macromedia，设计大师Zeldman的个人网站，会发现同样的代码。而另一些符合标准的站点(例如k10k.net)的代码则如下：


    那么这些代码有什么含义？一定要放置吗？
    什么是DOCTYPE
    上面这些代码我们称做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。

    其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文档类型定义，里面包含了文档的规则，浏览器就根据你定义的DTD来解释你页面的标识，并展现出来。

    要建立符合标准的网页，DOCTYPE声明是必不可少的关键组成部分；除非你的XHTML确定了一个正确的DOCTYPE，否则你的标识和CSS都不会生效。

    XHTML 1.0 提供了三种DTD声明可供选择：

    过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：


    严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如
    。完整代码如下：


    框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：

    我们选择什么样的DOCTYPE
    理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择(包括本站，使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。
    注：上面说的"表现层的标识、属性"是指那些纯粹用来控制表现的tag，例如用于排版的表格、背景颜色标识等。在XHTML中标识是用来表示结构的，而不是用来实现表现形式，我们过渡的目的是最终实现数据和表现相分离。
    打个比方：人体模特换衣服。模特就好比数据，衣服则是表现形式，模特和衣服是分离的，这样你就可以随意换衣服。而原来HTML4中，数据和表现是混杂在一起的，要一次性换个表现形式非常困难。呵呵，有点抽象了，这个概念需要我们在应用过程中逐步领会。

    补充
    DOCTYPE声明必须放在每一个XHTML文档最顶部，在所有代码和标识之上。

    <第五课:什么是名字空间>

    2007年12月31日 星期一 05:47

    DOCTYPE声明好以后，接下来的代码是：



    通常我们HTML4.0的代码只是，这里的"xmlns"是什么呢？

    这个"xmlns"是XHTML namespace的缩写，叫做"名字空间"声明。名字空间是什么作用呢？阿捷自己的理解是：

    由于xml允许你自己定义自己的标识，你定义的标识和其他人定义的标识有可能相同，但表示不同的意义。当文件交换或者共享的时候就容易产生错误。为了避免这种错误发生，XML采用名字空间声明，允许你通过一个网址指向来识别你的标识。例如

    小王和小李都定义了一个标识，如果小王的名字空间是"http://www.xiaowang.com"，小李的名字空间是"http://www.xiaoli.com"，那么当两个文档交换数据时，也不会混淆标识，因为它属于不同的名字空间。

    更通俗的解释是：名字空间就是给文档做一个标记，告诉别人，这个文档是属于谁的。只不过这个"谁"用了一个网址来代替。

    XHTML是HTML向XML过渡的标识语言，它需要符合XML文档规则，因此也需要定义名字空间。又因为XHTML1.0不能自定义标识，所以它的名字空间都相同，就是"http://www.w3.org/1999/xhtml"。如果你还不太理解也不要紧，目前阶段我们只要照抄代码就可以了。

    后面的lang="gb2312",指定你的文档用简体中文。

    <第六课:定义语言编码>

    2007年12月31日 星期一 05:51

    第三步是定义你的语言编码：



    为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言，我们一般使用gb2312(简体中文)，制作多国语言页面也有可能用Unicode、ISO-8859-1等，根据你的需要定义。

    通常这样定义就可以了。但是要补充说明的是，XML文档并不是这样定义语言编码的，XML的定义方式如下：

    你在Macromedia.com的首页代码第一行就可以看见类似的语句，这也是W3C推荐使用的定义方法。那为什么我们不直接采用这种方法呢？原因是一些浏览器对标准的支持不完善，不能正确理解这样的定义方法，比如IE6/windows。所以在目前过渡方案下，我们依然推荐使用meta方式。当然，你可以两种方法都写。

    看本站源代码，你会发现语言编码定义的地方还多一句：



    这是针对老版本浏览器写的，以保证各种浏览器都能正确解释页面。

    注意：在上面声明语句的最后，你看到有一个斜杠"/"，这和我们以前的HTML4.0的代码写法不同。原因是XHTML语法规则要求所有的标识都必须有开始和结束。例如和、

    和

    等，对于不成对的标识，要求在标识最后加一个空格，然后跟一个"/"。例如
    写成
    、写成，加空格的原因是避免代码连在一起浏览器不识别。

    <第七课:调用样式表>

    2007年12月31日 星期一 05:58

    用web标准设计网站，过渡的方法主要是采用XHTML CSS，css样式表是必不可少的。这就要求所有网页设计师必须熟练掌握CSS，如果你以前不常用，那么现在就开始学习吧。要制作符合web标准的网站，不懂CSS是设计不出漂亮的页面的。

    事实上，所有表现的地方都需要用CSS来实现。我们以前都习惯用table来定位和布局，现在要改用DIV来定位和布局。这是思维方式的变化，一开始有些不习惯。呵呵，任何变革都会有阻力的，为了享受标准带来的"益处"，放弃一些老的传统做法是值得的。


    外部调用样式表

    在以前，我们通常采用2种方法使用样式表：
    页面内嵌法：就是将样式表直接写在页面代码的head区。类似这样：



    外部调用法：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。



    在符合web标准的设计中，我们使用外部调用法，好处不言而喻，你可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。

    双表法调用样式表

    查看某些符合标准站点的原代码，你可能看到，在调用样式表的地方有如下2句：



    为什么要写两次呢？

    实际上一般情况下用外联法调用(就是第一句)就足够了。我这里使用双表调用只是一种示例。其中的"@import"命令用于输入样式表。而"@import"命令在netscape 4.0版本浏览器是无效的。也就是说，当你希望某些效果在netscape 4.0浏览器中隐藏，在4.0以上或其它浏览器中又显示的时候，你可以采用"@import"命令方法调用样式表。

    你可能感兴趣的:(综合,web,xhtml,html,浏览器,stylesheet,css)

    • 区块链和大模型的结合 hanyongyi 1531 区块链
      大模型@区块链（4个应用）_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1mu4y1W7bY/?spm_id_from=333.337.search-card.all.click&vd_source=8d683f22b43d55b6630d3bec03cfdb6d通过使用自然语言询问有关Aptos区块链生态系统的任何问题，使用户能够无缝地进入web3
    • 豆包AI的详细介绍 古龙飞扬 人工智能
      一、平台访问与登录网页版：在浏览器中输入豆包官网地址，登录账号后，点击首页导航栏中的“AI作画”或相关图片生成入口，即可进入图片生成页面。APP版：在安卓应用市场或iOS的AppStore中搜索“豆包”，下载安装后打开并登录，在首页或功能区找到“AI作画”等类似入口，点击进入图片生成界面。二、主要功能及示例智能对话功能描述：豆包AI能够理解和解析自然语言，用户可以通过语音或者文字的方式输入问题，它
    • 使用Node.js对接StockTV全球金融市场数据API 数据分析爬虫
      使用Node.js对接StockTV全球金融市场数据API摘要：本文详细介绍了如何通过Node.js客户端库快速接入StockTV全球金融市场数据API，涵盖股票、外汇、期货和加密货币的实时行情获取与历史数据查询。通过本文，开发者可掌握RESTAPI调用、WebSocket实时订阅等核心功能。一、项目概述StockTVAPINode.js客户端是一个轻量级SDK，提供对全球四大金融市场的标准化访问
    • CSS文本样式 css前端
      文本text属性写在前面：上午我在做计组实验就没有去写博客，现在赶紧补上，还有五门期末考试要复习，加油。注意区分text和font，text是是对文本的整体结构排版的调整，而font的对文字本身的一个效果。属性说明text-indent首行缩进text-align水平对齐text-decoration文本修饰text-transform大小写转换line-height行高letter-spacin
    • 云端书签：在iCloud中存储Safari书签的终极指南 2401_85702623 icloudsafari前端
      云端书签：在iCloud中存储Safari书签的终极指南在数字化时代，互联网成为了我们获取信息的海洋，而书签则是我们在这海洋中导航的灯塔。Safari浏览器的书签功能帮助我们保存喜爱的网站，但当书签数量日益增多，如何在不同设备间同步它们成了一个挑战。iCloud作为苹果公司提供的云服务，为我们提供了一个完美的解决方案。本文将详细介绍如何在iCloud中存储和同步Safari书签，确保你的灯塔始终照
    • webpack-bundle-analyzer 包分析工具的使用 不想吃菠萝 vuevue优化webpack前端vue
      webpack-bundle-analyzer它将创建所有捆绑包内容的交互式树状图可视化。该模块将帮助您：1.了解捆绑包中的真正内容2.找出哪些模块占其大小的大部分3.查找错误到达那里的模块4.优化一下吧！1、安装#NPMnpminstall--save-devwebpack-bundle-analyzer#Yarnyarnadd-Dwebpack-bundle-analyzer2、用法（作为插件
    • webpack-bundle-analyzer分析打包文件 闰土月下追猹 前端webpack-bundlebundle-analyzerwebpackvue.js前端
      安装：npminstall--save-devwebpack-bundle-analyzer在vue.config.js中配置：constBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports={chainWebpack:config=>{//打包分析if(process
    • Webpack 前端性能优化全攻略 北辰alk 前端vue前端webpack性能优化
      文章目录1.性能优化全景图1.1优化维度概览1.2优化效果指标2.构建速度优化2.1缓存策略2.2并行处理2.3减少构建范围3.输出质量优化3.1代码分割3.2TreeShaking3.3压缩优化4.运行时性能优化4.1懒加载4.2预加载4.3资源优化5.高级优化策略5.1持久化缓存5.2模块联邦5.3性能分析6.优化效果验证6.1构建速度分析6.2性能监控7.最佳实践总结7.1优化策略7.2持续
    • 敏捷开发在中小团队中的应用与挑战：实战指南与避坑手册 蜡笔小新星 敏捷流程开发语言经验分享
      文章目录敏捷开发在中小团队中的应用与挑战：实战指南与避坑手册引言：为什么中小团队更需要敏捷？一、敏捷开发适配中小团队的底层逻辑1.1中小团队的典型特征1.2敏捷开发的价值放大器效应二、敏捷实施的五大实战步骤2.1团队定制化改造（关键！）2.2轻量级工具链搭建2.3迭代节奏控制技巧2.4可视化管理的艺术2.5持续改进机制三、必须跨越的四大死亡陷阱3.1需求镀金综合症3.2站会僵尸化3.3技术债雪球效
    • IP系统中的SDP会话描述协议深度解析（一） 一个广电工程师 广播电影电视专业技术tcp/ip网络协议网络
      SDP核心概念会话描述协议（SessionDescriptionProtocol，简称SDP）作为多媒体会话的元数据载体，其规范定义详见RFC4566标准文档（"https://datatracker.ietf.org/doc/html/rfc4566"）。该协议作为跨平台会话描述的通用语法框架，广泛应用于SIP通信系统、RTSP流媒体传输、电子邮件服务及Web服务体系，在广播电视行业的IP化进程
    • 使用vite脚手架搭建react项目 JiaLin_Denny react.js前端vitereactvitev脚手架
      首选使用npm安装reactvitenpminstall-gcreatevite替换npminstall-gcreate-react-app新的脚手架据说很快，是原来的webpack的700倍。。。安装完vite后，使用npmcreatevitemy-react-app(my-react-app这是我自己的项目名，你自己可以随便取名字)先会问你，确定继续吗？继续你就y一下。然后回自动提示一些选择项
    • nodejs 010:Webpack 可视化分析插件 webpack-bundle-analyzer的使用 FakeOccupational 服务化&架构webpack前端node.js
      安装yarnadd--devwebpack-bundle-analyzer原始webpack.config.jswebpack.config.js代码定义了Webpack的配置，主要任务是将JavaScript和CSS文件打包，并将CSS提取到单独的文件中，配置了对Electron应用的支持，同时还将React相关的模块映射到Preact，以减小打包体积。//引入Node.js的path模块，用于
    • webpack打包可视化分析之--webpack-bundle-analyzer 诗棋吖 webpack前端node.jsjavascriptnpmyarnangular
      在开发一些项目的时候，有时候有些旧的框架项目用的webpacke打包慢，打包出来的包文件大，然而我们想要对它进行优化分析，有些旧的项目可能在不断迭代的过程中，有些模块功能改造或者有些需求变化，有些新需求模块开发测试完后，后面旧的模块功能有些不用等需要注释或者删掉，但是由于多人协作和历史版本迭代，有些依赖也可能没删除等，此时我们想对项目做一次比较系统的打包优化分析，我们需要一些可视化插件去帮助我们优
    • Web 开发都需要学什么？ Duiz33237 前端html5css3web
      Web开发是指开发和构建用于互联网的网站和应用程序的过程。它涉及使用各种编程语言、框架和技术来创建功能丰富、用户友好的网站和应用程序。常见的web开发技术包括HTML、CSS和JavaScript。HTML用于创建网页的结构，CSS用于样式和布局，而JavaScript用于实现交互和动态效果。此外，还有许多其他的编程语言和框架，如Python、PHP、Ruby、React、Angular等，用于开
    • 如何在Linux中查询 DNS 记录，这三个命令可谓是最常用、最经典的三剑客 wljslmz Linux技术linux运维服务器DNS
      在进入正题之前，先聊聊为什么我们需要检查DNS记录。DNS是互联网的基石，它负责把域名解析成IP地址，确保你的浏览器能找到目标服务器。如果DNS出问题，可能导致网站打不开、邮件发不出去，甚至某些服务完全瘫痪。在Linux终端检查DNS记录，可以帮你：诊断网络问题：网站访问不了？可能是DNS解析出了岔子。验证配置：刚设置好一个域名，想确认MX记录是否正确指向邮件服务器。学习和探索：搞清楚某个域名背后
    • YOLO11改进-模块-引入CMUNeXt Block 增强全局信息 一勺汤 YOLOv11模型改进系列网络YOLO目标检测模块魔改YOLOv11YOLOV11模型改进
      在医学图像分割领域面临诸多问题，如U形架构卷积网络难以提取全局信息，混合架构因计算资源受限在实际医疗场景应用受阻，轻量化网络在保证性能与提取全局信息上存在矛盾。因此，设计了CMUNeXtBlock，CMUNeXtBlock采用大核深度可分离卷积替代普通卷积来提取全局信息，凭借深度可分离卷积减少参数和计算成本以维持轻量化，同时综合利用卷积归纳偏置和全局信息提取能力，有效解决了这些问题。代码：http
    • ShadCN UI 酒江 ui
      ShadCNUI是一个用于构建现代Web应用的开源UI组件库，旨在为开发者提供一组简洁、易于使用且高度可定制的组件。ShadCNUI提供了许多常见的UI元素（如按钮、表单、模态框等），并且具备良好的设计规范和开发支持，尤其适用于React项目。主要特点：基于TailwindCSS:ShadCNUI使用了TailwindCSS作为样式框架。这意味着它的所有组件都遵循Tailwind的utility-
    • Spring深度学习 — 关于 Spring 搬运Gong Springspring
      前言作为一名Java程序猿，相信对Spring都不陌生，那么我们经常使用的Spring的发展史大家都了解过吗？它是如何来的？又是如何一步一步成长到了现在这种不可替代的重要地位？下面将对Spring进行一个整体认知和学习，对后面的深度学习起到铺垫作用。本文意在对知识点的温顾，如文中有写的不对的地方，还望不吝指教。一、Spring的发展史相信经历过不使用框架开发Web项目的70后、80后都会高如此感触
    • SD教程 : Stable Diffusion WebUI 云端部署 AI想象家 stablediffusiongptAI作画AIGC人工智能
      StableDiffusionWebUI云端部署对于电脑配置无法满足StableDiffusionWebUI部署要求的朋友们，不用担心，我们可以租用GPU进行部署，在对比使用了多个云平台（矩池云/AutoDL/青椒云）之后，我强烈推荐揽睿星舟云平台，原因如下：•新用户注册即送无门槛3.8元优惠券，可免费白嫖2小时3090显卡。（用完重新注册一个号继续白嫖[呲牙]）•价格合理，NVIDIA3090搭
    • 2024前端面试题-css篇 Adasunshine 面试题前端css面试
      1.p和div区别p自带有一定margin-top和margin-bottom属性值，而div两个属性值为0，也便是两个p之间有不一定间距，而div没有。2.对css盒模型的理解标准盒模型：content不包括padding、border、marginie盒模型：content包括padding、border、margin在不设置的情况下，默认为W3C盒模型（标准盒模型）。标准盒模型：box-si
    • 如何使用Jsoup提取商品信息：实战指南 数据小爬虫@ python爬虫java
      在使用Java进行Web爬虫开发时，Jsoup是一个非常强大的HTML解析库，可以帮助你轻松地提取网页中的数据。本文将详细介绍如何使用Jsoup提取商品信息，包括商品标题、价格、描述和图片链接等。一、环境准备（一）Java开发环境确保你的系统中已安装Java开发环境，推荐使用JDK11或更高版本。（二）安装所需库使用Maven管理项目依赖，主要包括以下库：Jsoup：用于解析HTML内容。在pom
    • 前端高级CSS用法 二川bro 前端前端css
      前端高级CSS用法在前端开发中，CSS（层叠样式表）不仅是用来控制网页的外观和布局，更是实现复杂交互和动态效果的关键技术之一。随着前端技术的不断发展，CSS的用法也日益丰富和高级。本文将深入探讨前端高级CSS的用法，并通过表格和流程图来直观展示。一、CSS高级选择器CSS选择器是选择HTML元素并应用样式的基础。高级选择器使得我们能够更加精确地选择元素，从而实现更复杂的样式效果。属性选择器：根据元
    • Python 3.12 新特性解析及对开发效率的提升 叶间清风1998 python开发语言
      目录一、性能优化（一）FasterCPython（二）新的内存管理机制二、新语法和语言特性（一）Self-typeannotations（二）PatternMatchingEnhancements三、标准库更新（一）NewModulesandFunctions（二）ImprovementstoExistingModulesPython作为一种广泛应用于数据科学、人工智能、Web开发等众多领域的编程
    • Javascript基础语法详解 Warren98 javascript开发语言ecmascript
      面向对象的语言.脚本语言,不需要编译,浏览器解释即可运行.用于控制网页的行为.浏览器的source可以打断点调试,console输入代码可以执行usestrict指令:在“严格模式”下运行js代码,防止意外创建全局变量等,提高代码安全性和执行效率.使用:全局严格模式：在脚本的开头添加"usestrict".函数级严格模式:在函数的开头添加"usestrict"：functionmyFunction
    • Linux企业级应用（二）深入解析LNMP架构与Nginx在企业级应用中的关键角色 洛秋_ Linux企业级应用linux架构nginx
      文章目录深入解析LNMP架构与Nginx在企业级应用中的关键角色引言第一部分：LNMP架构概述第二部分：Nginx的核心功能与优势第三部分：LNMP平台的搭建与配置第四部分：LNMP平台的应用部署与管理第五部分：LNMP架构的优劣势分析结语个人网站：【洛秋导航】【洛秋资源小站】深入解析LNMP架构与Nginx在企业级应用中的关键角色引言随着互联网技术的飞速发展，Web服务的架构和性能需求不断提升。
    • 1.1 网络爬虫简介 lwen.steven 从头开始学Java数据采集
      随着互联网的迅速发展，网络数据资源呈爆发式增长，信息需求者如何从网络中提取信息变得更加重要。如今，有效地获取网络数据资源的方式，便是网络爬虫。网络爬虫又称为网络蜘蛛或者Web信息采集器，是一种按照指定规则，自动抓取或下载网络资源的计算机程序或自动化脚本。网络爬虫狭义上的理解:利用标准网络协议(如HTTP、HTTPS等)，根据网络超链接和信息检索方法(如深度优先)遍历网络数据的软件程序。网络爬虫功能
    • IMWeb提升营Day4 | 训练题19：顺时针打印矩阵 rical730 Web开发算法
      题目描述输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字，例如，如果输入如下矩阵：12345678910111213141516则依次打印出数字1,2,3,4,8,12,16,15,14,13,9,5,6,7,11,10.12345678910111213141516123456789101112131415161718192021222324252627282930313233343
    • 标准C语言实现简单Web服务器（注意：暂未解决更改端口号的问题） 沈骁Alpha 计算机网络C/C++c语言sockethttp计算机网络
      目录一、设计目标二、相关技术三、设计内容3.1需求分析3.2概要设计3.3详细设计(主要函数分析)3.3.1(socket)3.3.2(bind)3.3.3(listen)3.3.4(accept)3.3.5(connect)四、完整代码一、设计目标完成基础的tcp连接，支持基础的client与其连接使用fork()来支持并发访问服务器简单的http访问，支持静态页面访问，需要一定的报错机制，如4
    • 简易C语言Web服务器 mzg__ c语言前端服务器
      概述：这个项目是一个用C语言实现的简易Web服务器，使用了套接字（sockets）和pthread。服务器能够处理基本的HTTP请求，提供静态HTML和图片文件。它采用多线程以同时处理多个客户端连接。主要特点：HTTP服务器：在指定的端口（这里是8080）监听传入的HTTP请求。多线程：利用pthread以同时处理多个客户端连接，提高服务器的响应性。文件处理：根据客户端请求，支持提供HTML和JP
    • 应用层之网络应用模型，HTTP/HTTPS协议 @ANONYME httphttps网络协议p2p
      应用层是网络协议栈的最顶层，直接为应用程序提供通信服务，定义了不同主机间应用进程交互的规则，包括报文类型、语法、语义及通信时序一、网络应用模型1.定义及特点模型定义核心特点典型应用场景C/S客户端向服务器发起请求，服务器集中处理并响应资源，依赖中心化架构1.角色明确（客户端与服务器分离）2.资源集中在服务器端3.依赖网络稳定性与服务器性能4.易于管理和维护Web服务（HTTP）、邮件系统（SMTP
    • Spring4.1新特性——综述 jinnianshilongnian spring 4.1
      目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
    • Schema与数据类型优化 annan211 数据结构mysql
      目前商城的数据库设计真是一塌糊涂，表堆叠让人不忍直视，无脑的架构师，说了也不听。 在数据库设计之初，就应该仔细揣摩可能会有哪些查询，有没有更复杂的查询，而不是仅仅突出 很表面的业务需求，这样做会让你的数据库性能成倍提高，当然，丑陋的架构师是不会这样去考虑问题的。 选择优化的数据类型 1 更小的通常更好 更小的数据类型通常更快，因为他们占用更少的磁盘、内存和cpu缓存，
    • 第一节 HTML概要学习 chenke htmlWebcss
      第一节 HTML概要学习 1. 什么是HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片，表格，链接等。浏览器（IE,FireFox等）软件知道HTML语言的语法，可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。 打开记事本 输入一下内
    • MyEclipse里部分习惯的更改 Array_06 eclipse
      继续补充中---------------------- 1.更改自己合适快捷键windows-->prefences-->java-->editor-->Content Assist-->      Activation triggers for java的右侧“.”就可以改变常用的快捷键 选中 Text
    • 近一个月的面试总结 cugfy 面试
      本文是在学习中的总结，欢迎转载但请注明出处：http://blog.csdn.net/pistolove/article/details/46753275 前言       打算换个工作，近一个月面试了不少的公司，下面将一些面试经验和思考分享给大家。另外校招也快要开始了，为在校的学生提供一些经验供参考，希望都能找到满意的工作。 
    • HTML5一个小迷宫游戏 357029540 html5
           通过《HTML5游戏开发》摘抄了一个小迷宫游戏，感觉还不错，可以画画，写字，把摘抄的代码放上来分享下，喜欢的同学可以拿来玩玩！ <html> <head> <title>创建运行迷宫</title> <script type="text/javascript"
    • 10步教你上传githib数据 张亚雄 git
      官方的教学还有其他博客里教的都是给懂的人说得，对已我们这样对我大菜鸟只能这么来锻炼，下面先不玩什么深奥的，先暂时用着10步干净利索。等玩顺溜了再用其他的方法。 操作过程（查看本目录下有哪些文件NO.1）ls （跳转到子目录NO.2）cd+空格+目录 （继续NO.3）ls （匹配到子目录NO.4）cd+ 目录首写字母+tab键+（首写字母“直到你所用文件根就不再按TAB键了”） （查看文件
    • MongoDB常用操作命令大全 adminjun mongodb操作命令
      成功启动MongoDB后，再打开一个命令行窗口输入mongo，就可以进行数据库的一些操作。输入help可以看到基本操作命令，只是MongoDB没有创建数据库的命令，但有类似的命令 如：如果你想创建一个“myTest”的数据库，先运行use myTest命令，之后就做一些操作（如：db.createCollection('user')）,这样就可以创建一个名叫“myTest”的数据库。 一
    • bat调用jar包并传入多个参数 aijuans
      下面的主程序是通过eclipse写的： 1.在Main函数接收bat文件传递的参数（String[] args）  如：   String ip =args[0];          String user=args[1];       &nbs
    • Java中对类的主动引用和被动引用 ayaoxinchao java主动引用对类的引用被动引用类初始化
        在Java代码中，有些类看上去初始化了，但其实没有。例如定义一定长度某一类型的数组，看上去数组中所有的元素已经被初始化，实际上一个都没有。对于类的初始化，虚拟机规范严格规定了只有对该类进行主动引用时，才会触发。而除此之外的所有引用方式称之为对类的被动引用，不会触发类的初始化。虚拟机规范严格地规定了有且仅有四种情况是对类的主动引用，即必须立即对类进行初始化。四种情况如下：1.遇到ne
    • 导出数据库 提示 outfile disabled BigBird2012 mysql
      在windows控制台下，登陆mysql，备份数据库：   mysql>mysqldump -u root -p test test > D:\test.sql 使用命令 mysqldump 格式如下： mysqldump -u root -p *** DBNAME > E:\\test.sql。 注意：执行该命令的时候不要进入mysql的控制台再使用，这样会报
    • Javascript 中的 && 和 || bijian1013 JavaScript&&||
              准备两个对象用于下面的讨论 var alice = { name: "alice", toString: function () { return this.name; } } var smith = { name: "smith",
    • [Zookeeper学习笔记之四]Zookeeper Client Library会话重建 bit1129 zookeeper
      为了说明问题，先来看个简单的示例代码：   package com.tom.zookeeper.book; import com.tom.Host; import org.apache.zookeeper.WatchedEvent; import org.apache.zookeeper.ZooKeeper; import org.apache.zookeeper.Wat
    • 【Scala十一】Scala核心五：case模式匹配 bit1129 scala
      package spark.examples.scala.grammars.caseclasses object CaseClass_Test00 { def simpleMatch(arg: Any) = arg match { case v: Int => "This is an Int" case v: (Int, String)
    • 运维的一些面试题 yuxianhua linux
      1、Linux挂载Winodws共享文件夹   mount -t cifs //1.1.1.254/ok /var/tmp/share/ -o username=administrator,password=yourpass 或 mount -t cifs -o username=xxx,password=xxxx //1.1.1.1/a /win    
    • Java lang包-Boolean BrokenDreams boolean
               Boolean类是Java中基本类型boolean的包装类。这个类比较简单，直接看源代码吧。 public final class Boolean implements java.io.Serializable,
    • 读《研磨设计模式》-代码笔记-命令模式-Command bylijinnan java设计模式
      声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.Collection; import java.util.List; /** * GOF 在《设计模式》一书中阐述命令模式的意图：“将一个请求封装
    • matlab下GPU编程笔记 cherishLC matlab
      不多说，直接上代码 gpuDevice % 查看系统中的gpu,,其中的DeviceSupported会给出matlab支持的GPU个数。 g=gpuDevice(1); %会清空 GPU 1中的所有数据,,将GPU1 设为当前GPU reset(g) %也可以清空GPU中数据。 a=1; a=gpuArray(a); %将a从CPU移到GPU中 onGP
    • SVN安装过程 crabdave SVN
      SVN安装过程   subversion-1.6.12   ./configure --prefix=/usr/local/subversion --with-apxs=/usr/local/apache2/bin/apxs --with-apr=/usr/local/apr --with-apr-util=/usr/local/apr --with-openssl=/
    • sql　行列转换 daizj sql行列转换行转列列转行
      行转列的思想是通过case when 来实现 列转行的思想是通过union all 来实现 下面具体例子： 假设有张学生成绩表(tb)如下: Name Subject Result 张三 语文　　74 张三 数学　　83 张三 物理　　93 李四 语文　　74 李四 数学　　84 李四 物理　　94 */ /* 想变成 姓名   &
    • MySQL--主从配置 dcj3sjt126com mysql
      linux下的mysql主从配置： 说明：由于MySQL不同版本之间的(二进制日志)binlog格式可能会不一样，因此最好的搭配组合是Master的MySQL版本和Slave的版本相同或者更低， Master的版本肯定不能高于Slave版本。（版本向下兼容） mysql1  : 192.168.100.1    //master mysq
    • 关于yii 数据库添加新字段之后model类的修改 dcj3sjt126com Model
      rules: array('新字段','safe','on'=>'search') 1、array('新字段', 'safe')//这个如果是要用户输入的话，要加一下， 2、array('新字段', 'numerical'),//如果是数字的话 3、array('新字段', 'length', 'max'=>100),//如果是文本 1、2、3适当的最少要加一条，新字段才会被
    • sublime text3 中文乱码解决 dyy_gusi Sublime Text
      sublime text3中文乱码解决 原因：缺少转换为UTF-8的插件 目的：安装ConvertToUTF8插件包 第一步：安装能自动安装插件的插件，百度“Codecs33”，然后按照步骤可以得到以下一段代码： import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a30980927
    • 概念了解：CGI，FastCGI，PHP-CGI与PHP-FPM geeksun PHP
      CGI CGI全称是“公共网关接口”(Common Gateway Interface)，HTTP服务器与你的或其它机器上的程序进行“交谈”的一种工具，其程序须运行在网络服务器上。 CGI可以用任何一种语言编写，只要这种语言具有标准输入、输出和环境变量。如php,perl,tcl等。 FastCGI FastCGI像是一个常驻(long-live)型的CGI，它可以一直执行着，只要激活后，不
    • Git push 报错 "error: failed to push some refs to " 解决 hongtoushizi git
      Git push 报错 "error: failed to push some refs to " . 此问题出现的原因是：由于远程仓库中代码版本与本地不一致冲突导致的。 由于我在第一次git pull --rebase 代码后，准备push的时候，有别人往线上又提交了代码。所以出现此问题。 解决方案： 1： git pull    2：
    • 第四章 Lua模块开发 jinnianshilongnian nginxlua
      在实际开发中，不可能把所有代码写到一个大而全的lua文件中，需要进行分模块开发；而且模块化是高性能Lua应用的关键。使用require第一次导入模块后，所有Nginx 进程全局共享模块的数据和代码，每个Worker进程需要时会得到此模块的一个副本（Copy-On-Write），即模块可以认为是每Worker进程共享而不是每Nginx Server共享；另外注意之前我们使用init_by_lua中初
    • java.lang.reflect.Proxy liyonghui160com
        1.简介   Proxy 提供用于创建动态代理类和实例的静态方法 （1）动态代理类的属性 代理类是公共的、最终的，而不是抽象的 未指定代理类的非限定名称。但是，以字符串 "$Proxy" 开头的类名空间应该为代理类保留 代理类扩展 java.lang.reflect.Proxy 代理类会按同一顺序准确地实现其创建时指定的接口
    • Java中getResourceAsStream的用法 pda158 java
      1.Java中的getResourceAsStream有以下几种： 1. Class.getResourceAsStream(String path) ： path 不以’/'开头时默认是从此类所在的包下取资源，以’/'开头则是从ClassPath根下获取。其只是通过path构造一个绝对路径，最终还是由ClassLoader获取资源。 　　2. Class.getClassLoader.get
    • spring 包官方下载地址（非maven） sinnk spring
      SPRING官方网站改版后，建议都是通过 Maven和Gradle下载，对不使用Maven和Gradle开发项目的，下载就非常麻烦，下给出Spring Framework jar官方直接下载路径:   http://repo.springsource.org/libs-release-local/org/springframework/spring/   s
    • Oracle学习笔记(7) 开发PLSQL子程序和包 vipbooks oraclesql编程
          哈哈，清明节放假回去了一下，真是太好了，回家的感觉真好啊！现在又开始出差之旅了，又好久没有来了，今天继续Oracle的学习！      这是第七章的学习笔记，学习完第六章的动态SQL之后，开始要学习子程序和包的使用了……，希望大家能多给俺一些支持啊！     编程时使用的工具是PLSQL