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/1943992018892025856.htm" title="JSON 与 AJAX" target="_blank">JSON 与 AJAX</a> Auscy <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、JSON（JavaScriptObjectNotation）1.数据类型与语法细节支持的数据类型：基本类型：字符串（需用双引号）、数字、布尔值（true/false）、null。复杂类型：数组（[]）、对象（{}）。严格语法规范：键名必须用双引号包裹（如"name":"张三"）。数组元素用逗号分隔，最后一个元素后不能有多余逗号。数字不能以0开头（如012会被解析为12），不支持八进制/十六进制</div> </li> <li><a href="/article/1943990125864218624.htm" title="JavaScript 树形菜单总结" target="_blank">JavaScript 树形菜单总结</a> Auscy <a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a> <div>树形菜单是前端开发中常见的交互组件，用于展示具有层级关系的数据（如文件目录、分类列表、组织架构等）。以下从核心概念、实现方式、常见功能及优化方向等方面进行总结。一、核心概念层级结构：数据以父子嵌套形式存在，如{id:1,children:[{id:2}]}。节点：树形结构的基本单元，包含自身信息及子节点（若有）。展开/折叠：子节点的显示与隐藏切换，是树形菜单的核心交互。递归渲染：因数据层级不固定，</div> </li> <li><a href="/article/1943987856808669184.htm" title="前端项目架构设计要领" target="_blank">前端项目架构设计要领</a> <div>1.架构设计的核心目标在设计前端项目架构时，核心目标是模块化、可维护、可扩展、可测试，以及开发效率的最大化。这些目标可以通过以下几个方面来实现：组件化：将UI功能封装为可复用的组件。模块化：将业务逻辑分解为独立的模块或服务。自动化构建与部署：实现自动化构建、测试和部署流程，减少人为操作的错误。代码规范化与检查：确保团队协作时，代码风格和质量一致。2.项目目录结构设计一个清晰合理的目录结构对大型项目</div> </li> <li><a href="/article/1943987101301272576.htm" title="精通Canvas：15款时钟特效代码实现指南" target="_blank">精通Canvas：15款时钟特效代码实现指南</a> 烟幕缭绕 <div>本文还有配套的精品资源，点击获取简介：HTML5的Canvas是一个用于绘制矢量图形的API，通过JavaScript实现动态效果。本项目集合了15种不同的时钟特效代码，帮助开发者通过学习绘制圆形、线条、时间更新、旋转、颜色样式设置及动画效果等概念，深化对Canvas的理解和应用。项目中的CSS文件负责时钟的样式设定，而JS文件则包含实现各种特效的逻辑，通过不同的函数或类处理时间更新和动画绘制，提</div> </li> <li><a href="/article/1943983696184930304.htm" title="基于链家网的二手房数据采集清洗与可视化分析" target="_blank">基于链家网的二手房数据采集清洗与可视化分析</a> Mint_Datazzh <a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE/1.htm">项目</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E7%88%AC%E8%99%AB/1.htm">网络爬虫</a> <div>个人学习内容笔记，仅供参考。项目链接：https://gitee.com/rongwu651/lianjia原文链接：基于链家网的二手房数据采集清洗与可视化分析–笔墨云烟研究内容该课题的主要目的是通过将二手房网站上的存量与已销售房源，构建一个二手房市场行情情况与房源特点的可视化平台。该平台通过HTML架构和Echarts完成可视化的搭建。因此，该课题的主要研究内容就是如何利用相关技术设计并实现这样</div> </li> <li><a href="/article/1943979785097113600.htm" title="【前端】jQuery数组合并去重方法总结" target="_blank">【前端】jQuery数组合并去重方法总结</a> <div>在jQuery中合并多个数组并去重，推荐使用原生JavaScript的Set对象（高效简单）或$.unique()（仅适用于DOM元素，不适用于普通数组）。以下是完整解决方案：方法1：使用ES6Set（推荐）//定义多个数组constarr1=[1,2,3];constarr2=[2,3,4];constarr3=[3,4,5];//合并数组并用Set去重constmergedArray=[...</div> </li> <li><a href="/article/1943974618851241984.htm" title="Vue3+Vite+TS+Axios整合详细教程" target="_blank">Vue3+Vite+TS+Axios整合详细教程</a> 老马聊技术 <a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/Vite/1.htm">Vite</a><a class="tag" taget="_blank" href="/search/TS/1.htm">TS</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>1.Vite简介Vite是新一代的前端构建工具，在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。生产中利用Rollup作为打包工具，号称下一代的前端构建工具。vite是一种新型的前端构建工具，能够显著的提升前端开发者的体验。它主要有俩部分组成：一个</div> </li> <li><a href="/article/1943971211121848320.htm" title="前端 NPM 包的依赖可视化分析工具推荐" target="_blank">前端 NPM 包的依赖可视化分析工具推荐</a> 前端视界 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E8%89%BA%E5%8C%A0%E9%A6%86/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/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/arcgis/1.htm">arcgis</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>前端NPM包的依赖可视化分析工具推荐关键词：NPM、依赖管理、可视化分析、前端工程、包管理、依赖冲突、性能优化摘要：本文将深入探讨前端开发中NPM包依赖可视化分析的重要性，介绍5款主流工具的使用方法和特点，并通过实际案例展示如何利用这些工具优化项目依赖结构、解决版本冲突问题以及提升构建性能。文章将帮助开发者更好地理解和掌控项目依赖关系，提高开发效率和项目可维护性。背景介绍目的和范围本文旨在为前端开</div> </li> <li><a href="/article/1943969321717919744.htm" title="日历插件-FullCalendar的详细使用" target="_blank">日历插件-FullCalendar的详细使用</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/javascript/1.htm">javascript</a> <div>一、介绍FullCalendar是一个功能强大、高度可定制的JavaScript日历组件，用于在网页中显示和管理日历事件。它支持多种视图（月、周、日等），可以轻松集成各种框架，并提供丰富的事件处理功能。二、实操案例具体代码如下：FullCalendar日期选择body{font-family:Arial,sans-serif;margin:20px;}#calendar{max-width:900</div> </li> <li><a href="/article/1943963776244051968.htm" title="入门html这篇文章就够了" target="_blank">入门html这篇文章就够了</a> ξ流ぁ星ぷ132 <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笔记文章目录HTML笔记html介绍什么是htmlhtml的作用HTML标签介绍常用标签标签and标签and标签u标签del删除线br标签用于换行pre标签，预处理标签span标签div标签sub标签andsup标签hr标签h1,h2...h6标签：HTML5中的语义标签：特殊字符img标签a标签第一种用法：超链接第二种用法：锚点video标签表格标签：form标签input标签selec</div> </li> <li><a href="/article/1943961125532004352.htm" title="数字孪生技术为UI前端注入新活力：实现产品设计的沉浸式体验" target="_blank">数字孪生技术为UI前端注入新活力：实现产品设计的沉浸式体验</a> ui设计前端开发老司机 <a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a> <div>hello宝子们...我们是艾斯视觉擅长ui设计、前端开发、数字孪生、大数据、三维建模、三维动画10年+经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩!一、引言：从“平面交互”到“沉浸体验”的UI革命当用户在电商APP中翻看3D家具模型却无法感知其与自家客厅的匹配度，当设计师在2D屏幕上绘制汽车内饰却难以预判实际乘坐体验——传统UI设计的“平面化、静态化、割裂感”</div> </li> <li><a href="/article/1943960369345130496.htm" title="Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求" target="_blank">Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求</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/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Java三年经验程序员技术栈全景指南：从前端到架构，对标阿里美团全栈要求三年经验是Java程序员的分水岭，技术栈深度决定你成为“业务码农”还是“架构师候选人”。本文整合阿里、美团、滴滴等大厂招聘要求，为你绘制可落地的进阶路线。一、Java核心：从语法糖到JVM底层三年经验与初级的核心差异在于系统级理解，大厂面试常考以下能力：JVM与性能调优内存模型（堆外内存、元空间）、GC算法（G1/ZGC适用场</div> </li> <li><a href="/article/1943954447797383168.htm" title="javascript高级程序设计第3版——第12章 DOM2与DOM3" target="_blank">javascript高级程序设计第3版——第12章 DOM2与DOM3</a> weixin_30687587 <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%E4%B8%8E%E7%AE%97%E6%B3%95/1.htm">数据结构与算法</a><a class="tag" taget="_blank" href="/search/ViewUI/1.htm">ViewUI</a> <div>12章——DOM2与DOM3为了增强D0M1，DOM级规范定义了一些模块。DOM2核心：为不同的DOM类型引入了一些与XML命名空间有关的方法，还定义了以编程方式创建Document实例的方法；DOM2级样式：针对操作元素的样式而开发；其特性总结：1.每个元素都有一个关联的style对象，可用来确定和修改行内样式；2.要确定某个元素的计算样式，可使用getComgetComputedStyle（）</div> </li> <li><a href="/article/1943950163496202240.htm" title="JavaScript 基础09：Web APIs——日期对象、DOM节点" target="_blank">JavaScript 基础09：Web APIs——日期对象、DOM节点</a> 梦想当全栈 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%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基础09：WebAPIs——日期对象、DOM节点进一步学习DOM相关知识，实现可交互的网页特效能够插入、删除和替换元素节点。能够依据元素节点关系查找节点。一、日期对象掌握Date日期对象的使用，动态获取当前计算机的时间。ECMAScript中内置了获取系统时间的对象Date，使用Date时与之前学习的内置对象console和Math不同，它需要借助new关键字才能使用。1.实例</div> </li> <li><a href="/article/1943946255763828736.htm" title="《Java前端开发全栈指南：从Servlet到现代框架实战》" target="_blank">《Java前端开发全栈指南：从Servlet到现代框架实战》</a> <div>前言在当今Web开发领域，Java依然是后端开发的主力语言，而随着前后端分离架构的普及，Java开发者也需要掌握前端技术栈。本文将全面介绍JavaWeb前端开发的核心技术，包括传统Servlet/JSP体系、现代前端框架集成方案，以及全栈开发的最佳实践。通过本文，您将了解如何构建现代化的JavaWeb应用前端界面。一、JavaWeb前端技术演进1.1传统技术栈Servlet：JavaWeb基础，处</div> </li> <li><a href="/article/1943932016164663296.htm" title="Vue3组件库实战: 打造高复用UI系统" target="_blank">Vue3组件库实战: 打造高复用UI系统</a> 武昌库里写JAVA <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/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/layui/1.htm">layui</a><a class="tag" taget="_blank" href="/search/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/1.htm">毕业设计</a> <div>Vue3组件库实战:打造高复用UI系统介绍什么是Vue3组件库在前端开发中，UI组件库是非常重要的一部分。Vue3组件库是基于Vue.js3.x版本开发的一套可用于构建Web应用的UI组件集合，可以帮助开发者快速搭建页面并保证页面的一致性和美观性。目标关键词：Vue3组件库设计与构建设计原则组件库的设计需要遵循一定的原则，比如易用性、可维护性、扩展性等。在设计阶段需要考虑到不同场景的使用，并且保证</div> </li> <li><a href="/article/1943930502771699712.htm" title="Flutter基础（前端教程⑥-按钮切换）" target="_blank">Flutter基础（前端教程⑥-按钮切换）</a> aaiier <a class="tag" taget="_blank" href="/search/Flutter/1.htm">Flutter</a><a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a> <div>1.假设你已有的两个表单组件（示例）//手机号注册表单（示例）classPhoneRegisterFormextendsStatelessWidget{@overrideWidgetbuild(BuildContextcontext){returnColumn(children:[TextField(decoration:InputDecoration(labelText:'手机号')),Text</div> </li> <li><a href="/article/1943929870320988160.htm" title="为Layui Table组件添加前端搜索功能" target="_blank">为Layui Table组件添加前端搜索功能</a> caifox菜狐狸 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E4%B9%8B%E6%97%85%EF%BC%9A%E4%BB%8E%E6%96%B0%E6%89%8B%E5%88%B0%E4%B8%93%E5%AE%B6/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/layui/1.htm">layui</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/table/1.htm">table</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%90%9C%E7%B4%A2/1.htm">前端搜索</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E6%A0%BC%E6%90%9C%E7%B4%A2/1.htm">表格搜索</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>在现代Web开发中，数据展示和交互功能是构建高效、用户友好界面的关键要素之一。Layui作为一款广受欢迎的前端UI框架，以其简洁的代码、丰富的组件和强大的功能，为开发者提供了极大的便利。其中，Layui的Table组件更是以其强大的数据展示能力和灵活的配置选项，成为了许多项目中不可或缺的部分。然而，在实际应用中，仅仅展示数据往往是不够的。用户通常需要根据自己的需求快速查找特定信息，这就需要为表格添</div> </li> <li><a href="/article/1943926338326949888.htm" title="flutter知识点" target="_blank">flutter知识点</a> ZhDan91 <a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a> <div>#时隔4年了#4年前用flutter开发海外项目和医疗项目。绘制界面的语法与html还是较类似的。把这些封印的记忆和技术回顾一下，最开始是开发Android出身的，所以开发起flutter来依旧是用的androidstudio开发工具。整理下用到的知识点：整理来源：flutter面试题——基础篇（1）-CSDN博客1、Dart是单线程的。在单线程中以消息循环来运行的。其中敖汉两个任务队列。一个是微</div> </li> <li><a href="/article/1943919909612351488.htm" title="Vue.js 过渡 & 动画" target="_blank">Vue.js 过渡 & 动画</a> lsx202406 <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Vue.js过渡&动画引言在Web开发中，过渡与动画是提升用户体验的关键元素。Vue.js作为一款流行的前端框架，提供了强大的过渡与动画功能，使得开发者能够轻松实现丰富的交互效果。本文将深入探讨Vue.js中的过渡与动画，包括其原理、应用场景以及实现方法。一、Vue.js过渡原理Vue.js过渡是利用CSS3的transition属性实现的。当Vue.js侦测到数据变化时，会自动触发过渡效果。过渡</div> </li> <li><a href="/article/1943919026744913920.htm" title="JavaScript之DOM操作与事件处理详解" target="_blank">JavaScript之DOM操作与事件处理详解</a> AA-代码批发V哥 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>JavaScript之DOM操作与事件处理详解一、DOM基础：理解文档对象模型二、DOM元素的获取与访问2.1基础获取方法2.2集合的区别与注意事项三、DOM元素的创建与修改3.1创建与插入元素3.2修改元素属性与样式3.2.1属性操作3.2.2样式操作3.3元素内容的修改四、DOM元素的删除与替换4.1删除元素4.2替换元素五、事件处理：实现页面交互5.1事件绑定的三种方式5.1.1HTML属性</div> </li> <li><a href="/article/1943917893620133888.htm" title="V少JS基础班之第五弹" target="_blank">V少JS基础班之第五弹</a> V少在逆向 <a class="tag" taget="_blank" href="/search/JS%E5%9F%BA%E7%A1%80%E7%8F%AD/1.htm">JS基础班</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>文章目录一、前言二、本节涉及知识点三、重点内容1-函数的定义2-函数的构成1.函数参数详解1）参数个数不固定2）默认参数3）arguments对象（类数组）4）剩余参数（Rest参数）5）函数参数是按值传递的6）解构参数传递7）参数校验技巧（JavaScript没有类型限制，需要手动校验）2.函数返回值详解3-函数的分类1-函数声明式：2-函数表达式：3-箭头函数：4-构造函数：5-IIFE：6-</div> </li> <li><a href="/article/1943917011268595712.htm" title="Javaweb学习之Vue模板语法（三）" target="_blank">Javaweb学习之Vue模板语法（三）</a> 不要数手指啦 <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.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/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>目录学习资料前情回顾本期介绍（vue模板语法）文本插值Vue的Attribute绑定使用JavaScript表达式综合实例代码：学习资料Vue.js-渐进式JavaScript框架|Vue.js(vuejs.org)前情回顾项目的创建大家可以看这篇文章Vue学习之项目的创建-CSDN博客本期介绍（vue模板语法）首先，找到我们编写代码的地方找到自己项目的src文件夹，打开之后点击component</div> </li> <li><a href="/article/1943914107526770688.htm" title="Vue框架之模板语法全面解析" target="_blank">Vue框架之模板语法全面解析</a> AA-代码批发V哥 <a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>Vue框架之模板语法全面解析一、模板语法的核心思想二、插值表达式：数据渲染的基础2.1基本用法：渲染文本2.2纯HTML渲染：`v-html`指令2.3一次性插值：`v-once`指令三、指令系统：控制DOM的行为3.1条件渲染：`v-if`与`v-show`3.1.1`v-if`：动态创建/销毁元素3.1.2`v-else`与`v-else-if`：条件分支3.1.3`v-show`：动态显示/</div> </li> <li><a href="/article/1943907050870337536.htm" title="深入解析 “void(0)；” 的用法与作用_void(0)；" target="_blank">深入解析 “void(0)；” 的用法与作用_void(0)；</a> <div>关键要点void(0);是JavaScript中的一个表达式，研究表明它通常用于超链接中，防止页面跳转。它通过void运算符计算表达式并返回undefined，常用于创建“死链接”。证据显示，这种用法简单易用，但现代开发更推荐使用事件监听器。基本概念void(0);的作用void(0);是JavaScript的void运算符的一个实例，void运算符会计算一个表达式但不返回任何值，而是始终返回un</div> </li> <li><a href="/article/1943905285789773824.htm" title="three前置课程知识" target="_blank">three前置课程知识</a> <div>学习中文网(1.threejs文件包下载和目录简介|Three.js中文网)threejs官方文件包所有版本：https://github.com/mrdoob/three.js/releases更新迭代较快，要选择对应版本使用---下载zip压缩包Threejs官网中文文档链接：https://threejs.org/docs/index.html#manual/zh/重要的内容docs包:文档</div> </li> <li><a href="/article/1943875785089675264.htm" title="Webpack5 多页面实践" target="_blank">Webpack5 多页面实践</a> <div>特性维度单页面应用-SPA多页面统一目录-MPA多页面单独部署-MPA入口数量单个，只有一个HTML文件多个，多个HTML文件多个，多个HTML文件，分别打包输出资源输出结构所有资源输出到统一目录（如js/,css/）所有页面的资源共用js/,css/等目录每页资源放在各自目录（如index/js/,index/css/）公共资源复用高：依赖打入主包或懒加载chunk，资源完全共享中：可通过spl</div> </li> <li><a href="/article/1943853592725221376.htm" title="GPT实操——利用GPT创建一个应用" target="_blank">GPT实操——利用GPT创建一个应用</a> 狗木马 <a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/gpt-3/1.htm">gpt-3</a><a class="tag" taget="_blank" href="/search/gpt/1.htm">gpt</a> <div>功能描述信息查询：用户可以询问各种问题，如天气、新闻、股票等，机器人会返回相关信息。任务执行：用户可以要求机器人执行一些简单的任务，如设置提醒、发送邮件等。情感支持：机器人可以与用户进行情感交流，提供安慰和支持。个性化设置：用户可以自定义机器人的回复风格和偏好。技术栈前端：React.js后端：Node.js+Express数据库：MongoDB自然语言处理：OpenAIGPT-3API其他工具：</div> </li> <li><a href="/article/1943848300524400640.htm" title="【JS三兄弟谁是谁】搞懂 splice、slice、split，只需一杯奶茶的时间！" target="_blank">【JS三兄弟谁是谁】搞懂 splice、slice、split，只需一杯奶茶的时间！</a> dorabighead <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%85%AB%E8%82%A1%E6%80%BB%E7%BB%93/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有三兄弟，经常一起“切人”。他们名字相似、功能相关，但性格迥异，常被搞混。今天，就带你喝着奶茶，笑着剖析，帮你彻底搞懂：splice、slice、split到底是谁？干了啥？凭啥这么火？一、三兄弟登场：不同对象，不同任务名称作用对象是否修改原对象返回类型功能简述splice数组✅是被删除元素数组原地删除元素并可插入新元素slice数组/字符串❌否副本（子集）复制选中部分，原体不</div> </li> <li><a href="/article/1943847416503529472.htm" title="前端面试题总结——JS篇" target="_blank">前端面试题总结——JS篇</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>一、说说JavaScript中的数据类型？存储上有什么差别？1、数据类型基本类型number：数值类型十进制：letintNum=55八进制（零开头）：letnum1=070十六进制（0x开头）：lethexNum1=0xANaN：特殊数值，意为“不是数值”string：字符串类型boolean：布尔值，true或falseundefined：表示未定义null：空值symbol：是原始值，且符号</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>