雾岛LYC听风

web —— html

Web —— css基础

- - - 1. HTML
    - 2. 基本HTML结构
    - 3. HTML常用标签
    - - 3.1 文本相关标签
      - 3.2 HTML图像标签
      - 3.3 HTML超链接标签
      - 3.4 HTML表，单
      - 3.4.1 HTML表格
        
        3.4.2 HTML表单，输入框（多选框，单选框）下拉框
      - 3.5 HTML分区标签
      - 3.5.1 div标签和span标签
        
        3.5.2 article，header，section，footer，aside

1. HTML

html：超文本标记语言（HyperText Markup Language），一种用于创建网页的标准标记语言
特性：使用标签（即尖括号内的关键字）来描述文本、图像、链接等元素在页面上的呈现方式和位置
外部文件：图像、视频、音乐（单独保存的没有放在HTML 文件的，只是引用的一类文件）等

网页的三个部分
文本内容（text content）：在页面上让访问者了解页面内容的纯文字
对其他文件的引用（references to other files）：我们使用这些引用来加载图像、音频、视频文件，以及样式表（控制页面的显示效果）和JavaScript文件（为页面添加行为）
标记（markup）：对文本内容进行描述并确保引用正确地工作

HTML 页面易创性：网页可以保存为纯文本格式

网页的基础：每个网页都包含 DOCTYPE、html、head 和body 元素

开始标签（如）用于标记元素的开始
结束标签（如）用于标记元素的结束
标签的组成：元素（element）、属性（attribute）和值（value）

文件命名规则：文件名全部使用小写字母，用短横线分隔单词，用 .html 作为扩展（buckminster-fuller.html），且文件夹的名称也应全部用小写字母

2. 基本HTML结构

HTML5 页面：开头，两个部分head 和 body
分级标题：HTML 提供了六级标题用于创建页面信息的层级关系（h1、h2、h3、h4、h5 、h6）
外部文件：图像、视频、音乐（单独保存的没有放在HTML 文件的，只是引用的一类文件）等

页面基础
：DOCTYPE不区分大小写，声明页面为HTML5 文档（一本书的序言）
：页面内容默认语言的代码
：开始网页文档的头部
：文档的字符编码声明为 UTF-8
</code>：页面的标题 <code><body></code>：开始页面的主体 <ul> <li>h2 是 h1 的子标题，h3 是 h2 的子标题（以此类推，其他标题也是h1的子标题） 副标题就应该使用段落或其他非标题元素</li> </ul> </blockquote> <ul> <li> 普通页面构成 <a href="http://img.e-com-net.com/image/info8/56f7a7d72d484a869744aaec58549395.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/56f7a7d72d484a869744aaec58549395.jpg" alt="web —— html_第1张图片" width="650" height="386" style="border:1px solid black;"></a> <table align="center" border="1"> <caption> 16种基本颜色 </caption> <tbody> <tr> <td>aqua（水绿）</td> <td>black（黑）</td> <td>blue（蓝））</td> <td>fuchsia（紫红</td> <td>gray（灰）</td> <td>green（绿）</td> <td>lime（浅绿）</td> <td>maroon（褐）</td> </tr> <tr> <td>#00FFFF</td> <td>#000000</td> <td>#0000FF</td> <td>#FF00FF</td> <td>#808080</td> <td>#008000</td> <td>#00FF00</td> <td>#800000</td> </tr> <tr> <td>navy（深蓝）</td> <td>olive（橄榄）</td> <td>purple（紫）</td> <td>red（红）</td> <td>silver（银）</td> <td>teal（深青）</td> <td>white（白）</td> <td>yellow（黄）</td> </tr> <tr> <td>#000080</td> <td>#808000</td> <td>#800080</td> <td>#FF0000</td> <td>#C0C0C0</td> <td>#008080</td> <td>#FFFFFF</td> <td>#FFFF00</td> </tr> </tbody> </table> </li> </ul> <pre><code class="prism language-html"> <table align="center" border="1" style="text-align:center;"> <caption>16种基本颜色</caption> <tr> <td>aqua（水绿）</td> <td>black（黑）</td> <td>blue（蓝））</td> <td>fuchsia（紫红</td> <td>gray（灰）</td> <td>green（绿）</td> <td>lime（浅绿）</td> <td>maroon（褐）</td> </tr> <tr> <td style="background-color: #00FFFF;">#00FFFF</td> <td style="background-color:#000000;">#000000</td> <td style="background-color:#0000FF;">#0000FF</td> <td style="background-color:#FF00FF;">#FF00FF</td> <td style="background-color:#808080;">#808080</td> <td style="background-color: #008000;">#008000</td> <td style="background-color:#00FF00;">#00FF00</td> <td style="background-color:#800000;">#800000</td> </tr> <tr> <td>navy（深蓝）</td> <td>olive（橄榄）</td> <td>purple（紫）</td> <td>red（红）</td> <td>silver（银）</td> <td>teal（深青）</td> <td>white（白）</td> <td>yellow（黄）</td> </tr> <tr> <td style="background-color: #000080;">#000080</td> <td style="background-color: #808000;">#808000</td> <td style="background-color: #800080;">#800080</td> <td style="background-color: #FF0000;">#FF0000</td> <td style="background-color: #C0C0C0;">#C0C0C0</td> <td style="background-color: #008080;">#008080</td> <td style="background-color: #FFFFFF;">#FFFFFF</td> <td style="background-color: #FFFF00;">#FFFF00</td> </tr> </table> </code></pre> <h5>3. HTML常用标签</h5> <h6>3.1 文本相关标签</h6> <blockquote> HTML 标题 ▶ ➤ HTML 标题（Heading）由<code><h1> ~ <h6> </code>定义，共6级标题（定义页面中的标题和副标题，独占一行，自带行间距，字体加粗） HTML 段落 ▶ ➤ HTML 段落由标签 <code>段落</code>定义，段落不加粗，p标签可以包含任何文字、图片、链接或其他HTML元素 水平分割线 ▶ ➤ HTML中专门用于创建水平分割线的标记<code><hr></code>，属于自闭和标签 <blockquote> 属性： align：指定分割线的对齐方式（值可以为 left、center 或 right，默认为 center） color：指定分割线的颜色（值可以为颜色名或十六进制颜色代码） size：指定分割线的高度（粗细），取值可以是正整数或百分比值 width：指定分割线的长度（值可以是正整数或百分比值） </blockquote> 加粗 ▶ ➤ <code>加粗</code>标签是一种比较旧的标签，主要用于表示粗体文本；HTML5规范，更推荐使用更语义化的标签<code>加粗</code>来表示强调的重要文本，而不仅仅是简单的粗体效果 斜体 ▶ ➤ <code>斜体</code>旧标签，用来包裹需要以斜体显示的文本内容，表示强调的文本；HTML5规范<code>强调的文本</code> 下划线 ▶ ➤ <code>下划线</code>旧标签，HTML5规范，不再推荐使用标签来表示下划线，因为下划线通常与链接相关联，使用CSS样式来实现下划线效果<code>style="text-decoration: underline;"</code> 删除线 ▶ ➤ <code><s>删除线</s></code>旧标签，HTML5规范，推荐使用更语义化的标签来表示被删除的文本<code><del>删除的文本</del></code> 无序列表unordered list ▶ ➤ <code><ul></code>标签用于创建无序列表，其中包含项目，每个项目使用<code><li></code>标签来表示 <pre><code class="prism language-html"><ul type="circle"> <li>项目1</li> <li>项目2</li> <li>项目3</li> </ul> </code></pre> <blockquote> 属性： <code>type</code>：指定无序列表的符号类型 “disc”（默认）：实心圆点符号 “circle”：空心圆圈符号 “square”：方块符号 <code>start</code>：用于指定无序列表的起始值，默认为1 <code>compact</code>：用于指定是否紧凑显示无序列表（如果设置为"compact"，则列表项之间的间距会减小） </blockquote> 有序列表 order list ▶ ➤ <code><ol></code>标签用于创建有序列表，其中包含项目，每个项目使用<code><li></code>标签来表示 <pre><code class="prism language-html"> <ol type="A"> <li>项目1</li> <li>项目2</li> <li>项目3</li> </ol> </code></pre> <blockquote> 属性： <code>type</code>：指定有序列表的编号类型 “1”（默认）：使用数字进行编号 “A”：使用大写字母进行编号 “a”：使用小写字母进行编号 “I”：使用大写罗马数字进行编号 “i”：使用小写罗马数字进行编号 <code>reversed</code>：用于指定是否以逆序方式进行编号 <code>start</code>：用于指定有序列表的起始值，默认为1 <code>compact</code>：用于指定是否紧凑显示有序列表 </blockquote> </blockquote> <ul> <li>练习代码</li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文本相关</title> </head> <body>  <p>标题：独占一行，自带间距，加粗</p> <h1>标题1：<br>标题内换行</h1> <h2 align="right">标题2</h2> <h3>标题3</h3> <h4>标题4</h4> <h5>标题5</h5> <h6>标题6</h6>  <hr>  <p>段落</p> <p>段落</p> <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除线</s> <hr>  <ul>  <li>列表</li> <li>列表</li> <li>列表</li> </ul>  <ol> <li>列表</li> <li>列表</li> <li>列表</li> </ol> </body> </html> </code></pre> <ul> <li>李白简历</li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简历练习</title> </head> <body> <h1 align="center">个人简历</h1> <hr> <h2>基本信息</h2> <p>姓名：<b>李白</b></p> <p>性别：<i>男</i></p> <p>爱好：<s>摄影</s></p> <h2>个人经历</h2> <ul> <li>乡试</li> <li>府试</li> <li>殿试</li> </ul> <h2>获得荣誉</h2> <ol> <li>诗仙</li> <li>谪仙人</li> </ol> </body> </html> </code></pre> <h6>3.2 HTML图像标签</h6> <blockquote> html图片img标签 ▶ ➤ HTML的<code><img></code>标签用于在网页中显示图片，空标签（只包含属性，并且没有闭合标签） <blockquote> 属性： src：图片文件的URL地址 alt：当图片无法显示时，替代的文本描述 title：鼠标悬停在图片上时显示的文本 width：图片的宽度，可以使用像素或百分比来指定 height：图片的高度，可以使用像素或百分比来指定 align：控制图片在文本中的对齐方式，属性值可以是left、right、top、middle、bottom等 border：设置图片边框的宽度，属性值可以是整数，表示像素宽度 usemap：定义与图片关联的客户端图像映射（image map） </blockquote> <pre><code class="prism language-html">   <img src="../html/background3.jpg" alt="背景" width="50%" title="水墨">  <img src="https://ts1.cn.mm.bing.net/th/id/R-C.774b9223b5a3526c61691fcc5ecb3145?rik=i7Rvf49CF7Zc4w&riu=http%3a%2f%2fseopic.699pic.com%2fphoto%2f50041%2f7432.jpg_wh1200.jpg&ehk=969PSODhgWgR359dXTJbOB4maXRx3XZ536jGL%2fUyUy0%3d&risl=&pid=ImgRaw&r=0" alt="背景" width="750" height="378"> </code></pre> html图像地图map标签 ▶ ➤ HTML的<code><map></code>标签用于定义客户端图像映射（Client-side Image Map） <blockquote> 属性： <code>name</code>：定义客户端图像映射的名称 <code>id</code>：定义元素的唯一标识符 <code><area></code>：用于定义具体的图像区域，必须嵌套在<code><map></code>标签中 shape：定义区域的形状，支持rect（矩形）、circle（圆形）和poly（多边形）三种类型 coords：定义区域的坐标，格式取决于所选的形状类型 href：定义区域被点击后要跳转到的URL地址 target：定义链接打开的目标窗口，常用的值包括_blank（新窗口打开）和_self（当前窗口打开）等 alt：当鼠标悬停在区域上时显示的文本描述 </blockquote> <pre><code class="prism language-html">  <img src="../base/logo.png" usemap="#Map"> <map name="Map"> <area shape="rect" coords="0,0,82,126" href="#" alt="North"> <area shape="circle" coords="90,58,3" href="#" alt="Center"> <area shape="poly" coords="124,58,146,122,171,122,187,85,204,122,229,122,251,58,225,58,214,20,202,58" href="#" alt="South"> </map>  <area shape="rect" coords="x1,y1,x2,y2" href=url>  <area shape="circle" coords="x1,y1,r" href=url>  <area shape="poly" coords="x1,y1,x2,y2 ......" href=url> </code></pre> </blockquote> <h6>3.3 HTML超链接标签</h6> <blockquote> 超链接a标签 ▶ ➤ HTML使用标签 <code><a></a></code> 来设置超文本链接，超链接可以是一个字，一个词，或者一组词，也可以是一幅图像 <blockquote> 属性： href：指定链接的URL地址，可以是绝对路径（包含完整的协议和域名）或相对路径（相对于当前页面的路径） target：指定链接在何处打开的目标窗口或框架（_blank（在新窗口打开）、_self（在当前窗口打开），如果未指定target属性，默认会在当前窗口中打开链接） title：当鼠标悬停在链接上时显示的文本 download：链接被点击时是否下载链接的目标资源，可以指定下载的文件名 rel：指定链接与当前页面之间的关系或链接类型，常见的取值包括nofollow（告诉搜索引擎不要追踪该链接）、noopener（防止新打开的窗口引用当前窗口）等 </blockquote> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>超链接</title> </head> <body>   <a id="top" href="http:baidu.com">百度</a> <a href="../html/heart.html">网页超链接</a> <a href="../html/background3.jpg">图片超链接 <img src="../html/background3.jpg" alt="图片标签" width="400" height="200"> </a> <img src="../html/Star.jpg" alt="" width="400" height="200"> <img src="../html/background3.jpg" alt="" width="400" height="200"> <img src="../html/title.png" alt="" width="400" height="200"> <img src="../html/Star.jpg" alt="" width="400" height="200"> <a href="#top">超链接：跳回顶部（id标签）</a> </body> </html> </code></pre> </blockquote> <h6>3.4 HTML表，单</h6> <h6>3.4.1 HTML表格</h6> <blockquote> 表格table ▶ ➤ HTML 表格由 <code><table></code> 标签来定义，行（由 <code><tr></code> 标签定义），单元格（由 <code><td></code> 标签定义），标题行（由 <code><th></code>标签定义） <code>tr</code>：table row ，表格的一行 <code>td</code>：table data ，表格的数据单元格 <code>th</code>：table header，表格的表头单元格 <blockquote> table标签属性： border：指定表格的边框宽度，一个非负整数值来表示像素宽度 cellpadding：指定单元格内容与单元格边框之间的内边距大小，一个非负整数值来表示像素宽度（内边距） cellspacing：指定单元格之间的间距大小 width：指定表格的宽度（非负的像素数值/百分比：width=“500” 表格宽度为500像素，width=“80%” 表格宽度为父元素宽度的80%） align：指定表格在父元素中的水平对齐方式，left（左对齐）、center（居中对齐）、right（右对齐） bgcolor：指定表格的背景颜色，可以设置为一个颜色值或颜色名称 tr标签属性： align：行中所有单元格的水平对齐方式，left（左对齐）、center（居中对齐）、right（右对齐） valign：行中所有单元格的垂直对齐方式，top（顶对齐）、middle（居中对齐）、bottom（底对齐） bgcolor：指定行的背景颜色 td标签属性： colspan：指定单元格横跨的列数 rowspan：指定单元格横跨的行数 headers：指定单元格所属的表头单元格 scope：指定单元格所属的表头单元格的范围，常用的取值包括row（行表头）和col（列表头） </blockquote> <pre><code class="prism language-html"> <p align="center">表格1</p> <table style="border: 1px solid rgb(37, 151, 43);" border="1" align="center"> <tr> <td colspan="2" align="center">1-1</td> <td>1-3</td> </tr> <tr> <td rowspan="2">2-1</td> <td>2-2</td> <td>2-3</td> </tr> <tr> <td colspan="3">3-2</td> </tr> </table>  <table border="1" align="center">  <caption>购物车</caption> <tr>  <th>序号</th> <th>商品</th> <th>名称</th> </tr> <tr valign="top" align="center"> <td>1</td> <td>小米14</td> <td>3999</td> </tr> <tr> <td>2</td> <td>华为mate60</td> <td>4999</td> </tr> <tr> <td>3</td> <td>vivo x</td> <td>4500</td> </tr> <tr> <td>4</td> <td>oppo</td> <td>1900</td> </tr> </table> </code></pre> </blockquote> <h6>3.4.2 HTML表单，输入框（多选框，单选框）下拉框</h6> <blockquote> form表单 ▶ ➤ HTML的<code><form></code>标签用于创建一个表单，是用户与网页交互的主要方式之一 <blockquote> 属性： action：指定表单数据提交的URL地址 method：指定表单数据提交的HTTP方法 target：指定表单提交后的响应目标（_self、_blank、_parent和_top等） enctype：指定表单数据的编码类型（<code>application/x-www-form-urlencoded</code>默认值，普通的表单数据；<code>multipart/form-data</code>包含文件上传的表单数据） autocomplete：指定浏览器是否启用表单字段的自动完成功能（取值有on和off） </blockquote> <pre><code class="prism language-html"><form action="/submit-form" method="post" target="_self" enctype="multipart/form-data" autocomplete="on">  </form> </code></pre> input输入框 ▶ ➤ HTML的<code><input></code>标签用于创建一个输入字段，它是表单中最常见的元素之一 <blockquote> 属性： type：指定输入字段的类型，<code>text</code>（文本输入框）、<code>password</code>（密码输入框）、<code>checkbox</code>（复选框）、<code>radio</code>（单选按钮）、<code>file</code>（文件上传）、<code>date</code>（日期时间选择器），<code>submit</code>（提交按钮） name：指定输入字段的名称， value：指定输入字段的默认值（初始化输入字段的值） placeholder：指定输入字段的占位文本（在用户没有输入任何内容时显示，并在用户开始输入时自动消失） required：指定输入字段是否为必填项（当设置为required时，用户必须填写该字段才能提交表单） disabled：指定输入字段是否为禁用状态（当设置为disabled时，用户无法编辑或选择该字段） readonly：指定输入字段是否为只读状态 maxlength：指定输入字段允许的最大字符数 pattern：指定输入字段的验证模式（使用正则表达式来定义自定义的验证规则） </blockquote> <pre><code class="prism language-html"> <form action="#" align="center"> <p>输入框</p> 用户名：<input type="text" name="username" placeholder="请输入用户名" value="lyc"><br> 密码：<input type="password" name="password" placeholder="请输入密码" maxlength="16"><br> <input type="submit" value="注册"> <p>单选框</p> <input type="radio" name="gender" value="m">男 <input type="radio" name="gender" value="w">女 <p>多选框</p> 兴趣爱好：<input type="checkbox" name="hobby" value="1">爱好1 <input type="checkbox" name="hobby" value="2">爱好2 <input type="checkbox" name="hobby" value="3">爱好3 <p>日期选择器</p> 日期：<input type="date" name="day"> <p>文件选择器</p> <input type="file" name="pic"> <p>下拉选择器</p> 城市：<select name="city"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州">广州</option> </select> <p>自定义按钮</p> <input type="submit">h <input type="reset"> <input type="button" value="按钮"> <hr> <p>button标签</p> <button type="submit">提交</button> <button type="reset">重置</button> <button type="button">按钮</button> </form> </code></pre> </blockquote> <ul> <li>练习代码</li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单</title> </head> <body>  <p align="center">表格1</p> <table style="border: 1px solid rgb(37, 151, 43);" border="1" align="center"> <tr> <td colspan="2" align="center">1-1</td> <td>1-3</td> </tr> <tr> <td rowspan="2">2-1</td> <td>2-2</td> <td>2-3</td> </tr> <tr> <td colspan="3">3-2</td> </tr> </table>  <table border="1" align="center">  <caption>购物车</caption> <tr>  <th>序号</th> <th>商品</th> <th>名称</th> </tr> <tr valign="top" align="center"> <td>1</td> <td>小米14</td> <td>3999</td> </tr> <tr> <td>2</td> <td>华为mate60</td> <td>4999</td> </tr> <tr> <td>3</td> <td>vivo x</td> <td>4500</td> </tr> <tr> <td>4</td> <td>oppo</td> <td>1900</td> </tr> </table>   <form action="#" align="center"> <p>输入框</p> 用户名：<input type="text" name="username" placeholder="请输入用户名" value="lyc"><br> 密码：<input type="password" name="password" placeholder="请输入密码" maxlength="16"><br> <input type="submit" value="注册"> <p>单选框</p> <input type="radio" name="gender" value="m">男 <input type="radio" name="gender" value="w">女 <p>多选框</p> 兴趣爱好：<input type="checkbox" name="hobby" value="1">爱好1 <input type="checkbox" name="hobby" value="2">爱好2 <input type="checkbox" name="hobby" value="3">爱好3 <p>日期选择器</p> 日期：<input type="date" name="day"> <p>文件选择器</p> <input type="file" name="pic"> <p>下拉选择器</p> 城市：<select name="city"> <option value="北京">北京</option> <option value="上海">上海</option> <option value="广州">广州</option> </select> <p>自定义按钮</p> <input type="submit">h <input type="reset"> <input type="button" value="按钮"> <hr> <p>button标签</p> <button type="submit">提交</button> <button type="reset">重置</button> <button type="button">按钮</button> <hr size="2" color="cyan"> <h3>练习</h3> <table border="1" align="center"> <tr> <td>用户名：</td> <td><input type="text" name="username" placeholder="用户名"></td> </tr> <tr> <td>密码：</td> <td><input type="password" name="password" placeholder="密码" maxlength="16"></td> </tr> <tr> <td>性别：</td> <td><input type="radio" name="gender" value="m">男<input type="radio" name="gender" value="w">女</td> </tr> <tr> <td>爱好</td> <td> <input type="checkbox" name="hobby" value="ping">ping <input type="checkbox" name="hobby" value="ball">ball <input type="checkbox" name="hobby" value="play">play </td> </tr> <tr> <td>地址：</td> <td> <input type="text" placeholder="地址"> </td> </tr> <tr> <td>生日：</td> <td><input type="date" name="birth"></td> </tr> <tr> <td>头像：</td> <td><input type="file" name="pic"></td> </tr> <tr> <td>位置：</td> <td><select name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> </select></td> </tr> <tr> <td colspan="2">提交</td> </tr> </table> </form> </body> </html> </code></pre> <h6>3.5 HTML分区标签</h6> <h6>3.5.1 div标签和span标签</h6> <blockquote> div块级分区 ▶ 结构化布局 ➤ HTML的<code><div></code>标签是一个块级容器，用于将一组元素组织在一起，并为其应用样式或添加特定的行为 <blockquote> 特点：<code><div></code>标签没有特定的属性，通常用作其他标签的父容器或包裹元素，html最为常用的标签之一 </blockquote> <pre><code class="prism language-html"><div class="container"> <div class="header">头部</div> <div class="content">内容</div> <div class="footer">底部</div> </div> </code></pre> span行内块 ▶ ➤HTML的<code></code>标签是一个行内元素，用于在文本中标记或包裹特定的部分，并为其应用样式或添加特定的行为 <blockquote> 特点：标签本身没有特定的语义含义，主要用于结构化和样式化目的 </blockquote> <pre><code class="prism language-html"><p>这是一段 <span class="highlight">需要高亮</span> 的文本。</p> </code></pre> </blockquote> <h6>3.5.2 article，header，section，footer，aside</h6> <blockquote> article文章 ▶ ➤ HTML的<code><article></code>标签是一个块级元素，用于表示独立的、完整的、可以独立于页面其余部分使用的内容 header文档头部 ▶ ➤ HTML的<code><header></code>标签是一个块级元素，用于表示文档或区块的头部部分 section章节 ▶ ➤ HTML的<code><section></code>标签是一个块级元素，用于将文档分割成独立的小节或区域 footer页脚 ▶ ➤ HTML的<code><footer></code>标签是一个块级元素，用于表示文档或区域的页脚部分 aside侧边栏 ▶ ➤HTML的 <aside> 标签是一个块级元素，用于表示与页面主要内容相关但又可以独立存在的侧边栏、附属信息等 </aside> </blockquote> <ul> <li>练习代码</li> </ul> <pre><code class="prism language-html"><!DOCTYPE html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>普通页面</title> <style> * { border-radius: 10px; } .page { margin: auto; width: 1000px; height: 900px; } header { margin-bottom: 10px; background-color: cadetblue; height: 60px; text-align: center; /* 行高 */ line-height: 60px; font-size: 30px; } .content { background-color: cornflowerblue; width: 800px; height: 700px; font-size: 80px; /* 设置水平垂直居中 */ display: flex; justify-content: center; align-items: center; margin: 10px; } .minor { background-color: darkkhaki; width: 150px; height: 700px; display: flex; margin: 10px; writing-mode: vertical-rl; text-orientation: mixed; display: flex; justify-content: center; align-items: center; font-size: 50px; } .major { display: flex; flex-direction: row; } footer { display: flex; justify-content: center; align-items: center; text-align: center; background-color: grey; margin-top: 20px; height: 60px; font-style: italic; } </style> </head> <body> <article class="page"> <header>页眉：页面导航栏</header> <section class="major"> <p class="content"> 页面主要内容 </p> <aside class="minor">页面次要内容</aside> </section> <footer>页脚：页面声名</footer> </article> </body> </html> </code></pre> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1721669812645605376"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(WEB,前端,html)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835511912843014144.htm" title="理解Gunicorn：Python WSGI服务器的基石" target="_blank">理解Gunicorn：Python WSGI服务器的基石</a> 范范0825 <a class="tag" taget="_blank" href="/search/ipython/1.htm">ipython</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico</div> </li> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> igotyback <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> igotyback <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> 某公司摸鱼前端 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835504218178416640.htm" title="Google earth studio 简介" target="_blank">Google earth studio 简介</a> 陟彼高冈yu <a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a> <div>GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G</div> </li> <li><a href="/article/1835502578050363392.htm" title="PHP环境搭建详细教程" target="_blank">PHP环境搭建详细教程</a> 好看资源平台 <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a> <div>PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> 彩云飘过 <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> STU学生网页设计 <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835497792265613312.htm" title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a> 加密社 <a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> 二挡起步 <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835495170972413952.htm" title="git - Webhook让部署自动化" target="_blank">git - Webhook让部署自动化</a> 大猪大猪 <div>我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时</div> </li> <li><a href="/article/1835493267907637248.htm" title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a> dmengmeng <div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</div> </li> <li><a href="/article/1835470931783413760.htm" title="「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验" target="_blank">「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验</a> 张风捷特烈 <a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</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%90%8E%E7%AB%AF/1.htm">后端</a> <div>theme:cyanosis我正在参加「豆包MarsCode初体验」征文活动MarsCode可以看作一个运行在服务端的远程VSCode开发环境。对于我这种想要学习体验某些语言，但不想在电脑里装环境的人来说非常友好。本文就来介绍一下在MarsCode里，我的体验rust开发体验。一、MarsCode是什么它的本质是:提供代码助手和云端IDE服务的web网站，可通过下面的链接访问https://www</div> </li> <li><a href="/article/1835455048277127168.htm" title="Python神器！WEB自动化测试集成工具 DrissionPage" target="_blank">Python神器！WEB自动化测试集成工具 DrissionPage</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>一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率</div> </li> <li><a href="/article/1835454921990828032.htm" title="Java爬虫框架（一）--架构设计" target="_blank">Java爬虫框架（一）--架构设计</a> 狼图腾-狼之传说 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%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> dingcho <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/1835451016456269824.htm" title="MongoDB知识概括" target="_blank">MongoDB知识概括</a> GeorgeLin98 <a class="tag" taget="_blank" href="/search/%E6%8C%81%E4%B9%85%E5%B1%82/1.htm">持久层</a><a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>MongoDB知识概括MongoDB相关概念单机部署基本常用命令索引-IndexSpirngDataMongoDB集成副本集分片集群安全认证MongoDB相关概念业务应用场景：传统的关系型数据库（如MySQL），在数据操作的“三高”需求以及应对Web2.0的网站需求面前，显得力不从心。解释：“三高”需求：①Highperformance-对数据库高并发读写的需求。②HugeStorage-对海量数</div> </li> <li><a href="/article/1835448238103162880.htm" title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a> 苹果酱0567 <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div> </li> <li><a href="/article/1835443823287824384.htm" title="Python实现下载当前年份的谷歌影像" target="_blank">Python实现下载当前年份的谷歌影像</a> sand&wich <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>在GIS项目和地图应用中，获取最新的地理影像数据是非常重要的。本文将介绍如何使用Python代码从Google地图自动下载当前年份的影像数据，并将其保存为高分辨率的TIFF格式文件。这个过程涉及地理坐标转换、多线程下载和图像处理。关键功能该脚本的核心功能包括：坐标转换：支持WGS-84与WebMercator投影之间转换，以及处理中国GCJ-02偏移。自动化下载：多线程下载地图瓦片，提高效率。图像</div> </li> <li><a href="/article/1835443569968640000.htm" title="Spring MVC 全面指南：从入门到精通的详细解析" target="_blank">Spring MVC 全面指南：从入门到精通的详细解析</a> 一杯梅子酱 <a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF%E6%A0%88%E5%AD%A6%E4%B9%A0/1.htm">技术栈学习</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>引言：SpringMVC，作为Spring框架的一个重要模块，为构建Web应用提供了强大的功能和灵活性。无论是初学者还是有一定经验的开发者，掌握SpringMVC都将显著提升你的Web开发技能。本文旨在为初学者提供一个全面且易于理解的学习路径，通过详细的知识点分析和实际案例，帮助你快速上手SpringMVC，让学习过程既深刻又高效。一、SpringMVC简介1.1什么是SpringMVC？Spri</div> </li> <li><a href="/article/1835438028768768000.htm" title="Spring Boot中实现跨域请求" target="_blank">Spring Boot中实现跨域请求</a> BABA8891 <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>在SpringBoot中实现跨域请求（CORS，Cross-OriginResourceSharing）可以通过多种方式，以下是几种常见的方法：1.使用@CrossOrigin注解在SpringBoot中，你可以在控制器或者具体的请求处理方法上使用@CrossOrigin注解来允许跨域请求。在控制器上应用：importorg.springframework.web.bind.annotation.</div> </li> <li><a href="/article/1835438028009598976.htm" title="WebMagic：强大的Java爬虫框架解析与实战" target="_blank">WebMagic：强大的Java爬虫框架解析与实战</a> Aaron_945 <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><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>文章目录引言官网链接WebMagic原理概述基础使用1.添加依赖2.编写PageProcessor高级使用1.自定义Pipeline2.分布式抓取优点结论引言在大数据时代，网络爬虫作为数据收集的重要工具，扮演着不可或缺的角色。Java作为一门广泛使用的编程语言，在爬虫开发领域也有其独特的优势。WebMagic是一个开源的Java爬虫框架，它提供了简单灵活的API，支持多线程、分布式抓取，以及丰富的</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> 2401_85194651 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835435506645692416.htm" title="00. 这里整理了最全的爬虫框架（Java + Python）" target="_blank">00. 这里整理了最全的爬虫框架（Java + Python）</a> 有一只柴犬 <a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB%E7%B3%BB%E5%88%97/1.htm">爬虫系列</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2</div> </li> <li><a href="/article/1835435141535723520.htm" title="详解：如何设计出健壮的秒杀系统？" target="_blank">详解：如何设计出健壮的秒杀系统？</a> 夜空_2cd3 <div>作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*</div> </li> <li><a href="/article/1835428317084348416.htm" title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a> 全能全知者 <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div> </li> <li><a href="/article/1835427057752961024.htm" title="补充元象二面" target="_blank">补充元象二面</a> Redstone Monstrosity <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重</div> </li> <li><a href="/article/1835420753252675584.htm" title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a> jun778895 <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</div> </li> <li><a href="/article/1835411044768509952.htm" title="字节二面" target="_blank">字节二面</a> Redstone Monstrosity <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div> </li> <li><a href="/article/12.htm" title="eclipse maven" target="_blank">eclipse maven</a> IXHONG <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a> <div>eclipse中使用maven插件的时候，运行run as maven build的时候报错 -Dmaven.multiModuleProjectDirectory system propery is not set. Check $M2_HOME environment variable and mvn script match. 可以设一个环境变量M2_HOME指</div> </li> <li><a href="/article/139.htm" title="timer cancel方法的一个小实例" target="_blank">timer cancel方法的一个小实例</a> alleni123 <a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/timer/1.htm">timer</a> <div>package com.lj.timer; import java.util.Date; import java.util.Timer; import java.util.TimerTask; public class MyTimer extends TimerTask { private int a; private Timer timer; pub</div> </li> <li><a href="/article/266.htm" title="MySQL数据库在Linux下的安装" target="_blank">MySQL数据库在Linux下的安装</a> ducklsl <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>1.建好一个专门放置MySQL的目录 /mysql/db数据库目录 /mysql/data数据库数据文件目录 2.配置用户，添加专门的MySQL管理用户 >groupadd mysql ----添加用户组 >useradd -g mysql mysql ----在mysql用户组中添加一个mysql用户 3.配置，生成并安装MySQL >cmake -D</div> </li> <li><a href="/article/393.htm" title="spring------>>cvc-elt.1: Cannot find the declaration of element" target="_blank">spring------>>cvc-elt.1: Cannot find the declaration of element</a> Array_06 <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a> <div>将-------- <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3</div> </li> <li><a href="/article/520.htm" title="maven发布第三方jar的一些问题" target="_blank">maven发布第三方jar的一些问题</a> cugfy <a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>maven中发布第三方jar到nexus仓库使用的是 deploy:deploy-file命令有许多参数，具体可查看 http://maven.apache.org/plugins/maven-deploy-plugin/deploy-file-mojo.html 以下是一个例子： mvn deploy:deploy-file -DgroupId=xpp3 </div> </li> <li><a href="/article/647.htm" title="MYSQL下载及安装" target="_blank">MYSQL下载及安装</a> 357029540 <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div> 好久没有去安装过MYSQL，今天自己在安装完MYSQL过后用navicat for mysql去厕测试链接的时候出现了10061的问题，因为的的MYSQL是最新版本为5.6.24，所以下载的文件夹里没有my.ini文件，所以在网上找了很多方法还是没有找到怎么解决问题，最后看到了一篇百度经验里有这个的介绍，按照其步骤也完成了安装，在这里给大家分享下这个链接的地址</div> </li> <li><a href="/article/774.htm" title="ios TableView cell的布局" target="_blank">ios TableView cell的布局</a> 张亚雄 <a class="tag" taget="_blank" href="/search/tableview/1.htm">tableview</a> <div> cell.imageView.image = [UIImage imageNamed:[imageArray objectAtIndex:[indexPath row]]]; CGSize itemSize = CGSizeMake(60, 50); &nbs</div> </li> <li><a href="/article/901.htm" title="Java编码转义" target="_blank">Java编码转义</a> adminjun <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A0%81%E8%BD%AC%E4%B9%89/1.htm">编码转义</a> <div> import java.io.UnsupportedEncodingException; /** * 转换字符串的编码 */ public class ChangeCharset { /** 7位ASCII字符，也叫作ISO646-US、Unicode字符集的基本拉丁块 */ public static final Strin</div> </li> <li><a href="/article/1028.htm" title="Tomcat 配置和spring" target="_blank">Tomcat 配置和spring</a> aijuans <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>简介 Tomcat启动时，先找系统变量CATALINA_BASE，如果没有，则找CATALINA_HOME。然后找这个变量所指的目录下的conf文件夹，从中读取配置文件。最重要的配置文件：server.xml 。要配置tomcat，基本上了解server.xml，context.xml和web.xml。 Server.xml -- tomcat主</div> </li> <li><a href="/article/1155.htm" title="Java打印当前目录下的所有子目录和文件" target="_blank">Java打印当前目录下的所有子目录和文件</a> ayaoxinchao <a class="tag" taget="_blank" href="/search/%E9%80%92%E5%BD%92/1.htm">递归</a><a class="tag" taget="_blank" href="/search/File/1.htm">File</a> <div>其实这个没啥技术含量，大湿们不要操笑哦，只是做一个简单的记录，简单用了一下递归算法。 import java.io.File; /** * @author Perlin * @date 2014-6-30 */ public class PrintDirectory { public static void printDirectory(File f</div> </li> <li><a href="/article/1282.htm" title="linux安装mysql出现libs报冲突解决" target="_blank">linux安装mysql出现libs报冲突解决</a> BigBird2012 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>linux安装mysql出现libs报冲突解决安装mysql出现 file /usr/share/mysql/ukrainian/errmsg.sys from install of MySQL-server-5.5.33-1.linux2.6.i386 conflicts with file from package mysql-libs-5.1.61-4.el6.i686 </div> </li> <li><a href="/article/1409.htm" title="jedis连接池使用实例" target="_blank">jedis连接池使用实例</a> bijian1013 <a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/jedis%E8%BF%9E%E6%8E%A5%E6%B1%A0/1.htm">jedis连接池</a><a class="tag" taget="_blank" href="/search/jedis/1.htm">jedis</a> <div>实例代码： package com.bijian.study; import java.util.ArrayList; import java.util.List; import redis.clients.jedis.Jedis; import redis.clients.jedis.JedisPool; import redis.clients.jedis.JedisPoo</div> </li> <li><a href="/article/1536.htm" title="关于朋友" target="_blank">关于朋友</a> bingyingao <a class="tag" taget="_blank" href="/search/%E6%9C%8B%E5%8F%8B/1.htm">朋友</a><a class="tag" taget="_blank" href="/search/%E5%85%B4%E8%B6%A3%E7%88%B1%E5%A5%BD/1.htm">兴趣爱好</a><a class="tag" taget="_blank" href="/search/%E7%BB%B4%E6%8C%81/1.htm">维持</a> <div> 成为朋友的必要条件：志相同，道不合，可以成为朋友。譬如马云、周星驰一个是商人，一个是影星，可谓道不同，但都很有梦想，都要在各自领域里做到最好，当他们遇到一起，互相欣赏，可以畅谈两个小时。志不同，道相合，也可以成为朋友。譬如有时候看到两个一个成绩很好每次考试争做第一，一个成绩很差的同学是好朋友。他们志向不相同，但他</div> </li> <li><a href="/article/1663.htm" title="【Spark七十九】Spark RDD API一" target="_blank">【Spark七十九】Spark RDD API一</a> bit1129 <a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a> <div>aggregate package spark.examples.rddapi import org.apache.spark.{SparkConf, SparkContext} //测试RDD的aggregate方法 object AggregateTest { def main(args: Array[String]) { val conf = new Spar</div> </li> <li><a href="/article/1790.htm" title="ktap 0.1 released" target="_blank">ktap 0.1 released</a> bookjovi <a class="tag" taget="_blank" href="/search/kernel/1.htm">kernel</a><a class="tag" taget="_blank" href="/search/tracing/1.htm">tracing</a> <div>Dear, I'm pleased to announce that ktap release v0.1, this is the first official release of ktap project, it is expected that this release is not fully functional or very stable and we welcome bu</div> </li> <li><a href="/article/1917.htm" title="能保存Properties文件注释的Properties工具类" target="_blank">能保存Properties文件注释的Properties工具类</a> BrokenDreams <a class="tag" taget="_blank" href="/search/properties/1.htm">properties</a> <div> 今天遇到一个小需求：由于java.util.Properties读取属性文件时会忽略注释，当写回去的时候，注释都没了。恰好一个项目中的配置文件会在部署后被某个Java程序修改一下，但修改了之后注释全没了，可能会给以后的参数调整带来困难。所以要解决这个问题。 &nb</div> </li> <li><a href="/article/2044.htm" title="读《研磨设计模式》-代码笔记-外观模式-Facade" target="_blank">读《研磨设计模式》-代码笔记-外观模式-Facade</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ /* * 百度百科的定义： * Facade（外观）模式为子系统中的各类（或结构与方法）提供一个简明一致的界面， * 隐藏子系统的复杂性，使子系统更加容易使用。他是为子系统中的一组接口所提供的一个一致的界面 * * 可简单地</div> </li> <li><a href="/article/2171.htm" title="After Effects教程收集" target="_blank">After Effects教程收集</a> cherishLC <a class="tag" taget="_blank" href="/search/After+Effects/1.htm">After Effects</a> <div>1、中文入门 http://study.163.com/course/courseMain.htm?courseId=730009 2、videocopilot英文入门教程（中文字幕） http://www.youku.com/playlist_show/id_17893193.html 英文原址： http://www.videocopilot.net/basic/ 素</div> </li> <li><a href="/article/2298.htm" title="Linux Apache 安装过程" target="_blank">Linux Apache 安装过程</a> crabdave <a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a> <div>Linux Apache 安装过程下载新版本： apr-1.4.2.tar.gz（下载网站：http://apr.apache.org/download.cgi） apr-util-1.3.9.tar.gz（下载网站：http://apr.apache.org/download.cgi） httpd-2.2.15.tar.gz（下载网站：http://httpd.apac</div> </li> <li><a href="/article/2425.htm" title="Shell学习之变量赋值和引用" target="_blank">Shell学习之变量赋值和引用</a> daizj <a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/%E5%8F%98%E9%87%8F%E5%BC%95%E7%94%A8/1.htm">变量引用</a><a class="tag" taget="_blank" href="/search/%E8%B5%8B%E5%80%BC/1.htm">赋值</a> <div>本文转自：http://www.cnblogs.com/papam/articles/1548679.html Shell编程中，使用变量无需事先声明，同时变量名的命名须遵循如下规则：首个字符必须为字母（a-z，A-Z）中间不能有空格，可以使用下划线（_）不能使用标点符号不能使用bash里的关键字（可用help命令查看保留关键字）需要给变量赋值时，可以这么写： </div> </li> <li><a href="/article/2552.htm" title="Java SE 第一讲（Java SE入门、JDK的下载与安装、第一个Java程序、Java程序的编译与执行）" target="_blank">Java SE 第一讲（Java SE入门、JDK的下载与安装、第一个Java程序、Java程序的编译与执行）</a> dcj3sjt126com <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>Java SE 第一讲： Java SE：Java Standard Edition Java ME: Java Mobile Edition Java EE：Java Enterprise Edition Java是由Sun公司推出的（今年初被Oracle公司收购）。收购价格：74亿美金 J2SE、J2ME、J2EE JDK：Java Development </div> </li> <li><a href="/article/2679.htm" title="YII给用户登录加上验证码" target="_blank">YII给用户登录加上验证码</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a> <div>1、在SiteController中添加如下代码： /** * Declares class-based actions. */ public function actions() { return array( // captcha action renders the CAPTCHA image displ</div> </li> <li><a href="/article/2806.htm" title="Lucene使用说明" target="_blank">Lucene使用说明</a> dyy_gusi <a class="tag" taget="_blank" href="/search/Lucene/1.htm">Lucene</a><a class="tag" taget="_blank" href="/search/search/1.htm">search</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E8%AF%8D%E5%99%A8/1.htm">分词器</a> <div>Lucene使用说明 1、lucene简介 1.1、什么是lucene Lucene是一个全文搜索框架，而不是应用产品。因此它并不像baidu或者googleDesktop那种拿来就能用，它只是提供了一种工具让你能实现这些产品和功能。 1.2、lucene能做什么要回答这个问题，先要了解lucene的本质。实际</div> </li> <li><a href="/article/2933.htm" title="学习编程并不难,做到以下几点即可!" target="_blank">学习编程并不难,做到以下几点即可!</a> gcq511120594 <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>不论你是想自己设计游戏，还是开发iPhone或安卓手机上的应用，还是仅仅为了娱乐，学习编程语言都是一条必经之路。编程语言种类繁多，用途各异，然而一旦掌握其中之一，其他的也就迎刃而解。作为初学者，你可能要先从Java或HTML开始学，一旦掌握了一门编程语言，你就发挥无穷的想象，开发各种神奇的软件啦。 1、确定目标学习编程语言既充满乐趣，又充满挑战。有些花费多年时间学习一门编程语言的大学生到</div> </li> <li><a href="/article/3060.htm" title="Java面试十问之三：Java与C++内存回收机制的差别" target="_blank">Java面试十问之三：Java与C++内存回收机制的差别</a> HNUlanwei <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/finalize%28%29/1.htm">finalize()</a><a class="tag" taget="_blank" href="/search/%E5%A0%86%E6%A0%88/1.htm">堆栈</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AD%98%E5%9B%9E%E6%94%B6/1.htm">内存回收</a> <div>大家知道， Java 除了那 8 种基本类型以外，其他都是对象类型（又称为引用类型）的数据。 JVM 会把程序创建的对象存放在堆空间中，那什么又是堆空间呢？其实，堆（ Heap）是一个运行时的数据存储区，从它可以分配大小各异的空间。一般，运行时的数据存储区有堆（ Heap）和堆栈（ Stack），所以要先看它们里面可以分配哪些类型的对象实体，然后才知道如何均衡使用这两种存储区。一般来说，栈中存放的</div> </li> <li><a href="/article/3187.htm" title="第二章 Nginx+Lua开发入门" target="_blank">第二章 Nginx+Lua开发入门</a> jinnianshilongnian <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/lua/1.htm">lua</a> <div>Nginx入门本文目的是学习Nginx+Lua开发，对于Nginx基本知识可以参考如下文章： nginx启动、关闭、重启 http://www.cnblogs.com/derekchen/archive/2011/02/17/1957209.html agentzh 的 Nginx 教程 http://openresty.org/download/agentzh-nginx-tutor</div> </li> <li><a href="/article/3314.htm" title="MongoDB windows安装基本命令" target="_blank">MongoDB windows安装基本命令</a> liyonghui160com <div> windows安装安装目录： D:\MongoDB\ 新建目录 D:\MongoDB\data\db 4.启动进城： cd D:\MongoDB\bin mongod -dbpath D:\MongoDB\data\db &n</div> </li> <li><a href="/article/3441.htm" title="Linux下通过源码编译安装程序" target="_blank">Linux下通过源码编译安装程序</a> pda158 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>一、程序的组成部分　　Linux下程序大都是由以下几部分组成：　　二进制文件：也就是可以运行的程序文件　　库文件：就是通常我们见到的lib目录下的文件　　配置文件：这个不必多说，都知道　　帮助文档：通常是我们在linux下用man命令查看的命令的文档　　二、linux下程序的存放目录　　linux程序的存放目录大致有三个地方：　　/etc, /b</div> </li> <li><a href="/article/3568.htm" title="WEB开发编程的职业生涯４个阶段" target="_blank">WEB开发编程的职业生涯４个阶段</a> shw3588 <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E7%94%9F%E6%B4%BB/1.htm">生活</a> <div>觉得自己什么都会 2007年从学校毕业，凭借自己原创的ASP毕业设计，以为自己很厉害似的，信心满满去东莞找工作，找面试成功率确实很高，只是工资不高，但依旧无法磨灭那过分的自信，那时候什么考勤系统、什么OA系统、什么ERP，什么都觉得有信心，这样的生涯大概持续了约一年。根本不是自己想的那样 2008年开始接触很多工作相关的东西，发现太多东西自己根本不会，都需要去学，不管是asp还是js，</div> </li> <li><a href="/article/3695.htm" title="遭遇jsonp同域下变作post请求的坑" target="_blank">遭遇jsonp同域下变作post请求的坑</a> vb2005xu <a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a><a class="tag" taget="_blank" href="/search/%E5%90%8C%E5%9F%9Fpost/1.htm">同域post</a> <div>今天迁移一个站点时遇到一个坑爹问题,同一个jsonp接口在跨域时都能调用成功,但是在同域下调用虽然成功,但是数据却有问题. 此处贴出我的后端代码片段 $mi_id = htmlspecialchars(trim($_GET['mi_id '])); $mi_cv = htmlspecialchars(trim($_GET['mi_cv '])); 贴出我前端代码片段: $.aj</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>