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/1882922632236560384.htm" title="python提出HTML中的连接和文本。" target="_blank">python提出HTML中的连接和文本。</a> laocooon523857886 <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>49LanguagesSimpleEnglishBahasaIndonesiaBahasaMelayuCataleskyDanskDeutschEestiEspaolEsperantoEuskaraFranaisGalegoHrvatskiItalianoLietuviMagyarNederlandsNorskbokmlNorsknynorskPolskiPortugusRomnSlovenina</div> </li> <li><a href="/article/1882921874455851008.htm" title="java计算机毕业设计-学生宿舍故障报修管理信息系统-源码+数据库+系统+lw文档+mybatis+运行部署" target="_blank">java计算机毕业设计-学生宿舍故障报修管理信息系统-源码+数据库+系统+lw文档+mybatis+运行部署</a> 雪夜科技 <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>java计算机毕业设计-学生宿舍故障报修管理信息系统-源码+数据库+系统+lw文档+mybatis+运行部署java计算机毕业设计-学生宿舍故障报修管理信息系统-源码+数据库+系统+lw文档+mybatis+运行部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Wi</div> </li> <li><a href="/article/1882915138885971968.htm" title="即时通讯技术文集（第42期）：直播技术合集(Part2) [共13篇]" target="_blank">即时通讯技术文集（第42期）：直播技术合集(Part2) [共13篇]</a> <a class="tag" taget="_blank" href="/search/%E5%8D%B3%E6%97%B6%E9%80%9A%E8%AE%AFim%E7%BD%91%E7%BB%9C%E7%BC%96%E7%A8%8B/1.htm">即时通讯im网络编程</a> <div>为了更好地分类阅读52im.net总计1000多篇精编文章，我将在每周三推送新的一期技术文集，本次是第42期。[-1-]实时音频的混音在视频直播中的技术原理和实践总结[链接]http://www.52im.net/thread-1904-1-1.html[摘要]今天，我们就来聊一聊混音技术在视频直播应用中的实现原理、方案等，及其在创新玩法中的实践应用。[-2-]七牛云技术分享：使用QUIC协议实现</div> </li> <li><a href="/article/1882910478645129216.htm" title="vite webpack原理和区别" target="_blank">vite webpack原理和区别</a> <div>Vite和Webpack的工作原理有显著的不同，以下是对它们各自原理的简要说明：Vite原理原生ES模块：Vite利用浏览器对原生ES模块（ESM）的支持，实现按需加载和编译。开发服务器启动时，Vite只需解析入口文件，并将导入的模块路径记录下来。按需编译：当浏览器请求某个模块时，Vite会实时编译该模块及其依赖。使用esbuild或Vite自带的编译器快速处理JavaScript和CSS。热模块</div> </li> <li><a href="/article/1882889859174035456.htm" title="Formality：时序变换（三）（相位反转）" target="_blank">Formality：时序变换（三）（相位反转）</a> 日晨难再 <a class="tag" taget="_blank" href="/search/Synopsys/1.htm">Synopsys</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/Formality/1.htm">Formality</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E5%AD%97IC/1.htm">数字IC</a><a class="tag" taget="_blank" href="/search/%E7%A1%AC%E4%BB%B6%E5%B7%A5%E7%A8%8B/1.htm">硬件工程</a> <div>相关阅读Formalityhttps://blog.csdn.net/weixin_45791458/category_12841971.html?spm=1001.2014.3001.5482https://blog.csdn.net/weixin_45791458/category_12841971.html?spm=1001.2014.3001.5482一、引言时序变换在DesignComp</div> </li> <li><a href="/article/1882889103159128064.htm" title="25-5 SQL 注入攻击 - insert注入" target="_blank">25-5 SQL 注入攻击 - insert注入</a> 技术探索 <a class="tag" taget="_blank" href="/search/Web%E5%AE%89%E5%85%A8%E6%94%BB%E9%98%B2%E5%85%A8%E8%A7%A3%E6%9E%90/1.htm">Web安全攻防全解析</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>环境准备：构建完善的安全渗透测试环境：推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客一、注入原理描述：insert注入是指通过前端注册的信息被后台通过insert操作插入到数据库中。如果后台没有做相应的处理，就可能导致insert注入漏洞。原因：后台未对用户输入进行充分验证和过滤，导致恶意用户可以利用特定的输入构造恶意代码，从而影响数据库的插入操作，或者获取敏感数据。二、注入方法注入手段</div> </li> <li><a href="/article/1882881282514415616.htm" title="Docker多架构镜像构建踩坑记" target="_blank">Docker多架构镜像构建踩坑记</a> 一直学下去 <a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a><a class="tag" taget="_blank" href="/search/adm64/1.htm">adm64</a><a class="tag" taget="_blank" href="/search/arm64/1.htm">arm64</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E6%9E%B6%E6%9E%84/1.htm">多架构</a> <div>背景公司为了做信创项目的亮点，需要将现有的一套在X86上运行的应用系统迁移到ARM服务器上运行，整个项目通过后端Java，前端VUEJS开发通过CICD做成Docker镜像在K8S里面运行。但是当前的CICD产品不支持ARM的镜像构建，于是只能手工构建ARM镜像。以下是一些踩坑的记录，希望能帮大家少踩坑构建环境本地电脑DeepinLinux23(Windows的WSL和其他的Linux系统都可以）</div> </li> <li><a href="/article/1882873837956165632.htm" title="前端力扣刷题 | 1：Hot100之哈希" target="_blank">前端力扣刷题 | 1：Hot100之哈希</a> 酒酿泡芙1217 <a class="tag" taget="_blank" href="/search/%E5%8A%9B%E6%89%A3hot100/1.htm">力扣hot100</a><a class="tag" taget="_blank" href="/search/%E5%93%88%E5%B8%8C%E7%AE%97%E6%B3%95/1.htm">哈希算法</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.两数之和给定一个整数数组nums和一个整数目标值target，请你在该数组中找出和为目标值target的那两个整数，并返回它们的数组下标。你可以假设每种输入只会对应一个答案，并且你不能使用两次相同的元素。你可以按任意顺序返回答案。示例：输入：nums=[2,7,11,15],target=9输出：[0,1]解释：因为nums[0]+nums[1]==9，返回[0,1]。法一：暴力解法vartw</div> </li> <li><a href="/article/1882868165558464512.htm" title="vue使用pdf.js实现移动端在线PDF文件预览" target="_blank">vue使用pdf.js实现移动端在线PDF文件预览</a> yujin0213 <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>背景产品需求涉及到动态的PDF展示，PDF是由后端去生成的，然后下发给前端在线的cdn地址，H5需要实现在线PDF预览的能力方案H5展示合同PDF，有很多实现方式。但是通过尝试后发现在不同操作系统会存在兼容性问题方案表现iframe的形式iOS：只能展示第一页，多页不能展示Android：弹出下载弹窗PC：正常展示embed标签iOS：只能展示第一页Android：弹出下载弹窗PC：显示不出来vu</div> </li> <li><a href="/article/1882867278895181824.htm" title="WPF之comboBox可模糊查询" target="_blank">WPF之comboBox可模糊查询</a> 白驹……过隙 <a class="tag" taget="_blank" href="/search/WPF/1.htm">WPF</a><a class="tag" taget="_blank" href="/search/wpf/1.htm">wpf</a> <div>前言本文采用了prism框架的基础。0、先准备一个类publicclassComboBoxItemModel{publicstringName{get;set;}publicstringValue{get;set;}}一、xaml代码。前端这里需添加两个属性，还有keyUp事件等。1、IsEditable="True"（开启可编辑）2、IsTextSearchEnabled="False"（开启可</div> </li> <li><a href="/article/1882866774752423936.htm" title="PC端后台管理系统实现在线预览文件" target="_blank">PC端后台管理系统实现在线预览文件</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/html/1.htm">html</a> <div>PC端后台管理系统实现在线预览文件后台管理系统是每个新手前端必然接触的项目，当产品要求在线预览文件的预览的时候，我收集了两种在线预览的方法，希望对一些刚入门的小白有所帮助1.使用iframe标签微软有一个解析地址，Word、Xls、PPT这些文件需要使用微软官方的解析地址，如微软解析地址：https://view.officeapps.live.com/op/view.aspx?src=你的文件地</div> </li> <li><a href="/article/1882863119022223360.htm" title="如何实现 Handy Control DataGrid 全选功能" target="_blank">如何实现 Handy Control DataGrid 全选功能</a> 东百牧码人 <a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a> <div>如何实现HandyControlDataGrid全选功能在使用HandyControl的DataGrid控件时，经常会有全选的需求。今天我们就结合一段代码，详细介绍如何实现HandyControlDataGrid的全选功能。代码实现前端XAML代码代码解释DataGrid是主要的表格控件，ItemsSource绑定到TrendTagCollection，这是数据源集合。DataGridCheckB</div> </li> <li><a href="/article/1882862613222715392.htm" title="How can I fix my Flask server‘s 405 error that includes OpenAi api?" target="_blank">How can I fix my Flask server‘s 405 error that includes OpenAi api?</a> 营赢盈英 <a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/openai/1.htm">openai</a><a class="tag" taget="_blank" href="/search/api/1.htm">api</a> <div>题意：解决包含OpenAIAPI的Flask服务器中出现的405错误（MethodNotAllowed，即方法不允许）问题背景：I'mtryingtoaddanAPItomywebpageandhaveneverusedanyFlaskserverbefore,IhaveneverusedJavascripttoosothisisacompletelybrandnewlearningexperie</div> </li> <li><a href="/article/1882861352947609600.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/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>随着单页面应用（SPA）和前端框架如React、Vue、Angular的快速发展，现代前端应用的复杂度日益提升。尤其是当应用规模逐渐增大时，单一的代码库往往难以应对不同团队的协作和版本管理问题。为了应对这一挑战，微前端架构（MicroFrontends）应运而生，它为前端开发提供了一种新的思路，让大型前端应用能够像后端的微服务架构一样，通过拆分模块来降低复杂度。在这篇文章中，我们将探讨微前端架构的</div> </li> <li><a href="/article/1882860216224116736.htm" title="Wi-Fi AP模式入门（基于ESP-IDF）" target="_blank">Wi-Fi AP模式入门（基于ESP-IDF）</a> 弱冠少年 <a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E8%BD%AF%E4%BB%B6/1.htm">嵌入式软件</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>主要参考资料：Wi-Fi库:https://docs.espressif.com/projects/esp-idf/zh_CN/v4.4/esp32s3/api-reference/network/esp_wifi.htmlESP-NETIF:https://docs.espressif.com/projects/esp-idf/zh_CN/v4.4/esp32s3/api-reference/n</div> </li> <li><a href="/article/1882858703615488000.htm" title="Pandas读写JSON文件的终极指南与实战技巧read_json、to_json" target="_blank">Pandas读写JSON文件的终极指南与实战技巧read_json、to_json</a> 步入烟尘 <a class="tag" taget="_blank" href="/search/Python%E8%B6%85%E5%85%A5%E9%97%A8%E6%8C%87%E5%8D%97%E5%85%A8%E5%86%8C/1.htm">Python超入门指南全册</a><a class="tag" taget="_blank" href="/search/pandas/1.htm">pandas</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E5%A4%84%E7%90%86/1.htm">文件处理</a><a class="tag" taget="_blank" href="/search/%E5%AE%9E%E6%88%98%E6%8A%80%E5%B7%A7/1.htm">实战技巧</a> <div>本文已收录于《Python超入门指南全册》本专栏专门针对零基础和需要进阶提升的同学所准备的一套完整教学，从基础到精通不断进阶深入，后续还有实战项目，轻松应对面试，专栏订阅地址：https://blog.csdn.net/mrdeam/category_12647587.html优点：订阅限时19.9付费专栏，私信博主还可进入全栈VIP答疑群，作者优先解答机会（代码指导、远程服务），群里大佬众多可以</div> </li> <li><a href="/article/1882857569349857280.htm" title="【python学习】一篇带你玩转 Python JSON 操作的终极指南：dump、dumps、load、loads 全解析" target="_blank">【python学习】一篇带你玩转 Python JSON 操作的终极指南：dump、dumps、load、loads 全解析</a> NLP仙人 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a> <div>在现代编程中，JSON(JavaScriptObjectNotation)是一种广泛使用的数据交换格式。在Python中，处理JSON数据是一项常见的任务，Python提供了强大的json模块来轻松地进行JSON编码和解码。本文将详细介绍json.dump、json.dumps、json.load和json.loads四个函数的用法，并通过代码示例帮助你掌握这些工具。json.dump和json.</div> </li> <li><a href="/article/1882849880209158144.htm" title="Python读取JSON文件" target="_blank">Python读取JSON文件</a> UIEdit <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a> <div>在Python中，我们可以使用内置的json模块来读取和解析JSON文件。JSON（JavaScriptObjectNotation）是一种常用的数据交换格式，它以易于阅读和编写的文本形式存储数据。下面是使用Python读取JSON文件的详细步骤。步骤1:导入所需模块首先，我们需要导入Python的json模块，该模块提供了处理JSON数据的函数和方法。importjson步骤2:打开JSON文件</div> </li> <li><a href="/article/1882846853955907584.htm" title="Go分布式爬虫笔记(八)_golang分布式爬虫" target="_blank">Go分布式爬虫笔记(八)_golang分布式爬虫</a> 2401_87299701 <a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a> <div>+爬虫引擎为基础的推送系统+提供-快速的热点事件-事件预警用户需求快速了解自己感兴趣的最新新闻事件预警机制帮助快速决策功能需求用户填写或选择自己感兴趣的话题、感兴趣的网站还有消息接受频率用户接收最新热点事件的推送用户通过点击获取与该事件关联的事件，并得到相关的事件预测、预警，甚至可能在网站中进行快速的交易用户可以查看历史记录，可视化呈现某一个事件的来龙去脉，并进行复盘产品需求前端页面设计用户交互设</div> </li> <li><a href="/article/1882836897324134400.htm" title="web速览" target="_blank">web速览</a> qzhqbb <a class="tag" taget="_blank" href="/search/web/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/web/1.htm">web</a> <div>web速览1.前端开发概述：前端开发是构建网站用户界面的过程，主要关注网站的视觉效果和用户体验。又称为客户端技术栈：HTML（超文本标记语言）：用于创建网页的结构和内容。CSS（层叠样式表）：用于样式和布局设计，包括颜色、字体、边距等。JavaScript：用于实现网页的交互性和动态效果。前端框架：React：一个用于构建用户界面的JavaScript库，采用组件化设计。Vue.js：一个渐进式的</div> </li> <li><a href="/article/1882834122422939648.htm" title="HTML基本结构" target="_blank">HTML基本结构</a> 千鸟影沫 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、网页三大组成部分结构：html，是超文本标记语言——用来搭建网页的结构样式：css——网页的样式行为：js，是一种语言，称为脚本语言——交互行为用户对网页的操作数据交互二、HTML语法规范1、语法（英文状态下输入）html标签：是由尖括号包围的关键词，例如2、以元素样子对标签进行分类①双标签：如：开始标签，结束标签②单标签：比较少，如，，，等。3、标签关系①嵌套（包含关系）：类似于父子关系如：</div> </li> <li><a href="/article/1882831474986643456.htm" title="Spring MVC 中的 DispatcherServlet：工作流程与应用场景解析" target="_blank">Spring MVC 中的 DispatcherServlet：工作流程与应用场景解析</a> 码农小灰 <a class="tag" taget="_blank" href="/search/SpringMVC/1.htm">SpringMVC</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">面试题</a><a class="tag" taget="_blank" href="/search/SpringBoot/1.htm">SpringBoot</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><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>目录一、初始化阶段二、请求处理阶段三、异常处理四、使用场景说明在SpringMVC框架中，DispatcherServlet扮演着至关重要的角色，它作为前端控制器（FrontController），负责接收客户端的HTTP请求，并根据配置将其分发给相应的处理器进行处理。以下是对其工作流程的详细解析，并结合使用场景进行说明。一、初始化阶段加载配置文件：DispatcherServlet在启动时会读取</div> </li> <li><a href="/article/1882829830894972928.htm" title="探秘Xss：原理、类型与防范全解析" target="_blank">探秘Xss：原理、类型与防范全解析</a> 咕德猫宁丶 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/xss/1.htm">xss</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>一、Xss究竟是什么？（一）Xss的定义简述Xss全称是跨站脚本攻击（CrossSiteScripting），为了不和层叠样式表（CascadingStyleSheets，CSS）的缩写混淆，故将其缩写为Xss。它是一种常见的网络安全漏洞，指的是攻击者利用网站对用户输入内容校验不严格等漏洞，将恶意脚本（通常是JavaScript，也可以是Java、VBScript、ActiveX、Flash等）注</div> </li> <li><a href="/article/1882827307429720064.htm" title="什么是JavaScript中的Map和Set数据结构？它们与普通对象有什么不同？" target="_blank">什么是JavaScript中的Map和Set数据结构？它们与普通对象有什么不同？</a> 几何心凉 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8%E4%B9%8B%E6%97%85/1.htm">前端入门之旅</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/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和Set数据结构？它们与普通对象有什么不同？1.Map数据结构1.1定义和基本用法创建Map添加键值对获取值检查键删除键值对获取Map的大小1.2Map的遍历1.3Map与普通对象的区别2.Set数据结构2.1定义和基本用法创建Set添加值检查值删除值2.2Set的遍历2.3Set与数组的区别3.总结3.1Map与对象的</div> </li> <li><a href="/article/1882823151616847872.htm" title="使用 Python 指定内容爬取百度引擎搜索结果" target="_blank">使用 Python 指定内容爬取百度引擎搜索结果</a> m0_74825614 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%99%BE%E5%BA%A6/1.htm">百度</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在本篇博客中，我将展示如何使用Python编写一个简单的百度搜索爬虫。这个爬虫可以自动化地从百度获取搜索结果，并提取每个结果的标题和链接。我们将使用requests库来发送HTTP请求，使用BeautifulSoup库来解析HTML内容。需求分析在实现爬虫之前，我们需要明确以下需求：通过构建百度搜索的URL来发送搜索请求。解析百度搜索结果页面，提取每个结果的标题和链接。将搜索结果以列表形式返回，方</div> </li> <li><a href="/article/1882817229007941632.htm" title="Python 执行 javascript PyExecJS 模块" target="_blank">Python 执行 javascript PyExecJS 模块</a> weixin_30376083 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/ViewUI/1.htm">ViewUI</a> <div>PyExecJS安装pipinstallPyExecJSPyExecJS的基本使用:>>>importexecjs>>>execjs.eval("'redyellowblue'.split('')")['red','yellow','blue']>>>ctx=execjs.compile("""...functionadd(x,y){...returnx+y;...}...""")>>>ctx.c</div> </li> <li><a href="/article/1882813192841785344.htm" title="在Python中运行JavaScript代码（使用execjs模块）" target="_blank">在Python中运行JavaScript代码（使用execjs模块）</a> 飞起来fly呀 <a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>使用execjs模块可以在Python中运行JavaScript代码。以下是使用execjs模块的基本步骤：1.安装execjs模块:可以使用pip命令进行安装:pipinstall execjs2.导入execjs模块:import execjs3.使用compile方法可以将JavaScript代码编译为可执行的函数compiled_func = execjs.compile(code)#执行</div> </li> <li><a href="/article/1882809156738543616.htm" title="H5获取手机相机或相册图片两种方式-Android通过webview传递多张照片给H5" target="_blank">H5获取手机相机或相册图片两种方式-Android通过webview传递多张照片给H5</a> m0_74823947 <a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E6%89%8B%E6%9C%BA/1.htm">智能手机</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%A0%81%E7%9B%B8%E6%9C%BA/1.htm">数码相机</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>需求目的：手机机通过webView展示H5网页，在特殊场景下，需要使用相机拍照或者从相册获取照片，上传后台。完整流程效果：如下图一、H5界面样例代码使用html文件格式，文件直接打开就可以展示布局；一会在andriodwebview中直接加载Documentalllalalallalal默认会被覆盖{{message}}{{counter}}+1-1{{title}}android选中照片H5展示</div> </li> <li><a href="/article/1882808652293795840.htm" title="Python快速使用js接口" target="_blank">Python快速使用js接口</a> 程序媛小本 <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/udp/1.htm">udp</a> <div>在跨语言编程和Web开发中，Python和JavaScript是两种常用的编程语言。有时候，我们可能需要在Python环境中执行JavaScript代码。这就是execjs库发挥作用的地方。一、安装ExecJS在命令行中输入以下命令：pipinstallPyExecJS二、ExecJS的基本使用ExecJS支持多种JavaScript运行时环境，包括Node.js、SpiderMonkey、Web</div> </li> <li><a href="/article/1882801335192055808.htm" title="使用 AI 助手提升前端代码质量：自动代码审查实战" target="_blank">使用 AI 助手提升前端代码质量：自动代码审查实战</a> 技术出海录 <a class="tag" taget="_blank" href="/search/%E8%BF%9C%E6%B4%8B%E5%BD%95%C2%B7%E6%8A%80%E6%9C%AF%E7%AF%87/1.htm">远洋录·技术篇</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>最近在带团队的时候，发现代码审查（CodeReview）总是成为项目进度的一个瓶颈。一方面，高级工程师的时间很宝贵，不可能审查每一行代码；另一方面，初级工程师又急需及时的反馈来提升。于是我就在想：能不能用AI来解决这个问题？经过一番研究和实践，我搭建了一个AI代码审查助手，效果出乎意料的好！今天就来分享下这个小工具是怎么做的。为什么需要AI代码审查？说实话，最开始团队里有不少质疑的声音：“AI能审</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>