前端学习笔记(四)HTML入门扩充

之前在学习HTML的时候,按照Web 前端怎样入门?中汪小黑的回答中所给的学习路线图,照着W3school的HTML基础教程,只学习到了HTML列表部分。在学习CSS的过程中,逐渐发现有一些HTML内容(块、类等等)并不熟悉。现在在开始着手做练手小项目静态网页之前,我想再把HTML的基础补习一下,把HTML基础教程全部看完,并且尽量手敲一下。

1.HTML块元素

是块级元素(block level element),用来组合其他HTML元素。
是内联元素( inline element),用来作文本的容器。
这两者主要目的都是为了方便CSS设置样式。Div还可以用于文本布局。(以前用表格进行文本布局是不好的!)

2.HTML类:
对HTML元素(通常是div等)设置Class属性可以方便CSS来设置样式。例:

3.HTML布局:
Div元素常用作布局工具,方便通过CSS对其进行定位。
例:使用四个

来创建多列布局:(中间用到了之前所讲的CSS中的float,并且在页脚进行clear的手法)
HTML:







London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

CSS:

如果使用HTML提供的新语义元素定义网页布局:
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容(比如侧栏)
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
HTML:



City Gallery

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Copyright W3School.com.cn

CSS:

header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    height:300px;
    width:100px;
    float:left;
    padding:5px; 
}
section {
    width:350px;
    float:left;
    padding:10px; 
}
footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

元素也可以进行布局,但是这样不好。就不贴代码了。

4.响应式web框架:即可以以可变尺寸传递网页的web设计。可以主要使用float来实现这个目的。例:









W3School Demo

Resize this responsive page!


London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital and most populous city of France.

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area,and the most populous metropolitan area in the world.

还有一个方法,是使用现成的CSS框架。
CSS框架,说白了就是别人写好的CSS文件,里面对不同的class进行了格式定义。然后直接引用其中的class,就可以实现一些格式属性, 不需要自己来写完整的CSS文件。例,以下的HTML文件引用了bootstrap框架,因此不需要自己写CSS文件或者其他样式,就可以让文本带有特别的样式属性,并且在不同尺寸的设备上都能合适地显示网页内容:




  
  
  




W3School Demo

Resize this responsive page!

London

London is the capital city of England.

It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital and most populous city of France.

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

5.HTML框架
通过使用frameset,可以将窗口分成几行或几列,分别显示来自不同的html文件。在下面的这个例子中,我们设置了一个两列的框架集。第一列被设置为占据浏览器窗口的 25%。第二列被设置为占据浏览器窗口的 75%。HTML 文档 "frame_a.htm" 被置于第一个列中,而 HTML 文档 "frame_b.htm" 被置于第二个列中:


   
   

注:这种情况下,两列内容的滚动条是分开的。

重要提示:不能将 标签与 标签同时使用!不过,假如你添加包含一段文本的 </code> 标签,就必须将这段文字嵌套于 <code><body></body></code> 标签内。例:</p> <pre><code class="html"><html> <frameset cols="25%,50%,25%"> <frame src="/example/html/frame_a.html"> <frame src="/example/html/frame_b.html"> <frame src="/example/html/frame_c.html"> <noframes> <body>您的浏览器无法处理框架!</body>

其他tips:
1)行和列框架可以混合嵌套使用。
2)noresize=“noresize”:使得框架不可调整尺寸。
3)导航框架(感觉比较常用):导航框架包含一个将第二个框架作为目标的链接列表。名为 "contents.htm" 的文件包含三个链接。





  
  



4)框架内初始显示指定节:本例演示两个框架。其中的一个框架设置了指向另一个文件内指定的节的链接。这个"link.htm"文件内指定的节使用

  进行标识。




 
 



5)使用导航框架跳转至指定的节:本例演示两个框架。左侧的导航框架包含了一个链接列表,这些链接将第二个框架作为目标。第二个框架显示被链接的文档。导航框架其中的链接指向目标文件中指定的节。










6.内联框架iframe:用于在网页内显示网页。(套娃)

在这里插入图片描述
可以用width和height为inframe设置尺寸,用frameborder设置边框。
Iframe还可以用作链接的目标(target,即点击链接后打开网页显示的位置,如新标签页等)例:


W3School.com.cn

7.HTML脚本:

8.HTML文件路径:
文件路径会在链接外部文件时被用到,包括网页、图像、样式表、JavaScript。
相对路径(使用相对路径是个好习惯!):
picture.jpg 位于与当前网页相同的文件夹
picture.jpg 位于当前文件夹的 images 文件夹中
picture.jpg 当前站点根目录(最上级目录)的 images 文件夹中
picture.jpg 位于当前文件夹的上一级文件夹中
绝对文件路径:
绝对文件路径是指向一个因特网文件的完整URL,例:
flower

9.HTML头部元素
元素是所有头部元素的容器。以下标签都可以添加到 head 部分:</code>、<code><base></code>、<code><link></code>、<code><meta></code>、<code><script></code>以及 <code><style></code>。<br>(1)HTML <code><title></code> 元素<br><code><title></code> 标签定义文档的标题。<br>title 元素在所有 HTML/XHTML 文档中都是必需的。<br>title 元素能够:<br>定义浏览器工具栏中的标题<br>提供页面被添加到收藏夹时显示的标题<br>显示在搜索引擎结果中的页面标题<br>(2)HTML <code><link></code> 元素<br><code><link></code> 标签定义文档与外部资源之间的关系。<br><code><link></code> 标签最常用于连接样式表:</p> <pre><code class="html"><head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head></code></pre> <p>(3)HTML <code><style></code> 元素<br><code><style></code> 标签用于为 HTML 文档定义样式信息。<br>您可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式:</p> <pre><code class="html"><head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head></code></pre> <p>(4)HTML <code><meta></code> 元素<br>元数据(metadata)是关于数据的信息。<br><code><meta></code> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。<br>典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。<br><code><meta></code> 标签始终位于 head 元素中。<br>元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。<br>针对搜索引擎的关键词<br>一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引您的页面。<br>下面的 meta 元素定义页面的描述:<br><code><meta name="description" content="Free Web tutorials on HTML, CSS, XML" /></code><br>下面的 meta 元素定义页面的关键词:<br><code><meta name="keywords" content="HTML, CSS, XML" /></code><br>name 和 content 属性的作用是描述页面的内容。<br>(5)HTML <code><script></code> 元素<br><code><script></code> 标签用于定义客户端脚本,比如 JavaScript。</p> <p>10.HTML字符实体<br>HTML中某些字符是预留的,比如大于号>,小于号<等。<br>例:小于号写作<code><</code>或<code><</code><br>最常用的是不间断空格<code> </code>,因为浏览器会自动把HTML中的空格缩减为一个。所以如果想使用空格,就需要用这个。<br>字符实体很多,实际使用时需要参考参考手册。写实体名会更方便记忆一些,但可能有的浏览器不支持实体名,而数字是支持性更好的。</p> <p>11.HTML URL(uniform resource locator统一资源定位符)<br>网址,比如 <a href="http://www.w3school.com.cn/html/index.asp" rel="nofollow noreferrer">http://www.w3school.com.cn/ht...</a>,遵守以下的语法规则:<br>scheme://host.domain:port/path/filename<br>解释:<br>scheme - 定义因特网服务的类型。最常见的类型是 http<br>host - 定义域主机(http 的默认主机是 www)<br>domain - 定义因特网域名,比如 w3school.com.cn<br>:port - 定义主机上的端口号(http 的默认端口号是 80)<br>path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。<br>filename - 定义文档/资源的名称<br>注:scheme也有多种,具体使用的时候再好好了解吧~</p> <p>URL字符编码:URL只能使用ASCII字符集来通过因特网进行发送。因此其他字符(包括中文等)会被替换为%加两位16进制数字。URL不能包含空格,一般用+代替。具体URL编码参考要参考URL编码参考手册。</p> <p>12.HTML web server<br>发布自己的网页,需要把它存放在web服务器上。具体可参考web主机教程。</p> <p>13.HTML颜色<br>颜色由红绿蓝混合而成,三个两位的16进制数字。例如#000000是黑色,#FF0000是红色。<br>大多数浏览器也支持颜色名(brackets的自动补全功能会显示,非常方便)。颜色名有很多,但是仅有16种颜色被W3C的HTML4.0标准支持。<br>最初,有216种跨平台web安全色。但是不知道现在这么做的意义还大不大。</p> <p>14.DOCTYPE声明(文档类型)<br>Web中文档的类型非常多,在html文件的开头进行声明,浏览器才能正确地显示文档。<br>例:< !DOCTYPE >,它不是HTML标签,它只是为浏览器提供一项声明。</p> <p>附上来自W3School的HTML4.01速查手册<br><a href="https://www.w3school.com.cn/html/html_quick.asp" rel="nofollow noreferrer">https://www.w3school.com.cn/html/html_quick.asp</a></p> </article> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1281318557807820800"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端,html,html5,css,javascript)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1892735770188378112.htm" title="Django 5实用指南(五)模板系统" target="_blank">Django 5实用指南(五)模板系统</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/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a> <div>Django5的模板系统是其核心功能之一,允许开发者将动态数据嵌入到HTML模板中,并根据不同的业务需求渲染页面。Django模板系统基于Django模板语言(DTL),它提供了一些强大的功能,如模板标签、过滤器、条件语句和循环等,帮助开发者灵活地渲染和控制页面内容。本章将详细介绍Django5的模板语言、模板标签、过滤器及其自定义,帮助您深入理解如何在Django中使用模板系统。5.1Djang</div> </li> <li><a href="/article/1892735012466388992.htm" title="网络安全组织架构表 网络安全技术架构" target="_blank">网络安全组织架构表 网络安全技术架构</a> <span class="text-muted">网络安全Ash</span> <a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a> <div>一,什么是XSS?Xss就是javascript脚本攻击,就是在表单提交的时候提交一个小脚本,因为浏览器默认是支持脚本的,所以写个小脚本不做处理的话问题就很大。如何防御?1,通过后台编写一个过滤器拦截所有getParameter参数重写httpservletwrapp方法。2,通过工具类将参数特殊字符转换成html源代码保存。//重写HttpServletRequestWrapper防止XSS攻击</div> </li> <li><a href="/article/1892729838565912576.htm" title="基于DeepSeek+Vue3的AI对话聊天系统开发实战" target="_blank">基于DeepSeek+Vue3的AI对话聊天系统开发实战</a> <span class="text-muted">北辰alk</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</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><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>文章目录1.项目概述1.1项目背景1.2项目目标1.3项目功能2.技术选型与架构设计2.1技术选型3.开发环境准备3.1前端环境3.2后端环境4.DeepSeekAPI集成4.1获取API密钥4.2创建API服务4.3创建API视图5.前端页面开发5.1创建聊天组件6.前后端交互实现6.1配置Axios6.2使用Pinia管理状态7.功能扩展与优化7.1多轮对话7.2对话历史记录8.项目部署与上线</div> </li> <li><a href="/article/1892728201646501888.htm" title="接入jest单元测试常见问题收集" target="_blank">接入jest单元测试常见问题收集</a> <span class="text-muted">佚名猫</span> <a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>前言前一段时间公司让前端写单元测试,于是乎就研究了下JEST。从安装到落地一路坎坷呀,因为淋雨过所以想为人撑伞,把自己遇到的问题和搜集到的都分享出来,欢迎大家补充内容。(技术是没边界的,即使我在公司内部也分享过,仍不影响继续分享给大家)一、安装包并运行命令后报错类问题1、未安装测试运行器运行环境jest-environment-jsdomwindowisundefined,vue-test-uti</div> </li> <li><a href="/article/1892720261715783680.htm" title="Vue 状态管理" target="_blank">Vue 状态管理</a> <span class="text-muted">二川bro</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> <div>Vue状态管理引言在现代前端开发中,随着应用规模的增大,组件之间的状态管理变得越来越复杂。Vue.js作为一个流行的前端框架,提供了多种状态管理方案,其中最常用的是Vuex。Vuex是Vue官方推荐的状态管理库,它通过集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。本文将深入探讨Vue状态管理的各个方面,从基础概念到高级用法,帮助读者全面掌握Vuex的使用技巧</div> </li> <li><a href="/article/1892716858470100992.htm" title="Springboot 集成 netty-socketio + Vue前端分离" target="_blank">Springboot 集成 netty-socketio + Vue前端分离</a> <span class="text-muted">Synologs过客</span> <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>Springboot集成netty-socketionetty-socketio:仿`node.js`实现的socket.io服务端1.将WebSocket、AJAX和其它的通信方式全部封装成了统一的通信接口2.使用时,不用担心兼容问题,底层会自动选用最佳的通信方式3.适合进行服务端和客户端双向数据通信pom.xmlcom.corundumstudio.socketionetty-socketio</div> </li> <li><a href="/article/1892716101477920768.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/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>我们可以分析出上题就是带修改的最大子段和[-](http://jvquant.com/wiki/行情/解析行情.html)遇到这种类型的题目应该想到用线段树[-](http://jvquant.com/wiki/行情/订阅/美股行情订阅.html)实现对于原数列,先建起一棵线段树,每个节点包含最大前缀、最大后缀、最大字段和、区间和信息[-]()当你明确一道题是线段树时,要先思考pushup和pus</div> </li> <li><a href="/article/1892714588470833152.htm" title="python中网络爬虫框架" target="_blank">python中网络爬虫框架</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/%E7%88%AC%E8%99%AB/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>Python中有许多强大的网络爬虫框架,它们帮助开发者轻松地抓取和处理网页数据。最常用的Python网络爬虫框架有以下几个:1.ScrapyScrapy是Python中最受欢迎的网络爬虫框架之一,专为大规模网络爬取和数据提取任务而设计。它功能强大、效率高,支持异步处理,是数据采集和网络爬虫的首选。Scrapy的主要特点:支持异步请求,爬取速度非常快。内置了处理请求、响应、解析HTML等常用的功能。</div> </li> <li><a href="/article/1892708537516224512.htm" title="html实现背景颜色透明,文字效果不透明" target="_blank">html实现背景颜色透明,文字效果不透明</a> <span class="text-muted">快乐的二进制鸭</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a> <div>html实现背景颜色透明,文字效果不透明通过伪元素的方式添加遮罩层(给背景颜色,层级,透明度,定位)即可,弹窗原理。{{itemTitles}}评标时间:14:30:00 - 18:30:00正在评标张三离开张三进入张三离开.contentLi{border-radius:0px45px0px45px;padding:49px40px30px39px;position:rela</div> </li> <li><a href="/article/1892708411162816512.htm" title="vue项目在不同分辨率下页面的适配" target="_blank">vue项目在不同分辨率下页面的适配</a> <span class="text-muted">快乐的二进制鸭</span> <a class="tag" taget="_blank" href="/search/%E5%AA%92%E4%BD%93%E6%9F%A5%E8%AF%A2/1.htm">媒体查询</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</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> <div>vue项目中在不同分辨率下页面的适配(媒体查询方案)1.通过在不同分辨率下设置html的字体大小@mediascreenand(min-width:1281px)and(max-width:1366px){html{font-size:12px;}}@mediascreenand(min-width:1367px)and(max-width:1440px){html{font-size:14px}</div> </li> <li><a href="/article/1892707781065109504.htm" title="前端开发者必看!10个CSS黑科技让你的代码逼格瞬间拉满(附完整源码)" target="_blank">前端开发者必看!10个CSS黑科技让你的代码逼格瞬间拉满(附完整源码)</a> <span class="text-muted">前端御书房</span> <a class="tag" taget="_blank" href="/search/HTML%E5%92%8CCSS/1.htm">HTML和CSS</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>一、瀑布流终极布局方案(columns高阶用法)痛点场景:Grid/Flex布局出现诡异间隙✨破局代码:/*核心代码*/.pinterest-layout{columns:300pxauto;/*智能列宽+自适应*/column-gap:20px;break-inside:avoid;/*禁止内容断裂*/}✅三大优势:自动响应式(无需媒体查询)智能内容填充(告别空白)支持异构元素混排(图文/卡片自</div> </li> <li><a href="/article/1892696688494178304.htm" title="Echarts 技术学习指南:从入门到精通" target="_blank">Echarts 技术学习指南:从入门到精通</a> <span class="text-muted">小码快撩</span> <a class="tag" taget="_blank" href="/search/echarts/1.htm">echarts</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>引言Echarts是一款由百度公司推出的强大且高度可定制化的JavaScript数据可视化库,广泛应用于各种Web开发场景中,它能帮助开发者快速构建出丰富多样、交互性强的图表应用。本文旨在为初学者及进阶开发者提供一份详尽的Echarts学习路径和技术要点,助您全面掌握Echarts的核心功能与高级特性。一、图表初始化与配置1.图表初始化图表的初始化是创建一个ECharts实例并将其绑定到HTML容</div> </li> <li><a href="/article/1892695806717259776.htm" title="前后端分离的Netty + WebSocket实现聊天室" target="_blank">前后端分离的Netty + WebSocket实现聊天室</a> <span class="text-muted">CRE_MO</span> <a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a> <div>1.前端WebSocketChatvarsocket;if(!window.WebSocket){window.WebSocket=window.MozWebSocket;}if(window.WebSocket){socket=newWebSocket("ws://localhost:8088/ws");socket.onmessage=function(event){console.log("</div> </li> <li><a href="/article/1892684961216000000.htm" title="tailwindcss安装以及配置" target="_blank">tailwindcss安装以及配置</a> <span class="text-muted">我不是码神、</span> <a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>一、安装tailwindcssnpminstall-Dtailwindcsspostcssautoprefixer二、使用TailwindCLI来为项目生成Tailwind配置文件与postcss配置文件注意,在此处如需要生成其他配置文件,例如:TypeScript配置文件则使用“--ts”,具体其他配置文件请参考官网“配置”。npxtailwindcssinit-p--ts三、当生成并出现后,需</div> </li> <li><a href="/article/1892684582768144384.htm" title="Tailwind CSS的安装" target="_blank">Tailwind CSS的安装</a> <span class="text-muted">鹤酒前端</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/Vue%E5%BC%80%E5%8F%91/1.htm">Vue开发</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>TailwindCSS的安装TailwindCSS的工作原理是扫描所有HTML文件、JavaScript组件以及任何模板中的CSS类(class)名,然后生成相应的样式代码并写入到一个静态CSS文件中。记录时间:年月日时间星期202381711:21星期四鹤酒的空间最近想实现vue的一种响应式界面,但是在寻找一种完美的方案,这里也有找到BS【bootstrap】,但是我发现他不是很完美的支持vue</div> </li> <li><a href="/article/1892678776161103872.htm" title="pnpm和npm安装TailwindCss" target="_blank">pnpm和npm安装TailwindCss</a> <span class="text-muted">巴巴博一</span> <a class="tag" taget="_blank" href="/search/Vue%E5%AD%A6%E4%B9%A0%E6%97%A5%E5%BF%97/1.htm">Vue学习日志</a><a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>npm下载及初始化来自Tailwind官方文档npm下载:npminstall-Dtailwindcssnpm初始化Tailwind:npxtailwindcssinitpnpm下载:pnpmadd-Dtailwindcss@3.4.1postcssautoprefixerpnpm初始化Tailwind:pnpmexectailwindcssinit-p</div> </li> <li><a href="/article/1892678776815415296.htm" title="NPM环境搭建指南" target="_blank">NPM环境搭建指南</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/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>NPM(NodePackageManager)是Node.js的包管理工具,堪称前端开发的基石。本文将手把手教你在Mac、Windows、Linux三大系统上快速搭建NPM环境,并验证是否成功。一、Mac系统安装NPM方法1:通过Homebrew安装(推荐)#1.安装Homebrew(已安装可跳过)/bin/bash-c"$(curl-fsSLhttps://raw.githubuserconte</div> </li> <li><a href="/article/1892678020049727488.htm" title="深度解析:使用 Headless 模式 ChromeDriver 进行无界面浏览器操作" target="_blank">深度解析:使用 Headless 模式 ChromeDriver 进行无界面浏览器操作</a> <span class="text-muted">亿牛云爬虫专家</span> <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E4%BB%A3%E7%90%86/1.htm">爬虫代理</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%90%86IP/1.htm">代理IP</a><a class="tag" taget="_blank" href="/search/Headless/1.htm">Headless</a><a class="tag" taget="_blank" href="/search/ChromeDriver/1.htm">ChromeDriver</a><a class="tag" taget="_blank" href="/search/Chrome/1.htm">Chrome</a><a class="tag" taget="_blank" href="/search/%E6%97%A0%E7%95%8C%E9%9D%A2/1.htm">无界面</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E4%BB%A3%E7%90%86/1.htm">爬虫代理</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%90%86IP/1.htm">代理IP</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E5%8A%A0%E8%BD%BD/1.htm">动态加载</a> <div>一、问题背景(传统爬虫的痛点)数据采集是现代网络爬虫技术的核心任务之一。然而,传统爬虫面临多重挑战,主要包括:反爬机制:许多网站通过检测请求头、IP地址、Cookie等信息识别爬虫,进而限制或拒绝访问。动态加载内容:一些页面的内容是通过JavaScript渲染的,传统的HTTP请求无法直接获取这些动态数据。为了解决这些问题,无界面浏览器(HeadlessBrowser)技术应运而生。无界面浏览器是</div> </li> <li><a href="/article/1892650694238859264.htm" title="如何完成WEB标准的网站重构?" target="_blank">如何完成WEB标准的网站重构?</a> <span class="text-muted">ZhooooYuChEnG</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%87%8D%E6%9E%84/1.htm">重构</a> <div>一、重构核心原则语义化使用正确的HTML5语义标签(,,,等)避免滥用,确保文档结构清晰支持屏幕阅读器(ARIA属性)分离关注点严格区分结构(HTML)、表现(CSS)、行为(JavaScript)避免行内样式和内联脚本可访问性(A11y)符合WCAG2.1标准键盘导航支持高对比度颜色方案响应式设计移动优先(MobileFirst)使用CSS媒体查询和Flexbox/Grid图片自适应(srcse</div> </li> <li><a href="/article/1892646782941327360.htm" title="Docker:3、在VSCode上安装并运行python程序或JavaScript程序" target="_blank">Docker:3、在VSCode上安装并运行python程序或JavaScript程序</a> <span class="text-muted">shanshandeisu</span> <a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a> <div>1.VSCode上安装并运行python程序:1.1.安装Docker插件1.2.新建自动化脚本DockerFileFROMpython:3.-slim-busterWORKDIR/appCOPY..RUNpip3install-rrequirements.txtCMD["python3","app.py"]COPY,第一个点代表根目录下的所有文件,第二个点表示当前的工作路径。RUN允许我们在创建</div> </li> <li><a href="/article/1892645648461787136.htm" title="前端与后端的对接事宜、注意事项" target="_blank">前端与后端的对接事宜、注意事项</a> <span class="text-muted">ZhooooYuChEnG</span> <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%E5%90%8E%E7%AB%AF%E5%AF%B9%E6%8E%A5/1.htm">前后端对接</a> <div>前端与后端的对接事宜、注意事项一、对接核心流程(完整生命周期)需求分析接口设计开发联调测试验证上线部署二、前端视角:对接方法与注意事项1.对接流程接口文档确认:阅读后端提供的OpenAPI/Swagger文档请求构造:处理参数、请求头、认证信息发送请求:通过AJAX/Fetch/Axios发起HTTP调用响应处理:解析数据、错误处理、状态管理数据渲染:将接口数据转换为UI可用的格式2.关键代码示例</div> </li> <li><a href="/article/1892639845923221504.htm" title="跨语言语义理解与生成:多语言预训练方法及一致性优化策略" target="_blank">跨语言语义理解与生成:多语言预训练方法及一致性优化策略</a> <span class="text-muted">网罗开发</span> <a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/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> <div>网罗开发(小红书、快手、视频号同名)  大家好,我是展菲,目前在上市企业从事人工智能项目研发管理工作,平时热衷于分享各种编程领域的软硬技能知识以及前沿技术,包括iOS、前端、HarmonyOS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。图书作者:《ESP32-C3物联网工程开发实战》图书作者:《SwiftUI入门,进阶与实战》超级个体:CO</div> </li> <li><a href="/article/1892637898684035072.htm" title="本地运行 DeepSeek-R1 的成本究竟多高?" target="_blank">本地运行 DeepSeek-R1 的成本究竟多高?</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFjavascript/1.htm">前端javascript</a> <div>ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读本地运行DeepSeek-R1的成本究竟多高?DeepSeek让人们对大规模生成式模型的追求更进一步,甚至有人想在本地跑下规模高达671B参数的版本。但要在家里开这种“巨无霸”,可不是闹着玩的:光是推理就对硬件提出了非常高的要求。这篇文章将大致拆解一下,如果真想在个人电脑上运行DeepSeek-R1,可能需</div> </li> <li><a href="/article/1892637702419968000.htm" title="CSDN2019博客之星评选——期待各位大佬的投票!" target="_blank">CSDN2019博客之星评选——期待各位大佬的投票!</a> <span class="text-muted">十步杀一人_千里不留行</span> <a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a> <div>我的序号是68,68,68!!http://m234140.nofollow.ax.mvote.cn/opage/d4cf886a-057e-1c0d-56f1-3a86340af8fd.html2019年CSDN博客之星年度总评选已开启:68.十步杀一人_千里不留行,微信、QQ、微博渠道可以连投5票哦!扫码为我投票哦:</div> </li> <li><a href="/article/1892637516004126720.htm" title="《现代CSS技术应用与实践》小册完结啦!" target="_blank">《现代CSS技术应用与实践》小册完结啦!</a> <span class="text-muted"></span> <div>历时125天,《现代CSS技术应用与实践》小册迎来了完结,总篇数40篇,约11万字。后续还会继续更新,欢迎订阅支持我。《现代CSS技术应用与实践》是一本专注于现代CSS技术应用与实践的指导手册。小册旨在帮助读者深入理解现代CSS新特性的概念、原理和应用,掌握现代CSS技术的最新进展和实践经验,从而提升网页设计和开发的技能。小册内容涵盖现代CSS的基础知识、CSS嵌套及作用域、CSS布局技术与技巧、</div> </li> <li><a href="/article/1892636438655201280.htm" title="Matplotlib 高级图表绘制与交互式可视化(ipywidgets)" target="_blank">Matplotlib 高级图表绘制与交互式可视化(ipywidgets)</a> <span class="text-muted">eqwaak0</span> <a class="tag" taget="_blank" href="/search/matplotlib/1.htm">matplotlib</a><a class="tag" taget="_blank" href="/search/matplotlib/1.htm">matplotlib</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/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>目录:ipywidgets介绍1.什么是ipywidgets直接开始:动态调整正弦波频率随机散点图启用交互式模式使用滑块和下拉菜单调整图表样式使用布局管理器创建复杂界面使用动画创建动态图表最后:综合示例:动态仪表盘ipywidgets介绍1.什么是ipywidgetsipywidgets是一个用于JupyterNotebook和JupyterLab的交互式HTML小部件库,允许用户在Jupyter</div> </li> <li><a href="/article/1892629883989848064.htm" title="【网络安全】WebPack源码(前端源码)泄露 + jsmap文件还原" target="_blank">【网络安全】WebPack源码(前端源码)泄露 + jsmap文件还原</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/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a> <div>前言webpack是一个JavaScript应用程序的静态资源打包器。它构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle。大部分Vue等项目应用会使用webpack进行打包,使用webpack打包应用程序会在网站js同目录下生成js.map文件。漏洞风险通过泄露的前端源代码可以查找各种信息,如隐蔽接口、API、加密算法、管理员邮箱、内部功能等等,或</div> </li> <li><a href="/article/1892628498082754560.htm" title="html网络安全工具源码 网络安全前端" target="_blank">html网络安全工具源码 网络安全前端</a> <span class="text-muted">网络安全queen</span> <a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a> <div>点击文末小卡片,免费获取网络安全全套资料,资料在手,涨薪更快前端常见的网络安全包括:xss(跨站脚本攻击)、csrf(跨站请求伪造)、sql注入攻击等。1)跨站脚本攻击(xss)原理:攻击者往web页面中注入恶意script代码(或者在url的查询参数中注入script代码),当用户浏览访问时,嵌入的script代码就会执行,造成危害。反射型xss:用户点击攻击连接,服务器解析后响应,在返回的内容</div> </li> <li><a href="/article/1892624460926742528.htm" title="Swift之深入解析KeyPaths的工作原理 | CSDN创作打卡" target="_blank">Swift之深入解析KeyPaths的工作原理 | CSDN创作打卡</a> <span class="text-muted">weixin_41165271</span> <a class="tag" taget="_blank" href="/search/swift/1.htm">swift</a><a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>一、前言自从Swift刚开始就被设计为是编译时安全和静态类型后,它就缺少了那种经常在运行时语言中的动态特性,比如Objective-C,Ruby和JavaScript。举个例子,在Objective-C中,我们可以很轻易的动态去获取一个对象的任意属性和方法,甚至可以在运行时交换它们的实现。虽然缺乏动态性正是Swift如此强大的一个重要原因,它帮助我们编写更加可以预测的代码以及更大的保证了代码编写的</div> </li> <li><a href="/article/1892611725891530752.htm" title="vue3-06vue2(Object.defineProperty)与vue3(基于ES6的Proxy)的响应式原理对比" target="_blank">vue3-06vue2(Object.defineProperty)与vue3(基于ES6的Proxy)的响应式原理对比</a> <span class="text-muted">岂不闻</span> <a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>1.vue2响应原理1.1对于对象与数组对象类型:通过object.defineProperty()对属性的读取、修改进行拦截(数据劫持)数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)Vue2的响应式是基于Object.defineProperty实现的1.2基本原理Object.defineProperty把一个普通的JavaScript对象传入Vue实例作为d</div> </li> <li><a href="/article/105.htm" title="Js函数返回值" target="_blank">Js函数返回值</a> <span class="text-muted">_wy_</span> <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/return/1.htm">return</a> <div>一、返回控制与函数结果,语法为:return 表达式;作用: 结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二、返回控制语法为:return;作用: 结束函数执行,返回调用函数,而且把undefined作为函数的结果 在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性</div> </li> <li><a href="/article/232.htm" title="MySQL 的 char 与 varchar" target="_blank">MySQL 的 char 与 varchar</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div> 今天发现,create table 时,MySQL 4.1有时会把 char 自动转换成 varchar 测试举例: CREATE TABLE `varcharLessThan4` ( `lastName` varchar(3) ) ; mysql> desc varcharLessThan4; +----------+---------+------+-</div> </li> <li><a href="/article/359.htm" title="Quartz——TriggerListener和JobListener" target="_blank">Quartz——TriggerListener和JobListener</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/TriggerListener/1.htm">TriggerListener</a><a class="tag" taget="_blank" href="/search/JobListener/1.htm">JobListener</a><a class="tag" taget="_blank" href="/search/quartz/1.htm">quartz</a> <div>转载请出自出处:http://eksliang.iteye.com/blog/2208624 一.概述 listener是一个监听器对象,用于监听scheduler中发生的事件,然后执行相应的操作;你可能已经猜到了,TriggerListeners接受与trigger相关的事件,JobListeners接受与jobs相关的事件。   二.JobListener监听器  j</div> </li> <li><a href="/article/486.htm" title="oracle层次查询" target="_blank">oracle层次查询</a> <span class="text-muted">18289753290</span> <a class="tag" taget="_blank" href="/search/oracle%EF%BC%9B%E5%B1%82%E6%AC%A1%E6%9F%A5%E8%AF%A2%EF%BC%9B%E6%A0%91%E6%9F%A5%E8%AF%A2/1.htm">oracle;层次查询;树查询</a> <div>.oracle层次查询(connect  by) oracle的emp表中包含了一列mgr指出谁是雇员的经理,由于经理也是雇员,所以经理的信息也存储在emp表中。这样emp表就是一个自引用表,表中的mgr列是一个自引用列,它指向emp表中的empno列,mgr表示一个员工的管理者, select   empno,mgr,ename,sal  from e</div> </li> <li><a href="/article/613.htm" title="通过反射把map中的属性赋值到实体类bean对象中" target="_blank">通过反射把map中的属性赋值到实体类bean对象中</a> <span class="text-muted">酷的飞上天空</span> <a class="tag" taget="_blank" href="/search/javaee/1.htm">javaee</a><a class="tag" taget="_blank" href="/search/%E6%B3%9B%E5%9E%8B/1.htm">泛型</a><a class="tag" taget="_blank" href="/search/%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2/1.htm">类型转换</a> <div>使用过struts2后感觉最方便的就是这个框架能自动把表单的参数赋值到action里面的对象中 但现在主要使用Spring框架的MVC,虽然也有@ModelAttribute可以使用但是明显感觉不方便。 好吧,那就自己再造一个轮子吧。 原理都知道,就是利用反射进行字段的赋值,下面贴代码 主要类如下:   import java.lang.reflect.Field; imp</div> </li> <li><a href="/article/740.htm" title="SAP HANA数据存储:传统硬盘的瓶颈问题" target="_blank">SAP HANA数据存储:传统硬盘的瓶颈问题</a> <span class="text-muted">蓝儿唯美</span> <a class="tag" taget="_blank" href="/search/HANA/1.htm">HANA</a> <div>SAPHANA平台有各种各样的应用场景,这也意味着客户的实施方法有许多种选择,关键是如何挑选最适合他们需求的实施方案。 在 《Implementing SAP HANA》这本书中,介绍了SAP平台在现实场景中的运作原理,并给出了实施建议和成功案例供参考。本系列文章节选自《Implementing SAP HANA》,介绍了行存储和列存储的各自特点,以及SAP HANA的数据存储方式如何提升空间压</div> </li> <li><a href="/article/867.htm" title="Java Socket 多线程实现文件传输" target="_blank">Java Socket 多线程实现文件传输</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/socket/1.htm">socket</a> <div>        高级操作系统作业,让用Socket实现文件传输,有些代码也是在网上找的,写的不好,如果大家能用就用上。 客户端类:   package edu.logic.client; import java.io.BufferedInputStream; import java.io.Buffered</div> </li> <li><a href="/article/994.htm" title="java初学者路径" target="_blank">java初学者路径</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>学习Java有没有什么捷径?要想学好Java,首先要知道Java的大致分类。自从Sun推出Java以来,就力图使之无所不包,所以Java发展到现在,按应用来分主要分为三大块:J2SE,J2ME和J2EE,这也就是Sun ONE(Open Net Environment)体系。J2SE就是Java2的标准版,主要用于桌面应用软件的编程;J2ME主要应用于嵌入是系统开发,如手机和PDA的编程;J2EE</div> </li> <li><a href="/article/1121.htm" title="APP推广" target="_blank">APP推广</a> <span class="text-muted">aoyouzi</span> <a class="tag" taget="_blank" href="/search/APP/1.htm">APP</a><a class="tag" taget="_blank" href="/search/%E6%8E%A8%E5%B9%BF/1.htm">推广</a> <div>一,免费篇 1,APP推荐类网站自主推荐 最美应用、酷安网、DEMO8、木蚂蚁发现频道等,如果产品独特新颖,还能获取最美应用的评测推荐。PS:推荐简单。只要产品有趣好玩,用户会自主分享传播。例如足迹APP在最美应用推荐一次,几天用户暴增将服务器击垮。 2,各大应用商店首发合作 老实盯着排期,多给应用市场官方负责人献殷勤。 3,论坛贴吧推广 百度知道,百度贴吧,猫扑论坛,天涯社区,豆瓣(</div> </li> <li><a href="/article/1248.htm" title="JSP转发与重定向" target="_blank">JSP转发与重定向</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a><a class="tag" taget="_blank" href="/search/Java+Web/1.htm">Java Web</a><a class="tag" taget="_blank" href="/search/jsp%E8%BD%AC%E5%8F%91/1.htm">jsp转发</a> <div>  在servlet和jsp中我们经常需要请求,这时就需要用到转发和重定向;   转发包括;forward和include     例子;forwrad转发;  将请求装法给reg.html页面   关键代码;    req.getRequestDispatcher("reg.html</div> </li> <li><a href="/article/1375.htm" title="web.xml之jsp-config" target="_blank">web.xml之jsp-config</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/web.xml/1.htm">web.xml</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a><a class="tag" taget="_blank" href="/search/jsp-config/1.htm">jsp-config</a> <div>1.作用:主要用于设定JSP页面的相关配置。 2.常见定义: <jsp-config> <taglib> <taglib-uri>URI(定义TLD文件的URI,JSP页面的tablib命令可以经由此URI获取到TLD文件)</tablib-uri> <taglib-location> TLD文件所在的位置 </div> </li> <li><a href="/article/1502.htm" title="JSF2.2 ViewScoped Using CDI" target="_blank">JSF2.2 ViewScoped Using CDI</a> <span class="text-muted">sunjing</span> <a class="tag" taget="_blank" href="/search/CDI/1.htm">CDI</a><a class="tag" taget="_blank" href="/search/JSF+2.2/1.htm">JSF 2.2</a><a class="tag" taget="_blank" href="/search/ViewScoped/1.htm">ViewScoped</a> <div>JSF 2.0 introduced annotation @ViewScoped; A bean annotated with this scope maintained its state as long as the user stays on the same view(reloads or navigation - no intervening views). One problem w</div> </li> <li><a href="/article/1629.htm" title="【分布式数据一致性二】Zookeeper数据读写一致性" target="_blank">【分布式数据一致性二】Zookeeper数据读写一致性</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a> <div>很多文档说Zookeeper是强一致性保证,事实不然。关于一致性模型请参考http://bit1129.iteye.com/blog/2155336    Zookeeper的数据同步协议 Zookeeper采用称为Quorum Based Protocol的数据同步协议。假如Zookeeper集群有N台Zookeeper服务器(N通常取奇数,3台能够满足数据可靠性同时</div> </li> <li><a href="/article/1756.htm" title="Java开发笔记" target="_blank">Java开发笔记</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/java%E5%BC%80%E5%8F%91/1.htm">java开发</a> <div>1、Map<key,value>的remove方法只能识别相同类型的key值   Map<Integer,String> map = new HashMap<Integer,String>(); map.put(1,"a"); map.put(2,"b"); map.put(3,"c"</div> </li> <li><a href="/article/1883.htm" title="图片黑色阴影" target="_blank">图片黑色阴影</a> <span class="text-muted">bozch</span> <a class="tag" taget="_blank" href="/search/%E5%9B%BE%E7%89%87/1.htm">图片</a> <div> .event{ padding:0;    width:460px;    min-width: 460px;    border:0px solid #e4e4e4;    height: 350px;    min-heig</div> </li> <li><a href="/article/2010.htm" title="编程之美-饮料供货-动态规划" target="_blank">编程之美-饮料供货-动态规划</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E8%A7%84%E5%88%92/1.htm">动态规划</a> <div> import java.util.Arrays; import java.util.Random; public class BeverageSupply { /** * 编程之美 饮料供货 * 设Opt(V’,i)表示从i到n-1种饮料中,总容量为V’的方案中,满意度之和的最大值。 * 那么递归式就应该是:Opt(V’,i)=max{ k * Hi+Op</div> </li> <li><a href="/article/2137.htm" title="ajax大参数(大数据)提交性能分析" target="_blank">ajax大参数(大数据)提交性能分析</a> <span class="text-muted">chenbowen00</span> <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/prototype/1.htm">prototype</a> <div>近期在项目中发现如下一个问题 项目中有个提交现场事件的功能,该功能主要是在web客户端保存现场数据(主要有截屏,终端日志等信息)然后提交到服务器上方便我们分析定位问题。客户在使用该功能的过程中反应点击提交后反应很慢,大概要等10到20秒的时间浏览器才能操作,期间页面不响应事件。 根据客户描述分析了下的代码流程,很简单,主要通过OCX控件截屏,在将前端的日志等文件使用OCX控件打包,在将之转换为</div> </li> <li><a href="/article/2264.htm" title="[宇宙与天文]在太空采矿,在太空建造" target="_blank">[宇宙与天文]在太空采矿,在太空建造</a> <span class="text-muted">comsci</span> <div>     我们在太空进行工业活动...但是不太可能把太空工业产品又运回到地面上进行加工,而一般是在哪里开采,就在哪里加工,太空的微重力环境,可能会使我们的工业产品的制造尺度非常巨大....      地球上制造的最大工业机器是超级油轮和航空母舰,再大些就会遇到困难了,但是在空间船坞中,制造的最大工业机器,可能就没</div> </li> <li><a href="/article/2391.htm" title="ORACLE中CONSTRAINT的四对属性" target="_blank">ORACLE中CONSTRAINT的四对属性</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/CONSTRAINT/1.htm">CONSTRAINT</a> <div>ORACLE中CONSTRAINT的四对属性 summary:在data migrate时,某些表的约束总是困扰着我们,让我们的migratet举步维艰,如何利用约束本身的属性来处理这些问题呢?本文详细介绍了约束的四对属性: Deferrable/not deferrable, Deferred/immediate, enalbe/disable, validate/novalidate,以及如</div> </li> <li><a href="/article/2518.htm" title="Gradle入门教程" target="_blank">Gradle入门教程</a> <span class="text-muted">dengkane</span> <a class="tag" taget="_blank" href="/search/gradle/1.htm">gradle</a> <div>一、寻找gradle的历程 一开始的时候,我们只有一个工程,所有要用到的jar包都放到工程目录下面,时间长了,工程越来越大,使用到的jar包也越来越多,难以理解jar之间的依赖关系。再后来我们把旧的工程拆分到不同的工程里,靠ide来管理工程之间的依赖关系,各工程下的jar包依赖是杂乱的。一段时间后,我们发现用ide来管理项程很不方便,比如不方便脱离ide自动构建,于是我们写自己的ant脚本。再后</div> </li> <li><a href="/article/2645.htm" title="C语言简单循环示例" target="_blank">C语言简单循环示例</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div># include <stdio.h> int main(void) { int i; int count = 0; int sum = 0; float avg; for (i=1; i<=100; i++) { if (i%2==0) { count++; sum += i; } } avg</div> </li> <li><a href="/article/2772.htm" title="presentModalViewController 的动画效果" target="_blank">presentModalViewController 的动画效果</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/controller/1.htm">controller</a> <div>系统自带(四种效果): presentModalViewController模态的动画效果设置:     [cpp]  view plain copy   UIViewController *detailViewController = [[UIViewController al</div> </li> <li><a href="/article/2899.htm" title="java 二分查找" target="_blank">java 二分查找</a> <span class="text-muted">shuizhaosi888</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E5%88%86%E6%9F%A5%E6%89%BE/1.htm">二分查找</a><a class="tag" taget="_blank" href="/search/java%E4%BA%8C%E5%88%86%E6%9F%A5%E6%89%BE/1.htm">java二分查找</a> <div>需求:在排好顺序的一串数字中,找到数字T   一般解法:从左到右扫描数据,其运行花费线性时间O(N)。然而这个算法并没有用到该表已经排序的事实。 /** * * @param array * 顺序数组 * @param t * 要查找对象 * @return */ public stati</div> </li> <li><a href="/article/3026.htm" title="Spring Security(07)——缓存UserDetails" target="_blank">Spring Security(07)——缓存UserDetails</a> <span class="text-muted">234390216</span> <a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/Spring+Security/1.htm">Spring Security</a> <div>        Spring Security提供了一个实现了可以缓存UserDetails的UserDetailsService实现类,CachingUserDetailsService。该类的构造接收一个用于真正加载UserDetails的UserDetailsService实现类。当需要加载UserDetails时,其首先会从缓存中获取,如果缓存中没</div> </li> <li><a href="/article/3153.htm" title="Dozer 深层次复制" target="_blank">Dozer 深层次复制</a> <span class="text-muted">jayluns</span> <a class="tag" taget="_blank" href="/search/VO/1.htm">VO</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/po/1.htm">po</a> <div>最近在做项目上遇到了一些小问题,因为架构在做设计的时候web前段展示用到了vo层,而在后台进行与数据库层操作的时候用到的是Po层。这样在业务层返回vo到控制层,每一次都需要从po-->转化到vo层,用到BeanUtils.copyProperties(source, target)只能复制简单的属性,因为实体类都配置了hibernate那些关联关系,所以它满足不了现在的需求,但后发现还有个很</div> </li> <li><a href="/article/3280.htm" title="CSS规范整理(摘自懒人图库)" target="_blank">CSS规范整理(摘自懒人图库)</a> <span class="text-muted">a409435341</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a> <div>   刚没事闲着在网上瞎逛,找了一篇CSS规范整理,粗略看了一下后还蛮有一定的道理,并自问是否有这样的规范,这也是初入前端开发的人一个很好的规范吧。 一、文件规范 1、文件均归档至约定的目录中。 具体要求通过豆瓣的CSS规范进行讲解: 所有的CSS分为两大类:通用类和业务类。通用的CSS文件,放在如下目录中: 基本样式库 /css/core </div> </li> <li><a href="/article/3407.htm" title="C++动态链接库创建与使用" target="_blank">C++动态链接库创建与使用</a> <span class="text-muted">你不认识的休道人</span> <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/dll/1.htm">dll</a> <div>一、创建动态链接库 1.新建工程test中选择”MFC [dll]”dll类型选择第二项"Regular DLL With MFC shared linked",完成 2.在test.h中添加 extern “C” 返回类型 _declspec(dllexport)函数名(参数列表); 3.在test.cpp中最后写 extern “C” 返回类型 _decls</div> </li> <li><a href="/article/3534.htm" title="Android代码混淆之ProGuard" target="_blank">Android代码混淆之ProGuard</a> <span class="text-muted">rensanning</span> <a class="tag" taget="_blank" href="/search/ProGuard/1.htm">ProGuard</a> <div>Android应用的Java代码,通过反编译apk文件(dex2jar、apktool)很容易得到源代码,所以在release版本的apk中一定要混淆一下一些关键的Java源码。 ProGuard是一个开源的Java代码混淆器(obfuscation)。ADT r8开始它被默认集成到了Android SDK中。 官网: http://proguard.sourceforge.net/</div> </li> <li><a href="/article/3661.htm" title="程序员在编程中遇到的奇葩弱智问题" target="_blank">程序员在编程中遇到的奇葩弱智问题</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a> <div>  现在收集一下:         排名不分先后,按照发言顺序来的。   1、Jquery插件一个通用函数一直报错,尤其是很明显是存在的函数,很有可能就是你没有引入jquery。。。或者版本不对 2、调试半天没变化:不在同一个文件中调试。这个很可怕,我们很多时候会备份好几个项目,改完发现改错了。有个群友说的好:   在汤匙</div> </li> <li><a href="/article/3788.htm" title="解决maven-dependency-plugin (goals "copy-dependencies","unpack") is not supported" target="_blank">解决maven-dependency-plugin (goals "copy-dependencies","unpack") is not supported</a> <span class="text-muted">xp9802</span> <a class="tag" taget="_blank" href="/search/dependency/1.htm">dependency</a> <div>解决办法:在plugins之前添加如下pluginManagement,二者前后顺序如下:   [html]  view plain copy   <build>           <pluginManagement</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类:</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>