38.超文本标记语言HTML详解(上)

文章目录

转载请注明原始出处:http://blog.csdn.net/a464057216/article/details/52226285

HTML(Hyper Text Markup Language)是超文本标记语言,不是编程性语言。使用标记标签标记纯文本。

###HTML版本###

版本 发布时间
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013

文档类型声明:声明采用HTML 5的语句是,这个语句不属于HTML语言,只告诉浏览器HTML文档使用的HTML版本,并且这个语句不区分大小写。

###HTML标签###
使用尖括号包围的关键词称为标签。标签一般成对出现,如

,分别称为开始标签(opening tag)和结束标签(closing tag),或者开放标签和闭合标签,不成对出现的标签如

HTML标准推荐所有标签使用小写,HTML所有标签可以参考这里。

###HTML元素###
HTML元素由开始标签、元素内容及结束标签组成,有的HTML元素具有空内容,称为空元素。
空元素在开始标签中进行关闭,并且加上空格和斜杠,如
,空元素没有结束标签。
HTML元素可以嵌套存在。

###HTML属性###
HTML属性为HTML元素提供更多信息,在开始标签中设置,格式为name="value"
HTML标准推荐属性使用小写,并且始终为属性值添加引号,一般使用双引号,如果值本身含有双引号,需要使用单引号。
HTML的所有属性可以参考这里 。

###HTML文档头###
要在网页中正常显示中文或其他UTF-8编码,可以在 元素中添加:
元素中必须包含</code>标签,表示文档标题,这个标题会用在搜索引擎的搜索结果展示、浏览器标签标题、收藏夹标题。<br> <code><base href="地址" target="_blank/_self/_top/_parent/iframe_name" /></code>:为页面上的所有链接规定默认地址和默认目标,只能放在<code><head></code>元素中,并且只能有一个。如果超链接标签<code><a></code>中提供的href属性或图片标签<code><img></code>中提供的src属性是绝对路径,则base的设置无效。<br> <code><link rel="关系" type="类型" href="URL"></code>:定义文档与外部资源的关系,只能放在<code><head></code>元素中,不过可以出现数次。比如引用CSS文件:<br> <code><link rel="stylesheet" type="text/css" href="sample.css" /></code><br> <code><meta></code>标签用于为网页提供元数据,比如网页的描述、关键词、作者等等:<br> <code><meta name="keywords" content="Love,Peace,World" /></code>:定义网页关键词。<br> <code><meta name="description" content="This page is about love and peace." /></code>:定义网页描述。<br> <code><meta name="author" content="mars loo" /></code>:定义网页作者。<br> <code><meta http-equiv="refresh" content="5" /></code>:定义页面5秒钟刷新一次。</p> <p>####标题####<br> <code><h1></h1></code>、<code><h2></h2></code>、<code><h3></h3></code>、<code><h4></h4></code>、<code><h5></h5></code>、<code><h6></h6></code>:用来标记1~6级标题,块级元素。数字越小,标题级别越高(越重要)。</p> <p>####水平线####<br> <code><hr /></code>:水平线标记,块级元素,表示文档内容变化。</p> <p>####注释####<br> <code><!-- 注释内容 --></code>:为HTML文档添加注释,可以跨越多行。</p> <p>####段落####<br> <code><p></p></code>:标记段落,块级元素。</p> <p>####换行####<br> <code><br /></code>:用于换行,行内元素。浏览器渲染页面时,会移除源代码中多余的空格和空行,所有连续的空格或空行都会被算作一个空格显示。如果需要显示多个空格,使用多个<code> </code>表示。</p> <p>####超链接####<br> <code><a></a></code>:标记超链接,内联元素。</p> <ul> <li>href属性指向链接地址</li> <li>target属性说明在什么位置显示链接文档:</li> </ul> <ul> <li>_blank:在一个新打开、未命名的窗口中载入链接文档。</li> <li>_self:在相同的框架中打开链接文档。</li> <li>_parent:在父框架中打开链接文档。</li> <li>_top:在顶级框架中打开链接文档。</li> <li>iframe_name:在指定的iframe中打开链接文档。</li> </ul> <ul> <li>download属性表示不跳转链接,而是以指定的文件名直接下载文件,浏览器会自动确认文件的后缀。</li> <li>id属性(HTML5不支持使用name属性创建锚)可以创建本页面内的锚,然后使用href属性定义到转到这个锚的超链接:</li> </ul> <pre><code><a id="anchor">这里</a> <a href="#anchor">锚</a> </code></pre> <p>超链接可以用于邮件发送,比如(使用%20代替空格):</p> <pre><code class="prism language-HTML"><a href="mailto:mars@loo.com?cc=sample@example.com&bcc=xxx@qq.com&subject=Hello%20Mars&body=你好%20博越!" style="text-decoration:none">写信给mars</a> </code></pre> <p>可以把图像作为超链接元素的内容,比如:</p> <pre><code class="prism language-HTML"><a href="#"> <img src="sample.gif" width="50px" height="25px" /> </a> </code></pre> <p>####图片####<br> <code><img src="图片地址" width="宽度" height="高度" alt="图片无法加载时的显示信息" /></code>:显示图片,内联元素。</p> <ul> <li>src属性指向图片地址(本地地址或网络URL)。</li> <li>width和height属性分别控制宽和高。</li> </ul> <p>使用图片作为地图:</p> <pre><code class="prism language-HTML"><img src="china.jpg" width="145" height="126" alt="China" usemap="#chinamap"> <map name="chinamap" id="chinamap"> <area shape="rect" coords="0,0,82,126" alt="Beijing" href="Beijing.html"> <area shape="circle" coords="90,58,3" alt="Tianjin" href="Tianjin.html"> </map> </code></pre> <p>#####map标签#####<br> <code><map></code>标签的name和id属性哪个生效取决于浏览器,所以HTML5规定必须同时提供name和id属性。</p> <p>#####area标签#####<br> 如果提供了href属性,则必须提供alt属性。<br> coords属性和shape属性配合使用:</p> <table> <thead> <tr> <th>coords属性</th> <th>shape属性</th> </tr> </thead> <tbody> <tr> <td>x,y, radius</td> <td>circle</td> </tr> <tr> <td>x1, y1, x2, y2</td> <td>rect</td> </tr> <tr> <td>x1, y1, x2, y2, …, x<sub>n</sub>, y<sub>n</sub></td> <td>poly</td> </tr> </tbody> </table> <p>target属性同样可以指定在何处打开新的链接。</p> <p>####格式化文本####<br> <code><sub> </sub></code>:下标标记,下标文本将会显示在当前文本流中字符高度的一半为基准线的下方,但是与当前文本流中文字的字体和字号都是一样的。<br> <code><sup> </sup></code>:上标标记,上标文本将会显示在当前文本流中字符高度的一半为基准线的上方,但是与当前文本流中文字的字体和字号都是一样的。<br> <code><ins cite="url" datetime="insert_time"> </ins></code>:插入字标记,通常会显示下划线效果,cite属性指向一个解释为什么插入的URL,datetime属性说明插入的时间,格式为<code>YYYY-MM-DDThh:mm:ssTZD</code>,比如<code>2016-08-15T22:55:03Z</code>,其中TZD(时区指示器time zone designation)中的<code>Z</code>表示是格林威治时区。<br> <code><del cite="url" datetime="delete_time"> </del></code>:删除字标记,通常会显示为删除效果,cite属性指向一个解释为什么删除的URL,datetime属性说明删除的时间,格式如<code><ins></code>标签。<br> <code><strong> </strong></code>:重要文本。<br> <code><em> </em></code>:强调文本。</p> <p>####地址####<br> <code><address> </address></code>:如果在<code><body></code>元素内定义,表示HTML文档的作者/拥有者的联系信息;如果在<code><article></code>元素内定义,表示文章的作者/拥有者的联系信息,块级元素。不要使用这个标签表示邮政编码信息,除非这些信息是联系信息的组成部分。</p> <p>####缩写####<br> <code><abbr title="全称"> </abbr></code>:定义缩写,title属性定义鼠标悬浮在单词上时弹出的全称是什么,行内元素。</p> <p>####改变文字方向####<br> <code><bdo dir="方向"> </bdo></code>:定义文字显示方向,dir属性取值有两个:ltr(从左到右)、rtl(从又到左),行内元素。</p> <p>####引用文字####<br> <code><blockquote cite="引用的地址"> </blockquote></code>:定义长引用,块级元素。<br> <code><q cite="引用的地址"> </q></code>:定义短引用,行内元素。</p> <p>####定义项目####<br> 1.如果dfn标签自己包含title属性,则title属性定义项目。<br> <code><dfn title="定义内容">定义</dfn></code>:定义项目或缩写的定义<br> 2.如果dfn标签包含abbr元素,则abbr元素中的title属性定义项目。<br> <code><dfn><abbr title="World Health Organization">WHO</abbr></dfn></code><br> 3.否则,<code><dfn></code>文本内容即是项目,并且父元素包含定义。<br> <code><p><dfn>WHO</dfn> World Health Organization </p></code><br> <code><dfn></code>是行内标签。</p> <p>####著作标题####<br> <code><cite>标题</cite></code>:表示著作标题,行内元素。</p> <p>####计算机输出####<br> <code><samp>示例</samp></code>:可以把计算机的输出内容放在这两个标签之间,但是换行还是需要是用<code><br /></code>元素。</p> <p>####代码####<br> <code><code>代码</code></code>:显示计算机代码。<br> 如果要保留代码中的缩进,需要使用<code><pre></code>标签。</p> <p>####预格式文本####<br> <code><pre>格式文本</pre></code>:显示预格式文本,且为等宽显示。</p> <p>####变量####<br> <code><var>变量名</var></code>:定义计算机变量。</p> <p>####打字机输出####<br> <code><tt>打字机输出</tt></code>:表示打字机输出。</p> <p>####表格####<br> <code><table border="1"></table></code>:用来创建一个表格,块级元素。border属性值只允许为1(有边框)或<code>""</code>(无边框)。<br> <code><tr></tr></code>:用来表示表格的行。<br> <code><td></td></code>:用来表示每个单元格,内联元素。<br> <code><th></th></code>:用来定义表头,语义上讲是表格某一行或某一列的标题。<br> <code><caption></caption></code>:定义表格标题。<br> 表格中常用的属性如colspan可以定义表格的元素跨越几列,rowspan定义跨越几行,cellpadding定义单元格内容与边框之间的留白,cellspacing定义单元格之间的距离。<br> <a href="http://img.e-com-net.com/image/info8/b70ef81811e14823bc801aed7e40b2e0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b70ef81811e14823bc801aed7e40b2e0.jpg" alt="38.超文本标记语言HTML详解(上)_第1张图片" width="437" height="368" style="border:1px solid black;"></a><br> 效果如下:<br> <a href="http://img.e-com-net.com/image/info8/e64303d1f0e84ae6ba65d2270672997a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e64303d1f0e84ae6ba65d2270672997a.jpg" alt="这里写图片描述" width="171" height="89"></a><br> <code><colgroup span="列数"></colgroup></code>:用于将表格的列分组,span属性定义列的数目:<br> <a href="http://img.e-com-net.com/image/info8/be4f194eb73a4e4cac1c4f0e30cbb849.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/be4f194eb73a4e4cac1c4f0e30cbb849.jpg" alt="38.超文本标记语言HTML详解(上)_第2张图片" width="650" height="320" style="border:1px solid black;"></a><br> 效果如下:<br> <a href="http://img.e-com-net.com/image/info8/6df46f5b73cb419ab16a22e9065da6a4.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6df46f5b73cb419ab16a22e9065da6a4.jpg" alt="这里写图片描述" width="194" height="61"></a><br> <code><col span="列数"></col></code>:在colgroup中实现更精细控制:<br> <a href="http://img.e-com-net.com/image/info8/f18c31f0d73c41e5985141ce940adf87.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f18c31f0d73c41e5985141ce940adf87.jpg" alt="38.超文本标记语言HTML详解(上)_第3张图片" width="622" height="443" style="border:1px solid black;"></a><br> 效果如下:<br> <a href="http://img.e-com-net.com/image/info8/43d8e4c9a3d742ed9d31fb9b25614aed.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/43d8e4c9a3d742ed9d31fb9b25614aed.jpg" alt="这里写图片描述" width="191" height="58"></a><br> <code><thead></thead></code>:定义表头,<code><tfoot></tfoot></code>:定义表格的页脚,<code><tbody></tbody></code>:定义表格的主体。在使用时,这三个标签必须作为<code><table></code>的子标签,位于<code><caption></code>和<code><colgroup></code>之后,且三个标签的顺序是<code><thead></code>-><code><tfoot></code>-><code><tbody></code>:<br> <a href="http://img.e-com-net.com/image/info8/beff5db760a54b028f94e040b342d6ef.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/beff5db760a54b028f94e040b342d6ef.jpg" alt="38.超文本标记语言HTML详解(上)_第4张图片" width="621" height="778" style="border:1px solid black;"></a><br> 效果如下:<br> <a href="http://img.e-com-net.com/image/info8/71eca1a5fc604770994fc5898565ed4e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/71eca1a5fc604770994fc5898565ed4e.jpg" alt="这里写图片描述" width="190" height="97"></a></p> <p>####列表####<br> <code><ul></ul></code>:定义无序列表,块级元素。HTML5中ul标签的属性已经被废弃,应该用CSS控制项目符号的形状,如<code>style="list-style-type:disc"</code>表示使用实心圆形,<code>circle</code>表示使用空心圆形,<code>square</code>表示使用实心正方形。<br> <code><ol></ol></code>:定义有序列表,HTML5中已经废弃了ol标签的属性,控制列表的起始值、项目符号样式应该使用CSS控制。<br> <code><li></li></code>:定义每一条列表项<br> 比如:<br> <a href="http://img.e-com-net.com/image/info8/95825649d5d4483687232b5b0863fa99.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/95825649d5d4483687232b5b0863fa99.jpg" alt="38.超文本标记语言HTML详解(上)_第5张图片" width="394" height="218" style="border:1px solid black;"></a><br> 效果如下:<br> <a href="http://img.e-com-net.com/image/info8/df5ef4efceeb4861bde8edb6e81968d9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/df5ef4efceeb4861bde8edb6e81968d9.jpg" alt="这里写图片描述" width="88" height="40"></a></p> <p>####定义列表####<br> <code><dl></dl></code>:用于定义列表,其中:<br> <code><dt></dt></code>:表示自定义列表项。<br> <code><dd></dd></code>:表示自定义列表项的定义,比如:<br> <a href="http://img.e-com-net.com/image/info8/3edb9df6ca2c4793b7a8a36a075125be.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3edb9df6ca2c4793b7a8a36a075125be.jpg" alt="38.超文本标记语言HTML详解(上)_第6张图片" width="451" height="165" style="border:1px solid black;"></a><br> 效果如下:<br> <a href="http://img.e-com-net.com/image/info8/dccbf18589fd41fca48deeee3d6ffc27.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/dccbf18589fd41fca48deeee3d6ffc27.jpg" alt="这里写图片描述" width="232" height="74"></a></p> <p>####块级元素与内联元素####<br> 定义块级元素:<code><div></div></code><br> 定义内联元素:<code><span></span></code><br> 使用<code><div></code>和<code><span></code>配合CSS进行页面布局和渲染,而不是使用<code><table></code>。</p> <blockquote> <p>如果觉得我的文章对您有帮助,欢迎关注我(CSDN:Mars Loo的博客)或者为这篇文章点赞,谢谢!</p> </blockquote> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1295349088530800640"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(Web前端技术)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/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/1923618050783899648.htm" title="html5 vue react,Web前端技术(JS,HTML5,JQuery,React,Vue.js)" target="_blank">html5 vue react,Web前端技术(JS,HTML5,JQuery,React,Vue.js)</a> <span class="text-muted">Partfolio</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a> <div>Web前端框架概览Web前端技术架构:展示层:html,css控制层:JavaScript后端服务接口:ajax,restful,node.jsWeb前端运行原理解析Web前端当前开发趋势典型的web前端开发框架:jQuery、BootstrapVueReactJSWeb前端框架实现原理主流JS框架实现剖析:jQuery、Vue,ReactJS,Node.JS浏览器工作原理JavaScript对象</div> </li> <li><a href="/article/1912993788628889600.htm" title="Web前端技术-HTML" target="_blank">Web前端技术-HTML</a> <span class="text-muted">Lil-Long</span> <a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8/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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>一、web前端标准HTML结构标准css样式标准js行为标准二、五大浏览器厂商ie谷歌火狐苹果欧朋注意:其它浏览器都是用的别人浏览器的技术,自己换了一套皮肤而已。三、html定义超文本标记语言四、第一个html页面网页标题helloworld代码都在body标签中1、描述当前文件的版本信息,如果没有详细说明4.0还是x1.0那就是5版本2、html文件3、网页的头部4、utf-8是国际编码的意思,</div> </li> <li><a href="/article/1907236851400372224.htm" title="使用HTML5和CSS3实现炫酷的3D立方体动画" target="_blank">使用HTML5和CSS3实现炫酷的3D立方体动画</a> <span class="text-muted">木木黄木木</span> <a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/3d/1.htm">3d</a> <div>使用HTML5和CSS3实现炫酷的3D立方体动画项目介绍本文将详细介绍如何使用HTML5和CSS3技术实现一个交互式3D立方体动画。这个项目不仅展示了现代Web前端技术的强大功能,还能帮助读者深入理解CSS3的3D变换和动画特性。技术栈HTML5CSS3(transform-style,perspective,transition等)原生JavaScript核心功能3D立方体的构建和渲染自动旋转动</div> </li> <li><a href="/article/1902311584152219648.htm" title="【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现生物识别(指纹识别)应用" target="_blank">【一起学Rust | Tauri2.0框架】基于 Rust 与 Tauri 2.0 框架实现生物识别(指纹识别)应用</a> <span class="text-muted">广龙宇</span> <a class="tag" taget="_blank" href="/search/Tauri2%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/1.htm">Tauri2应用开发</a><a class="tag" taget="_blank" href="/search/%E4%B8%80%E8%B5%B7%E5%AD%A6Rust/1.htm">一起学Rust</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</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> <div>前言Tauri,作为一个新兴的跨平台应用开发框架,允许开发者使用Web前端技术构建界面,并利用Rust的高性能和安全性编写后端逻辑。这种架构巧妙地结合了Web的灵活性和原生应用的性能,为开发者提供了一种构建高效、跨平台应用的全新选择。而生物识别技术,如指纹识别、面部识别等,则为应用安全提供了更高级别的保障。将生物识别技术集成到Tauri应用中,可以提升用户体验,增强应用安全性。试想一下,用户只需轻</div> </li> <li><a href="/article/1892267275638075392.htm" title="electron学习笔记" target="_blank">electron学习笔记</a> <span class="text-muted">weixin_46452138</span> <a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>electron个人学习笔记一、electron简单了解Electron是一个跨平台的、基于Web前端技术的桌面GUI应用程序开发框架。可以使用HTML、CSS来绘制界面和控制布局,使用JavaScript来控制用户行为和业务逻辑,使用Node.js来通信、处理音频视频等,几乎所有的Web前端技术和框架(jQuery、Vue、React、Angular等)都可以应用到桌面GUI开发中。二、开发前基</div> </li> <li><a href="/article/1834155529212096512.htm" title="【Web前端技术 02】深入探索HTML5:标签全解析与案例演示!" target="_blank">【Web前端技术 02】深入探索HTML5:标签全解析与案例演示!</a> <span class="text-muted">wcyd</span> <a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/1.htm">Web前端技术</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>深入探索HTML5:标签全解析与案例演示!大家好!在上一篇文章中,我们对HTML5有了一个基本的了解。今天,我们将更深入地探索HTML5,全面介绍各种标签及其应用。从基础标签到新增标签,从文档结构到格式标签,我们将一一解析,并提供丰富的案例演示。准备好了吗?让我们开始吧!️HTML5基础结构首先,让我们回顾一下HTML5的基本结构。HTML5文档的结构就像一座房子的蓝图,指导我们如何构建网页。下面</div> </li> <li><a href="/article/1826672916713009152.htm" title="web前端技术分享:koa中间件是如何实现的?" target="_blank">web前端技术分享:koa中间件是如何实现的?</a> <span class="text-muted">程序员的小傲娇</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/1.htm">编程语言</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a> <div>在前端开发过程中我们可能会使用到koa中间件,但很多同学却不知道它是如何实现的,下面小千就来给大家介绍一下这个koa中间件(洋葱模型)。一、问题分析asyncawait是promise的语法糖,await后面跟一个promise,所以上面的代码可以写成:改成这样更好理解一些,所以流程控制的核心在于next的实现。next要求调用队列中下一个middleware,当达到最后一个的时候resolve。</div> </li> <li><a href="/article/1759767639909036032.htm" title="1.初识Tauri" target="_blank">1.初识Tauri</a> <span class="text-muted">余识-</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/tauri/1.htm">tauri</a> <div>文章目录一、前言二、基本认识三、js与rust通信四、构建应用一、前言原文以及后续文章可点击查看:初识Tauri。Tauri是一款比较新的跨平台桌面框架,也是我目前最喜欢的一个框架,其官网为:Tauri它的作用其实和Electron很像:使用Web前端技术开发桌面软件。但不同之处在于,Electron是可以通过纯粹前端技术进行开发,也就是你只需要懂html、js、css,就可以使用它来开发软件了。</div> </li> <li><a href="/article/1757117913560530944.htm" title="web前端项目-进击的玉兔【附源码】" target="_blank">web前端项目-进击的玉兔【附源码】</a> <span class="text-muted">温轻舟</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE-%E6%BA%90%E7%A0%81%E8%87%AA%E5%8F%96/1.htm">web前端项目-源码自取</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><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/javascript/1.htm">javascript</a> <div>进击的玉兔【进击的玉兔】是一款基于Web前端技术的游戏,其主题和背景与中国的传统文化和神话有关。在游戏中,玩家需要通过解决各种难题和挑战来收集月饼,最终达成游戏目标。运行效果:HTML源码:进击的玉兔0CSS源码:*{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-tap-</div> </li> <li><a href="/article/1754447566331723776.htm" title="JavaScript原型和原型链是什么" target="_blank">JavaScript原型和原型链是什么</a> <span class="text-muted">JJCTO</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%8E%9F%E5%9E%8B%E6%A8%A1%E5%BC%8F/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原型和原型链是Web前端技术中的重要概念,了解它们可以帮助开发者更好地理解JavaScript对象的创建和继承机制。本文将深入探讨JavaScript原型和原型链,并提供相关的示例代码和解析。首先,让我们了解一下JavaScript中的原型。每个JavaScript对象都有一个原型(prototype)。原型可以理解为一个模板对象,包含了对象共享的属性和方法。当我们创建一个新对</div> </li> <li><a href="/article/1753085157415337984.htm" title="2020年小白要知道的Web前端学习路线" target="_blank">2020年小白要知道的Web前端学习路线</a> <span class="text-muted">web前端学习指南</span> <div>今天小编要跟大家分享的文章是关于2020年小白要知道的Web前端学习路线。准备在2020年学习Web前端技术的小伙伴们来和小编一起看看本篇文章,希望能够对大家有所帮助!第一阶段:●HTML+CSS:HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、●JavaScript基础:Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器</div> </li> <li><a href="/article/1752969076214349824.htm" title="Web前端实现导出Excel的方案" target="_blank">Web前端实现导出Excel的方案</a> <span class="text-muted">Devil枫</span> <a class="tag" taget="_blank" href="/search/ecxel%E5%AF%BC%E5%87%BA/1.htm">ecxel导出</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/excel/1.htm">excel</a> <div>相信大家都有遇到需要在web页面上要展示表格数据的情况,一般情况下甲方都会要求这些显示的数据可以导出成excel吧。今天分享一下关于前端如何导出Excel的方案实例吧。一:背景与目标随着Web技术的不断发展,越来越多的应用程序需要在前端实现导出Excel功能。这一功能不仅方便用户导出数据,还能提高工作效率。本文将介绍一种基于Web前端技术实现导出Excel的方案,并给出相应的实例。二:技术选型1.</div> </li> <li><a href="/article/1752900468255768576.htm" title="软件架构体系" target="_blank">软件架构体系</a> <span class="text-muted">·H·976</span> <a class="tag" taget="_blank" href="/search/B%2FS/1.htm">B/S</a><a class="tag" taget="_blank" href="/search/C%2FS/1.htm">C/S</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>C/S(Client/Server)架构:客户端/服务端exp:QQ、微信、爱奇艺B/S(Browser/Server)架构:浏览器/服务器exp:百度、淘宝、网页版的爱奇艺、基于web前端技术实现的一些手机App(百度地图、消消乐)web前端技术是基于浏览器实现客户端的一套综合技术,包括HTML、CSS、JS等UI客户端技术是基于UI模块实现客户端的一种UI模块+打包模块,包括pygame、py</div> </li> <li><a href="/article/1752169422241415168.htm" title="Web前端技术课程设计——技术栈【SpringBoot+Vue+MySQL+MyBatis】的在线英语考试系统" target="_blank">Web前端技术课程设计——技术栈【SpringBoot+Vue+MySQL+MyBatis】的在线英语考试系统</a> <span class="text-muted">Mr_BigG</span> <a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">Web前端技术课程设计</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</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/mybatis/1.htm">mybatis</a> <div>一、技术简介本网站使用了前后端分离的开发技术,是基于SpringBoot+VUE的在线英语考试系统,支持选择题、填空题、判断题、多选题。系统包含三种角色(管理员、老师、考生),实现的功能包含在线考试、查看答题情况、管理试卷、管理题库、管理用户等。前端技术栈:VUE(构建用户界面的渐进式框架)VUEX(状态管理)Vue-router(动态路由)Js-cookie(保存信息)Axios(页面请求)后端</div> </li> <li><a href="/article/1751877990112837632.htm" title="如何有效的学习Web前端开发?" target="_blank">如何有效的学习Web前端开发?</a> <span class="text-muted">强哥科技兴</span> <div>一个好的Web前端工程师在知识体系上既要有广度,又要有深度,所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。那么如何系统的学习企业实用的web前端技术呢?当大家有了一些HTML的静态布局的基础,那么我们学完HTML、CSS这些最简单的东西就算是有了小小的入门,知道了Web前端到底是做什么的,那么我们入门之后应该学习哪些系统的前端知识体系呢?如果我们大家选择自学,那么我们就应该根据个人的学</div> </li> <li><a href="/article/1751126925700513792.htm" title="如何有效的学习Web前端开发?" target="_blank">如何有效的学习Web前端开发?</a> <span class="text-muted">强哥科技兴</span> <div>一个好的Web前端工程师在知识体系上既要有广度,又要有深度,所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。那么如何系统的学习企业实用的web前端技术呢?当大家有了一些HTML的静态布局的基础,那么我们学完HTML、CSS这些最简单的东西就算是有了小小的入门,知道了Web前端到底是做什么的,那么我们入门之后应该学习哪些系统的前端知识体系呢?如果我们大家选择自学,那么我们就应该根据个人的学</div> </li> <li><a href="/article/1748923591740637184.htm" title="web前端项目-中国象棋【附源码】" target="_blank">web前端项目-中国象棋【附源码】</a> <span class="text-muted">温轻舟</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE-%E6%BA%90%E7%A0%81%E8%87%AA%E5%8F%96/1.htm">web前端项目-源码自取</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><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/javascript/1.htm">javascript</a> <div>中国象棋【中国象棋】是一款历史悠久、深受人们喜爱的策略类游戏。在Web前端技术中,我们可以使用HTML、CSS和JavaScript等语言来制作一款中国象棋游戏。玩家使用棋子(帅/相/士/炮/马/车/炮/卒)在棋盘上相互对弈,将对手的“帅”棋子吃掉即为胜利。运行效果:HTML源码:中国象棋对不起,您的浏览器不支持HTML5,请升级浏览器至IE9、firefox或者谷歌浏览器!适用浏览器:360、F</div> </li> <li><a href="/article/1745553702862733312.htm" title="基于VUE框架、前端UI样式库Bootstrap4、在线WebApi资源调用的Web前端技术课程设计《天气易搜》" target="_blank">基于VUE框架、前端UI样式库Bootstrap4、在线WebApi资源调用的Web前端技术课程设计《天气易搜》</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/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/echarts/1.htm">echarts</a><a class="tag" taget="_blank" href="/search/visual/1.htm">visual</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>1.设计内容简介1.1技术知识点html标签:正文部分,网页头部,网页主体,样式,脚本语言,有序列表,容器,标签,标签,标签,标签,标签,标签等。Css基础选择器:class类标签,id标签。Date函数:该函数返回组件实例的data对象。Methods:将被混入到组件实例中。可以直接通过vm实例访问这些方法或者者在指令表达式中使用。方法中的this自动绑定为组件实例。Mounted函数:在Vue</div> </li> <li><a href="/article/1744724489549135872.htm" title="在上海乐字节学习的三十六天" target="_blank">在上海乐字节学习的三十六天</a> <span class="text-muted">阿丫o</span> <div>如何用Web前端技术就能开发出桌面应用程序?Web前端技术开发桌面应用的方式CEF:用Chromium&Webkit来呈现web页面,是客户端里面嵌浏览器,浏览器里面跑网页。heX:基于CEF,内部整合了开源项目Chromium及node.js。nw:基于Chromium和node.js,利用web方式开发跨平台桌面应用的平台技术。electron:底层也是基于Chromium和node.js。等</div> </li> <li><a href="/article/1744655972250435584.htm" title="【Top10】天津高性价比Web前端培训机构(Web前端需要掌握什么技能)" target="_blank">【Top10】天津高性价比Web前端培训机构(Web前端需要掌握什么技能)</a> <span class="text-muted">qq_38453958</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/%E5%A4%A9%E6%B4%A5web%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD/1.htm">天津web前端培训</a><a class="tag" taget="_blank" href="/search/%E5%A4%A9%E6%B4%A5web%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD%E7%8F%AD/1.htm">天津web前端培训班</a><a class="tag" taget="_blank" href="/search/%E5%A4%A9%E6%B4%A5web%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD%E6%9C%BA%E6%9E%84/1.htm">天津web前端培训机构</a><a class="tag" taget="_blank" href="/search/%E5%A4%A9%E6%B4%A5web%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD%E5%AD%A6%E6%A0%A1/1.htm">天津web前端培训学校</a><a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD/1.htm">web前端培训</a> <div>Web前端开发已经成为了一门备受瞩目的技能,对于一些初学者或者转行的人来说,也是非常友好的,当然越火也越会存在争议,大部分没有经验的人会选择参加培训来学习Web前端技术,也有不少人对于参加Web前端培训的必要性存在疑虑,今天我们就从下面几个方面来了解一下Web前端。Web前端就业前景互联网行业对于具备Web前端开发技能的人才需求持续增长。随着越来越多的企业和组织,意识到网站和应用程序对于业务的重要</div> </li> <li><a href="/article/1744655711280840704.htm" title="天津最新web前端培训班 如何提升web技能?" target="_blank">天津最新web前端培训班 如何提升web技能?</a> <span class="text-muted">qq_38453958</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/%E5%A4%A9%E6%B4%A5web%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD/1.htm">天津web前端培训</a><a class="tag" taget="_blank" href="/search/%E5%A4%A9%E6%B4%A5web%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD%E7%8F%AD/1.htm">天津web前端培训班</a><a class="tag" taget="_blank" href="/search/%E5%A4%A9%E6%B4%A5web%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD%E6%9C%BA%E6%9E%84/1.htm">天津web前端培训机构</a><a class="tag" taget="_blank" href="/search/%E5%A4%A9%E6%B4%A5web%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD%E5%AD%A6%E6%A0%A1/1.htm">天津web前端培训学校</a><a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD/1.htm">web前端培训</a> <div>随着互联网的迅猛发展,web前端成为了一个热门的职业方向。越来越多的人希望能够通过学习web前端技术来提升自己的就业竞争力。为了满足市场的需求,许多培训机构纷纷推出了web前端培训课程。什么是WEB前端web前端就是web给用户展示的东西,这里面可能包含了设计,特效,用户交互等等,现在对于从业人员通常叫法是:前端美工,前端开发,前端架构三个最基本级别。主要职责是利各种Web技术进行客户端产品的开发</div> </li> <li><a href="/article/1740946658251784192.htm" title="管理系统设计开发与学习" target="_blank">管理系统设计开发与学习</a> <span class="text-muted">en...小瓶子</span> <a class="tag" taget="_blank" href="/search/JAVA/1.htm">JAVA</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>目录封面一.内容简介二.技术概述1.SpringBoot2.MVC模式3.数据库技术4.Web前端技术5.对接技术四.体系架构设计架构系统分层系统结构五.数据库的设计六.开发准备开发工具开发环境七.学习总结八.学习心得一.内容简介:基于SpringBoot和KAQ模型的大学生成长平台,旨在帮助大学生提高综合素质,培养能力、知识和品质。基于以下相关技术进行理论学习,为日后开发做好准备。1.系统架构设</div> </li> <li><a href="/article/1740472847169503232.htm" title="现代前端技术解析-第5章 前端项目与技术实践(一)" target="_blank">现代前端技术解析-第5章 前端项目与技术实践(一)</a> <span class="text-muted">DxCaesar</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0-%E7%8E%B0%E4%BB%A3%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E8%A7%A3%E6%9E%90/1.htm">读书笔记-现代前端技术解析</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/%E7%8E%B0%E4%BB%A3%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF%E8%A7%A3%E6%9E%90/1.htm">现代前端技术解析</a><a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a> <div>《现代前端技术解析》第5章阅读笔记(一)笔记章节目录第1章Web前端技术基础第2章前端与协议第3章前端三层结构与应用第4章现代前端交互框架第5章前端项目与技术实践一(5.1前端开发规范)二(5.2前端组件规范&5.3自动化构建)三(5.3自动化构建)四(5.5前端用户数据分析&5.6前端搜索引擎优化基础&5.7前端协作)第6章前端跨栈技术第7章未来前端时代2020/02/195.1前端开发规范本节</div> </li> <li><a href="/article/1739802599336460288.htm" title="探索Web前端技术的新趋势与发展" target="_blank">探索Web前端技术的新趋势与发展</a> <span class="text-muted">工业甲酰苯胺</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E4%BD%8E%E4%BB%A3%E7%A0%81/1.htm">低代码</a><a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a> <div>随着互联网的不断发展,Web前端技术作为构建现代Web应用的重要组成部分,也在不断演变和发展。本文将从新趋势和发展方向两个角度,探讨Web前端技术的最新动态和未来展望。Web前端技术是构建现代网页和应用程序的重要组成部分。随着互联网的快速发展,人们对用户体验和交互性的要求越来越高,Web前端技术也日新月异。本文将介绍一些主要的Web前端技术以及它们在实际应用中的作用。一、新趋势响应式设计随着移动设</div> </li> <li><a href="/article/1739363152593698816.htm" title="Tauri:构建高效安全的桌面应用程序 | 开源日报 No.124" target="_blank">Tauri:构建高效安全的桌面应用程序 | 开源日报 No.124</a> <span class="text-muted">开源服务指南</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E6%97%A5%E6%8A%A5/1.htm">开源日报</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90/1.htm">开源</a> <div>tauri-apps/tauriStars:64.6kLicense:Apache-2.0Tauri是一个开源项目,它可以通过Web前端构建更小、更快和更安全的桌面应用程序。该项目具有以下优势和特点:Tauri可以帮助用户构建桌面应用程序,并使用web前端技术进行界面设计。通过Tauri,用户可以创建运行时核心、工具和实用插件等组件来满足不同需求。运行时核心是Tauri的主要组成部分之一,它处理资</div> </li> <li><a href="/article/1739113216891478016.htm" title="自学web前端到什么程度才能就业" target="_blank">自学web前端到什么程度才能就业</a> <span class="text-muted">前端大叔熟</span> <div>首先,这个问题主要问:自学web前端技术,如果才能找到一份web前端的工作。按照现在的招聘标准来看,无论你去哪个公司面试,你只需要满足他们公司的需求就可以。找到一份web前端工作需要掌握的内容如下:首先是html,css这些简单的静态布局这是最基本的学习内容,不在多说。然后是掌握JavaScript的基本原理,因为做web前端开发,用到JavaScript非常多,但是现在很多公司是不用去写原生的J</div> </li> <li><a href="/article/1738612528486866944.htm" title="天津web前端就业培训班,Web机构选择重点" target="_blank">天津web前端就业培训班,Web机构选择重点</a> <span class="text-muted">qq_38453958</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/%E5%A4%A9%E6%B4%A5web%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD/1.htm">天津web前端培训</a><a class="tag" taget="_blank" href="/search/%E5%A4%A9%E6%B4%A5web%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD%E7%8F%AD/1.htm">天津web前端培训班</a><a class="tag" taget="_blank" href="/search/%E5%A4%A9%E6%B4%A5web%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD%E6%9C%BA%E6%9E%84/1.htm">天津web前端培训机构</a><a class="tag" taget="_blank" href="/search/%E5%A4%A9%E6%B4%A5web%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD%E5%AD%A6%E6%A0%A1/1.htm">天津web前端培训学校</a><a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD/1.htm">web前端培训</a><a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD%E7%8F%AD/1.htm">web前端培训班</a><a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E5%9F%B9%E8%AE%AD%E6%9C%BA%E6%9E%84/1.htm">web前端培训机构</a> <div>Web前端培训是目前非常热门的培训领域之一。很多领域都会涉及到web前端开发,比如传统互联网、房地产、金融、游戏、影视传媒等行业都需要web前端技术的支持。越来越多的企业和个人也需要建立自己的网站和移动应用程序,因此市场对web前端工程师的需求是非常大的,其薪资待遇也比较高。前端培训两个主要分类前端培训按技术栈主要可以分为两类:全栈开发和非全栈开发。全栈主要是多了node.js以及对应的框架exp</div> </li> <li><a href="/article/1736979301082914816.htm" title="怎么有效的学习Web前端开发?" target="_blank">怎么有效的学习Web前端开发?</a> <span class="text-muted">强哥科技兴</span> <div>一个好的Web前端工程师在知识体系上既要有广度,又要有深度,所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。那么如何系统的学习企业实用的web前端技术呢?当大家有了一些HTML的静态布局的基础,那么我们学完HTML、CSS这些最简单的东西就算是有了小小的入门,知道了Web前端到底是做什么的,那么我们入门之后应该学习哪些系统的前端知识体系呢?如果我们大家选择自学,那么我们就应该根据个人的学</div> </li> <li><a href="/article/1735209379294142464.htm" title="44.0/认识前端" target="_blank">44.0/认识前端</a> <span class="text-muted">光明是人的信仰</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>44.1目录44.1.1网页44.1.1.1网页的组成44.1.1.2网页的分类44.1.2网站44.1.2.1网站的分类44.1.3主页44.2.Internet、IP地址和域名44.2.1Internet44.2.2IP44.2.3域名44.3.Web前端技术概述44.3.1html544.3.2CSS344.3.3Javascript44.4.Web前端开发工具44.4.1编辑器——(HBu</div> </li> <li><a href="/article/104.htm" title="springmvc 下 freemarker页面枚举的遍历输出" target="_blank">springmvc 下 freemarker页面枚举的遍历输出</a> <span class="text-muted">杨白白</span> <a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/freemarker/1.htm">freemarker</a> <div>spring mvc freemarker 中遍历枚举 1枚举类型有一个本地方法叫values(),这个方法可以直接返回枚举数组。所以可以利用这个遍历。 enum public enum BooleanEnum { TRUE(Boolean.TRUE, "是"), FALSE(Boolean.FALSE, "否"); </div> </li> <li><a href="/article/231.htm" title="实习简要总结" target="_blank">实习简要总结</a> <span class="text-muted">byalias</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> <div>来白虹不知不觉中已经一个多月了,因为项目还在需求分析及项目架构阶段,自己在这段 时间都是在学习相关技术知识,现在对这段时间的工作及学习情况做一个总结: (1)工作技能方面 大体分为两个阶段,Java Web 基础阶段和Java EE阶段 1)Java Web阶段 在这个阶段,自己主要着重学习了 JSP, Servlet, JDBC, MySQL,这些知识的核心点都过 了一遍,也</div> </li> <li><a href="/article/358.htm" title="Quartz——DateIntervalTrigger触发器" target="_blank">Quartz——DateIntervalTrigger触发器</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/quartz/1.htm">quartz</a> <div>转载请出自出处:http://eksliang.iteye.com/blog/2208559 一.概述 simpleTrigger 内部实现机制是通过计算间隔时间来计算下次的执行时间,这就导致他有不适合调度的定时任务。例如我们想每天的 1:00AM 执行任务,如果使用 SimpleTrigger,间隔时间就是一天。注意这里就会有一个问题,即当有 misfired 的任务并且恢复执行时,该执行时间</div> </li> <li><a href="/article/485.htm" title="Unix快捷键" target="_blank">Unix快捷键</a> <span class="text-muted">18289753290</span> <a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a><a class="tag" taget="_blank" href="/search/Unix%EF%BC%9B%E5%BF%AB%E6%8D%B7%E9%94%AE%3B/1.htm">Unix;快捷键;</a> <div>复制,删除,粘贴: dd:删除光标所在的行                             &nbs</div> </li> <li><a href="/article/612.htm" title="获取Android设备屏幕的相关参数" target="_blank">获取Android设备屏幕的相关参数</a> <span class="text-muted">酷的飞上天空</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>包含屏幕的分辨率  以及 屏幕宽度的最大dp 高度最大dp   TextView text = (TextView)findViewById(R.id.text); DisplayMetrics dm = new DisplayMetrics(); text.append("getResources().ge</div> </li> <li><a href="/article/739.htm" title="要做物联网?先保护好你的数据" target="_blank">要做物联网?先保护好你的数据</a> <span class="text-muted">蓝儿唯美</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE/1.htm">数据</a> <div>根据Beecham Research的说法,那些在行业中希望利用物联网的关键领域需要提供更好的安全性。 在Beecham的物联网安全威胁图谱上,展示了那些可能产生内外部攻击并且需要通过快速发展的物联网行业加以解决的关键领域。 Beecham Research的技术主管Jon Howes说:“之所以我们目前还没有看到与物联网相关的严重安全事件,是因为目前还没有在大型客户和企业应用中进行部署,也就</div> </li> <li><a href="/article/866.htm" title="Java取模(求余)运算" target="_blank">Java取模(求余)运算</a> <span class="text-muted">随便小屋</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>        整数之间的取模求余运算很好求,但几乎没有遇到过对负数进行取模求余,直接看下面代码: /** * * @author Logic * */ public class Test { public static void main(String[] args) { // TODO A</div> </li> <li><a href="/article/993.htm" title="SQL注入介绍" target="_blank">SQL注入介绍</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/sql%E6%B3%A8%E5%85%A5/1.htm">sql注入</a> <div>二、SQL注入范例 这里我们根据用户登录页面 <form action="" > 用户名:<input type="text" name="username"><br/> 密 码:<input type="password" name="passwor</div> </li> <li><a href="/article/1120.htm" title="优雅代码风格" target="_blank">优雅代码风格</a> <span class="text-muted">aoyouzi</span> <a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81/1.htm">代码</a> <div>总结了几点关于优雅代码风格的描述: 代码简单:不隐藏设计者的意图,抽象干净利落,控制语句直截了当。 接口清晰:类型接口表现力直白,字面表达含义,API 相互呼应以增强可测试性。 依赖项少:依赖关系越少越好,依赖少证明内聚程度高,低耦合利于自动测试,便于重构。 没有重复:重复代码意味着某些概念或想法没有在代码中良好的体现,及时重构消除重复。 战术分层:代码分层清晰,隔离明确,</div> </li> <li><a href="/article/1247.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%B8%83%E5%B0%94%E6%95%B0%E7%BB%84/1.htm">布尔数组</a> <div>  androi中提到了布尔数组;   布尔数组默认的是false,  并且只会打印false或者是true   布尔数组的例子;  根据字符数组创建布尔数组 char[] c = {'p','u','b','l','i','c'}; //根据字符数组的长度创建布尔数组的个数 boolean[] b = new bool</div> </li> <li><a href="/article/1374.htm" title="web.xml之welcome-file-list、error-page" target="_blank">web.xml之welcome-file-list、error-page</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/error-page/1.htm">error-page</a> <div>welcome-file-list 1.定义: <welcome-file-list> <welcome-file>login.jsp</welcome> </welcome-file-list>  2.作用:用来指定WEB应用首页名称。   error-page1.定义: <error-page&g</div> </li> <li><a href="/article/1501.htm" title="richfaces 4 fileUpload组件删除上传的文件" target="_blank">richfaces 4 fileUpload组件删除上传的文件</a> <span class="text-muted">sunjing</span> <a class="tag" taget="_blank" href="/search/clear/1.htm">clear</a><a class="tag" taget="_blank" href="/search/Richfaces+4/1.htm">Richfaces 4</a><a class="tag" taget="_blank" href="/search/fileupload/1.htm">fileupload</a> <div> 页面代码               <h:form id="fileForm">            <rich:</div> </li> <li><a href="/article/1628.htm" title="技术文章备忘" target="_blank">技术文章备忘</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E6%96%87%E7%AB%A0/1.htm">技术文章</a> <div>Zookeeper http://wenku.baidu.com/view/bab171ffaef8941ea76e05b8.html http://wenku.baidu.com/link?url=8thAIwFTnPh2KL2b0p1V7XSgmF9ZEFgw4V_MkIpA9j8BX2rDQMPgK5l3wcs9oBTxeekOnm5P3BK8c6K2DWynq9nfUCkRlTt9uV</div> </li> <li><a href="/article/1755.htm" title="org.hibernate.hql.ast.QuerySyntaxException: unexpected token: on near line 1解决方案" target="_blank">org.hibernate.hql.ast.QuerySyntaxException: unexpected token: on near line 1解决方案</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div>文章摘自:http://blog.csdn.net/yangwawa19870921/article/details/7553181   在编写HQL时,可能会出现这种代码: select a.name,b.age from TableA a left join TableB b on a.id=b.id  如果这是HQL,那么这段代码就是错误的,因为HQL不支持</div> </li> <li><a href="/article/1882.htm" title="sqlserver按照字段内容进行排序" target="_blank">sqlserver按照字段内容进行排序</a> <span class="text-muted">bozch</span> <a class="tag" taget="_blank" href="/search/%E6%8C%89%E7%85%A7%E5%86%85%E5%AE%B9%E6%8E%92%E5%BA%8F/1.htm">按照内容排序</a> <div>在做项目的时候,遇到了这样的一个需求:           从数据库中取出的数据集,首先要将某个数据或者多个数据按照地段内容放到前面显示,例如:从学生表中取出姓李的放到数据集的前面;          select * fro</div> </li> <li><a href="/article/2009.htm" title="编程珠玑-第一章-位图排序" target="_blank">编程珠玑-第一章-位图排序</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E7%8F%A0%E7%8E%91/1.htm">编程珠玑</a> <div> import java.io.BufferedWriter; import java.io.File; import java.io.FileWriter; import java.io.IOException; import java.io.Writer; import java.util.Random; public class BitMapSearch { </div> </li> <li><a href="/article/2136.htm" title="Java关于==和equals" target="_blank">Java关于==和equals</a> <span class="text-muted">chenbowen00</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>关于==和equals概念其实很简单,一个是比较内存地址是否相同,一个比较的是值内容是否相同。虽然理解上不难,但是有时存在一些理解误区,如下情况: 1、 String a = "aaa"; a=="aaa"; ==> true 2、 new String("aaa")==new String("aaa</div> </li> <li><a href="/article/2263.htm" title="[IT与资本]软件行业需对外界投资热情保持警惕" target="_blank">[IT与资本]软件行业需对外界投资热情保持警惕</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/it/1.htm">it</a> <div>       我还是那个看法,软件行业需要增强内生动力,尽量依靠自有资金和营业收入来进行经营,避免在资本市场上经受各种不同类型的风险,为企业自主研发核心技术和产品提供稳定,温和的外部环境...       如果我们在自己尚未掌握核心技术之前,企图依靠上市来筹集资金,然后使劲往某个领域砸钱,然</div> </li> <li><a href="/article/2390.htm" title="oracle 数据块结构" target="_blank">oracle 数据块结构</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E5%9D%97/1.htm">块</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%9D%97/1.htm">数据块</a><a class="tag" taget="_blank" href="/search/%E5%9D%97%E7%BB%93%E6%9E%84/1.htm">块结构</a><a class="tag" taget="_blank" href="/search/%E8%A1%8C%E7%9B%AE%E5%BD%95/1.htm">行目录</a> <div>oracle 数据块是数据库存储的最小单位,一般为操作系统块的N倍。其结构为: 块头--〉空行--〉数据,其实际为纵行结构。 块的标准大小由初始化参数DB_BLOCK_SIZE指定。具有标准大小的块称为标准块(Standard Block)。块的大小和标准块的大小不同的块叫非标准块(Nonstandard Block)。同一数据库中,Oracle9i及以上版本支持同一数据库中同时使用标</div> </li> <li><a href="/article/2517.htm" title="github上一些觉得对自己工作有用的项目收集" target="_blank">github上一些觉得对自己工作有用的项目收集</a> <span class="text-muted">dengkane</span> <a class="tag" taget="_blank" href="/search/github/1.htm">github</a> <div>github上一些觉得对自己工作有用的项目收集 技能类 markdown语法中文说明 回到顶部 全文检索 elasticsearch bigdesk elasticsearch管理插件 回到顶部 nosql mapdb 支持亿级别map, list, 支持事务. 可考虑做为缓存使用 C</div> </li> <li><a href="/article/2644.htm" title="初二上学期难记单词二" target="_blank">初二上学期难记单词二</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/english/1.htm">english</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a> <div>dangerous 危险的 panda 熊猫 lion 狮子 elephant 象 monkey 猴子 tiger 老虎 deer 鹿 snake 蛇 rabbit 兔子 duck 鸭 horse 马 forest 森林 fall 跌倒;落下 climb 爬;攀登 finish 完成;结束 cinema 电影院;电影 seafood 海鲜;海产食品 bank 银行</div> </li> <li><a href="/article/2771.htm" title="8、mysql外键(FOREIGN KEY)的简单使用" target="_blank">8、mysql外键(FOREIGN KEY)的简单使用</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>一、基本概念 1、MySQL中“键”和“索引”的定义相同,所以外键和主键一样也是索引的一种。不同的是MySQL会自动为所有表的主键进行索引,但是外键字段必须由用户进行明确的索引。用于外键关系的字段必须在所有的参照表中进行明确地索引,InnoDB不能自动地创建索引。 2、外键可以是一对一的,一个表的记录只能与另一个表的一条记录连接,或者是一对多的,一个表的记录与另一个表的多条记录连接。 3、如</div> </li> <li><a href="/article/2898.htm" title="java循环标签 Foreach" target="_blank">java循环标签 Foreach</a> <span class="text-muted">shuizhaosi888</span> <a class="tag" taget="_blank" href="/search/%E6%A0%87%E7%AD%BE/1.htm">标签</a><a class="tag" taget="_blank" href="/search/java%E5%BE%AA%E7%8E%AF/1.htm">java循环</a><a class="tag" taget="_blank" href="/search/foreach/1.htm">foreach</a> <div>1. 简单的for循环 public static void main(String[] args) { for (int i = 1, y = i + 10; i < 5 && y < 12; i++, y = i * 2) { System.err.println("i=" + i + " y=" </div> </li> <li><a href="/article/3025.htm" title="Spring Security(05)——异常信息本地化" target="_blank">Spring Security(05)——异常信息本地化</a> <span class="text-muted">234390216</span> <a class="tag" taget="_blank" href="/search/exception/1.htm">exception</a><a class="tag" taget="_blank" href="/search/Spring+Security/1.htm">Spring Security</a><a class="tag" taget="_blank" href="/search/%E5%BC%82%E5%B8%B8%E4%BF%A1%E6%81%AF/1.htm">异常信息</a><a class="tag" taget="_blank" href="/search/%E6%9C%AC%E5%9C%B0%E5%8C%96/1.htm">本地化</a> <div>异常信息本地化          Spring Security支持将展现给终端用户看的异常信息本地化,这些信息包括认证失败、访问被拒绝等。而对于展现给开发者看的异常信息和日志信息(如配置错误)则是不能够进行本地化的,它们是以英文硬编码在Spring Security的代码中的。在Spring-Security-core-x</div> </li> <li><a href="/article/3152.htm" title="DUBBO架构服务端告警Failed to send message Response" target="_blank">DUBBO架构服务端告警Failed to send message Response</a> <span class="text-muted">javamingtingzhao</span> <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/DUBBO/1.htm">DUBBO</a> <div> 废话不多说,警告日志如下,不知道有哪位遇到过,此异常在服务端抛出(服务器启动第一次运行会有这个警告),后续运行没问题,找了好久真心不知道哪里错了。    WARN 2015-07-18 22:31:15,272 com.alibaba.dubbo.remoting.transport.dispatcher.ChannelEventRunnable.run(84)</div> </li> <li><a href="/article/3279.htm" title="JS中Date对象中几个用法" target="_blank">JS中Date对象中几个用法</a> <span class="text-muted">leeqq</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/Date/1.htm">Date</a><a class="tag" taget="_blank" href="/search/%E6%9C%80%E5%90%8E%E4%B8%80%E5%A4%A9/1.htm">最后一天</a> <div>近来工作中遇到这样的两个需求 1. 给个Date对象,找出该时间所在月的第一天和最后一天 2. 给个Date对象,找出该时间所在周的第一天和最后一天   需求1中的找月第一天很简单,我记得api中有setDate方法可以使用 使用setDate方法前,先看看getDate var date = new Date(); console.log(date); // Sat J</div> </li> <li><a href="/article/3406.htm" title="MFC中使用ado技术操作数据库" target="_blank">MFC中使用ado技术操作数据库</a> <span class="text-muted">你不认识的休道人</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mfc/1.htm">mfc</a> <div>1.在stdafx.h中导入ado动态链接库 #import"C:\Program Files\Common Files\System\ado\msado15.dll" no_namespace rename("EOF","end")2.在CTestApp文件的InitInstance()函数中domodal之前写::CoIniti</div> </li> <li><a href="/article/3533.htm" title="Android Studio加速" target="_blank">Android Studio加速</a> <span class="text-muted">rensanning</span> <a class="tag" taget="_blank" href="/search/android+studio/1.htm">android studio</a> <div>Android Studio慢、吃内存!启动时后会立即通过Gradle来sync & build工程。 (1)设置Android Studio a) 禁用插件 File -> Settings...  Plugins 去掉一些没有用的插件。 比如:Git Integration、GitHub、Google Cloud Testing、Google Cloud</div> </li> <li><a href="/article/3660.htm" title="各数据库的批量Update操作" target="_blank">各数据库的批量Update操作</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/sqlite/1.htm">sqlite</a> <div>MyBatis的update元素的用法与insert元素基本相同,因此本篇不打算重复了。本篇仅记录批量update操作的 sql语句,懂得SQL语句,那么MyBatis部分的操作就简单了。   注意:下列批量更新语句都是作为一个事务整体执行,要不全部成功,要不全部回滚。 MSSQL的SQL语句  WITH R AS(   SELECT 'John' as name, 18 as</div> </li> <li><a href="/article/3787.htm" title="html禁止清除input文本输入缓存" target="_blank">html禁止清除input文本输入缓存</a> <span class="text-muted">xp9802</span> <a class="tag" taget="_blank" href="/search/input/1.htm">input</a> <div>多数浏览器默认会缓存input的值,只有使用ctl+F5强制刷新的才可以清除缓存记录。如果不想让浏览器缓存input的值,有2种方法: 方法一: 在不想使用缓存的input中添加 autocomplete="off"; eg: <input type="text" autocomplete="off" name</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>