HTML+CSS+JS的基础知识笔记
语义化：通俗来说就是明白每个标签的用途（在什么情况下使用此标签合理）
...
...
代码注释的语法:
标签:根标签，所有的网页标签都在中。
标签:定义文档的头部,所有头部元素的容器.头部元素有、<script>、<style>、<link>、<meta>等标签。<br> <br> <br> <body>标签:网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签里的内容会在浏览器中显示出来。<br> <br> <br> <title>标签：网页的标题信息，它会出现在浏览器的标题栏中。<br> <br> <br> <p>标签:<p>段落文本</p>,添加段落。<br> <br> <br> <hx>标签：<hx>标题文本</hx>，标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级、二级、三级、四级、五级、六级标题。依据重要性递减。<h1>是最高的等级。注意：因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。标题标签的样式都会加粗，h1标签字号最大，以此类推h6标签的字号最小。<br> <br> <br> <strong>和<em>标签：<em>表示强调，默认用斜体表示；<strong> 表示更强烈的强调，默认用粗体表示。习惯用<strong>表示强调。<br> <br> <br> <span>标签：对文字设置单独样式用的没有语义。<br> <br> <br> <q>标签:短文本引用,<q>庄生晓梦迷蝴蝶，望帝春心托杜鹃。</q>，效果“庄生晓梦迷蝴蝶,望帝春心托杜鹃.”<br> <br> <br> <blockquote>标签:长文本引用，浏览器对<blockquote>标签的解析是缩进样式。<br> <br> <br> <br>标签：相当于word文档中的回车。xhtml1.0写法：<br/>；html4.01写法：<br>。现在一般使用xhtml1.0的版本的写法（其它标签也是），这种版本比较规范。与之前我们学过的标签不一样，<br/>标签是一个空标签,只需要写一个开始标签，这样的标签有<br/>、<hr/>和<img/>。<br> <br> <br> :添加空格。<br> <br> <br> <hr>标签：添加水平横线，使文章看起来整齐些。浏览器中的默认样式线条比较粗，颜色为灰色。<br> <br> <br> <address>标签：<address>联系地址信息</address>，浏览器中显示的样式为斜体。<br> <br> <br> <code>标签：<code>代码语言</code>，当代码为一行时，使用<code>标签。<br> <br> <br> <pre>标签:<pre>代码段</pre>，当代码为多行时，使用<pre>标签。<pre>标签的主要作用:预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。<br> <br> <br> <ul-li>标签：<ul><br> <li>信息</li><br> ...<br> </ul><br> ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点，ul-li是没有前后顺序的信息列表。<br> <br> <br> <ol-li>标签：<ol><br> <li>信息</li><br> ...<br> </ol><br> ol-li在网页中显示的默认样式一般为:每项li前都自带一个序号，序号默认从1开始，ol-li是有前后顺序的信息列表。<br> <br> <br> <div>标签：在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个标签的作用就相当于一个容器。<br> <br> <br> 逻辑部分:它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。<br> <br> <br> 给div命名，使逻辑更加清晰：<div id="版块名称">…</div>；div相当于划分成一个个房间，id就是房间号了。<br> <br> <br> <table>标签:在网页上展示表格效果,创建表格的五个元素：table、tbody、tr、th、td<br> 1、table：整个表格以<table>标记开始、</table>标记结束。<br> 2、tbody：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。<br> 3、tr：表格的一行，有几对tr表格就有几行。<br> 4、td：表格的一个单元格，一行中包含几对td，说明一行中就有几列。<br> 5、th：表格的头部的一个单元格，表格表头。<br> <br> <br> 班级<span style="white-space:pre"> </span>学生数<span style="white-space:pre"> </span> 平均成绩 //表头<br> 一班<span style="white-space:pre"> </span>30<span style="white-space:pre"> </span>89<br> 二班<span style="white-space:pre"> </span>35<span style="white-space:pre"> </span>85<br> <br> <br> 注意：1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的<br> 2、表头，也就是th标签中的文本默认为粗体并且居中显示<br> <br> <br> <caption>标签:为表格添加标题和摘要;<br> 标题:用以描述表格内容，标题的显示位置：表格上方。<br> 摘要:摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化).<br> <table summary="表格简介文本"> //摘要<br> <caption>标题文本</caption><br> <tr><br> <td>…</td><br> …<br> </tr><br> …<br> </table><br> <br> <br> <a>标签:1.实现超链接，<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a><br> title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。<br> 2.在新建浏览器窗口中打开链接:<a href="目标网址" target="_blank">链接显示的文本</a><br> 3.链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件<br> 关键字：mailto：邮箱地址/cc=抄送地址/bcc=密件抄送地址/;多个收件人、抄送、密件抄送人/subject=邮 件主题/body=邮件内容。<br> 注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。<br> 完整的实例：<a href="mailto:yy@imooc.com?cc=xiaoming@imooc.com&bcc=xiaoyu@imooc.com&subject=主 题&body=邮件内容">发送</a><br> <br> <br> <img>标签：插入图片。<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本"><br> 1、src：标识图像的位置.<br> 2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本.<br> 3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本).<br> 4、图像可以是GIF，PNG，JPEG格式的图像文件.<br> <br> <br> 表单标签:表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。使用HTML表单(form)与用户进行交互.<form method="传送方式" action="服务器文件"><br> 1.<form> ：以<form>开始，以</form>结束，成对出现。<br> 2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。<br> 3.method ：数据传送的方式(get/post).<br> <form method="post" action="save.php"><br> <label for="username">用户名:</label><br> <input type="text" name="username" /><br> <label for="pass">密码:</label><br> <input type="password" name="pass" /><br> </form><br> 注意:<br> 1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。<br> 2、method : post/get 的区别这一部分内容属于后端程序员考虑的问题。<br> <br> <br> 文本输入框、密码输入框:<br> <form><br> <input type="text/password" name="名称" value="文本" /><br> </form><br> 1、type：<br> 当type="text"时，输入框为文本输入框;<br> 当type="password"时, 输入框为密码输入框。<br> 2、name：为文本框命名，以备后台程序ASP 、PHP使用。<br> 3、value：为文本输入框设置默认值。(一般起到提示作用)<br> <br> <br> 文本域：当用户需要在表单中输入大段文字时，需要用到。<textarea rows="行数" cols="列数">文本</textarea><br> <br> <br> 单选框和复选框:单选框中的选项用户只能选择一项，复选框用户可以任意选择多项，甚至全选。<br> <br> <br> <input type="radio/checkbox" value="值" name="名称" checked="checked"/><br> 1、type:<br> 当 type="radio"时，控件为单选框<br> 当 type="checkbox"时，控件为复选框<br> 2、value：提交数据到服务器的值（后台程序PHP使用）<br> 3、name：为控件命名，以备后台程序ASP、PHP使用<br> 4、checked：当设置 checked="checked" 时，该选项被默认选中。<br> 注意:同一组的单选按钮，name取值一定要一致，这样同一组的单选按钮才能起到单选的作用。<br> <br> <br> 下拉列表框：有效的节省网页空间，既可以单选、又可以多选。<br> 单选：<select><br> <option value="提交值" selected="selected">选项</option><br> ...<br> </select><br> <br> <br> 设置selected="selected"属性，则该选项就被默认选中。<br> <br> <br> 多选：只需在<select>标签中设置multiple="multiple"属性，就可以实现多选功能.<br> <br> 在windows操作系统下，多选时按下Ctrl键同时进行单击（在Mac下使用Command+单击），可以选择多个选项。<br> <br> <br> 表单中有两种按钮：提交、重置。<br> 提交按钮：<br> <input type="submit" value="提交"><br> type:只有当type值设置为submit时，按钮才有提交作用 value：按钮上显示的文字<br> <br> <br> 重置按钮：<br> <input type="reset" value="重置"><br> type：只有当type值设置为reset时，按钮才有重置作用 value:按钮上显示的文字<br> <br> <br> form表单中的label标签：获得焦点，把鼠标移动到文字上(男、女),同样可以激活控件进行选择输入。但是如果不加label,鼠标就必须移动到控件上面。<br> <label for="控件id名称"><br> 注意：标签的for属性中的值应当与相关控件的id属性值一定要相同。<br> <br> CSS代码语法：css样式由选择符和声明组成，而声明又由属性和值组成.eg：p{color:blue}<br> 其中p就是选择符，花括号里的内容就是声明，color是属性，blue是值。<br> 选择符:又称选择器，指明网页中要应用样式规则的元素.<br> <br> <br> 声明：在英文大括号"{}"中的就是声明，属性和值之间用英文冒号":"分隔。当有多条声明时,中间用英文分号";"分隔<br> <br> <br> 注意：<br> 1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。<br> 2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内。<br> <br> <br> <br> <br> CSS注释代码：/*注释语句*/<br> <br> <br> <br> <br> CSS样式:全称为“层叠样式表”，主要用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。从CSS样式代码插入的形式来看可以分为以下3种：内联式、嵌入式和外部式。<br> <br> <br> 内联式:把css代码直接写在现有的HTML标签中。<p style="color:red;font-size:12px">这里文字是红色</p><br> <br> <br> 嵌入式:写在当前的文件中。<br> <style type="text/css"> <br> span{<br> color:red; <br> }<br> </style><br> <br> <br> 外部式(外联式):把css代码写在一个单独的外部文件中，文件以“.css”为扩展名，在<head>内（不是<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：<br> <link href="base.css" rel="stylesheet" type="text/css"/><span style="white-space:pre"> </span><br> 注意：<br> 1、css样式文件名称以有意义的英文字母命名，如main.css。<br> 2、rel="stylesheet" type="text/css" 是固定写法不可修改。<br> 3、<link>标签位置一般写在<head>标签之内。<br> <br> <br> 总结三种css插入方式：<br> 内联：<span style="color:red;font-size:10px;" >text</span><br> 嵌入：<style type="text/css">span{color:red;font-size:10px;}</style><br> 外部：<link href="style.css" rel="stylesheet" type="text/css"><br> <br> <br> 优先级顺序：内联式 > 嵌入式 > 外部式(相同权值的情况下)<br> 嵌入式>外部式的前提：就近原则（离被设置元素越近优先级别越高）。<br> <br> <br> <br> <br> HTML+CSS基础课程<br> <br> <br> 选择器：每一条css样式声明（定义）由两部分组成，形式如下：选择器{样式;}“选择器”指明了{}中的“样式”的作用对象。<br> <br> <br> 标签选择器:其实就是html代码中的标签。如<html>、<body>、<h1>、<p>、<img>。<br> p{font-size:12px;line-height:1.6em;}<br> <br> <br> 类选择器：在css样式编码中最常用到。<br> .类选器名称{css样式代码;}<br> 1、英文圆点开头<br> 2、其中类选器名称可以任意起名（但不要起中文）<br> 使用方法：<br> 第一步：使用合适的标签把要修饰的内容标记起来，如下：<br> <span>胆小如鼠</span><br> 第二步：使用class="类选择器名称"为标签设置一个类，如下：<br> <span class="stress">胆小如鼠</span><br> 第三步：设置类选器css样式，如下：<br> .stress{color:red;}/*类前面要加入一个英文圆点*/<br> <br> <br> ID选择器：ID选择器类似于类选择符<br> 1、为标签设置id="ID名称"。<br> 2、ID选择符的前面是井号（#）号。<br> <br> <br> 类和ID选择器的区别:<br> 相同点：可以应用于任何元素<br> 不同点：<br> 1、ID选择器只能在文档中使用一次，而类选择器可以使用多次。<br> 2、只能使用类选择器词列表方法为一个元素同时设置多个样式。ID选择器不能使用ID词列表。 <br> 正确写法：<br> .stress{<br> color:red;<br> }<br> .bigsize{<br> font-size:25px;<br> }<br> <p>到了<span class="stress bigsize">三年级</span>下学期时，我们班上了一节公开课</p><br> 错误写法：<br> #stressid{<br> color:red;<br> }<br> #bigsizeid{<br> font-size:25px;<br> }<br> <p>到了<span id="stressid bigsizeid">三年级</span>下学期时，我们班上了一节公开课</p><br> <br> <br> 子选择器：即大于符号(>)用于选择指定标签元素的第一代子元素。<br> .food>li{border:1px solid red;}<br> 这行代码会使class名为food下的子元素li加入红色实线边框。<br> <br> <br> 包含(后代)选择器：即加入空格,用于选择指定标签元素下的后辈元素。<br> .first span{color:red;}<br> <br> <br> 子选择器和包含选择器的区别：>作用于元素的第一代后代，空格作用于元素的所有后代。<br> 通用选择器：功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素<br> * {color:red;}<br> <br> <br> 伪类选择符：它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：<br> a:hover{color:red;}为a标签鼠标滑过的状态设置字体颜色变红。<br> 关于伪选择符：<br> 其实 :hover 可以放在任意的标签上，比如说 p:hover，但它们的兼容性不好，所以比较常用的还是a:hover 的组合。<br> <br> <br> 分组选择符:当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符(,)<br> 为h1、span标签同时设置字体颜色为红色：<br> h1,span{color:red;}相当于下面两行代码<br> h1{color:red;}<br> span{color:red;}<br> <br> <br> 继承：继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。<br> p{color:red;}<br> <p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p> 这里子元素为span标签。<br> <br> <br> 注意：有一些css样式是不具有继承性的。p{border:1px solid red;}<br> 这段代码的作用只是给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没作用的。<br> <br> <br> 特殊性:为同一个元素设置了不同的CSS样式代码，浏览器根据权值大小来判断使用哪种css样式的。<br> 权值的规则:标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100<br> p{color:red;} /*权值为1*/<br> p span{color:green;} /*权值为1+1=2*/<br> .warning{color:white;} /*权值为10*/<br> p span.warning{color:purple;} /*权值为1+1+10=12*/<br> #footer .note p{color:yellow;} /*权值为100+10+1=111*/<br> 注意：继承的权值最低。 <span style="white-space:pre"></span><br> <br> <br> 层叠：当有相同权重的样式存在时，根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。<br> p{color:red;}<br> p{color:green;}<br> 最后p中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。<br> <br> <br> 重要性:使用!important为某些样式设置最高权值<br> p{color:red!important;} 注意：!important要写在分号的前面<br> p{color:green;}<br> 这时p段落中的文本会显示red红色。<br> <br> <br> 样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。<br> <br> <br> 文字排版--字体：设置网页中的文字字体为宋体。<br> body{font-family:"宋体";}<br> 注意不要设置不常用的字体，现在一般网页喜欢设置“微软雅黑”<br> body{font-family:"Microsoft Yahei";} 兼容性更好一些 <br> 或body{font-family:"微软雅黑";}<span style="white-space:pre"> </span><br> <br> <br> 文字排版--字号、颜色：<br> 设置网页中文字的字号为12像素，颜色设置为#666(灰色)：<br> body{font-size:12px;color:#666}<br> <br> <br> 文字排版--粗体：<br> p span{font-weight:bold;}<br> <br> <br> 文字排版--斜体：<br> p a{font-style:italic;}<br> <br> <br> 文字排版--下划线：<br> p a{text-decoration:underline;}<br> <br> <br> 文字排版--删除线：<br> .oldPrice{text-decoration:line-through;}<br> <br> <br> 段落排版--缩进：<br> p{text-indent:2em;}注意：2em的意思就是文字的2倍大小。<br> <br> <br> 段落排版--行间距（行高）：<br> p{line-height:1.5em;}<br> <br> <br> 段落排版--中文字间距、字母间距：<br> 设置字母与字母之间的间距: h1{letter-spacing:50px;}<br> 设置英文单词之间的间距: h1{word-spacing:50px;}<br> <br> <br> 段落排版--对齐:<br> 实现文本居中/居左/居右显示：h1{text-align:center/left/right;}<br> <br> <br> 元素分类:块状元素、内联元素(又叫行内元素)和内联块状元素。<br> 常用的块状元素有：<br> <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form><br> 常用的内联元素有：<br> <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code><br> 常用的内联块状元素有：<br> <img>、<input><br> <br> <br> 元素分类--块级元素：<br> 将内联元素a转换为块状元素 a{display:block;}<br> 块级元素特点：<br> 1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。<br> 2、元素的高度、宽度、行高以及顶和底边距都可设置。<br> 3、元素宽度在不设置的情况下，和父元素的宽度一致。<br> <br> <br> 元素分类--内联元素:<br> 将块状元素div转换为内联元素 div{display:inline;}<br> <br> 内联元素特点：<br> 1、和其他元素都在一行上；<br> 2、元素的高度、宽度及顶部和底部边距不可设置；<br> 3、元素的宽度就是它包含的文字或图片的宽度，不可改变。<br> <br> <br> 元素分类--内联块状元素:<br> 内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。<br> inline-block 元素特点：<br> 1、和其他元素都在一行上；<br> 2、元素的高度、宽度、行高以及顶和底边距都可设置。<br> <br> <br> 盒子模型-边框(一)：<br> 围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。<br> div来设置边框粗细为2px、样式为实心的、颜色为红色的边框：<br> div{<br> border:2px solid red;<br> }<br> 上面是border代码的缩写形式，可以分开写：<br> div{<br> border-width:2px;<br> border-style:solid;<br> border-color:red;<br> }<br> 注意：<br> 1、border-style（边框样式）常见样式有：<br> dashed(虚线)|dotted(点线)|solid（实线）。<br> 2、border-color(边框颜色)中的颜色可设置为十六进制颜色<br> border-color:#888;//前面的井号不要忘掉。<br> 3、border-width（边框宽度）中的宽度也可以设置为：<br> thin|medium|thick(但不常用),最常还是用象素(px)。<br> <br> <br> 盒子模型-边框(二):<br> 为标签单独设置下边框，而其它三边都不设置边框样式.css样式中允许只为一个方向的边框设置样式：<br> div{border-bottom:1px solid red;}<br> 同样可以使用下面代码实现其它三边(上、右、左)边框的设置：<br> border-top:1px solid red;<br> border-right:1px solid red; <br> border-left:1px solid red; <br> <br> <br> 盒模型-宽度和高度:<br> css内定义的宽(width)和高(height)指的是填充以里的内容范围。<br> 元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。元素的高度同理。<br> div{<br> width:200px;<br> padding:20px;<br> border:1px solid red;<br> margin:10px; <br> }<br> 元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。<br> <br> <br> 盒模型--填充:<br> 元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：div{padding:20px 10px 15px 30px;}<br> 顺序一定不要搞混。可以分开写上面代码： <br> div{<br> padding-top:20px;<br> padding-right:10px;<br> padding-bottom:15px;<br> padding-left:30px;<br> }<br> 如果上、右、下、左的填充都为10px;可以这么写<br> div{padding:10px;}<br> 如果上下填充一样为10px，左右一样为20px，可以这么写：<br> div{padding:10px 20px;}<br> <br> <br> 盒模型--边界:<br> 元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：<br> div{margin:20px 10px 15px 30px;}<br> 也可以分开写：<br> div{<br> margin-top:20px;<br> margin-right:10px;<br> margin-bottom:15px;<br> margin-left:30px;<br> }<br> padding和margin的区别：padding在边框里，margin在边框外。<br> <br> <br> css布局模型：1、流动模型（Flow）2、浮动模型 (Float)3、层模型（Layer）<br> <br> <br> 流动模型：<br> 流动（Flow）是默认的网页布局模式。<br> 流动布局模型具有2个比较典型的特征：<br> 第一点：块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布<br> 第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。<br> 浮动模型：<br> 块状元素独占一行，设置元素浮动就可以实现让两个块状元素并排显示。<br> 任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动。<br> 设置两个div元素一行显示向左/右浮动。<br> div{<br> width:200px;<br> height:200px;<br> border:2px red solid;<br> float:left/right;<br> }<br> 设置两个元素一左一右浮动代码如下:<br> div{<br> width:200px;<br> height:200px;<br> border:2px red solid;<br> }<br> #div1{float:left;}<br> #div2{float:right;}<br> <br> <br> 层模型：<br> 层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作<br> 层模型有三种形式：<br> 1、绝对定位(position: absolute)<br> 2、相对定位(position: relative)<br> 3、固定定位(position: fixed)<br> <br> <br> 层模型--绝对定位：<br> 设置position:absolute(表示绝对定位)，使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。<br> div元素相对于浏览器窗口向右移动100px，向下移动50px。<br> div{<br> width:200px;<br> height:200px;<br> border:2px red solid;<br> position:absolute;<br> left:100px;<br> top:50px;<br> }<br> <br> <br> 层模型--相对定位:<br> 设置position:relative（表示相对定位），首先按static(float)方式生成一个元素，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。<br> 如下代码实现相对于以前位置向下移动50px，向右移动100px;<br> #div1{<br> width:200px;<br> height:200px;<br> border:2px red solid;<br> position:relative;<br> left:100px;<br> top:50px;<br> } <br> <br> <br> 层模型--固定定位：<br> 与absolute定位类型类似，但它的相对移动的坐标是视图本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响。<br> 如下代码实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。<br> #div1{<br> width:200px;<br> height:200px;<br> border:2px red solid;<br> position:fixed;<br> left:100px;<br> top:50px;<br> }<br> <br> <br> Relative与Absolute组合使用：<br> 1、参照定位的元素必须是相对定位元素的前辈元素<br> 2、参照定位的元素必须加入position:relative;<br> #box1{<br> width:200px;<br> height:200px;<br> position:relative; <br> } <br> 3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了。<br> #box2{<br> position:absolute;<br> top:20px;<br> left:30px; <br> }<br> 这样box2就可以相对于父元素box1定位了。这里注意参照物可以不是浏览器了,而可以自由设置。<br> <br> 盒模型代码简写:<br> 外边距(margin)、内边距(padding)和边框(border)设置四个方向的边距是按照顺时针方向设置的：上右下左。 <br> margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/<br> 通常有下面三种缩写方法:<br> 1、如果top、right、bottom、left的值相同<br> margin:10px 10px 10px 10px;可缩写为margin:10px;<br> 2、如果top和bottom值相同、left和right的值相同<br> margin:10px 20px 10px 20px;可缩写为：margin:10px 20px;<br> 3、如果left和right的值相同：<br> margin:10px 20px 30px 20px;可缩写为：margin:10px 20px 30px;<br> 注意：padding、border的缩写方法和margin是一致的。<br> <br> <br> 颜色值缩写:<br> 当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。<br> p{color:#000000;}缩写为：p{color: #000;}<br> p{color: #336699;}缩写为：p{color: #369;}<br> <br> <br> 字体缩写：<br> body{<br> font-style:italic;<br> font-variant:small-caps; <br> font-weight:bold; <br> font-size:12px; <br> line-height:1.5em; <br> font-family:"宋体",sans-serif;<br> }<br> 缩写为：<br> body{<br> font:italic small-caps bold 12px/1.5em "宋体",sans-serif;<br> }<br> 注意：<br> 1、使用这一简写方式至少要指定font-size和font-family属性，其他的属性(如font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。<br> 2、缩写时font-size与line-height中间要加入“/”斜扛。<br> 一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：<br> body{<br> font:12px/1.5em "宋体",sans-serif;<br> }<br> 只是有字号、行间距、中文字体、英文字体设置。 <br> <br> <br> 颜色值：<br> 字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：<br> 1、英文命令颜色 p{color:red;}<br> 2、RGB颜色 这个与photoshop中的RGB颜色是一致的,由R(red)、G(green)、B(blue)三种颜色的比例来配色。<br> p{color:rgb(133,45,200);}<br> 每一项的值可以是0-255之间的整数，也可以是0%-100%的百分数。如:p{color:rgb(20%,33%,25%);}<br> 3、十六进制颜色<br> 比较普遍使用的设置方法，其原理其实也是RGB设置,只是其每一项的值由0-255变成了十六进制00-ff。<br> p{color:#00ffff;}<br> <br> <br> 长度值：<br> 目前比较常用的长度单位px(像素)、em、%百分比,其实这三种单位都是相对单位。<br> 1、像素<br> 像素指的是显示器上的小点（CSS规范中假设"90像素=1英寸"）。目前大家倾向于使用像素（px）作为单位。<br> 2、em<br> 如果元素的font-size为14px,那么1em=14px；如果font-size为18px,那么1em=18px。<br> p{font-size:12px;text-indent:2em;}实现段落首行缩进24px（也就是两个字体大小的距离）。<br> 注意一个特殊情况：<br> 当给font-size设置单位为em时，此时计算标准以p的父元素的font-size为基础。如下代码：<br> html:<br> <p>以这个<span>例子</span>为例。</p><br> css:<br> p{font-size:14px}<br> span{font-size:0.8em;}<br> 结果span中的字体“例子”字体大小就为11.2px(14 * 0.8=11.2px）。<br> 3、百分比<br> p{font-size:12px;line-height:130%}<br> 设置行高(行间距)为字体的130%(12*1.3=15.6px)<br> <br> <br> 水平居中设置:分为行内元素和块状元素.块状元素又分为定宽块状元素和不定宽块状元素.<br> <br> <br> 水平居中设置-行内元素：<br> 当被设置元素为文本、图片等行内元素时，通过给父元素设置text-align:center来实现水平居中。<br> 父元素和子元素：div是“我想要在父容器中水平居中显示”这个文本的父元素。<br> <body><br> <div class="txtCenter">我想要在父容器中水平居中显示。</div><br> </body><br> <br> <br> <style><br> .txtCenter{<br> text-align:center;<br> }<br> </style><br> <br> <br> 水平居中设置-定宽块状元素：定宽块状元素(块状元素的宽度width为固定值)<br> 满足定宽和块状两个条件的元素通过设置“左右margin”值为“auto”来实现居中。<br> 设置div这个块状元素水平居中：<br> <body><br> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div><br> </body><br> <br> <br> <style><br> div{<br> border:1px solid red;/*为了显示居中效果明显为div设置了边框*/ <br> width:200px;/*定宽*/<br> margin:20px auto;/*margin-left与margin-right设置为auto */<br> }<br> </style><br> 也可以写成：<br> margin-left:auto;<br> margin-right:auto;<br> 注意：元素的“上下 margin”是可以随意设置的。<br> <br> <br> 水平居中设置-不定宽块状元素：不定宽块状元素(块状元素的宽度width不固定)。<br> 设置不定宽元素居中的方式有三种：<br> 1加入 table 标签<br> 2设置 display:inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置<br> 3设置 position:relative 和 left:50%：采用相对定位的方式，将元素向左偏移50%。<br> <br> <br> 方法一：利用table标签的长度自适应性--table其长度根据其内文本长度决定，因此可以看做一个定宽度块状元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。<br> 第一步：为需要设置居中的元素外面加入一个table 标签(包括<tbody>、<tr>、<td>)。<br> 第二步：为这个table设置“左右 margin 居中”。<br> <div><br> <table><br> <tbody><br> <tr><td><br> <ul><br> <li>我是第一行文本</li><br> /ul><br> </td></tr><br> </tbody><br> </table><br> </div><br> <br> <br> <style><br> table{<br> border:1px solid;<br> margin:0 auto;<br> }<br> </style><br> <br> <br> 方法二：改变块级元素的display为inline类型(设置为行内元素显示),然后使用text-align:center来实现居中效果。<br> <body><br> <div class="container"><br> <ul><br> <li><a href="#">1</a></li><br> <li><a href="#">2</a></li><br> </ul><br> </div><br> </body><br> <br> <br> <style> <br> .container{<br> text-align:center;<br> }<br> .container ul{<br> list-style:none;/*列表样式无*/<br> margin:0;<br> padding:0;/*消除文本与div边框之间的间隙*/<br> display:inline;<br> }<br> .container li{<br> margin-right:8px;/*设置li文本之间的间隔*/<br> display:inline;<br> }<br> </style><br> 这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的display类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。<br> <br> <br> 方法三：通过给父元素设置float，然后给父元素设置position:relative和left:50%,子元素设置position:relative 和left:-50%来实现水平居中。<br> <body><br> <div class="container"><br> <ul><br> <li><a href="#">1</a></li><br> <li><a href="#">2</a></li><br> </ul><br> </div><br> </body><br> <br> <br> <style><br> .container{<br> float:left;<br> position:relative;<br> left:50%<br> }<br> .container ul{<br> list-style:none;<br> margin:0;<br> padding:0; <br> position:relative;<br> left:-50%;<br> }<br> .container li{float:left;display:inline;margin-right:8px;}<br> </style><br> <br> <br> 垂直居中设置:分为父元素高度确定的单行文本和多行文本。<br> 垂直居中设置--单行文本:<br> 设置父元素的height和line-height高度一致来实现。弊端:当文字内容的长度大于块的宽时，就有内容脱离了块。<br> <div class="container"><br> hi,imooc!<br> </div><br> <br> <br> <style><br> .container{<br> height:100px;<br> line-height:100px;<br> background:#999;<br> }<br> </style><br> <br> <br> 垂直居中设置-多行文本：<br> 方法一：插入table(包括tbody、tr、td)标签，同时设置vertical-align:middle(竖直居中)，父元素设置此样式时，会对inline-block类型的子元素都有用。<br> <body><br> <table><tbody><tr><td class="wrap"><br> <div><br> <p>看我是否可以居中。</p><br> </div><br> </td></tr></tbody></table><br> </body><br> <br> <br> table td{height:500px;background:#ccc}<br> 因为td标签默认情况下就默认设置了vertical-align为middle，所以不需要显式地设置。<br> <br> <br> 方法二：设置块级元素的display为table-cell(表格单元显示)，激活vertical-align属性，这种方法的好处是不用添加多余的无意义的标签，但是它的兼容性不是很好，不兼容IE6、7这样修改。 <br> <br> <br> 隐性改变display类型：<br> 当为元素(display:none除外)设置以下2个句之一：<br> 1. position:absolute <br> 2. float:left或float:right <br> 元素的display显示类型就会自动变为以display:inline-block（块状元素）的方式显示，当然就可以设置元素的width和height了，且默认宽度不占满父元素。<br> a标签是行内元素,设置width是没有效果的,但是设置为position:absolute就行了。<br> <div class="container"><br> <a href="#" title="">进入课程请单击这里</a><br> </div><br> <br> <br> <style><br> .container a{<br> position:absolute;<br> width:200px;<br> background:#ccc;<br> }<br> </style><br> <br> <br> JavaScript<br> 定义变量：使用关键字var。语法:var 变量名<br> 变量名可以任意取名，但要遵循命名规则：<br> 1.变量必须使用字母、下划线(_)或者美元符($)开始。<br> 2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。<br> 3.不能使用JavaScript关键词与JavaScript保留字。<br> <br> <br> 定义函数：使用关键字function<br> function 函数名()<br> {<br> 函数代码;<br> }<br> <br> <br> document.write():用于直接在网页中输出内容。<br> 第一种:输出内容用""括起，直接输出""号内的内容。<br> document.write("I love JavaScript！"); <br> 第二种:通过变量，输出内容。<br> var mystr="hello world!";<br> document.write(mystr); <br> 第三种:输出多项内容，内容之间用+号连接。<br> var mystr="hello";<br> document.write(mystr+"I love JavaScript");<br> 第四种:输出HTML标签，并起作用，标签使用""括起来。<br> var mystr="hello";<br> document.write(mystr+"<br>");//输出hello后，输出一个换行符<br> document.write("JavaScript");<br> <br> <br> 警告(alert消息对话框)<br> 语法:alert(字符串或变量); <br> 注:alert弹出消息对话框(包含一个确定按钮)。<br> <br> <br> 确认(confirm消息对话框)<br> 语法:confirm(str);<br> 参数说明:<br> str：在消息对话框中要显示的文本<br> 返回值: Boolean值,当用户点击"确定"按钮时，返回true点击"取消"按钮时，返回false<br> 注: 通过返回值可以判断用户点击了什么按钮<br> <br> <br> 提问(prompt)消息对话框<br> 用于询问一些需要与用户交互的信息。弹出消息对话框(包含一个确定按钮、取消按钮与一个文本输入框)<br> 语法:prompt(str1, str2);<br> 参数说明：<br> str1: 要显示在消息对话框中的文本,不可修改 str2：文本框中的内容,可以修改<br> 返回值:<br> 1. 点击确定按钮，文本框中的内容将作为函数返回值<br> 2. 点击取消按钮，将返回null<br> <br> <br> 打开新窗口(window.open)<br> open()方法可以查找一个已经存在或者新建的浏览器窗口。<br> 语法：window.open([URL], [窗口名称], [参数字符串])<br> 参数说明:<br> URL：在窗口中要显示网页的网址或路径。<br> 窗口名称:被打开窗口的名称。<br> 1.该名称由字母、数字和下划线字符组成。<br> 2."_top：、"_blank"、"_self"具有特殊意义的名称。<br> _blank：在新窗口显示目标网页<br> _self：在当前窗口显示目标网页<br> _top：框架网页中在上部窗口中显示目标网页<br> 3.相同name的窗口只能创建一个，要想创建多个窗口则name不能相同。<br> 4.name不能包含空格。<br> 参数字符串：设置窗口参数，各参数用逗号隔开。<br> <br> <br> 关闭窗口(window.close)<br> close()关闭窗口<br> 用法：window.close(); //关闭本窗口 或<br> <窗口对象>.close(); //关闭指定的窗口<br> mywin=window.open('http://www.imooc.com'); //将新打开的窗口对象，存储在变量mywin中<br> mywin.close();<br> <br> <br> DOM(Document Object Model):文档对象模型,定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。<br> <br> <br> HTML文档可以说由节点构成的集合,三种常见的DOM节点:<br> 1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。<br> 2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。<br> 3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。<br> <a href="http://www.imooc.com">JavaScript DOM</a><br> <br> <br> 通过ID获取元素<br> 标签的id属性值是唯一的，通过身份证号就可以找到相对应的人。在网页中，通过id先找到标签，然后进行操作。<br> document.getElementById("id") <br> 结果:null或[object HTMLParagraphElement]<br> 注:获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。<br> <br> innerHTML属性<br> Object.innerHTML<br> 注意:1.Object是获取的元素对象，如通过document.getElementById("ID")获取的元素。<br> 2.注意书写，innerHTML区分大小写。<br> <br> 改变HTML样式：<br> Object.style.property=new style;<br> <br> <br> 显示和隐藏（display属性）<br> 网页中经常会看到显示和隐藏的效果，可通过display属性来设置。<br> Object.style.display=value<br> value=none 此元素不会被显示(即隐藏)<br> value=block 此元素将显示为块级元素(即显示)<br> <br> <br> 控制类名(className属性)<br> className属性设置或返回元素的class属性。<br> object.className=classname<br> 作用: <br> 1.获取元素的class属性<br> 2.为网页内的某个元素指定一个css样式来更改该元素的外观<br> <br> <br> removeAttribute()方法删除指定的属性。<br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> </span>
<br>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1740377007352463360"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js"></script>
<!-- 文章页-底部 动态广告位 -->
<div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
</div>
<div class="col-md-3">
<div class="row" id="ad">
<!-- 文章页-右侧1 动态广告位 -->
<div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_1"> </div>
</div>
<!-- 文章页-右侧2 动态广告位 -->
<div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_2"></div>
</div>
<!-- 文章页-右侧3 动态广告位 -->
<div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
<div class="youdao-fixed-ad" id="detail_ad_3"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(网页,html,css,搜索引擎,javascript,标签)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1899486451452669952.htm"
title="tauri如何实现窗口拖动，自定义标题栏" target="_blank">tauri如何实现窗口拖动，自定义标题栏</a>
<span class="text-muted">爱音乐的程序猿</span>
<a class="tag" taget="_blank" href="/search/rust%E8%AF%AD%E8%A8%80/1.htm">rust语言</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/tauri/1.htm">tauri</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</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%A1%8C%E9%9D%A2%E8%BD%AF%E4%BB%B6/1.htm">桌面软件</a><a class="tag" taget="_blank" href="/search/exe/1.htm">exe</a>
<div>文章目录一、tauri是什么？二、封装好的标题栏，引用修改即可使用三相关配置实现细节实现窗口拖动一、tauri是什么？Tauri是一个开源框架，用于创建跨平台的桌面应用程序。它使用Rust编程语言，并结合了现有的Web技术，如HTML、CSS和JavaScript。Tauri旨在提供一个快速、可靠和安全的方式来构建本地应用程序，同时保持Web开发的灵活性和易用性。它支持多个操作系统和架构，包括Wi</div>
</li>
<li><a href="/article/1899482286072590336.htm"
title="解释 TypeScript 中的类型系统，如何定义和使用类型？" target="_blank">解释 TypeScript 中的类型系统，如何定义和使用类型？</a>
<span class="text-muted">程序员黄同学</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>1.类型系统的核心作用TypeScript类型系统本质上是JavaScript的静态类型增强方案，提供三个核心价值：开发阶段类型检查（类似编译时eslint）更清晰的API文档（类型即文档）更好的IDE自动补全支持代码示例：//错误示范：未指定类型导致潜在隐患functionadd(a,b){returna+b;}add('hello',123);//运行时错误但编译期不报错//正确类型标注fun</div>
</li>
<li><a href="/article/1899473581058879488.htm"
title="HTML基础标签" target="_blank">HTML基础标签</a>
<span class="text-muted">雪兔♛</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a>
<div>基础标签＜！--id属性，唯一的确定一个标签，id名字具有唯一性-->回到这里飞流直下三千尺飞流直下三千尺飞流直下三千尺飞流直下三千尺飞流直下三千尺飞流直下三千尺飞流直下三千尺飞流直下三千尺飞流直下三千尺飞流直下三千尺百度一下，你就知道登录点击回到顶部</div>
</li>
<li><a href="/article/1899467911991455744.htm"
title="正则表达式（1）" target="_blank">正则表达式（1）</a>
<span class="text-muted">林深的林</span>
<a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a>
<div>正则表达式概述正则表达式，又称正规表示法、常规表示法（英语：RegularExpression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。正则表达式类似于JSON,是一种通用的标准,被各种开发语言所支持,包括但不限于:Java,JavaScript,C,C++,C#,Python,SQL等等;因为在J</div>
</li>
<li><a href="/article/1899463879583395840.htm"
title="27.2:Python的Django框架优点和缺点是什么？" target="_blank">27.2:Python的Django框架优点和缺点是什么？</a>
<span class="text-muted">小兔子平安</span>
<a class="tag" taget="_blank" href="/search/Python%E5%AE%8C%E6%95%B4%E5%AD%A6%E4%B9%A0%E5%85%A8%E8%A7%A3%E7%AD%94/1.htm">Python完整学习全解答</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
<div>课程概述①易于学习和使用②高度可定制③强大的安全性④性能问题——举例分析（博客应用程序，包括博客文章、评论和标签等功能）——举例分析（电子商务网站，包括商品、购物车和订单等功能）课程总结课程概述Python作为一种强大而又易于学习的编程语言，已经被广泛应用于各种领域，尤其是Web开发领域。而Django框架作为PythonWeb开发的一个重要组成部分，具有一些独特的优点和缺点，需要开发人员在使用时</div>
</li>
<li><a href="/article/1899459211264323584.htm"
title="使用 Particles.js 和 GSAP 实现炫酷的网页粒子动画效果" target="_blank">使用 Particles.js 和 GSAP 实现炫酷的网页粒子动画效果</a>
<span class="text-muted">木木黄木木</span>
<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>使用Particles.js和GSAP实现炫酷的网页粒子动画效果前言在现代网页设计中，交互动效对于提升用户体验起着重要作用。本文将介绍如何结合Particles.js和GSAP动画库，创建一个引人注目的粒子动画效果网页。效果展示这里写目录标题使用Particles.js和GSAP实现炫酷的网页粒子动画效果前言效果展示技术栈实现步骤1.基础结构搭建2.样式设计4.GSAP动画实现5.自定义鼠标指针效</div>
</li>
<li><a href="/article/1899443585930031104.htm"
title="Vue-前端发展史" target="_blank">Vue-前端发展史</a>
<span class="text-muted">lengzher_5601</span>
<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><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a>
<div>文章目录Vue-前端发展史二、前端发展史1、UI框架2、JavaScript构建工具3、三端同一4、后端技术5、主流前端框架混合开发微信小程序Vue-前端发展史二、前端发展史1、UI框架Ant-Design：阿里巴巴出品，基于React的UI框架ElementUI、iview、ice：饿了么出品，基于Vue的UI框架BootStrap：Teitter推出的一个用于前端开发的开源工具包AmazeUI</div>
</li>
<li><a href="/article/1899442702450225152.htm"
title="HTML5 Canvas制作雪花飘落动画" target="_blank">HTML5 Canvas制作雪花飘落动画</a>
<span class="text-muted">坚持坚持那些年</span>
<div>本文还有配套的精品资源，点击获取简介：HTML5引入了Canvas元素，它赋予网页设计师丰富的绘图能力，允许通过JavaScript实现复杂的动画效果。本文将介绍如何结合HTML5的Canvas元素和JavaScript创建一个全屏的雪花飘落背景动画。通过定义雪花对象、创建雪花数组、编写主循环并利用requestAnimationFrame来绘制和更新雪花位置，我们能够实现一个逼真的雪花飘落动画效</div>
</li>
<li><a href="/article/1899442702886432768.htm"
title="Poe AI推出Previews预览功能！对标Claude Artifacts！" target="_blank">Poe AI推出Previews预览功能！对标Claude Artifacts！</a>
<span class="text-muted">AI信息Gap</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a><a class="tag" taget="_blank" href="/search/gpt/1.htm">gpt</a><a class="tag" taget="_blank" href="/search/OpenAI/1.htm">OpenAI</a><a class="tag" taget="_blank" href="/search/chatgpt/1.htm">chatgpt</a>
<div>Anthropic在发布最新模型Claude3.5Sonnet时，同时官宣了一个针对ClaudeAI重要的更新，那就是Artifacts。新功能Artifacts允许Claude用户在与聊天机器人的对话之外，通过一个专门的窗口分享、编辑和构建重要的独立内容。这些内容通常是超过15行的文本、代码片段、HTML网页、SVG图像、图表和交互式React组件等。用户可以在专用窗口中查看、复制和编辑这些内容</div>
</li>
<li><a href="/article/1899442064261705728.htm"
title="ROS实践（三）xacro文件基础（urdf扩展）" target="_blank">ROS实践（三）xacro文件基础（urdf扩展）</a>
<span class="text-muted">简约少年</span>
<a class="tag" taget="_blank" href="/search/ROS/1.htm">ROS</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E4%BA%BA/1.htm">机器人</a><a class="tag" taget="_blank" href="/search/xacro/1.htm">xacro</a>
<div>目录一、定义二、xacro文件常见组成部分1.命名空间声明2.定义宏3.调用宏4.定义参数5.条件语句6.转换xacro文件为urdf7.gazebo标签三、代码示例1.gazebo标签使用（仿真参数配置）2.引用仿真配置并定义机器人模型（结构）四、加载仿真模型（含传感器的机器人）1.编写launch文件。2.实际效果。一、定义通俗来说，xacro就是urdf文件的一种“进阶版”，它是用来简化和优</div>
</li>
<li><a href="/article/1899441812041428992.htm"
title="Html5学习教程，从入门到精通， HTML5超链接应用的详细语法知识点和案例代码（18）" target="_blank">Html5学习教程，从入门到精通， HTML5超链接应用的详细语法知识点和案例代码（18）</a>
<span class="text-muted">知识分享小能手</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E5%BC%80%E5%8F%91/1.htm">网页开发</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80%E5%A6%82%E9%97%A8/1.htm">编程语言如门</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</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><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a>
<div>HTML5超链接应用的详细语法知识点和案例代码超链接（Hyperlink），也称为跃点链接，是互联网和文档编辑中的一种重要概念。超链接的定义超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、动画、程序、电子邮件地址、文件，甚至是一个音视频文件。如果点击了这个链接，当前页面的位置就会跳转到被链接的目标位置。在文档编辑中，超链接可以链</div>
</li>
<li><a href="/article/1899439542939742208.htm"
title="Django框架的全面指南：从入门到高级" target="_blank">Django框架的全面指南：从入门到高级</a>
<span class="text-muted">步入烟尘</span>
<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/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/sqlite/1.htm">sqlite</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
<div>本文已收录于《Python超入门指南全册》本专栏专门针对零基础和需要进阶提升的同学所准备的一套完整教学，从基础到精通不断进阶深入，后续还有实战项目，轻松应对面试，专栏订阅地址：https://blog.csdn.net/mrdeam/category_12647587.html优点：订阅限时19.9付费专栏，私信博主还可进入全栈VIP答疑群，作者优先解答机会（代码指导、远程服务），群里大佬众多可以</div>
</li>
<li><a href="/article/1899437652256550912.htm"
title="Canvas资源宝典：全面探索HTML5 Canvas技术" target="_blank">Canvas资源宝典：全面探索HTML5 Canvas技术</a>
<span class="text-muted">支然苹</span>
<div>Canvas资源宝典：全面探索HTML5Canvas技术awesome-canvasAcuratedlistofawesomeHTML5Canvaswithexamples,relatedarticlesandposts.项目地址:https://gitcode.com/gh_mirrors/aw/awesome-canvas一、项目介绍项目概述awesome-canvas是由RaphaëlMor</div>
</li>
<li><a href="/article/1899437526028972032.htm"
title="探索创新：CanvasParticles - 点燃你的网页动态效果" target="_blank">探索创新：CanvasParticles - 点燃你的网页动态效果</a>
<span class="text-muted">柏赢安Simona</span>
<div>探索创新：CanvasParticles-点燃你的网页动态效果去发现同类优质开源项目:https://gitcode.com/是一个开源的JavaScript库，专注于在HTML5Canvas上创建引人入胜的粒子动画效果。如果你是Web开发者，正在寻找一种方法为你的网站增添独特的视觉吸引力，那么这个项目绝对值得你深入了解。项目简介CanvasParticles提供了一套简洁而强大的API，让你能够</div>
</li>
<li><a href="/article/1899437273754169344.htm"
title="探索Coco-Web：一款强大的H5创作工具" target="_blank">探索Coco-Web：一款强大的H5创作工具</a>
<span class="text-muted">岑晔含Dora</span>
<div>探索Coco-Web：一款强大的H5创作工具去发现同类优质开源项目:https://gitcode.com/是一个开源的、基于Web的H5（HTML5）创作平台，旨在让开发者和设计师能够轻松地创建互动式的内容和应用。通过其直观的界面和丰富的功能，无论你是编程高手还是初学者，都能够利用Coco-Web制作出富有吸引力的数字内容。技术分析Coco-Web基于现代Web技术构建，包括：React.js:</div>
</li>
<li><a href="/article/1899437021672304640.htm"
title="探索CoreHTML5Canvas：创作动态Web图形的新工具" target="_blank">探索CoreHTML5Canvas：创作动态Web图形的新工具</a>
<span class="text-muted">郁英忆</span>
<div>探索CoreHTML5Canvas：创作动态Web图形的新工具去发现同类优质开源项目:https://gitcode.com/是一个强大的JavaScript库，专为开发者设计，旨在简化和增强在Web上创建交互式和动画图形的能力。这个项目利用HTML5Canvas元素，提供了一个简洁且高效的API，让开发人员可以轻松地构建出丰富的2D渲染效果。技术分析HTML5Canvas是HTML5的一个重要特</div>
</li>
<li><a href="/article/1899435759656562688.htm"
title="实现openAI流式打印效果 (包含markdown代码高亮及复制功能)" target="_blank">实现openAI流式打印效果 (包含markdown代码高亮及复制功能)</a>
<span class="text-muted">Todo_MrWu</span>
<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%89%8D%E7%AB%AF/1.htm">前端</a>
<div>准备工作//插件npminstallmarkdown-ithighlight.js//引入文件importMarkdownItfrom'markdown-it'importhljsfrom'highlight.js'import'highlight.js/styles/atom-one-dark.css'初始化数据data(){return{vHtml:'',//最终填充展示的htmlstring</div>
</li>
<li><a href="/article/1899435379816198144.htm"
title="前端框架的发展史" target="_blank">前端框架的发展史</a>
<span class="text-muted">Qpeterqiufengyi</span>
<a class="tag" taget="_blank" href="/search/%E4%B8%93%E6%9C%89%E5%90%8D%E8%AF%8D%E8%A7%A3%E9%87%8A/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>1、htmlcss+div从1990年代初HTML被发明开始样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。1994</div>
</li>
<li><a href="/article/1899434656143568896.htm"
title="selectdataset 发布2024最热门Top100数据集" target="_blank">selectdataset 发布2024最热门Top100数据集</a>
<span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E9%9B%86/1.htm">数据集</a>
<div>遇见数据集索引了国内外的大部分网站。首页有最新的数据集推荐：GitHub、HuggingFace、arXiv这些热门站点，都属于日级别的更新。这个站点是从搜索引擎方面去监控最新的数据集，大家如果有关注某个一个特点领域或话题的更新，可以关注这个站点：遇见数据集-让每个数据集都被发现，让每一次遇见都有价值。遇见数据集，领先的千万级数据集搜索引擎，实时追踪全球数据集，助力把握数据要素市场。https:/</div>
</li>
<li><a href="/article/1899430966187847680.htm"
title="Flask框架中局部刷新页面" target="_blank">Flask框架中局部刷新页面</a>
<span class="text-muted">oliver.chau</span>
<a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
<div>在Flask中使用AJAX仅刷新leftMenue.html你的项目使用Flask，想要在添加网站后，仅刷新leftMenue.html而不刷新整个页面，可以使用AJAX（推荐）。✅1.在app.py里创建一个返回leftMenue.html的路由在Flask里，我们需要一个专门的API来返回最新的leftMenue.html。fromflaskimportFlask,render_templat</div>
</li>
<li><a href="/article/1899430966909267968.htm"
title="Webpack 打包详细教程" target="_blank">Webpack 打包详细教程</a>
<span class="text-muted">oliver.chau</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
<div>Webpack是一个现代JavaScript应用的静态模块打包工具，它可以处理JavaScript、CSS、图片等资源，并优化它们以提高性能。以下是Webpack从基础到进阶的详细教程。1.Webpack基础概念Webpack的核心概念包括：Entry（入口）：Webpack开始打包的起点。Output（输出）：打包后的文件存放路径。Loaders（加载器）：转换非JavaScript资源（如CS</div>
</li>
<li><a href="/article/1899428569877114880.htm"
title="js触发onclick事件获取文本框中的值value" target="_blank">js触发onclick事件获取文本框中的值value</a>
<span class="text-muted">吾与谁归in</span>
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
<div>1.首先我们创建一到两个文本框，使用标签用户名：密码：2.接着我们创建script代码，创建函数获取文本框中的值，获取值是通过文本框的id获取的，使用到了标签/**创建函数*/functiononclickFun(){/*通过id获取元素*/varuser=document.getElementById("name")/*警示窗口*/alert("你好【"+user.value+"】，欢迎进入系统</div>
</li>
<li><a href="/article/1899427309929164800.htm"
title="我的投资组合网站：打造个性化的在线投资展示平台" target="_blank">我的投资组合网站：打造个性化的在线投资展示平台</a>
<span class="text-muted">Tranyn.X</span>
<div>本文还有配套的精品资源，点击获取简介：本文介绍如何创建和设计一个在线平台，用于展示个人或专业投资者的投资策略、历史表现和投资理念。网站的构建涉及网页布局、响应式设计、CSS样式控制、内容管理、数据分析、SEO优化、安全性、用户体验、个性化和社交媒体整合等多个方面，确保网站既具有吸引力又能够有效地传达投资者的专业形象和投资成就。1.投资组合网站构建与网页布局设计网站构建的初步规划在当今数字化时代，构</div>
</li>
<li><a href="/article/1899415080697655296.htm"
title="JS: 类型转换 + 运算符 + 循环" target="_blank">JS: 类型转换 + 运算符 + 循环</a>
<span class="text-muted">..儒</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>类型转换一，为什么需要类型转换JavaScript是弱数据类型：JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。坑：使用表单、prompt获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。console.log（'1000e'+‘2000')//输出结果100002000此时需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型</div>
</li>
<li><a href="/article/1899414197138157568.htm"
title="Uniapp组件 Textarea 字数统计和限制" target="_blank">Uniapp组件 Textarea 字数统计和限制</a>
<span class="text-muted">weixin_42220130</span>
<a class="tag" taget="_blank" href="/search/uniapp/1.htm">uniapp</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/textarea/1.htm">textarea</a><a class="tag" taget="_blank" href="/search/%E8%BE%93%E5%85%A5%E6%A1%86/1.htm">输入框</a><a class="tag" taget="_blank" href="/search/%E7%BB%9F%E8%AE%A1/1.htm">统计</a><a class="tag" taget="_blank" href="/search/%E9%99%90%E5%88%B6/1.htm">限制</a>
<div>UniappTextarea字数统计和限制在Uniapp中，可以通过监听textarea的input事件来实现字数统计功能。以下是一个简单的示例，展示如何在textarea的右下角显示输入的字符数。示例代码首先，在模板中定义一个textarea元素，并绑定input事件处理函数：{{fontNum}}/200然后，在JavaScript部分定义updateFontNum方法来更新字符数：expor</div>
</li>
<li><a href="/article/1899412180600680448.htm"
title="Web端测试时，接口返回200，页面有没显示，可能时什么原因？" target="_blank">Web端测试时，接口返回200，页面有没显示，可能时什么原因？</a>
<span class="text-muted">海姐软件测试</span>
<a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a>
<div>需从系统架构、前后端交互、测试方法三个维度展开分析，结合具体场景给出可落地的排查方案：一、核心原因分析（按优先级排序）前端渲染异常JS脚本执行错误（如语法错误导致页面渲染中断）DOM元素未正确加载（XHR异步请求未完成时触发渲染）CSS样式冲突（display:none/visibility:hidden导致元素不可见）数据解析错误接口返回字段缺失（如缺少关键展示字段id）数据格式不符合预期（如字</div>
</li>
<li><a href="/article/1899411170629054464.htm"
title="如何有效管理 JavaScript 中的内存：垃圾回收与最佳实践" target="_blank">如何有效管理 JavaScript 中的内存：垃圾回收与最佳实践</a>
<span class="text-muted">名之以父</span>
<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%AE%89%E5%85%A8/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%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a>
<div>“垃圾回收是现代编程语言的核心特性之一，它使得开发者可以专注于功能实现，而无需担心内存管理的细节。”——在JavaScript中，垃圾回收（GC）是一个自动化的内存管理过程，它帮助我们确保不再使用的内存得到释放。尽管JavaScript的垃圾回收机制非常强大，但如果对其原理和工作方式不够了解，也可能导致一些性能问题和内存泄漏。本文将深入探讨JavaScript中的垃圾回收机制、算法以及如何优化垃圾</div>
</li>
<li><a href="/article/1899411172239667200.htm"
title="【JavaScript 】垃圾回收机制进阶解析：提高性能的终极指南" target="_blank">【JavaScript 】垃圾回收机制进阶解析：提高性能的终极指南</a>
<span class="text-muted">名之以父</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/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/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
<div>“垃圾回收机制不仅是内存管理的基石，更是高效Web开发的保障。在JavaScript中，理解其工作原理至关重要。”在JavaScript中，垃圾回收（GarbageCollection，GC）是一个自动化的内存管理过程，能够有效防止内存泄漏虽然这看似是一个简单的机制，但背后却包含着丰富的理论与实现细节。理解这些原理，不仅能够帮助我们写出更高效的代码，还能避免一些性能问题和内存泄漏。本文将带你深入探</div>
</li>
<li><a href="/article/1899408650099814400.htm"
title="卡尔曼滤波算法c语言stm32,卡尔曼滤波算法及C语言实现_源代码" target="_blank">卡尔曼滤波算法c语言stm32,卡尔曼滤波算法及C语言实现_源代码</a>
<span class="text-muted">weixin_39643255</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%A1%E5%B0%94%E6%9B%BC%E6%BB%A4%E6%B3%A2%E7%AE%97%E6%B3%95c%E8%AF%AD%E8%A8%80stm32/1.htm">卡尔曼滤波算法c语言stm32</a>
<div>a往南向北2019-01-1620:39:2011340收藏111分类专栏：C语言嵌入式文章标签：卡尔曼滤波C代码卡尔曼滤波理论很容易就可以在MATLAB软件环境下实现，但是，实际的硬件板子上还是需要C语言，当然可以自动代码生成，还有一种就是直接手动编写C语言。1.前言在google上搜索卡尔曼滤波，很容易找到以下这个帖子：http://blog.csdn.net/lanbing510/artic</div>
</li>
<li><a href="/article/1899405119406010368.htm"
title="JavaScript面试宝典" target="_blank">JavaScript面试宝典</a>
<span class="text-muted">傻小胖</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>1.JS由哪三部分组成？JavaScript由以下三部分组成：ECMAScript（ES）：JavaScript的核心语法，如变量、作用域、数据类型、函数、对象等。DOM（文档对象模型）：用于操作HTML和XML文档的API，可以动态修改网页内容、结构和样式。BOM（浏览器对象模型）：用于操作浏览器窗口和页面，例如window、navigator、location、history、screen等对</div>
</li>
<li><a href="/article/39.htm"
title="java Illegal overloaded getter method with ambiguous type for propert的解决" target="_blank">java Illegal overloaded getter method with ambiguous type for propert的解决</a>
<span class="text-muted">zwllxs</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a>
<div>好久不来iteye,今天又来看看，哈哈,今天碰到在编码时，反射中会抛出
Illegal overloaded getter method with ambiguous type for propert这么个东东，从字面意思看，是反射在获取getter时迷惑了，然后回想起java在boolean值在生成getter时，分别有is和getter，也许我们的反射对象中就有is开头的方法迷惑了jdk，</div>
</li>
<li><a href="/article/166.htm"
title="IT人应当知道的10个行业小内幕" target="_blank">IT人应当知道的10个行业小内幕</a>
<span class="text-muted">beijingjava</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E4%BA%92%E8%81%94%E7%BD%91/1.htm">互联网</a>
<div>10. 虽然IT业的薪酬比其他很多行业要好，但有公司因此视你为其“佣人”。
尽管IT人士的薪水没有互联网泡沫之前要好，但和其他行业人士比较，IT人的薪资还算好点。在接下的几十年中，科技在商业和社会发展中所占分量会一直增加，所以我们完全有理由相信，IT专业人才的需求量也不会减少。
然而，正因为IT人士的薪水普遍较高，所以有些公司认为给了你这么多钱，就把你看成是公司的“佣人”，拥有你的支配</div>
</li>
<li><a href="/article/293.htm"
title="java 实现自定义链表" target="_blank">java 实现自定义链表</a>
<span class="text-muted">CrazyMizzz</span>
<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%E7%BB%93%E6%9E%84/1.htm">数据结构</a>
<div>1.链表结构
链表是链式的结构
2.链表的组成
链表是由头节点，中间节点和尾节点组成
节点是由两个部分组成：
1.数据域
2.引用域
3.链表的实现
&nbs</div>
</li>
<li><a href="/article/420.htm"
title="web项目发布到服务器后图片过一会儿消失" target="_blank">web项目发布到服务器后图片过一会儿消失</a>
<span class="text-muted">麦田的设计者</span>
<a class="tag" taget="_blank" href="/search/struts2/1.htm">struts2</a><a class="tag" taget="_blank" href="/search/%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87/1.htm">上传图片</a><a class="tag" taget="_blank" href="/search/%E6%B0%B8%E4%B9%85%E4%BF%9D%E5%AD%98/1.htm">永久保存</a>
<div> 作为一名学习了android和j2ee的程序员，我们必须要意识到，客服端和服务器端的交互是很有必要的，比如你用eclipse写了一个web工程，并且发布到了服务器（tomcat）上，这时你在webapps目录下看到了你发布的web工程，你可以打开电脑的浏览器输入http://localhost:8080/工程/路径访问里面的资源。但是，有时你会突然的发现之前用struts2上传的图片</div>
</li>
<li><a href="/article/547.htm"
title="CodeIgniter框架Cart类 name 不能设置中文的解决方法" target="_blank">CodeIgniter框架Cart类 name 不能设置中文的解决方法</a>
<span class="text-muted">IT独行者</span>
<a class="tag" taget="_blank" href="/search/CodeIgniter/1.htm">CodeIgniter</a><a class="tag" taget="_blank" href="/search/Cart/1.htm">Cart</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6%E3%80%80/1.htm">框架 </a>
<div>今天试用了一下CodeIgniter的Cart类时遇到了个小问题，发现当name的值为中文时，就写入不了session。在这里特别提醒一下。 在CI手册里也有说明，如下：
$data = array(
'id' => 'sku_123ABC',
'qty' => 1,
'</div>
</li>
<li><a href="/article/674.htm"
title="linux回收站" target="_blank">linux回收站</a>
<span class="text-muted">_wy_</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%9B%9E%E6%94%B6%E7%AB%99/1.htm">回收站</a>
<div>今天一不小心在ubuntu下把一个文件移动到了回收站，我并不想删，手误了。我急忙到Nautilus下的回收站中准备恢复它，但是里面居然什么都没有。 后来我发现这是由于我删文件的地方不在HOME所在的分区，而是在另一个独立的Linux分区下，这是我专门用于开发的分区。而我删除的东东在分区根目录下的.Trash-1000/file目录下，相关的删除信息（删除时间和文件所在</div>
</li>
<li><a href="/article/801.htm"
title="jquery回到页面顶端" target="_blank">jquery回到页面顶端</a>
<span class="text-muted">知了ing</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>html代码：
<h1 id="anchor">页面标题</h1>
<div id="container">页面内容</div>
<p><a href="#anchor" class="topLink">回到顶端</a><</div>
</li>
<li><a href="/article/928.htm"
title="B树、B-树、B+树、B*树" target="_blank">B树、B-树、B+树、B*树</a>
<span class="text-muted">矮蛋蛋</span>
<a class="tag" taget="_blank" href="/search/B%E6%A0%91/1.htm">B树</a>
<div>原文地址：
http://www.cnblogs.com/oldhorse/archive/2009/11/16/1604009.html
B树
即二叉搜索树：
1.所有非叶子结点至多拥有两个儿子（Left和Right）；
&nb</div>
</li>
<li><a href="/article/1055.htm"
title="数据库连接池" target="_blank">数据库连接池</a>
<span class="text-muted">alafqq</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E8%BF%9E%E6%8E%A5%E6%B1%A0/1.htm">数据库连接池</a>
<div>http://www.cnblogs.com/xdp-gacl/p/4002804.html
@Anthor:孤傲苍狼
数据库连接池
用MySQLv5版本的数据库驱动没有问题，使用MySQLv6和Oracle的数据库驱动时候报如下错误：
java.lang.ClassCastException: $Proxy0 cannot be cast to java.sql.Connec</div>
</li>
<li><a href="/article/1182.htm"
title="java泛型" target="_blank">java泛型</a>
<span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/java%E6%B3%9B%E5%9E%8B/1.htm">java泛型</a>
<div>泛型
在Java SE 1.5之前，没有泛型的情况的下，通过对类型Object的引用来实现参数的“任意化”，任意化的缺点就是要实行强制转换，这种强制转换可能会带来不安全的隐患
泛型的特点：消除强制转换 确保类型安全 向后兼容
简单泛型的定义：
泛型：就是在类中将其模糊化，在创建对象的时候再具体定义
class fan</div>
</li>
<li><a href="/article/1309.htm"
title="javascript闭包[两个小测试例子]" target="_blank">javascript闭包[两个小测试例子]</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
<div>一.程序一
<script>
var name = "The Window";
var Object_a = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
</div>
</li>
<li><a href="/article/1436.htm"
title="探索JUnit4扩展：假设机制（Assumption）" target="_blank">探索JUnit4扩展：假设机制（Assumption）</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Assumption/1.htm">Assumption</a><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a>
<div>一.假设机制（Assumption）概述 理想情况下，写测试用例的开发人员可以明确的知道所有导致他们所写的测试用例不通过的地方，但是有的时候，这些导致测试用例不通过的地方并不是很容易的被发现，可能隐藏得很深，从而导致开发人员在写测试用例时很难预测到这些因素，而且往往这些因素并不是开发人员当初设计测试用例时真正目的，</div>
</li>
<li><a href="/article/1563.htm"
title="【Gson四】范型POJO的反序列化" target="_blank">【Gson四】范型POJO的反序列化</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a>
<div>在下面这个例子中，POJO(Data类)是一个范型类，在Tests中，指定范型类为PieceData，POJO初始化完成后，通过
String str = new Gson().toJson(data);
得到范型化的POJO序列化得到的JSON串，然后将这个JSON串反序列化为POJO
import com.google.gson.Gson;
import java.</div>
</li>
<li><a href="/article/1690.htm"
title="【Spark八十五】Spark Streaming分析结果落地到MySQL" target="_blank">【Spark八十五】Spark Streaming分析结果落地到MySQL</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/Stream/1.htm">Stream</a>
<div>几点总结：
1. DStream.foreachRDD是一个Output Operation，类似于RDD的action，会触发Job的提交。DStream.foreachRDD是数据落地很常用的方法
2. 获取MySQL Connection的操作应该放在foreachRDD的参数（是一个RDD[T]=>Unit的函数类型)，这样，当foreachRDD方法在每个Worker上执行时，</div>
</li>
<li><a href="/article/1817.htm"
title="NGINX + LUA实现复杂的控制" target="_blank">NGINX + LUA实现复杂的控制</a>
<span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/nginx+lua/1.htm">nginx lua</a>
<div>安装lua_nginx_module 模块
lua_nginx_module 可以一步步的安装，也可以直接用淘宝的OpenResty
Centos和debian的安装就简单了。。
这里说下freebsd的安装：
fetch http://www.lua.org/ftp/lua-5.1.4.tar.gz
tar zxvf lua-5.1.4.tar.gz
cd lua-5.1.4
ma</div>
</li>
<li><a href="/article/1944.htm"
title="java-递归判断数组是否升序" target="_blank">java-递归判断数组是否升序</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>
public class IsAccendListRecursive {
/*递归判断数组是否升序
* if a Integer array is ascending,return true
* use recursion
*/
public static void main(String[] args){
IsAccendListRecursiv</div>
</li>
<li><a href="/article/2071.htm"
title="Netty源码学习-DefaultChannelPipeline2" target="_blank">Netty源码学习-DefaultChannelPipeline2</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a>
<div>Netty3的API
http://docs.jboss.org/netty/3.2/api/org/jboss/netty/channel/ChannelPipeline.html
里面提到ChannelPipeline的一个“pitfall”：
如果ChannelPipeline只有一个handler（假设为handlerA）且希望用另一handler（假设为handlerB）
来</div>
</li>
<li><a href="/article/2198.htm"
title="Java工具之JPS" target="_blank">Java工具之JPS</a>
<span class="text-muted">chinrui</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>JPS使用
熟悉Linux的朋友们都知道，Linux下有一个常用的命令叫做ps（Process Status)，是用来查看Linux环境下进程信息的。同样的，在Java Virtual Machine里面也提供了类似的工具供广大Java开发人员使用，它就是jps（Java Process Status)，它可以用来</div>
</li>
<li><a href="/article/2325.htm"
title="window.print分页打印" target="_blank">window.print分页打印</a>
<span class="text-muted">ctrain</span>
<a class="tag" taget="_blank" href="/search/window/1.htm">window</a>
<div>
function init() {
var tt = document.getElementById("tt");
var childNodes = tt.childNodes[0].childNodes;
var level = 0;
for (var i = 0; i < childNodes.length; i++) {
</div>
</li>
<li><a href="/article/2452.htm"
title="安装hadoop时 执行jps命令Error occurred during initialization of VM" target="_blank">安装hadoop时 执行jps命令Error occurred during initialization of VM</a>
<span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/jps/1.htm">jps</a>
<div>在安装hadoop时，执行JPS出现下面错误
[slave16]root@192.168.11.10:/tmp/hsperfdata_hdfs# jps
Error occurred during initialization of VM
java.lang.Error: Properties init: Could not determine current working</div>
</li>
<li><a href="/article/2579.htm"
title="PHP开发大型项目的一点经验" target="_blank">PHP开发大型项目的一点经验</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E9%87%8D%E6%9E%84/1.htm">重构</a>
<div>一、变量 最好是把所有的变量存储在一个数组中，这样在程序的开发中可以带来很多的方便，特别是当程序很大的时候。变量的命名就当适合自己的习惯，不管是用拼音还是英语，至少应当有一定的意义，以便适合记忆。变量的命名尽量规范化，不要与PHP中的关键字相冲突。 二、函数 PHP自带了很多函数，这给我们程序的编写带来了很多的方便。当然，在大型程序中我们往往自己要定义许多个函数，几十</div>
</li>
<li><a href="/article/2706.htm"
title="android笔记之--向网络发送GET/POST请求参数" target="_blank">android笔记之--向网络发送GET/POST请求参数</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
<div>使用GET方法发送请求
private static boolean sendGETRequest (String path,
Map<String, String> params) throws Exception{
//发送地http://192.168.100.91:8080/videoServi</div>
</li>
<li><a href="/article/2833.htm"
title="linux复习笔记 之bash shell (3) 通配符" target="_blank">linux复习笔记 之bash shell (3) 通配符</a>
<span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/linux+%E9%80%9A%E9%85%8D%E7%AC%A6/1.htm">linux 通配符</a><a class="tag" taget="_blank" href="/search/linux%E9%80%9A%E9%85%8D%E7%AC%A6/1.htm">linux通配符</a>
<div>转载请出自出处：
http://eksliang.iteye.com/blog/2104387
在bash的操作环境中有一个非常有用的功能，那就是通配符。
下面列出一些常用的通配符，如下表所示 符号 意义 * 万用字符，代表0个到无穷个任意字符 ? 万用字符，代表一定有一个任意字符 [] 代表一定有一个在中括号内的字符。例如：[abcd]代表一定有一个字符，可能是a、b、c</div>
</li>
<li><a href="/article/2960.htm"
title="Android关于短信加密" target="_blank">Android关于短信加密</a>
<span class="text-muted">gqdy365</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
<div>关于Android短信加密功能，我初步了解的如下（只在Android应用层试验）：
1、因为Android有短信收发接口，可以调用接口完成短信收发；
发送过程：APP（基于短信应用修改）接受用户输入号码、内容——>APP对短信内容加密——>调用短信发送方法Sm</div>
</li>
<li><a href="/article/3087.htm"
title="asp.net在网站根目录下创建文件夹" target="_blank">asp.net在网站根目录下创建文件夹</a>
<span class="text-muted">hvt</span>
<a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/Web+Forms/1.htm">Web Forms</a>
<div>假设要在asp.net网站的根目录下建立文件夹hovertree,C#代码如下：
string m_keleyiFolderName = Server.MapPath("/hovertree");
if (Directory.Exists(m_keleyiFolderName))
{
//文件夹已经存在
return;
}
else
{
try
{
D</div>
</li>
<li><a href="/article/3214.htm"
title="一个合格的程序员应该读过哪些书" target="_blank">一个合格的程序员应该读过哪些书</a>
<span class="text-muted">justjavac</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/%E4%B9%A6%E7%B1%8D/1.htm">书籍</a>
<div>编者按：2008年8月4日，StackOverflow 网友 Bert F 发帖提问：哪本最具影响力的书，是每个程序员都应该读的？
“如果能时光倒流，回到过去，作为一个开发人员，你可以告诉自己在职业生涯初期应该读一本， 你会选择哪本书呢？我希望这个书单列表内容丰富，可以涵盖很多东西。”
很多程序员响应，他们在推荐时也写下自己的评语。 以前就有国内网友介绍这个程序员书单，不过都是推荐数</div>
</li>
<li><a href="/article/3341.htm"
title="单实例实践" target="_blank">单实例实践</a>
<span class="text-muted">跑龙套_az</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a>
<div>
1、内部类
public class Singleton {
private static class SingletonHolder {
public static Singleton singleton = new Singleton();
}
public Singleton getRes</div>
</li>
<li><a href="/article/3468.htm"
title="PO VO BEAN 理解" target="_blank">PO VO BEAN 理解</a>
<span class="text-muted">q137681467</span>
<a class="tag" taget="_blank" href="/search/VO/1.htm">VO</a><a class="tag" taget="_blank" href="/search/DTO/1.htm">DTO</a><a class="tag" taget="_blank" href="/search/po/1.htm">po</a>
<div>PO：
全称是 persistant object持久对象 最形象的理解就是一个PO就是数据库中的一条记录。 好处是可以把一条记录作为一个对象处理，可以方便的转为其它对象。
BO：
全称是 business object:业务对象 主要作用是把业务逻辑封装为一个对象。这个对</div>
</li>
<li><a href="/article/3595.htm"
title="战胜惰性，暗自努力" target="_blank">战胜惰性，暗自努力</a>
<span class="text-muted">金笛子</span>
<a class="tag" taget="_blank" href="/search/%E5%8A%AA%E5%8A%9B/1.htm">努力</a>
<div>偶然看到一句很贴近生活的话：“别人都在你看不到的地方暗自努力，在你看得到的地方，他们也和你一样显得吊儿郎当，和你一样会抱怨，而只有你自己相信这些都是真的，最后也只有你一人继续不思进取。”很多句子总在不经意中就会戳中一部分人的软肋，我想我们每个人的周围总是有那么些表现得“吊儿郎当”的存在，是否你就真的相信他们如此不思进取，而开始放松了对自己的要求随波逐流呢？
我有个朋友是搞技术的，平时嘻嘻哈哈，以</div>
</li>
<li><a href="/article/3722.htm"
title="NDK/JNI二维数组多维数组传递" target="_blank">NDK/JNI二维数组多维数组传递</a>
<span class="text-muted">wenzongliang</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/jni/1.htm">jni</a><a class="tag" taget="_blank" href="/search/NDK/1.htm">NDK</a>
<div>多维数组和对象数组一样处理，例如二维数组里的每个元素还是一个数组 用jArray表示，直到数组变为一维的，且里面元素为基本类型，去获得一维数组指针。给大家提供个例子。已经测试通过。
Java_cn_wzl_FiveChessView_checkWin( JNIEnv* env,jobject thiz,jobjectArray qizidata)
{
jint i,j;
int s</div>
</li>
</ul>
</div>
</div>
</div>
<div>
<div class="container">
<div class="indexes">
<strong>按字母分类：</strong>
<a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
</div>
</div>
</div>
<footer id="footer" class="mb30 mt30">
<div class="container">
<div class="footBglm">
<a target="_blank" href="/">首页</a> -
<a target="_blank" href="/custom/about.htm">关于我们</a> -
<a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
<a target="_blank" href="/sitemap.txt">Sitemap</a> -
<a target="_blank" href="/custom/delete.htm">侵权投诉</a>
</div>
<div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
</div>
</div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>
</body>
</html>
语义化的好处:1更容易被搜索引擎收录。2. 更容易让屏幕阅读器读出网页内容。
...
...
代码注释的语法:
标签:根标签，所有的网页标签都在中。
标签:定义文档的头部,所有头部元素的容器.头部元素有