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/1835509897106649088.htm"
title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a>
<span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div>
</li>
<li><a href="/article/1835509770287673344.htm"
title="swagger访问路径" target="_blank">swagger访问路径</a>
<span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a>
<div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div>
</li>
<li><a href="/article/1835508130608410624.htm"
title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a>
<span class="text-muted">某公司摸鱼前端</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div>
</li>
<li><a href="/article/1835504217729626112.htm"
title="Python教程：一文了解使用Python处理XPath" target="_blank">Python教程：一文了解使用Python处理XPath</a>
<span class="text-muted">旦莫</span>
<a class="tag" taget="_blank" href="/search/Python%E8%BF%9B%E9%98%B6/1.htm">Python进阶</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>目录1.环境准备1.1安装lxml1.2验证安装2.XPath基础2.1什么是XPath？2.2XPath语法2.3示例XML文档3.使用lxml解析XML3.1解析XML文档3.2查看解析结果4.XPath查询4.1基本路径查询4.2使用属性查询4.3查询多个节点5.XPath的高级用法5.1使用逻辑运算符5.2使用函数6.实战案例6.1从网页抓取数据6.1.1安装Requests库6.1.2代</div>
</li>
<li><a href="/article/1835499615491813376.htm"
title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a>
<span class="text-muted">彩云飘过</span>
<div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div>
</li>
<li><a href="/article/1835498925755297792.htm"
title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a>
<span class="text-muted">STU学生网页设计</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a>
<div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div>
</li>
<li><a href="/article/1835496149843275776.htm"
title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a>
<span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a>
<div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div>
</li>
<li><a href="/article/1835496148601761792.htm"
title="HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动</a>
<span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div>
</li>
<li><a href="/article/1835493267907637248.htm"
title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a>
<span class="text-muted">dmengmeng</span>
<div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</div>
</li>
<li><a href="/article/1835492740536823808.htm"
title="node.js学习" target="_blank">node.js学习</a>
<span class="text-muted">小猿L</span>
<a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a>
<div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div>
</li>
<li><a href="/article/1835484293607026688.htm"
title="【Git】常见命令(仅笔记)" target="_blank">【Git】常见命令(仅笔记)</a>
<span class="text-muted">好想有猫猫</span>
<a class="tag" taget="_blank" href="/search/Git/1.htm">Git</a><a class="tag" taget="_blank" href="/search/Linux%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">Linux学习笔记</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/elasticsearch/1.htm">elasticsearch</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a>
<div>文章目录创建/初始化本地仓库添加本地仓库配置项提交文件查看仓库状态回退仓库查看日志分支删除文件暂存工作区代码远程仓库使用`.gitigore`文件让git不追踪一些文件标签创建/初始化本地仓库gitinit添加本地仓库配置项gitconfig-l#以列表形式显示配置项gitconfiguser.name"ljh"#配置user.namegitconfiguser.email"123123@qq.c</div>
</li>
<li><a href="/article/1835469860977602560.htm"
title="十大可以挣钱的软件(盘点当前赚钱快还靠谱的7个赚钱软件)" target="_blank">十大可以挣钱的软件(盘点当前赚钱快还靠谱的7个赚钱软件)</a>
<span class="text-muted">高省APP大九</span>
<div>挣钱软件可以用“泛滥”来形容了，网上各式各样的打着“赚钱”标签的挣钱软件着实让人眼花缭乱，不知道的还以为随便找个软件玩玩就能发家致富，体验过的人却看得清清楚楚明明白白，挣钱软件哪有看到的那么“繁荣”，很多不过是标榜着赚钱来忽悠老百姓的“假”软件罢了！很多网友都在抱怨想找个真正能赚钱的软件太难了，有人花费了大量的时间和精力也没找到个称心如意的挣钱软件，不过现在你是幸运的，本篇千秋将为大家盘点当前赚钱</div>
</li>
<li><a href="/article/1835461543064596480.htm"
title="我在大学遇到的兼职坑2" target="_blank">我在大学遇到的兼职坑2</a>
<span class="text-muted">竹音小居</span>
<div>不要存在侥幸，天上不会掉馅饼上一次我讲述了我在某宝刷单遇到的坑，今天我就来讲讲比某宝刷单更坑的兼职，不，这应该不是兼职了，是被骗。我因为在某宝刷单交了会费，最后连本金都没有挣回来，就想找一个不用交本金的刷单平台，然后我就上网搜了一下“有没有不用交钱的兼职”，没成想还真有，我打开网页链接，看人家上面写的文案，确实很心动，不用交钱，加一下客服的qq就可以接单，而且网页上还有很多别人挣钱的截图，佣金非常</div>
</li>
<li><a href="/article/1835454921990828032.htm"
title="Java爬虫框架（一）--架构设计" target="_blank">Java爬虫框架（一）--架构设计</a>
<span class="text-muted">狼图腾-狼之传说</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%BB%BB%E5%8A%A1/1.htm">任务</a><a class="tag" taget="_blank" href="/search/html%E8%A7%A3%E6%9E%90%E5%99%A8/1.htm">html解析器</a><a class="tag" taget="_blank" href="/search/%E5%AD%98%E5%82%A8/1.htm">存储</a><a class="tag" taget="_blank" href="/search/%E7%94%B5%E5%AD%90%E5%95%86%E5%8A%A1/1.htm">电子商务</a>
<div>一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast</div>
</li>
<li><a href="/article/1835454543471669248.htm"
title="Java：爬虫框架" target="_blank">Java：爬虫框架</a>
<span class="text-muted">dingcho</span>
<a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a>
<div>一、ApacheNutch2【参考地址】Nutch是一个开源Java实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。Nutch致力于让每个人能很容易,同时花费很少就可以配置世界一流的Web搜索引擎.为了完成这一宏伟的目标,Nutch必须能够做到:每个月取几十亿网页为这些网页维护一个索引对索引文件进行每秒上千次的搜索提供高质量的搜索结果简单来说Nutch支持分</div>
</li>
<li><a href="/article/1835450511172661248.htm"
title="高中抓住这两招，帮你实现从学渣到学霸的逆袭" target="_blank">高中抓住这两招，帮你实现从学渣到学霸的逆袭</a>
<span class="text-muted">以读攻独</span>
<div>富兰克林曾说：“宝贝放错了地方便是废物。”一句话戳中了“位置”的重要性。大多数人，最初对位置的明显感受，似乎就来源于上高中时的座位：成绩好的，坐前排，那里安静，学习氛围浓，受关注度高；成绩差的坐后面，嘈杂，充斥着汗味、食品味、香水味，也经常被点名。所以，位置不仅代表了分数，也给你打上了“学渣”或“学霸”的标签。在《逆袭》这本书中，就真实地讲述一个参加了2014年高考的高中生，用三年的奋斗史，从班级</div>
</li>
<li><a href="/article/1835448851775975424.htm"
title="今日分享：有的孩子家长常常在对于小朋友老是说谎，还特别爱推卸责任，很头痛，不知道该怎么办！" target="_blank">今日分享：有的孩子家长常常在对于小朋友老是说谎，还特别爱推卸责任，很头痛，不知道该怎么办！</a>
<span class="text-muted">雨燕Cassie</span>
<div>其实六岁以前都不叫撒谎，只能叫做逃避和害怕，因为他们都是没有撒谎的这个概念，家长所谓的撒谎只能说是因为做错了事情，怕受到责罚而找一个「台阶」给自己一下而已，所以家长不能给孩子一个贴上撒谎的这个标签，如果说孩子出现家长所说的撒谎，我们应该做的是：1.允许孩子将事情的原委进行一个表达，给孩子说明的机会，不提示孩子说谎，不急著批评孩子。2.不使用问句，不恐吓和严刑逼供，耐心的以故事或者以分析的形式和孩子</div>
</li>
<li><a href="/article/1835448239864770560.htm"
title="JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）" target="_blank">JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）</a>
<span class="text-muted">跳房子的前端</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数</div>
</li>
<li><a href="/article/1835447732739862528.htm"
title="利用python实现图片格式之间的相互转换" target="_blank">利用python实现图片格式之间的相互转换</a>
<span class="text-muted">难得北窗高卧</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>一、概要图片一般有多种格式，常见的图片格式包括：JPEG（.jpg或.jpeg）：一种广泛使用的有损压缩格式，适用于摄影图像和网页上的图片。PNG（.png）：一种无损压缩格式，支持透明度和更好的图像质量，常用于图标、图形和需要透明背景的图片。该图片是4通道的，外加一个透明通道。如截屏GIF（.gif）：一种支持动画和透明度的格式，常用于简单的动画和图标。BMP（.bmp）：一种无损格式，存储图像</div>
</li>
<li><a href="/article/1835444076007223296.htm"
title="JAVA·一个简单的登录窗口" target="_blank">JAVA·一个简单的登录窗口</a>
<span class="text-muted">MortalTom</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</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%AD%A6%E4%B9%A0/1.htm">学习</a>
<div>文章目录概要整体架构流程技术名词解释技术细节资源概要JavaSwing是Java基础类库的一部分，主要用于开发图形用户界面（GUI）程序整体架构流程新建项目，导入sql.jar包（链接放在了文末），编译项目并运行技术名词解释一、特点丰富的组件提供了多种可视化组件，如按钮（JButton）、文本框（JTextField）、标签（JLabel）、下拉列表（JComboBox）等，可以满足不同的界面设计</div>
</li>
<li><a href="/article/1835443696431099904.htm"
title="笋丁网页自动回复机器人V3.0.0免授权版源码" target="_blank">笋丁网页自动回复机器人V3.0.0免授权版源码</a>
<span class="text-muted">希希分享</span>
<a class="tag" taget="_blank" href="/search/%E8%BD%AF%E5%B8%8C%E7%BD%9158soho_cn/1.htm">软希网58soho_cn</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81%E8%B5%84%E6%BA%90/1.htm">源码资源</a><a class="tag" taget="_blank" href="/search/%E7%AC%8B%E4%B8%81%E7%BD%91%E9%A1%B5%E8%87%AA%E5%8A%A8%E5%9B%9E%E5%A4%8D%E6%9C%BA%E5%99%A8%E4%BA%BA/1.htm">笋丁网页自动回复机器人</a>
<div>笋丁网页机器人一款可设置自动回复，默认消息，调用自定义api接口的网页机器人。此程序后端语言使用Golang，内存占用最高不超过30MB，1H1G服务器流畅运行。仅支持Linux服务器部署，不支持虚拟主机，请悉知！使用自定义api功能需要有一定的建站基础。源码下载：https://download.csdn.net/download/m0_66047725/89754250更多资源下载：关注我。安</div>
</li>
<li><a href="/article/1835440589164867584.htm"
title="项目：事半功倍的法宝" target="_blank">项目：事半功倍的法宝</a>
<span class="text-muted">小小效能</span>
<div>行动的三大流程：记录、排程和执行，也讲了易效能的4D原则以及T-step标签法。这些流程和方法能够解决我们眼前的一地鸡毛，让我们有更多时间和精力去关注更为长远的事情，完成工作、生活和人生中重要的项目。项目管理能够让我们围绕结果去做事情，达成事半功倍的效果，也就是做更少的事情，但达成更好的效果。如果我们能够不断地达成一个又一个的项目，那么我们的人生无疑会像滚雪球一样，在长坡道上面不断积累。一、项目的</div>
</li>
<li><a href="/article/1835435506645692416.htm"
title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a>
<span class="text-muted">有一只柴犬</span>
<a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div>
</li>
<li><a href="/article/1835435141535723520.htm"
title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a>
<span class="text-muted">夜空_2cd3</span>
<div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div>
</li>
<li><a href="/article/1835434875872702464.htm"
title="计算机网络八股总结" target="_blank">计算机网络八股总结</a>
<span class="text-muted">Petrichorzncu</span>
<a class="tag" taget="_blank" href="/search/%E5%85%AB%E8%82%A1%E6%80%BB%E7%BB%93/1.htm">八股总结</a><a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C/1.htm">计算机网络</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
<div>这里写目录标题网络模型划分（五层和七层）及每一层的功能五层网络模型七层网络模型（OSI模型）==三次握手和四次挥手具体过程及原因==三次握手四次挥手TCP/IP协议组成==UDP协议与TCP/IP协议的区别==Http协议相关知识网络地址，子网掩码等相关计算网络模型划分（五层和七层）及每一层的功能五层网络模型应用层：负责处理网络应用程序，如电子邮件、文件传输和网页浏览。主要协议包括HTTP、FTP</div>
</li>
<li><a href="/article/1835428948339683328.htm"
title="JavaScript `Map` 和 `WeakMap`详细解释" target="_blank">JavaScript `Map` 和 `WeakMap`详细解释</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%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95/1.htm">原生方法</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键</div>
</li>
<li><a href="/article/1835428317084348416.htm"
title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a>
<span class="text-muted">全能全知者</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
<div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div>
</li>
<li><a href="/article/1835427813189054464.htm"
title="解决Obsidian写笔记中的＜img＞标签无法显示图片的问题" target="_blank">解决Obsidian写笔记中的＜img＞标签无法显示图片的问题</a>
<span class="text-muted">全能全知者</span>
<a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a>
<div>Obsidian中写md笔记如果使用标签会显示不出图案，后来才知道因为Obsidian的问题导致只能用绝对路径定位。所以我本人写了一个py插件，将md笔记里的img标签批量替换成Obsidian能够读取的形式。安装FixObsImgDpy:pipinstallFixObsImgDpy安装完成后在需要修复的md文件的父目录下运行命令:FixObsImgDpy就会自动修复父目录以下的全部md文件 仓库</div>
</li>
<li><a href="/article/1835424412342513664.htm"
title="ChatGPT 高效学习套路揭秘：让知识获取事半功倍的秘诀" target="_blank">ChatGPT 高效学习套路揭秘：让知识获取事半功倍的秘诀</a>
<span class="text-muted">kkai人工智能</span>
<a class="tag" taget="_blank" href="/search/chatgpt/1.htm">chatgpt</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%AA%92%E4%BD%93/1.htm">媒体</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a>
<div>最近这段时间，AI热潮因ChatGPT的火爆再次掀起。如今，网上大部分内容都在调侃AI，但很少有人探讨如何正经使用ChatGPT做事情。作为一名靠搜索引擎和GitHub自学编程的开发者，第一次和ChatGPT深度交流后，我就确信：ChatGPT能够极大提高程序员学习新技术的效率。使用ChatGPT一个月后，我越发感受到它的颠覆性。因此，我想从工作和学习的角度，分享它的优势及我的一些使用技巧，而非娱</div>
</li>
<li><a href="/article/1835419870070665216.htm"
title="切换淘宝最新npm镜像源是" target="_blank">切换淘宝最新npm镜像源是</a>
<span class="text-muted">hai40587</span>
<a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
<div>切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库</div>
</li>
<li><a href="/article/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. 更容易让屏幕阅读器读出网页内容。
...
...
代码注释的语法:
标签:根标签，所有的网页标签都在中。
标签:定义文档的头部,所有头部元素的容器.头部元素有