patient-0525

认识HTML

HTML介绍

HTML全称是超文本标记语言（Hyper Text Markup Language），它是一种标记语言，由各种“标签”组成。它没有语法，没有逻辑（如选择、循环等），只是用来表示信息，因此它并不是一种编程语言。
需要表达的信息通过HTML的一定规则写成HTML文件，就可以在浏览器上运行（浏览器已经帮我们实现了这部分接口，但不同的浏览器展示出来的效果可能不同，通常以谷歌或Edge浏览器为准）。

HTML结构

HTML由标签组成，形如：XXX内容<\body>就是一个标签。
是开始标签，<\body>是结束标签
HTML中大部分标签都是像这样成对出现的，有开始有结束。不过也有部分标签是单标签，即只有开始标签，例如：换行标签
开始标签中可能会有id和name属性，id属性用来唯一标识该标签。

HTML可以直接在记事本中写，只需要把后缀名改为html即可。
一个最简单的HTML文件为：

接着把后缀名改为html就可以双击运行：

当然，像这样的写法并不符合HTML的规范，实际上HTML具有一定的鲁棒性，即对于错误具有一定的包容性。
HTML的基本结构实际上应该是这样的：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    
body>
html>

这里面包含了一部分基础属性，例如指定了文档语言为英语，当我们在浏览器中访问时，会给予我们提示：

通过F12（或者右键->检查）打开开发者模式，查看HTML：

<\title></code>中写文档标题，在<code><body><\body></code>中写文档内容（所有的内容都写在这里）。 当然这个格式不需要我们特意去记，在vscode中输入! + table即可自动生成： <a href="http://img.e-com-net.com/image/info8/8eff2e009e4f41c8a5fe82622285989b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8eff2e009e4f41c8a5fe82622285989b.jpg" alt="认识HTML_第4张图片" width="650" height="194" style="border:1px solid black;"></a> <h1>HTML常用标签</h1> HTML常用标签包括：注释标签、标题标签、段落标签、换行标签、格式化标签、图片标签、超链接标签、表格标签以及表单标签，除此之外，还有无语义标签。 <h2>注释标签</h2> <code></code>，在vscode中，还可以使用快捷键ctrl+/来注释/取消注释（这点和IDEA的注释一样）。 注释中的内容在页面上不会展示，但是在开发者模式下可以看到，例如这样一个html文件： <a href="http://img.e-com-net.com/image/info8/314df7945ed847dfbc17232895759e94.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/314df7945ed847dfbc17232895759e94.jpg" alt="认识HTML_第5张图片" width="650" height="315" style="border:1px solid black;"></a> 在浏览器上运行：（注意vscode没有自动保存，需要手动保存或者自己设置自动保存） <a href="http://img.e-com-net.com/image/info8/9a21d59ee4374256a62641cad6653c30.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9a21d59ee4374256a62641cad6653c30.jpg" alt="认识HTML_第6张图片" width="650" height="406" style="border:1px solid black;"></a> 可以看到页面上虽然看不到注释，但是在开发者模式下可以看到。因此这个注释不能乱写！ <h2>标题标签</h2> 标题标签是一个单标签，共有六个等级：<code><h1></code>表示一级标题，<code><h2></code>表示二级标题，以此类推，<code><h6></code>表示六级标题。 像这里的常用标签就是一级标题，而标题标签等就是二级标题。 <h2>段落标签和换行标签</h2> 在使用HTML表示一长串的文本时，往往需要分段和换行，但是HTML并不能自动识别换行符，例如： <a href="http://img.e-com-net.com/image/info8/0d78693ac7454f3eb95b8ae3404a6d43.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0d78693ac7454f3eb95b8ae3404a6d43.jpg" alt="认识HTML_第7张图片" width="650" height="261" style="border:1px solid black;"></a> （使用lorem可以自动生成一个很长的字符串）这里我们使用了两个换行符来表示这是三段或者三句话，但实际上运行时并不能将其分成三段，而是变成了一个更长的字符串：<a href="http://img.e-com-net.com/image/info8/aa480531ea994f07909287bdb3929739.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/aa480531ea994f07909287bdb3929739.jpg" alt="认识HTML_第8张图片" width="650" height="406" style="border:1px solid black;"></a> 使用<code><\p></code>标签来表示一个段落，把三个随机生成的字符串都放到这个标签里就可以变为三个段落： <a href="http://img.e-com-net.com/image/info8/d748abfee2034c15a0423aa3a497a907.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d748abfee2034c15a0423aa3a497a907.jpg" alt="修改后" width="650" height="93"></a> 此时刷新页面得到： <a href="http://img.e-com-net.com/image/info8/bd712da73c494dbd960727f847c28c3c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bd712da73c494dbd960727f847c28c3c.jpg" alt="认识HTML_第9张图片" width="650" height="406" style="border:1px solid black;"></a> 实际上文章分段后应该首行缩进两个字符，不过仅靠HTML做不到，要实现缩进，需要搭配CSS： <a href="http://img.e-com-net.com/image/info8/9d9e924eaaf44732a1492e23554a31a9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9d9e924eaaf44732a1492e23554a31a9.jpg" alt="认识HTML_第10张图片" width="650" height="284" style="border:1px solid black;"></a> 结果： <a href="http://img.e-com-net.com/image/info8/9d48d9cd6b684393be08d2518d19eece.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9d48d9cd6b684393be08d2518d19eece.jpg" alt="认识HTML_第11张图片" width="650" height="406" style="border:1px solid black;"></a> <hr> 换行标签为<code> </code>，可以搭配p标签使用。 <h2>格式化标签</h2> 格式化标签包括加粗、斜体、删除线、下划线： <ul> <li>加粗：使用<code></code>内容<code><\b></code>或<code></code>内容<code><\strong></code>；</li> <li>斜体：使用<code></code>内容<code><\i></code>或<code></code>内容<code><\em></code>；</li> <li>删除线：使用<code><s></code>内容<code><\s></code>或<code><del></code>内容<code><\del></code>；</li> <li>下划线：使用<code></code>内容<code><\u></code>或<code><ins></code>内容<code><\ins></code>； 实际开发中，通常使用CSS进行格式化处理，HTML的格式化标签使用较少。</li> </ul> <h2>图片标签</h2> 即<code><img src="图片地址"></code>。图片标签必须带有src属性，用来表示图片地址，这个地址可以是网络地址或者本地地址（本地地址也可以是绝对地址或相对地址）。 网络地址只有在有网的情况下才能看到（同时图片作者未删除）。 绝对地址无论html文件在哪里都可以访问。 相对地址是以html的地址为基础的地址，假如图片在html文件的上级目录下，使用…/可以表示上级目录，上两级就…/两次。 图片标签中除了src属性外，还有一些其他的属性： <ul> <li>alt 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.</li> <li>title: 提示文本. 鼠标放到图片上, 就会有提示.</li> <li>width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.</li> <li>border:边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.</li> </ul> <h2>超链接标签</h2> <code><a href="目标链接"></code>内容<code><\a></code>。当我们点击这里的“内容”，就会自动跳转到目标链接（默认覆盖当前页面，即默认target=_self）。假如想在新页面中打开需要设置属性target=_blank。 例如这样写： <pre><code class="prism language-html"><a href="https://cn.bing.com/" target="_blank">必应</a> </code></pre> 刷新页面后就能看到： <a href="http://img.e-com-net.com/image/info8/5d8e00da38364a2ba56b5eb410895285.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5d8e00da38364a2ba56b5eb410895285.jpg" alt="认识HTML_第12张图片" width="650" height="242" style="border:1px solid black;"></a> 这个超链接除了可以是外部链接外，还可以是内部链接、空链接、下载链接、网页元素链接、锚点链接。 <ul> <li>内部链接：网站内部网页的链接。只写相对路径即可。</li> <li>空链接：链接地址不写，用#占位。点击空链接不会导致网页跳转，而是停在本页面（不会刷新），如果设置target=_blank则创建新页面。</li> <li>下载链接：链接地址为要下载的文件（可以是zip格式）。例如：</li> </ul> <pre><code class="prism language-html"><a href="helloWorld.zip">下载文件</a><br> </code></pre> <a href="http://img.e-com-net.com/image/info8/1e44facd0b864ded91aecded5d97b6c5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1e44facd0b864ded91aecded5d97b6c5.jpg" alt="认识HTML_第13张图片" width="650" height="382" style="border:1px solid black;"></a> <ul> <li>网页元素链接：网页中的任何元素都可以变成超链接，只需要把元素放在<code><a>````<\a></code>中间即可：</li> </ul> <pre><code class="prism language-html"><a href="https://weibo.com/p/100808aa0493c31b2e6cce5434c891d35da716/super_index" target="_blank"> <img src="C:\Users\douyiya\Pictures\Saved Pictures\nanase.jpg" width="300px" title="nishino nanase" alt="nishino nanase"></a><br> <a href="C:\Users\douyiya\Pictures\Saved Pictures\nanase.zip">下载图片</a><br> </code></pre> 效果： <a href="http://img.e-com-net.com/image/info8/7785c20234dc412fa3e2f9f3a23eef0f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7785c20234dc412fa3e2f9f3a23eef0f.jpg" alt="认识HTML_第14张图片" width="650" height="714" style="border:1px solid black;"></a> <ul> <li>锚点链接：可以快速定位到当前页面的目标位置，相当于目录。既然有目录，就需要有标题，标题可以设置属性id，而链接地址写成#+id就可以直接定位到目标位置(不一定非得是标题标签id，也可以是段落的标签id或其他标签id)： <code><a href="#+标签id"></code>目标标签内容<code><\a></code>。 例如：</li> </ul> <pre><code class="prism language-html"><a href="#1">第一段</a><br> <a href="#2">第二段</a><br> <a href="#3">第三段</a><br> <a href="#4">第四段</a><br> <a href="#5">第五段</a><br> <a href="#6">第六段</a><br> <p id = "1"> 此开卷第一回也．作者自云：因曾历过一番梦幻之后，故将真事隐去，而借"通灵"之说，撰此《石头记》一书也．故曰"甄士隐"云云．但书中所记何事何人？自又云：“今风尘碌碌，一事无成，忽念及当日所有之女子，一一细考较去，觉其行止见识，皆出于我之上．何我堂堂须眉，诚不若彼裙钗哉？实愧则有余，悔又无益之大无可如何之日也！当此，则自欲将已往所赖天恩祖德，锦衣纨绔之时，饫甘餍肥之日，背父兄教育之恩，负师友规谈之德，以至今日一技无成，半生潦倒之罪，编述一集，以告天下人：我之罪固不免，然闺阁中本自历历有人，万不可因我之不肖，自护己短，一并使其泯灭也．虽今日之茅椽蓬牖，瓦灶绳床，其晨夕风露，阶柳庭花，亦未有妨我之襟怀笔墨者．虽我未学，下笔无文，又何妨用假语村言，敷演出一段故事来，亦可使闺阁昭传，复可悦世之目，破人愁闷，不亦宜乎？ "故曰"贾雨村"云云． </p> <p id = "2"> 此回中凡用“梦”用“幻”等字，是提醒阅者眼目，亦是此书立意本旨．<br> 列位看官：你道此书从何而来？说起根由虽近荒唐，细按则深有趣味．待在下将此来历注明，方使阅者了然不惑．<br> 原来女娲氏炼石补天之时，于大荒山无稽崖练成高经十二丈，方经二十四丈顽石三万六千五百零一块．娲皇氏只用了三万六千五百块，只单单剩了一块未用，便弃在此山青埂峰下．谁知此石自经煅炼之后，灵性已通，因见众石俱得补天，独自己无材不堪入选，遂自怨自叹，日夜悲号惭愧． </p> <p id = "3"> 一日，正当嗟悼之际，俄见一僧一道远远而来，生得骨骼不凡，丰神迥异，说说笑笑来至峰下，坐于石边高谈快论．先是说些云山雾海神仙玄幻之事，后便说到红尘中荣华富贵．此石听了，不觉打动凡心，也想要到人间去享一享这荣华富贵，但自恨粗蠢，不得已，便口吐人言，向那僧道说道：“大师，弟子蠢物，不能见礼了．适闻二位谈那人世间荣耀繁华，心切慕之．弟子质虽粗蠢，性却稍通，况见二师仙形道体，定非凡品，必有补天济世之材，利物济人之德．如蒙发一点慈心，携带弟子得入红尘，在那富贵场中，温柔乡里受享几年，自当永佩洪恩，万劫不忘也。”二仙师听毕，齐憨笑道：“善哉，善哉！那红尘中有却有些乐事，但不能永远依恃，况又有`美中不足，好事多魔'八个字紧相连属，瞬息间则又乐极悲生，人非物换，究竟是到头一梦，万境归空，倒不如不去的好。”这石凡心已炽，那里听得进这话去，乃复苦求再四．二仙知不可强制，乃叹道：“此亦静极怂级*，无中生有之数也．既如此，我们便携你去受享受享，只是到不得意时，切莫后悔。”石道：“自然，自然。” 那僧又道：“若说你性灵，却又如此质蠢，并更无奇贵之处．如此也只好踮脚而已．也罢，我如今大施佛法助你助，待劫终之日，复还本质，以了此案．你道好否？"石头听了，感谢不尽．那僧便念咒书符，大展幻术，将一块大石登时变成一块鲜明莹洁的美玉，且又缩成扇坠大小的可佩可拿．那僧托于掌上，笑道：“形体倒也是个宝物了！还只没有，实在的好处，须得再镌上数字，使人一见便知是奇物方妙．然后携你到那昌明隆盛之邦，诗礼簪缨之族，花柳繁华地，温柔富贵乡去安身乐业。”石头听了，喜不能禁，乃问：“不知赐了弟子那几件奇处，又不知携了弟子到何地方？望乞明示，使弟子不惑。” 那僧笑道：“你且莫问，日后自然明白的。”说着，便袖了这石，同那道人飘然而去，竟不知投奔何方何舍． </p> <p id="4"> 后来，又不知过了几世几劫，因有个空空道人访道求仙，忽从这大荒山无稽崖青埂峰下经过，忽见一大块石上字迹分明，编述历历．空空道人乃从头一看，原来就是无材补天，幻形入世，蒙茫茫大士，渺渺真人携入红尘，历尽离合悲欢炎凉世态的一段故事．后面又有一首偈云：<br> 　　无材可去补苍天，枉入红尘若许年．<br> 　　此系身前身后事，倩谁记去作奇传？<br> 诗后便是此石坠落之乡，投胎之处，亲自经历的一段陈迹故事．其中家庭闺阁琐事，以及闲情诗词倒还全备，或可适趣解闷，然朝代年纪，地舆邦国，却反失落无考． </p> <p id="5"> 空空道人遂向石头说道：“石兄，你这一段故事，据你自己说有些趣味，故编写在此，意欲问世传奇．据我看来，第一件，无朝代年纪可考，第二件，并无大贤大忠理朝廷治风俗的善政，其中只不过几个异样女子，或情或痴，或小才微善，亦无班姑，蔡女之德能．我纵抄去，恐世人不爱看呢。”石头笑答道：“我师何太痴耶！若云无朝代可考，今我师竟假借汉唐等年纪添缀，又有何难？但我想，历来野史，皆蹈一辙，莫如我这不借此套者，反倒新奇别致，不过只取其事体情理罢了，又何必拘拘于朝代年纪哉！再者，市井俗人喜看理治之书者甚少，爱适趣闲文者特多．历来野史，或讪谤君相，或贬人妻女，奸滢凶恶，不可胜数．更有一种风月笔墨，其滢秽污臭，屠毒笔墨，坏人子弟，又不可胜数．至若佳人才子等书，则又千部共出一套，且其中终不能不涉于滢滥，以致满纸潘安，子建，西子，文君，不过作者要写出自己的那两首情诗艳赋来，故假拟出男女二人名姓，又必旁出一小人其间拨乱，亦如剧中之小丑然．且鬟婢开口即者也之乎，非文即理．故逐一看去，悉皆自相矛盾，大不近情理之话，竟不如我半世亲睹亲闻的这几个女子，虽不敢说强似前代书中所有之人，但事迹原委，亦可以消愁破闷，也有几首歪诗熟话，可以喷饭供酒．至若离合悲欢，兴衰际遇，则又追踪蹑迹，不敢稍加穿凿，徒为供人之目而反失其真传者．今之人，贫者日为衣食所累，富者又怀不足之心，纵然一时稍闲，又有贪滢恋色，好货寻愁之事，那里去有工夫看那理治之书？所以我这一段故事，也不愿世人称奇道妙，也不定要世人喜悦检读，只愿他们当那醉滢饱卧之时，或避世去愁之际，把此一玩，岂不省了些寿命筋力？就比那谋虚逐妄，却也省了口舌是非之害，腿脚奔忙之苦．再者，亦令世人换新眼目，不比那些胡牵乱扯，忽离忽遇，满纸才人淑女，子建文君红娘小玉等通共熟套之旧稿．我师意为何如？” </p> <p id="6"> 空空道人听如此说，思忖半晌，将《石头记》再检阅一遍，因见上面虽有些指奸责佞贬恶诛邪之语，亦非伤时骂世之旨，及至君仁臣良父慈子孝，凡轮常所关之处，皆是称功颂德，眷眷无穷，实非别书之可比．虽其中大旨谈情，亦不过实录其事，又非假拟妄称，一味滢邀艳约，私订偷盟之可比．因毫不干涉时世，方从头至尾抄录回来，问世传奇．从此空空道人因空见色，由色生情，传情入色，自色悟空，遂易名为情僧，改《石头记》为《情僧录》．东鲁孔梅溪则题曰《风月宝鉴》．后因曹雪芹于悼红轩中披阅十载，增删五次，纂成目录，分出章回，则题曰《金陵十二钗》．并题一绝云：<br> 　　满纸荒唐言，一把辛酸泪！<br> 　　都云作者痴，谁解其中味？<br> </p> </code></pre> 实现效果： <a href="http://img.e-com-net.com/image/info8/fffe312e58794b8ca266faceb09cf7ad.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fffe312e58794b8ca266faceb09cf7ad.jpg" alt="认识HTML_第15张图片" width="650" height="332" style="border:1px solid black;"></a> 点击相应段落即可跳转（相当于目录） <h2>表格标签</h2> table表示整个表格，tr表示表格的一行，td表示一个单元格，th表示表头单元格，但会居中加粗，thread表示表格的头部区域（范围比th大），tbody表示表格得到主题区域。 table标签中的一些属性： <ul> <li>align：表示表格的对齐方式（注意是整张表格）</li> <li>border：表格的边框大小，数字越大边框越粗，不写内容表示无边框。</li> <li>width/weight：表格尺寸</li> <li>cellpadding: 内容距离边框的距离, 默认 1 像素</li> <li>cellspacing: 单元格之间的距离. 默认为 2 像素 表格样式：</li> </ul> <pre><code class="prism language-html"> <table align="center" border="1" width="500px">  <tr> <th>姓名</th><th>性别</th><th>年龄</th> </tr> <tr> <td align="center">张三</td><td align="center">男</td><td align="center">19</td> </tr> <tr> <td align="center">李四</td><td align="center">女</td><td align="center">22</td> </tr> <tr> <td align="center">王五</td><td align="center">女</td><td align="center">20</td> </tr> <tr> <td align="center">李林</td><td align="center">男</td><td align="center">26</td> </tr> </table> </code></pre> 结果展示： <a href="http://img.e-com-net.com/image/info8/2139403109a14a68af0e070bfd24c883.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2139403109a14a68af0e070bfd24c883.jpg" alt="表格" width="650" height="90"></a> 单元格之间可以合并： 行合并：rowspan=“n” 列合并：colsoan=“n” n为从当前开始数的行数或列数 合并前需要删除要被合并的列数（第一行或列不删） 例如这里的李四王五性别这一栏可以合并（行合并）： 需要把王五的性别这一栏先删去，然后在李四的性别标签添加属性rowspan=“2”，其余行列不变，即： <pre><code class="prism language-html"> <tr> <td align="center">李四</td><td align="center" rowspan="2">女</td><td align="center">22</td> </tr> <tr> <td align="center">王五</td><td align="center">20</td> </tr> </code></pre> 结果为： <a href="http://img.e-com-net.com/image/info8/f2de215d533a4a2ca4576b54b0968130.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f2de215d533a4a2ca4576b54b0968130.jpg" alt="合并后的表格" width="650" height="86"></a> <h2>列表标签</h2> 列表分为无序列表、有序列表和自定义列表，通过HTML设置的无序列表和有序列表和CSDN一键设置的列表一样： <a href="http://img.e-com-net.com/image/info8/2938e581e3804cb9935363bf27639be5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2938e581e3804cb9935363bf27639be5.jpg" alt="认识HTML_第16张图片" width="650" height="110" style="border:1px solid black;"></a> <code><ul></code>列表内容<code><\ul></code>为无序列表标签 <code><ol></code>列表内容<code><\ol></code>为有序列表标签 列表中需要加上标签<code><li></code>和<code><\li></code>来表示一条内容 例如一个无序列表为： <pre><code class="prism language-html"> <ul> <li>特性一</li> <li>特性二</li> <li>特性三</li> <li>特性四</li> </ul> </code></pre> 结果为： <a href="http://img.e-com-net.com/image/info8/5e32a2833b6841638015e10a5f5ccfa1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5e32a2833b6841638015e10a5f5ccfa1.jpg" alt="认识HTML_第17张图片" width="339" height="242" style="border:1px solid black;"></a> 有序列表只需要将ul改为ol即可。 自定义列表明显不同于以上两种列表，它包含<code><dl></code>、<code><dt></code>和<code><dd></code>。三个标签都是成对出现的。 dl表示总标签，dt表示小标题（可以看作是子标签），dd表示dt中的内容。例如： <pre><code class="prism language-html"> <dl> <dt>方案一</dt> <dd>首先</dd> <dd>接着</dd> <dd>最后</dd> <dt>方案二</dt> <dd>先这样</dd> <dd>接着怎么样</dd> <dd>然后那样</dd> <dd>最后这样</dd> </dl> </code></pre> 输出结果： <a href="http://img.e-com-net.com/image/info8/d320b0ee4a83409294558150170a6709.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d320b0ee4a83409294558150170a6709.jpg" alt="认识HTML_第18张图片" width="618" height="479" style="border:1px solid black;"></a> <h2>表单标签</h2> 调查问卷就是一个表单，表单是用来收集用户信息的重要手段。 表单中最重要的标签就是<code><form></code>标签和<code><input></code>标签。其中input标签为单标签。 <h3>form和input标签</h3> <code><form></code>标签描述了要把数据按照什么方式, 提交到哪个页面中（需要结合服务器和网络编程知识）： <pre><code class="prism language-html"><form action="这里输入要提交的目的地址"> 表单内容 <\form> </code></pre> <code><input></code>标签有多种输入控件：单选框、复选框、单行文本框、按钮。 input中checked属性为默认选中，用于单选框和复选框；maxlength表示输入的最大字符长度；value表示input默认值；name用于表示该input啊标签的名字。 单选框：需要设置type属性为radio，同时要把所有选项设置相同的name属性（单选框的选项之间必须具有相同的name属性才能进行多选一）。 复选框：需要设置type属性为checkbox。 单行文本框：分为普通文本框和密码框。普通文本框设置type属性为txt，密码框设置type属性为password。 按钮：按钮分为普通按钮、提交按钮和清空按钮。普通按钮需要设置type属性为button，需要搭配JS才能发挥作用；提交按钮就需要设置type属性为submit，提交按钮必须放在form标签下，点击后会尝试发送给服务器；清空按钮就需要设置type属性为reset，清空按钮必须放在form中，点击后会重置用户输入的内容。按钮除了设置type属性外，还要设置value属性（显示在按钮上，用来表示该按钮的功能），假如不设置value，那么就找不到按钮，也就无法点击。 例如设计这样一份表单： <pre><code class="prism language-html"> <form action="https://cn.bing.com/">  用户名： <input type="text"><br>  密码： <input type="password"><br>  性别： <input type="radio" name="sex">男 <input type="radio" name="sex">女<br>  爱好： <input type="checkbox">唱 <input type="checkbox">跳 <input type="checkbox">rap <input type="checkbox">篮球<br>  <input type="button" value="普通按钮"> <input type="submit" value="提交"> <input type="reset" value="清空">   </form> </code></pre> <a href="http://img.e-com-net.com/image/info8/6e714b593b37453186978c6ad52f117f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6e714b593b37453186978c6ad52f117f.jpg" alt="认识HTML_第19张图片" width="650" height="211" style="border:1px solid black;"></a> 此时点击提交可以跳转到bing搜素页面。 除此之外input还可以插入文件：type属性设置为file即可。 <a href="http://img.e-com-net.com/image/info8/98a9d1b0fe8441b89a2c08255f054320.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/98a9d1b0fe8441b89a2c08255f054320.jpg" alt="认识HTML_第20张图片" width="629" height="331" style="border:1px solid black;"></a> <h3>其他标签</h3> select标签：即下拉选框。在<code><select></code>标签中每一个选项用<code><option></code>标签进行区分： <pre><code class="prism language-html"> 选择你的出生年份： <select> <option>1995</option> <option>1996</option> <option>1997</option> <option>1998</option> <option>1999</option> <option>2000</option> <option>2001</option> <option>2002</option> <option>2003</option> <option>2004</option> <option>2005</option> </select><br> <textarea rows="3" cols="50"></textarea><br> </code></pre> <a href="http://img.e-com-net.com/image/info8/8e3a7f063a534e939b735b4867500825.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8e3a7f063a534e939b735b4867500825.jpg" alt="认识HTML_第21张图片" width="650" height="721" style="border:1px solid black;"></a> option标签中可以设置selected属性="selected"表示该标签内容默认选中，如果不设置则第一个标签内容为默认选中。 textarea标签：多行文本框。 <pre><code class="prism language-html"> <textarea rows="3" cols="50"></textarea><br> </code></pre> 即设置三行，每行最大长度为50个字符。 <h2>无语义标签</h2> 无语义标签不提供关于其内容信息的标签，只用来进行页面布局。<code><div></code>和<code></code>就是无语义标签： <pre><code class="prism language-html"> <div> <span>内容一</span> <span>内容二</span> <span>内容三</span> </div> <div> <span>内容四</span> <span>内容五</span> <span>内容六</span> </div> </code></pre> <a href="http://img.e-com-net.com/image/info8/32c97288cf584e019779fbed241028d1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/32c97288cf584e019779fbed241028d1.jpg" alt="认识HTML_第22张图片" width="445" height="129" style="border:1px solid black;"></a> 而像前面的所有标签，都有其作用，均为语义标签。 <h1>HTML特殊字符</h1> HTML中也有一些特定的符号用来表示特定的功能，因此要单纯地使用这些符号而不是使用功能，就需要进行转译，即使用字符实体表示。 HTML中的特殊符号包括：“<”、“>”、“&”、" "等。 <ul> <li>" "：使用<code> </code>表示</li> <li>“<”：使用<code><</code>表示</li> <li>“>”：使用<code>></code>表示</li> <li>“&”：使用<code>&</code>表示 字符实体除了可以表示这些特殊符号外，还可以表示一些键盘不能表示的符号，如数学运算符号、箭头、技术符号和形状等。 HTML符号实体参考手册 对于无法表示的符号，可以采用十进制或十六进制引用。</li> </ul> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1667902218487029760"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(html,前端,javascript)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> igotyback <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> igotyback <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> 某公司摸鱼前端 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> 彩云飘过 <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> STU学生网页设计 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835497792265613312.htm" title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a> 加密社 <a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</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><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> 小猿L <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835448238103162880.htm" title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a> 苹果酱0567 <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/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>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div> </li> <li><a href="/article/1835448239864770560.htm" title="JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）" target="_blank">JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）</a> 跳房子的前端 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/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><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> 2401_85194651 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> 有一只柴犬 <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835435141535723520.htm" title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a> 夜空_2cd3 <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div> </li> <li><a href="/article/1835428948339683328.htm" title="JavaScript `Map` 和 `WeakMap`详细解释" target="_blank">JavaScript `Map` 和 `WeakMap`详细解释</a> 跳房子的前端 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95/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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键</div> </li> <li><a href="/article/1835428317084348416.htm" title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a> 全能全知者 <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/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/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div> </li> <li><a href="/article/1835427057752961024.htm" title="补充元象二面" target="_blank">补充元象二面</a> Redstone Monstrosity <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重</div> </li> <li><a href="/article/1835420753252675584.htm" title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a> jun778895 <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</div> </li> <li><a href="/article/1835419870070665216.htm" title="切换淘宝最新npm镜像源是" target="_blank">切换淘宝最新npm镜像源是</a> hai40587 <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><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库</div> </li> <li><a href="/article/1835411044768509952.htm" title="字节二面" target="_blank">字节二面</a> Redstone Monstrosity <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div> </li> <li><a href="/article/1835403246865313792.htm" title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a> 和自己一起成长 <div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div> </li> <li><a href="/article/1835398064727224320.htm" title="前端代码上传文件" target="_blank">前端代码上传文件</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>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div> </li> <li><a href="/article/1835395039572881408.htm" title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a> 清风怎不知意 <a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</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>许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用</div> </li> <li><a href="/article/1835389111658180608.htm" title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a> 陈在天box <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/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在</div> </li> <li><a href="/article/1835387977480630272.htm" title="【C语言】- 自定义类型：结构体、枚举、联合" target="_blank">【C语言】- 自定义类型：结构体、枚举、联合</a> Cavalier_01 <a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a> <div>【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523</div> </li> <li><a href="/article/1835385458356482048.htm" title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a> 2401_85123349 <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。</div> </li> <li><a href="/article/1835383919906746368.htm" title="高性能javascript--算法和流程控制" target="_blank">高性能javascript--算法和流程控制</a> 海淀萌狗 <div>-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i</div> </li> <li><a href="/article/1835382685745377280.htm" title="html+css网页设计旅游网站首页1个页面" target="_blank">html+css网页设计旅游网站首页1个页面</a> html+css+js网页设计 <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/%E6%97%85%E6%B8%B8/1.htm">旅游</a> <div>html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击</div> </li> <li><a href="/article/1835379153730367488.htm" title="spring mvc @RequestBody String类型参数" target="_blank">spring mvc @RequestBody String类型参数</a> zoyation <a class="tag" taget="_blank" href="/search/spring-mvc/1.htm">spring-mvc</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a> <div>通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ</div> </li> <li><a href="/article/1835377684025274368.htm" title="ubuntu安装opencv最快的方法" target="_blank">ubuntu安装opencv最快的方法</a> Derek重名了 <div>最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html</div> </li> <li><a href="/article/53.htm" title="二分查找排序算法" target="_blank">二分查找排序算法</a> 周凡杨 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><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/%E6%8E%92%E5%BA%8F/1.htm">排序</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%8A%98%E5%8D%8A/1.htm">折半</a> <div> 一：概念二分查找又称折半查找（折半搜索/ 二分搜索），优点是比较次数少，查找速度快，平均性能好；其缺点是要求待查表为有序表，且插入删除困难。因此，折半查找方法适用于不经常变动而查找频繁的有序列表。首先，假设表中元素是按升序排列，将表中间位置记录的关键字与查找关键字比较，如果两者相等，则查找成功；否则利用中间位置记录将表分成前、后两个子表，如果中间位置记录的关键字大于查找关键字，则进一步</div> </li> <li><a href="/article/180.htm" title="java中的BigDecimal" target="_blank">java中的BigDecimal</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/BigDecimal/1.htm">BigDecimal</a> <div> 在项目开发过程中出现精度丢失问题，查资料用BigDecimal解决，并发现如下这篇BigDecimal的解决问题的思路和方法很值得学习，特转载。原文地址：http://blog.csdn.net/ugg/article/de</div> </li> <li><a href="/article/307.htm" title="Shell echo命令详解" target="_blank">Shell echo命令详解</a> daizj <a class="tag" taget="_blank" href="/search/echo/1.htm">echo</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a> <div>Shell echo命令 Shell 的 echo 指令与 PHP 的 echo 指令类似，都是用于字符串的输出。命令格式： echo string 您可以使用echo实现更复杂的输出格式控制。 1.显示普通字符串: echo "It is a test" 这里的双引号完全可以省略，以下命令与上面实例效果一致： echo Itis a test 2.显示转义</div> </li> <li><a href="/article/434.htm" title="Oracle DBA 简单操作" target="_blank">Oracle DBA 简单操作</a> 周凡杨 <a class="tag" taget="_blank" href="/search/oracle+dba+sql/1.htm">oracle dba sql</a> <div> --执行次数多的SQL select sql_text,executions from ( select sql_text,executions from v$sqlarea order by executions desc ) where rownum<81; &nb</div> </li> <li><a href="/article/561.htm" title="画图重绘" target="_blank">画图重绘</a> 朱辉辉33 <a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a> <div> 我第一次接触重绘是编写五子棋小游戏的时候，因为游戏里的棋盘是用线绘制的，而这些东西并不在系统自带的重绘里，所以在移动窗体时，棋盘并不会重绘出来。所以我们要重写系统的重绘方法。在重写系统重绘方法时，我们要注意一定要调用父类的重绘方法，即加上super.paint(g)，因为如果不调用父类的重绘方式，重写后会把父类的重绘覆盖掉，而父类的重绘方法是绘制画布，这样就导致我们</div> </li> <li><a href="/article/688.htm" title="线程之初体验" target="_blank">线程之初体验</a> 西蜀石兰 <a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B/1.htm">线程</a> <div>一直觉得多线程是学Java的一个分水岭，懂多线程才算入门。之前看《编程思想》的多线程章节，看的云里雾里，知道线程类有哪几个方法，却依旧不知道线程到底是什么？书上都写线程是进程的模块，共享线程的资源，可是这跟多线程编程有毛线的关系，呜呜。。。线程其实也是用户自定义的任务，不要过多的强调线程的属性，而忽略了线程最基本的属性。你可以在线程类的run()方法中定义自己的任务，就跟正常的Ja</div> </li> <li><a href="/article/815.htm" title="linux集群互相免登陆配置" target="_blank">linux集群互相免登陆配置</a> 林鹤霄 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>配置ssh免登陆 1、生成秘钥和公钥 ssh-keygen -t rsa 2、提示让你输入，什么都不输，三次回车之后会在~下面的.ssh文件夹中多出两个文件id_rsa 和 id_rsa.pub 其中id_rsa为秘钥，id_rsa.pub为公钥，使用公钥加密的数据只有私钥才能对这些数据解密 c</div> </li> <li><a href="/article/942.htm" title="mysql : Lock wait timeout exceeded; try restarting transaction" target="_blank">mysql : Lock wait timeout exceeded; try restarting transaction</a> aigo <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>原文：http://www.cnblogs.com/freeliver54/archive/2010/09/30/1839042.html 原因是你使用的InnoDB 表类型的时候, 默认参数:innodb_lock_wait_timeout设置锁等待的时间是50s, 因为有的锁等待超过了这个时间,所以抱错. 你可以把这个时间加长,或者优化存储</div> </li> <li><a href="/article/1069.htm" title="Socket编程基本的聊天实现。" target="_blank">Socket编程基本的聊天实现。</a> alleni123 <a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a> <div>public class Server { //用来存储所有连接上来的客户 private List<ServerThread> clients; public static void main(String[] args) { Server s = new Server(); s.startServer(9988); } publi</div> </li> <li><a href="/article/1196.htm" title="多线程监听器事件模式(一个简单的例子)" target="_blank">多线程监听器事件模式(一个简单的例子)</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B/1.htm">线程</a><a class="tag" taget="_blank" href="/search/%E7%9B%91%E5%90%AC%E6%A8%A1%E5%BC%8F/1.htm">监听模式</a> <div> 多线程的事件监听器模式监听器时间模式经常与多线程使用,在多线程中如何知道我的线程正在执行那什么内容,可以通过时间监听器模式得到创建多线程的事件监听器模式思路: 1, 创建线程并启动,在创建线程的位置设置一个标记 2,创建队</div> </li> <li><a href="/article/1323.htm" title="spring InitializingBean接口" target="_blank">spring InitializingBean接口</a> bijian1013 <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>spring的事务的TransactionTemplate，其源码如下： public class TransactionTemplate extends DefaultTransactionDefinition implements TransactionOperations, InitializingBean{ ... } TransactionTemplate继承了DefaultT</div> </li> <li><a href="/article/1450.htm" title="Oracle中询表的权限被授予给了哪些用户" target="_blank">Oracle中询表的权限被授予给了哪些用户</a> bijian1013 <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E6%9D%83%E9%99%90/1.htm">权限</a> <div> Oracle查询表将权限赋给了哪些用户的SQL，以备查用。 select t.table_name as "表名", t.grantee as "被授权的属组", t.owner as "对象所在的属组"</div> </li> <li><a href="/article/1577.htm" title="【Struts2五】Struts2 参数传值" target="_blank">【Struts2五】Struts2 参数传值</a> bit1129 <a class="tag" taget="_blank" href="/search/struts2/1.htm">struts2</a> <div>Struts2中参数传值的3种情况 1.请求参数绑定到Action的实例字段上 2.Action将值传递到转发的视图上 3.Action将值传递到重定向的视图上一、请求参数绑定到Action的实例字段上以及Action将值传递到转发的视图上 Struts可以自动将请求URL中的请求参数或者表单提交的参数绑定到Action定义的实例字段上，绑定的规则使用ognl表达式语言</div> </li> <li><a href="/article/1704.htm" title="【Kafka十四】关于auto.offset.reset[Q/A]" target="_blank">【Kafka十四】关于auto.offset.reset[Q/A]</a> bit1129 <a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a> <div>I got serveral questions about auto.offset.reset. This configuration parameter governs how consumer read the message from Kafka when there is no initial offset in ZooKeeper or </div> </li> <li><a href="/article/1831.htm" title="nginx gzip压缩配置" target="_blank">nginx gzip压缩配置</a> ronin47 <a class="tag" taget="_blank" href="/search/nginx+gzip+%E5%8E%8B%E7%BC%A9%E8%8C%83%E4%BE%8B/1.htm">nginx gzip 压缩范例</a> <div>nginx gzip压缩配置更多 0 nginx gzip 配置随着nginx的发展，越来越多的网站使用nginx，因此nginx的优化变得越来越重要，今天我们来看看nginx的gzip压缩到底是怎么压缩的呢？ gzip(GNU-ZIP)是一种压缩技术。经过gzip压缩后页面大小可以变为原来的30%甚至更小，这样，用</div> </li> <li><a href="/article/1958.htm" title="java-13.输入一个单向链表，输出该链表中倒数第 k 个节点" target="_blank">java-13.输入一个单向链表，输出该链表中倒数第 k 个节点</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>two cursors. Make the first cursor go K steps first. /* * 第 13 题：题目：输入一个单向链表，输出该链表中倒数第 k 个节点 */ public void displayKthItemsBackWard(ListNode head,int k){ ListNode p1=head,p2=head; </div> </li> <li><a href="/article/2085.htm" title="Spring源码学习-JdbcTemplate queryForObject" target="_blank">Spring源码学习-JdbcTemplate queryForObject</a> bylijinnan <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>JdbcTemplate中有两个可能会混淆的queryForObject方法： 1. Object queryForObject(String sql, Object[] args, Class requiredType) 2. Object queryForObject(String sql, Object[] args, RowMapper rowMapper) 第1个方法是只查</div> </li> <li><a href="/article/2212.htm" title="[冰川时代]在冰川时代,我们需要什么样的技术?" target="_blank">[冰川时代]在冰川时代,我们需要什么样的技术?</a> comsci <a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF/1.htm">技术</a> <div> 看美国那边的气候情况....我有个感觉...是不是要进入小冰期了? 那么在小冰期里面...我们的户外活动肯定会出现很多问题...在室内呆着的情况会非常多...怎么在室内呆着而不发闷...怎么用最低的电力保证室内的温度.....这都需要技术手段... &nb</div> </li> <li><a href="/article/2339.htm" title="js 获取浏览器型号" target="_blank">js 获取浏览器型号</a> cuityang <a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a> <div>根据浏览器获取iphone和apk的下载地址 <!DOCTYPE html> <html> <head> <meta charset="utf-8" content="text/html"/> <meta name=</div> </li> <li><a href="/article/2466.htm" title="C# socks5详解转" target="_blank">C# socks5详解转</a> dalan_123 <a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a> <div>http://www.cnblogs.com/zhujiechang/archive/2008/10/21/1316308.html 这里主要讲的是用.NET实现基于Socket5下面的代理协议进行客户端的通讯，Socket4的实现是类似的，注意的事，这里不是讲用C#实现一个代理服务器，因为实现一个代理服务器需要实现很多协议，头大，而且现在市面上有很多现成的代理服务器用，性能又好，</div> </li> <li><a href="/article/2593.htm" title="运维 Centos问题汇总" target="_blank">运维 Centos问题汇总</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/%E4%BA%91%E4%B8%BB%E6%9C%BA/1.htm">云主机</a> <div>一、sh 脚本不执行的原因 sh脚本不执行的原因只有2个 1.权限不够 2.sh脚本里路径没写完整。二、解决You have new mail in /var/spool/mail/root 修改/usr/share/logwatch/default.conf/logwatch.conf配置文件 MailTo = MailFrom 三、查询连接数</div> </li> <li><a href="/article/2720.htm" title="Yii防注入攻击笔记" target="_blank">Yii防注入攻击笔记</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</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/yii/1.htm">yii</a> <div>网站表单有注入漏洞须对所有用户输入的内容进行个过滤和检查，可以使用正则表达式或者直接输入字符判断，大部分是只允许输入字母和数字的，其它字符度不允许；对于内容复杂表单的内容，应该对html和script的符号进行转义替换：尤其是<,>,',"",&这几个符号这里有个转义对照表： http://blog.csdn.net/xinzhu1990/articl</div> </li> <li><a href="/article/2847.htm" title="MongoDB简介[一]" target="_blank">MongoDB简介[一]</a> eksliang <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/MongoDB%E7%AE%80%E4%BB%8B/1.htm">MongoDB简介</a> <div>MongoDB简介转载请出自出处：http://eksliang.iteye.com/blog/2173288 1.1易于使用 MongoDB是一个面向文档的数据库，而不是关系型数据库。与关系型数据库相比，面向文档的数据库不再有行的概念，取而代之的是更为灵活的“文档”模型。另外，不</div> </li> <li><a href="/article/2974.htm" title="zookeeper windows 入门安装和测试" target="_blank">zookeeper windows 入门安装和测试</a> greemranqq <a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E8%A3%85/1.htm">安装</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a> <div>一、序言以下是我对zookeeper 的一些理解： zookeeper 作为一个服务注册信息存储的管理工具，好吧，这样说得很抽象，我们举个“栗子”。栗子1号：假设我是一家KTV的老板，我同时拥有5家KTV，我肯定得时刻监视</div> </li> <li><a href="/article/3101.htm" title="Spring之使用事务缘由(2-注解实现)" target="_blank">Spring之使用事务缘由(2-注解实现)</a> ihuning <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div> Spring事务注解实现 1. 依赖包： 1.1 spring包： spring-beans-4.0.0.RELEASE.jar spring-context-4.0.0.</div> </li> <li><a href="/article/3228.htm" title="iOS App Launch Option" target="_blank">iOS App Launch Option</a> 啸笑天 <a class="tag" taget="_blank" href="/search/option/1.htm">option</a> <div>iOS 程序启动时总会调用application:didFinishLaunchingWithOptions:，其中第二个参数launchOptions为NSDictionary类型的对象，里面存储有此程序启动的原因。 launchOptions中的可能键值见UIApplication Class Reference的Launch Options Keys节。 1、若用户直接</div> </li> <li><a href="/article/3355.htm" title="jdk与jre的区别（_）" target="_blank">jdk与jre的区别（_）</a> macroli <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a> <div>简单的说JDK是面向开发人员使用的SDK，它提供了Java的开发环境和运行环境。SDK是Software Development Kit 一般指软件开发包，可以包括函数库、编译程序等。 JDK就是Java Development Kit JRE是Java Runtime Enviroment是指Java的运行环境，是面向Java程序的使用者，而不是开发者。如果安装了JDK，会发同你</div> </li> <li><a href="/article/3482.htm" title="Updates were rejected because the tip of your current branch is behind" target="_blank">Updates were rejected because the tip of your current branch is behind</a> qiaolevip <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/%E4%BC%97%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">众观千象</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a> <div>$ git push joe prod-2295-1 To git@git.dianrong.com:joe.le/dr-frontend.git ! [rejected] prod-2295-1 -> prod-2295-1 (non-fast-forward) error: failed to push some refs to 'git@git.dianron</div> </li> <li><a href="/article/3609.htm" title="[一起学Hive]之十四-Hive的元数据表结构详解" target="_blank">[一起学Hive]之十四-Hive的元数据表结构详解</a> superlxw1234 <a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/hive%E5%85%83%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">hive元数据结构</a> <div>关键字：Hive元数据、Hive元数据表结构之前在 “[一起学Hive]之一–Hive概述，Hive是什么”中介绍过，Hive自己维护了一套元数据，用户通过HQL查询时候，Hive首先需要结合元数据，将HQL翻译成MapReduce去执行。本文介绍一下Hive元数据中重要的一些表结构及用途，以Hive0.13为例。文章最后面，会以一个示例来全面了解一下，</div> </li> <li><a href="/article/3736.htm" title="Spring 3.2.14，4.1.7，4.2.RC2发布" target="_blank">Spring 3.2.14，4.1.7，4.2.RC2发布</a> wiselyman <a class="tag" taget="_blank" href="/search/Spring+3/1.htm">Spring 3</a> <div> Spring 3.2.14、4.1.7及4.2.RC2于6月30日发布。其中Spring 3.2.1是一个维护版本(维护周期到2016-12-31截止)，后续会继续根据需求和bug发布维护版本。此时，Spring官方强烈建议升级Spring框架至4.1.7 或者将要发布的4.2 。其中Spring 4.1.7主要包含这些更新内容。 </div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>