HTML 和 HTML5

目录

前言

一、HTML 基础

1、XML、XHTML、HTML、HTML5 的区别

2、HTML5 的基本架构

3、HTML 常用标记

（1）、两种标记

（2）、文本标题

（3）、段落标签

（4）、转义字符

（5）、加粗

（6）、倾斜

（7）、强制换行

（8）、水平线

（9）、设置文本下划线

（10）、设置文本删除线

（11）、列表

 （12）、插入图片

（13）、超链接

（14）、表格

（15）、表单

4、内联元素、块级元素 和 内联块级元素

（1）、内联元素、块级元素 和 内联块级元素的区别

（2）、内联元素大全

（3）、常见的块级元素

（4）、常见的内联块级元素

二、HTML5

1、语义标签

2、增强型表单

3、新媒体元素

4、Canvas 绘图

5、SVG 绘图

 6、地理定位

7、拖放 API

8、WebWorker

9、WebStorage

10、WebSocket

---

前言

W3C（万维网） 标准：

• 结构（W3C）：XML、XHTML、HTML。
• 表现（W3C）：CSS。
• 行为（ECMA）：DOM、ECMAScript。

注：ECMA 是欧洲电脑网商联合会

一、HTML 基础

1、XML、XHTML、HTML、HTML5 的区别

XML：可扩展标记语言。

XHTML：可扩展的超文本标记语言。

HTML：超文本标记语言。

HTML5：2014 年 W3C 发布的 HTML 的第五个版本。

2、HTML5 的基本架构

【强调】

在 中，下面我们来解读一下它的 content 的属性：

• width 属性用来控制视口的大小，width=device-width 的意思是“让宽度等于设备的宽度”，
• initial-scale 属性用来设置页面初始缩放的比例，initial-scale=1表示按原比例展示，不缩放。

3、HTML 常用标记

（1）、两种标记

常规标记：又叫双标记。格式：<标记 属性="属性值" 属性="属性值">标记>。

空标记：又叫单标记。格式：<标记 属性="属性值" 属性="属性值"/>（注：最后的斜杠可有可无）。

（2）、文本标题

~

h1~h6 分别对应多少像素？

• h1 = 32px
• h2 = 24px
• h3 = 18.72px
• h4 = 16px
• p = 16px
• h5 = 13.28px
• h6 = 12px

（3）、段落标签

（4）、转义字符

&nbps;——空格

>——右尖括号

<——左尖括号

©——备案中图标版权©

（5）、加粗

（6）、倾斜

（7）、强制换行

（8）、水平线

（9）、设置文本下划线

文本

（10）、设置文本删除线

文本

（11）、列表

无序列表：

有序列表：

自定义列表：

 （12）、插入图片

注：目标文件的路径，要尽量采用相对路径。

拓展：

①、相对路径 和 绝对路径

相对路径：相对与某个基准目录的路径。

绝对路径：你的主页上的文件或目录在硬盘上真正的路径，比如：URL和物理路径。

②、路径的写法

当前文件与目标文件在同一目录下：img.jpg。

当前文件与目标文件所处的文件夹（img）在同一目录下：img/img.jpg。

当前文件所处的文件夹和目标文件所处的文件夹在同一目录下：../img/img.jpg。

（13）、超链接

href：连接的 url 地址。

target：定义打开链接的方式。可选值如下：

• _blank：保留原窗口，在新窗口中打开。
• _self：（默认值）在当前窗口打开。

  标签的可选属性 rel 和 rev 分别表示源文档与目标文档之间正式的关系和方向。

• rel：属性指定从源文档到目标文档的关系。
• rev：属性指定从目标文档到源文档的关系。

这两种属性可以在 标签中同时使用。

下表是 rel 和 rev 属性可取的值：

值	描述
alternate	文档的可选版本（例如打印页、翻译页或镜像）。
archives	链接到文档集或历史数据。
author	链接到文档的作者。
appendix	文档附录。
bookmark	用作书签的永久 URL。
contents	文档目录。
copyright	包含版权信息的文档。
chapter	文档的章。
external	链接到外部文档。
first	链接到集合中的首个文档。
friend
glossary	文档中所用字词的术语表或解释。
help	帮助文档。
index	文档索引。
last	链接到集合中最后的文档。
licence	链接到文档的版权信息。
next	集合中的下一个文档。
noreferrer	规定当用户跟随该超链接时，浏览器不应发送 HTTP referer 头。
nofollow	链接到未认可的文档，比如付费链接。Google 使用 "nofollow"，用于指定 Google 搜索引擎不要跟踪链接。
prev	集合中的前一个文档。
stylesheet	文档的外部样式表。
start	集合中的第一个文档。
section	文档的节。
subsection	文档的子段。
search	链接到文档的搜索工具。
sidebar	链接到应该在浏览器边栏中显示的文档。
tag	当前文档标签（关键词）。
up	提供指向一个文档的链接。该文档提供当前文档的上下文关系。

最近在开发过程中遇到这样一个警告：使用 target=“_blank” 而不使用 rel=“noreferrer” 是一种安全风险。

下面对 rel=“noreferrer” 举个例子：

假设您从网站A链接到网站B，但是没有“noreferrer”标签。
当网站B的所有者在谷歌Analytics中查看“收购”报告时，他可以在“推荐”部分看到来自网站A的流量。
当您使用“noreferrer”标签从网站A链接到网站B时，任何从网站A到网站B的流量都将显示为谷歌分析中的直接流量(而不是引用)。 

当您不想让其他站点知道您正在链接到它们时，请在输出链接上使用rel= " noreferrer "属性。绝对不要在内部链接上使用rel= " noreferrer "属性，它会打乱你的谷歌分析报告。 

（14）、表格

table MDNhttps://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table#attr-cellspacing1⃣️、基本表格

		border="1" bordercolor="#f00" 
		bgcolor="#aaa" 
		cellpadding="2" 
		cellspacing="5" 
		align="center" 
>
	

		
1

		
2

	
	

		
3
		
4
	
	

		
5

	
	

		
6

		
7
	
	

		
8
	

效果：

2⃣️、复杂表格

  

    

      
Month
      
Savings
    
  
  

    

      
Sum
      
$180
    
  
  

    

      
January
      
$100
    
    

      
February
      
$80
    
  

效果：

（15）、表单

①、表单基本元素

	
	

	

	
	

	
	

	
	
	
	
	
	

	
	 男
	 女 

	
	 吃饭
	 睡觉
	 打人 

	
		

	
	
		
		111
		222
		333
	

	
	

效果：

②、去除 input 标签默认的focus边框

input:focus {
   outline: none;
}

3⃣️、input 单选框与多选框

如何实现选择文本时自动选中该文本对应的项？

此问题对应的知识点是：JS事件委托——父元素为子元素注册事件，只通过子元素触发该事件，父元素不触发该事件。

“label 标签 + input 标签 + change 事件”方案，可以满足此需求。

例如：

 this.selectOptions(e)}>
    

        
        云英
    
    

        
        露娜
    
    

        
        韩信
    
    

        
        孙悟空
    

注意：上述代码是在 react 中，react 比较严谨，所以使用的 label 标签的 for 属性，在 react 中对应的属性是 htmlFor，这就类似于，使用 class 定义样式时，在 react 中对应的属性是 className。

4、内联元素、块级元素 和 内联块级元素

（1）、内联元素、块级元素 和 内联块级元素的区别

	块级元素	行内元素	内联块级元素
对应的 CSS	display: block;	display: inline;	display: inline-block;
特点	独占一行。	相邻的行内元素会排列在同一行里，直到一行排不下，才会换行。	相邻的行内元素会排列在同一行里，直到一行排不下，才会换行。
	默认情况下，其宽度自动填满其父元素宽度	其宽度随元素的内容而变化。	其宽度随元素的内容而变化。
	可以设置width，height属性	行内元素设置width，height属性无效	可以设置width，height属性
	可以设置margin和padding属性	行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果。	可以设置margin和padding属性

（2）、内联元素大全

         可定义锚以及超链接
      表示一个缩写形式
   表示只取title中首字母的缩写形式
         字体加粗
       可覆盖默认的文本方向
       大号字体加粗

        换行
      引用进行定义
      定义计算机代码文本
       定义一个定义项目
        定义为强调的内容
         斜体文本效果
     输入框
       定义键盘文本
     为input进行标记/标注
         定义短的引用

         表示不准确不相关，却不应当给予删除的内容

      定义样本文本

    定义单选或者多选菜单
     呈现小号字体效果
      组合文档中的行内元素
    语气更强的强调内容
       定义下标文本
       定义上标文本
  多行文本输入控件
<tt>        打字机或者等宽的文本效果
<var>       定义变量</code></pre> 
  <h3 id="%EF%BC%883%EF%BC%89%E3%80%81%E5%B8%B8%E8%A7%81%E7%9A%84%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0">（3）、常见的块级元素</h3> 
  <pre><code><div>       定义文档中的分区或节

<p>         定义段落

<h1>~<h6>   标题元素

<form>      创建表单元素

<hr>        水平线

<li>        定义列表项目
<ol>        有序列表
<ul>        无序列表
<dl>        定义列表
<dt>        定义列表中的项目
<dd>        定义列表中定义条目

<table>     定义表格
<td>        表格中的标准单元格
<tr>        表格中的行
<th>        定义表头单元格</code></pre> 
  <h3 id="%EF%BC%884%EF%BC%89%E3%80%81%E5%B8%B8%E8%A7%81%E7%9A%84%E5%86%85%E8%81%94%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0">（4）、常见的内联块级元素</h3> 
  <pre><code><img/>      插入一张图片
<input/>    各种输入框、按钮</code></pre> 
  <p></p> 
  <h1 id="%E4%BA%8C%E3%80%81HTML5">二、HTML5</h1> 
  <p>html5总的来说比html4多了十个新特性，但其不支持ie8及ie8以下版本的浏览器</p> 
  <ul> 
   <li>语义标签</li> 
   <li>增强型表单</li> 
   <li>新媒体元素（比如：视频和音频）</li> 
   <li>Canvas 绘图</li> 
   <li>SVG 绘图</li> 
   <li>地理定位</li> 
   <li>拖放 API</li> 
   <li>WebWorker</li> 
   <li>WebStorage</li> 
   <li>WebSocket</li> 
  </ul> 
  <p><span class="link-card-box"><span class="link-title">参考 HTML 5 新元素</span><span class="link-link"><img alt="" class="link-link-icon" src="http://img.e-com-net.com/image/info8/bb811ba494e0455796f1bd25330ec201.jpg" width="0" height="0">https://www.runoob.com/html/html5-new-element.html</span></span></p> 
  <h2 id="1%E3%80%81%E8%AF%AD%E4%B9%89%E6%A0%87%E7%AD%BE">1、语义标签</h2> 
  <table border="0"> 
   <thead> 
    <tr> 
     <th>标签</th> 
     <th>描述</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>header</td> 
     <td>定义了文档的头部区域</td> 
    </tr> 
    <tr> 
     <td>footer</td> 
     <td>定义了文档的尾部区域 </td> 
    </tr> 
    <tr> 
     <td>main</td> 
     <td>定义文档主内容</td> 
    </tr> 
    <tr> 
     <td>nav</td> 
     <td>定义文档的导航 </td> 
    </tr> 
    <tr> 
     <td>section</td> 
     <td> 定义文档中的节</td> 
    </tr> 
    <tr> 
     <td>article</td> 
     <td> 定义文章</td> 
    </tr> 
    <tr> 
     <td>aside</td> 
     <td> 定义页面以外的内容</td> 
    </tr> 
    <tr> 
     <td>details</td> 
     <td>定义用户可以看到或者隐藏的额外细节</td> 
    </tr> 
    <tr> 
     <td>summary</td> 
     <td>标签包含details元素的标题 </td> 
    </tr> 
    <tr> 
     <td>dialog</td> 
     <td>定义对话框或窗口</td> 
    </tr> 
    <tr> 
     <td>figure</td> 
     <td>定义自包含内容，比如图示、图表、照片、代码清单等等</td> 
    </tr> 
    <tr> 
     <td>figcaption</td> 
     <td>定义 <figure> 元素的标题</td> 
    </tr> 
    <tr> 
     <td>mark</td> 
     <td>定义文档中突出显示的内容，标黄，表示强调</td> 
    </tr> 
    <tr> 
     <td>time</td> 
     <td>定义日期/时间</td> 
    </tr> 
    <tr> 
     <td>wbr</td> 
     <td>定义可能的折行（line-break）</td> 
    </tr> 
    <tr> 
     <td>bdi</td> 
     <td>定义与其他文本不同的文本方向</td> 
    </tr> 
    <tr> 
     <td>menuitem</td> 
     <td>定义用户能够从弹出菜单调用的命令/菜单项目</td> 
    </tr> 
    <tr> 
     <td>meter</td> 
     <td>定义已知范围（尺度）内的标量测量</td> 
    </tr> 
    <tr> 
     <td>progress</td> 
     <td>定义任务进度</td> 
    </tr> 
    <tr> 
     <td>rp</td> 
     <td>定义在不支持 ruby 注释的浏览器中显示什么</td> 
    </tr> 
    <tr> 
     <td>rt</td> 
     <td>定义关于字符的解释/发音（用于东亚字体）</td> 
    </tr> 
    <tr> 
     <td>ruby</td> 
     <td>定义 ruby 注释（用于东亚字体）</td> 
    </tr> 
   </tbody> 
  </table> 
  <p><a href="http://img.e-com-net.com/image/info8/9f7d49c24988493a96df610690cac88d.jpg" target="_blank"><img alt="HTML 和 HTML5_第4张图片" src="http://img.e-com-net.com/image/info8/9f7d49c24988493a96df610690cac88d.jpg" width="220" height="258" style="border:1px solid black;"></a></p> 
  <h2 id="2%E3%80%81%E5%A2%9E%E5%BC%BA%E5%9E%8B%E8%A1%A8%E5%8D%95">2、增强型表单</h2> 
  <p>html5 修改一些新的 输入特性，改善更好的输入控制和验证</p> 
  <table border="0"> 
   <thead> 
    <tr> 
     <th>输入类型</th> 
     <th>描述</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>color</td> 
     <td>主要用于选取颜色</td> 
    </tr> 
    <tr> 
     <td>date</td> 
     <td>选取日期</td> 
    </tr> 
    <tr> 
     <td>datetime</td> 
     <td>选取日期(UTC时间)</td> 
    </tr> 
    <tr> 
     <td>datetime-local</td> 
     <td>选取日期（无时区）</td> 
    </tr> 
    <tr> 
     <td>month</td> 
     <td>选择一个月份</td> 
    </tr> 
    <tr> 
     <td>week</td> 
     <td>选择周和年</td> 
    </tr> 
    <tr> 
     <td>time</td> 
     <td>选择一个时间</td> 
    </tr> 
    <tr> 
     <td>email</td> 
     <td>包含e-mail地址的输入域</td> 
    </tr> 
    <tr> 
     <td>number</td> 
     <td>数值的输入域</td> 
    </tr> 
    <tr> 
     <td>url</td> 
     <td>url地址的输入域</td> 
    </tr> 
    <tr> 
     <td>tel</td> 
     <td>定义输入电话号码和字段</td> 
    </tr> 
    <tr> 
     <td>search</td> 
     <td>用于搜索域</td> 
    </tr> 
    <tr> 
     <td>range</td> 
     <td>一个范围内数字值的输入域</td> 
    </tr> 
   </tbody> 
  </table> 
  <p>html5 新增表单元素</p> 
  <table border="0"> 
   <thead> 
    <tr> 
     <th>元素</th> 
     <th>描述</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>datalist</td> 
     <td>定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。</td> 
    </tr> 
    <tr> 
     <td>keygen</td> 
     <td>规定用于表单的密钥对生成器字段。</td> 
    </tr> 
    <tr> 
     <td>output</td> 
     <td>定义不同类型的输出，比如脚本的输出。</td> 
    </tr> 
   </tbody> 
  </table> 
  <p>html5 新增表单属性</p> 
  <table border="0"> 
   <thead> 
    <tr> 
     <th>属性</th> 
     <th>描述</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>placehoder</td> 
     <td>输入框默认提示文字</td> 
    </tr> 
    <tr> 
     <td>required</td> 
     <td>要求输入的内容是否可为空</td> 
    </tr> 
    <tr> 
     <td>pattern</td> 
     <td>描述一个正则表达式验证输入的值</td> 
    </tr> 
    <tr> 
     <td>min/max</td> 
     <td>设置元素最小/最大值</td> 
    </tr> 
    <tr> 
     <td>step</td> 
     <td>为输入域规定合法的数字间隔</td> 
    </tr> 
    <tr> 
     <td>height/wdith</td> 
     <td>用于image类型标签图像高度/宽度</td> 
    </tr> 
    <tr> 
     <td>autofocus</td> 
     <td>规定在页面加载时，域自动获得焦点</td> 
    </tr> 
    <tr> 
     <td>multiple</td> 
     <td>规定元素中可选择多个值</td> 
    </tr> 
   </tbody> 
  </table> 
  <h2 id="3%E3%80%81%E8%A7%86%E9%A2%91%E5%92%8C%E9%9F%B3%E9%A2%91">3、新媒体元素</h2> 
  <table border="1"> 
   <thead> 
    <tr> 
     <th>属性</th> 
     <th>描述</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>audio</td> 
     <td>定义音频内容</td> 
    </tr> 
    <tr> 
     <td>video</td> 
     <td>定义视频（video 或者 movie）</td> 
    </tr> 
    <tr> 
     <td>source</td> 
     <td>定义多媒体资源 <video> 和 <audio></td> 
    </tr> 
    <tr> 
     <td>embed</td> 
     <td>定义嵌入的内容，比如插件</td> 
    </tr> 
    <tr> 
     <td>track</td> 
     <td>为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道</td> 
    </tr> 
   </tbody> 
  </table> 
  <p>js HTML5 中定义的 JavaScript 脚本_weixin79893765432...的博客-CSDN博客</p> 
  <h2 id="4%E3%80%81Canvas%20%E7%BB%98%E5%9B%BE">4、Canvas 绘图</h2> 
  <table border="1"> 
   <thead> 
    <tr> 
     <th>属性</th> 
     <th>描述</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>canvas</td> 
     <td>标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API</td> 
    </tr> 
   </tbody> 
  </table> 
  <p>学习 HTML5 Canvas 这一篇文章就够了 | 菜鸟教程</p> 
  <h2 id="5%E3%80%81SVG%20%E7%BB%98%E5%9B%BE">5、SVG 绘图</h2> 
  <p>SVG 教程 | 菜鸟教程</p> 
  <p>SVG 绘图与 Canvas 绘图的区别：</p> 
  <table border="0"> 
   <thead> 
    <tr> 
     <th>Canvas</th> 
     <th>SVG</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>依赖分辨率</td> 
     <td>不依赖分辨率</td> 
    </tr> 
    <tr> 
     <td>不支持事件处理器</td> 
     <td>支持事件处理器</td> 
    </tr> 
    <tr> 
     <td>能够以.png或.jpg格式保存结果图像</td> 
     <td>复杂度会减慢搞渲染速度</td> 
    </tr> 
    <tr> 
     <td>文字呈现功能比较简单</td> 
     <td>适合大型渲染区域的应用程序</td> 
    </tr> 
    <tr> 
     <td>最合适图像密集的游戏</td> 
     <td>不适合游戏应用</td> 
    </tr> 
   </tbody> 
  </table> 
  <h2 id="%C2%A06%E3%80%81%E5%9C%B0%E7%90%86%E5%AE%9A%E4%BD%8D"> 6、地理定位</h2> 
  <p>使用 geolocation.getCurrentPosition() 方法来获取设备当前位置。以实现“LBS服务”。</p> 
  <p>getCurrentPosition() 方法可以接收 3 个参数：成功得到位置信息时的回调函数、（可选的）获取位置信息失败时的回调函数 和 （可选的）一个 PositionOptions 对象。</p> 
  <p>来看两个例子：</p> 
  <p>案例一：</p> 
  <pre><code>var options = {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 0
};

function success(pos) {
  var crd = pos.coords;

  console.log('Your current position is:');
  console.log('Latitude : ' + crd.latitude);
  console.log('Longitude: ' + crd.longitude);
  console.log('More or less ' + crd.accuracy + ' meters.');
};

function error(err) {
  console.warn('ERROR(' + err.code + '): ' + err.message);
};

navigator.geolocation.getCurrentPosition(success, error, options);</code></pre> 
  <p>案例二： </p> 
  <pre><code>function getLocation() {
	if (navigator.geolocation) {
		navigator.geolocation.getCurrentPosition(showPosition);
	} else {
		x.innerHTML = "Geolocation is not supported by this browser.";
	}
}

function showPosition(position) {
	x.innerHTML = "Latitude: " + position.coords.latitude + "<br />Longitude: " + position.coords.longitude;
}
</code></pre> 
  <h2 id="7%E3%80%81%E6%8B%96%E6%94%BE%20API">7、拖放 API</h2> 
  <p>js HTML5 中定义的 JavaScript 脚本_weixin79893765432...的博客-CSDN博客</p> 
  <h2 id="8%E3%80%81WebWorker">8、WebWorker</h2> 
  <p>Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。</p> 
  <p>Web Worker 使用教程 - 阮一峰的网络日志</p> 
  <h2 id="9%E3%80%81WebStorage">9、WebStorage</h2> 
  <p>js 客户端存储（cookie / sessionStorage / localStorage）_weixin79893765432...的博客-CSDN博客</p> 
  <h2 id="10%E3%80%81WebSocket">10、WebSocket</h2> 
  <p>WebSocket 是一种全双工通信协议。</p> 
  <p>WebSocket 协议的特点：</p> 
  <ul> 
   <li>握手阶段采用HTTP协议，默认端口是80和443</li> 
   <li>建立在TCP协议基础之上，和http协议同属于应用层</li> 
   <li>可以发送文本，也可以发送二进制数据。</li> 
   <li>没有同源限制，客户端可以与任意服务器通信。</li> 
   <li>协议标识符是ws（如果加密，为wss），比如：ws://localhost:8081</li> 
  </ul> 
  <p>WebSocket 教程：WebSocket 教程 - 阮一峰的网络日志</p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1552941181762080768"></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/H5,html,html5)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <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/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/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/1835403246865313792.htm"
                           title="斟一小组鸡血视频" target="_blank">斟一小组鸡血视频</a>
                        <span class="text-muted">和自己一起成长</span>

                        <div>http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa</div>
                    </li>
                    <li><a href="/article/1835395039572881408.htm"
                           title="Dockerfile命令详解之 FROM" target="_blank">Dockerfile命令详解之 FROM</a>
                        <span class="text-muted">清风怎不知意</span>
<a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8%E5%8C%96/1.htm">容器化</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用</div>
                    </li>
                    <li><a href="/article/1835389111658180608.htm"
                           title="《HTML 与 CSS—— 响应式设计》" target="_blank">《HTML 与 CSS—— 响应式设计》</a>
                        <span class="text-muted">陈在天box</span>
<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/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在</div>
                    </li>
                    <li><a href="/article/1835387977480630272.htm"
                           title="【C语言】- 自定义类型：结构体、枚举、联合" target="_blank">【C语言】- 自定义类型：结构体、枚举、联合</a>
                        <span class="text-muted">Cavalier_01</span>
<a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80/1.htm">C语言</a>
                        <div>【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523</div>
                    </li>
                    <li><a href="/article/1835382685745377280.htm"
                           title="html+css网页设计 旅游网站首页1个页面" target="_blank">html+css网页设计 旅游网站首页1个页面</a>
                        <span class="text-muted">html+css+js网页设计</span>
<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>
                        <div>html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击</div>
                    </li>
                    <li><a href="/article/1835379153730367488.htm"
                           title="spring mvc @RequestBody String类型参数" target="_blank">spring mvc @RequestBody String类型参数</a>
                        <span class="text-muted">zoyation</span>
<a class="tag" taget="_blank" href="/search/spring-mvc/1.htm">spring-mvc</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>
                        <div>通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ</div>
                    </li>
                    <li><a href="/article/1835377684025274368.htm"
                           title="ubuntu安装opencv最快的方法" target="_blank">ubuntu安装opencv最快的方法</a>
                        <span class="text-muted">Derek重名了</span>

                        <div>最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html</div>
                    </li>
                    <li><a href="/article/1835376759739084800.htm"
                           title="处理标签包裹的字符串，并取出前250字符" target="_blank">处理标签包裹的字符串，并取出前250字符</a>
                        <span class="text-muted">周bro</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>//假设这是你的HTML字符串varhtmlString=`这是一个段落。这是一个标题这是另一个段落，包含一些链接。`;//解析HTML字符串并提取文本functionextractTextFromHTML(html){varparser=newDOMParser();vardoc=parser.parseFromString(html,"text/html");vartextContent=do</div>
                    </li>
                    <li><a href="/article/1835372727582683136.htm"
                           title="h5小游戏定制开发" target="_blank">h5小游戏定制开发</a>
                        <span class="text-muted">红匣子实力推荐</span>

                        <div>随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台</div>
                    </li>
                    <li><a href="/article/1835354700392787968.htm"
                           title="Nginx的使用场景：构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景：构建高效、可扩展的Web架构</a>
                        <span class="text-muted">张某布响丸辣</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a>
                        <div>Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin</div>
                    </li>
                    <li><a href="/article/1835354447627251712.htm"
                           title="前端知识点" target="_blank">前端知识点</a>
                        <span class="text-muted">ZhangTao_zata</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
                        <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div>
                    </li>
                    <li><a href="/article/1835350535818014720.htm"
                           title="如何建设数据中台（五）——数据汇集—打破企业数据孤岛" target="_blank">如何建设数据中台（五）——数据汇集—打破企业数据孤岛</a>
                        <span class="text-muted">weixin_47088026</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95%E5%92%8C%E6%80%BB%E7%BB%93/1.htm">学习记录和总结</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E5%8F%B0/1.htm">中台</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%8F%B0/1.htm">数据中台</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a>
                        <div>数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi</div>
                    </li>
                    <li><a href="/article/1835349024102772736.htm"
                           title="非关系型数据库" target="_blank">非关系型数据库</a>
                        <span class="text-muted">天秤-white</span>
<a class="tag" taget="_blank" href="/search/nosql/1.htm">nosql</a>
                        <div>一、为什么要用Nosql1.单机MySQL的时代。一个基本的网站访问量一般不会太大，单个数据库完全足够。那时候更多使用的静态网页html，服务器根本没有太大压力。这时候网站的瓶颈是什么？-数据量如果太大，一个机器放不下。-数据量太大需要建立数据的索引（B+Tree），一个服务器内存放不下。-访问量读写混合，一个服务器承受不了。2.memcached缓存+MySQL+垂直拆分（读写分离）。网站80%</div>
                    </li>
                    <li><a href="/article/1835342718067372032.htm"
                           title="Python精选200Tips：121-125" target="_blank">Python精选200Tips：121-125</a>
                        <span class="text-muted">AnFany</span>
<a class="tag" taget="_blank" href="/search/Python200%2BTips/1.htm">Python200+Tips</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>Spendyourtimeonself-improvement121Requests-简化的HTTP请求处理发送GET请求发送POST请求发送PUT请求发送DELETE请求会话管理处理超时文件上传122BeautifulSoup-网页解析和抓取解析HTML和XML文档查找单个标签查找多个标签使用CSS选择器查找标签提取文本修改文档内容删除标签处理XML文档123Scrapy-强大的网络爬虫框架示例</div>
                    </li>
                    <li><a href="/article/1835333268375957504.htm"
                           title="爬虫技术抓取网站数据" target="_blank">爬虫技术抓取网站数据</a>
                        <span class="text-muted">Bearjumpingcandy</span>
<a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a>
                        <div>爬虫技术是一种自动化获取网站数据的技术，它可以模拟人类浏览器的行为，访问网页并提取所需的信息。以下是爬虫技术抓取网站数据的一般步骤：发起HTTP请求：爬虫首先会发送HTTP请求到目标网站，获取网页的内容。解析HTML：获取到网页内容后，爬虫会使用HTML解析器解析HTML代码，提取出需要的数据。数据提取：通过使用XPath、CSS选择器或正则表达式等工具，爬虫可以从HTML中提取出所需的数据，如文</div>
                    </li>
                    <li><a href="/article/1835316434805288960.htm"
                           title="七.正则化" target="_blank">七.正则化</a>
                        <span class="text-muted">愿风去了</span>

                        <div>吴恩达机器学习之正则化（Regularization）http://www.cnblogs.com/jianxinzhou/p/4083921.html从数学公式上理解L1和L2https://blog.csdn.net/b876144622/article/details/81276818虽然在线性回归中加入基函数会使模型更加灵活，但是很容易引起数据的过拟合。例如将数据投影到30维的基函数上，模</div>
                    </li>
                    <li><a href="/article/1835296397365178368.htm"
                           title="创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几" target="_blank">创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几</a>
                        <span class="text-muted">uthRaman</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a>
                        <div>前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=</div>
                    </li>
                    <li><a href="/article/1835285939723792384.htm"
                           title="利用frp实现内网穿透（需要云主机）" target="_blank">利用frp实现内网穿透（需要云主机）</a>
                        <span class="text-muted">heiyumiao</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%B7%A5%E5%85%B7/1.htm">网络工具</a><a class="tag" taget="_blank" href="/search/github/1.htm">github</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                        <div>详细实现教程：https://www.iplaysoft.com/frp.htmlhttps://blog.csdn.net/u013144287/article/details/78589643/项目官网地址：https://github.com/fatedier/frp/releases按照系统下载相应的程序包什么是frp内网穿透工具有很多，其中Frp(FastReverseProxy)是比较</div>
                    </li>
                    <li><a href="/article/1835270061674295296.htm"
                           title="word转html制作操作手册,Word文档转换为HTML帮助文档操作手册范本.pdf" target="_blank">word转html制作操作手册,Word文档转换为HTML帮助文档操作手册范本.pdf</a>
                        <span class="text-muted">想吃草莓干</span>
<a class="tag" taget="_blank" href="/search/word%E8%BD%AChtml%E5%88%B6%E4%BD%9C%E6%93%8D%E4%BD%9C%E6%89%8B%E5%86%8C/1.htm">word转html制作操作手册</a>
                        <div>Word文档转换为HTML帮助文档操作手册一、使用到的软件DOC2CHMDreamweaverCS3Helpandmanual4二、操作步骤1.先建立一个工作目录。如hhwork。2.将需要转换的文件复制到此工作目录下。如果是中文文件名，最好将其改为英文文件名。例：现在要将《小神探点检定修信息管理系统使用手册0.3.6.doc》转换为Html格式的帮助文档，首先将此文档复制到hhwork目录下并将</div>
                    </li>
                    <li><a href="/article/1835262372638453760.htm"
                           title="WORD批量转换器MultiDoc Converter" target="_blank">WORD批量转换器MultiDoc Converter</a>
                        <span class="text-muted">uolian</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a>
                        <div>WORD批量转换器MultiDocConverterhttps://www.52pojie.cn/thread-1318745-1-1.html可批量将doc、docx等文件格式转成doc、docx、pdf、rtf、txt、html、epub等格式。安装包下载地址：https://wws.lanzouj.com/irvVbiz0pkd最终下载文件打包地址（未作成单文件，不确定是否可以直接使用）：h</div>
                    </li>
                    <li><a href="/article/1835258583235784704.htm"
                           title="HTML中"bgcolor"与"background-color"的区别" target="_blank">HTML中"bgcolor"与"background-color"的区别</a>
                        <span class="text-muted">Sardar_</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
                        <div>bgcolor只是标签属性，而backgroud更多作为css的样式属性。它们俩大多数情况下效果完全相同。但在标签下效果不同。不支持bgcolor属性，只能用style标签添加CSS样式。作为table的属性而言：HelloWorld!和HelloWorld!效果完全相同。作为body属性而言：效果完全相同。不过个人推荐统一用CSS样式进行控制，把style统一放到.css文件中。backgrou</div>
                    </li>
                    <li><a href="/article/1835257575277424640.htm"
                           title="【Python爬虫】百度百科词条内容" target="_blank">【Python爬虫】百度百科词条内容</a>
                        <span class="text-muted">PokiFighting</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%A4%84%E7%90%86/1.htm">数据处理</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</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>词条内容我这里随便选取了一个链接，用的是FBI的词条importurllib.requestimporturllib.parsefromlxmlimportetreedefquery(url):headers={'user-agent':'Mozilla/5.0(WindowsNT6.1;Win64;x64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/80.</div>
                    </li>
                                <li><a href="/article/113.htm"
                                       title="windows下源码安装golang" target="_blank">windows下源码安装golang</a>
                                    <span class="text-muted">616050468</span>
<a class="tag" taget="_blank" href="/search/golang%E5%AE%89%E8%A3%85/1.htm">golang安装</a><a class="tag" taget="_blank" href="/search/golang%E7%8E%AF%E5%A2%83/1.htm">golang环境</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a>
                                    <div>         系统： 64位win7， 开发环境：sublime text 2，  go版本： 1.4.1 
  
 1.  安装前准备(gcc, gdb, git) 
       golang在64位系</div>
                                </li>
                                <li><a href="/article/240.htm"
                                       title="redis批量删除带空格的key" target="_blank">redis批量删除带空格的key</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a>
                                    <div>redis批量删除的通常做法： 
 
 
redis-cli keys "blacklist*" | xargs redis-cli del 
 
上面的命令在key的前后没有空格时是可以的，但有空格就不行了： 
 

$redis-cli keys "blacklist*"
1) "blacklist:12: 361942420@qq.com</div>
                                </li>
                                <li><a href="/article/367.htm"
                                       title="oracle正则表达式的用法" target="_blank">oracle正则表达式的用法</a>
                                    <span class="text-muted">0624chenhong</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">正则表达式</a>
                                    <div>  方括号表达示 
方括号表达式 
描述 
[[:alnum:]] 
字母和数字混合的字符 
[[:alpha:]] 
字母字符 
[[:cntrl:]] 
控制字符 
[[:digit:]] 
数字字符 
[[:graph:]] 
图像字符 
[[:lower:]] 
小写字母字符 
[[:print:]] 
打印字符 
[[:punct：]] 
标点符号字符 
[[:space:]]</div>
                                </li>
                                <li><a href="/article/494.htm"
                                       title="2048源码(核心算法有，缺少几个anctionbar，以后补上)" target="_blank">2048源码(核心算法有，缺少几个anctionbar，以后补上)</a>
                                    <span class="text-muted">不懂事的小屁孩</span>
<a class="tag" taget="_blank" href="/search/2048/1.htm">2048</a>
                                    <div>2048游戏基本上有四部分组成， 
1：主activity，包含游戏块的16个方格，上面统计分数的模块 
2：底下的gridview，监听上下左右的滑动，进行事件处理， 
3：每一个卡片，里面的内容很简单，只有一个text，记录显示的数字 
4：Actionbar，是游戏用重新开始，设置等功能(这个在底下可以下载的代码里面还没有实现) 
 
写代码的流程 
1：设计游戏的布局，基本是两块，上面是分</div>
                                </li>
                                <li><a href="/article/621.htm"
                                       title="jquery内部链式调用机理" target="_blank">jquery内部链式调用机理</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/jquery/1.htm">jquery</a>
                                    <div>只需要在调用该对象合适(比如下列的setStyles)的方法后让该方法返回该对象（通过this  因为一旦一个函数称为一个对象方法的话那么在这个方法内部this（结合下面的setStyles）指向这个对象） 

function  create(type){
var element=document.createElement(type);
    //this=element;
</div>
                                </li>
                                <li><a href="/article/748.htm"
                                       title="你订酒店时的每一次点击 背后都是NoSQL和云计算" target="_blank">你订酒店时的每一次点击 背后都是NoSQL和云计算</a>
                                    <span class="text-muted">蓝儿唯美</span>
<a class="tag" taget="_blank" href="/search/NoSQL/1.htm">NoSQL</a>
                                    <div>全球最大的在线旅游公司Expedia旗下的酒店预订公司，它运营着89个网站，跨越68个国家，三年前开始实验公有云，以求让客户在预订网站上查询假期酒店时得到更快的信息获取体验。 
云端本身是用于驱动网站的部分小功能的，如搜索框的自动推荐功能，还能保证处理Hotels.com服务的季节性需求高峰整体储能。 
Hotels.com的首席技术官Thierry Bedos上个月在伦敦参加“2015 Clou</div>
                                </li>
                                <li><a href="/article/875.htm"
                                       title="java笔记1" target="_blank">java笔记1</a>
                                    <span class="text-muted">a-john</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>1，面向对象程序设计（Object-oriented Propramming，OOP）：java就是一种面向对象程序设计。 
2，对象：我们将问题空间中的元素及其在解空间中的表示称为“对象”。简单来说，对象是某个类型的实例。比如狗是一个类型，哈士奇可以是狗的一个实例，也就是对象。 
3，面向对象程序设计方式的特性： 
    3.1 万物皆为对象。 
   </div>
                                </li>
                                <li><a href="/article/1002.htm"
                                       title="C语言 sizeof和strlen之间的那些事 C/C++软件开发求职面试题 必备考点（一）" target="_blank">C语言 sizeof和strlen之间的那些事 C/C++软件开发求职面试题 必备考点（一）</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/C%2FC%2B%2B%E6%B1%82%E8%81%8C%E9%9D%A2%E8%AF%95%E5%BF%85%E5%A4%87%E8%80%83%E7%82%B9/1.htm">C/C++求职面试必备考点</a>
                                    <div>        找工作在即，以后决定每天至少写一个知识点，主要是记录，逼迫自己动手、总结加深印象。当然如果能有一言半语让他人收益，后学幸运之至也。如有错误，还希望大家帮忙指出来。感激不尽。 
       后学保证每个写出来的结果都是自己在电脑上亲自跑过的，咱人笨，以前学的也半吊子。很多时候只能靠运行出来的结果再反过来</div>
                                </li>
                                <li><a href="/article/1129.htm"
                                       title="程序员写代码时就不要管需求了吗？" target="_blank">程序员写代码时就不要管需求了吗？</a>
                                    <span class="text-muted">asia007</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98%E4%B8%8D%E8%83%BD%E4%B8%80%E5%91%B3%E8%B7%9F%E9%9C%80%E6%B1%82%E8%B5%B0/1.htm">程序员不能一味跟需求走</a>
                                    <div>      编程也有2年了，刚开始不懂的什么都跟需求走，需求是怎样就用代码实现就行，也不管这个需求是否合理，是否为较好的用户体验。当然刚开始编程都会这样，但是如果有了2年以上的工作经验的程序员只知道一味写代码，而不在写的过程中思考一下这个需求是否合理，那么，我想这个程序员就只能一辈写敲敲代码了。 
      我的技术不是很好，但是就不代</div>
                                </li>
                                <li><a href="/article/1256.htm"
                                       title="Activity的四种启动模式" target="_blank">Activity的四种启动模式</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E6%A0%88%E6%A8%A1%E5%BC%8F%E5%90%AF%E5%8A%A8/1.htm">栈模式启动</a><a class="tag" taget="_blank" href="/search/Activity%E7%9A%84%E6%A0%87%E5%87%86%E6%A8%A1%E5%BC%8F%E5%90%AF%E5%8A%A8/1.htm">Activity的标准模式启动</a><a class="tag" taget="_blank" href="/search/%E6%A0%88%E9%A1%B6%E6%A8%A1%E5%BC%8F%E5%90%AF%E5%8A%A8/1.htm">栈顶模式启动</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F%E5%90%AF%E5%8A%A8/1.htm">单例模式启动</a>
                                    <div>android界面的操作就是很多个activity之间的切换,启动模式决定启动的activity的生命周期 ; 
  
启动模式xml中配置 
    <activity android:name=".MainActivity" android:launchMode="standard&quo</div>
                                </li>
                                <li><a href="/article/1383.htm"
                                       title="Spring中@Autowired标签与@Resource标签的区别" target="_blank">Spring中@Autowired标签与@Resource标签的区别</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/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%40Resource/1.htm">@Resource</a><a class="tag" taget="_blank" href="/search/%40Autowired/1.htm">@Autowired</a><a class="tag" taget="_blank" href="/search/%40Qualifier/1.htm">@Qualifier</a>
                                    <div>Spring不但支持自己定义的@Autowired注解，还支持由JSR-250规范定义的几个注解，如：@Resource、 @PostConstruct及@PreDestroy。 
  
1. @Autowired    @Autowired是Spring 提供的，需导入    Package:org.springframewo</div>
                                </li>
                                <li><a href="/article/1510.htm"
                                       title="Changes Between SOAP 1.1 and SOAP 1.2" target="_blank">Changes Between SOAP 1.1 and SOAP 1.2</a>
                                    <span class="text-muted">sunjing</span>
<a class="tag" taget="_blank" href="/search/Changes/1.htm">Changes</a><a class="tag" taget="_blank" href="/search/Enable/1.htm">Enable</a><a class="tag" taget="_blank" href="/search/SOAP+1.1/1.htm">SOAP 1.1</a><a class="tag" taget="_blank" href="/search/SOAP+1.2/1.htm">SOAP 1.2</a>
                                    <div>JAX-WS 
SOAP Version 1.2 Part 0: Primer (Second Edition) 
SOAP Version 1.2 Part 1: Messaging Framework (Second Edition) 
SOAP Version 1.2 Part 2: Adjuncts (Second Edition) 
  
Which style of WSDL</div>
                                </li>
                                <li><a href="/article/1637.htm"
                                       title="【Hadoop二】Hadoop常用命令" target="_blank">【Hadoop二】Hadoop常用命令</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a>
                                    <div>以Hadoop运行Hadoop自带的wordcount为例， 
  
hadoop脚本位于/home/hadoop/hadoop-2.5.2/bin/hadoop，需要说明的是，这些命令的使用必须在Hadoop已经运行的情况下才能执行 
  Hadoop HDFS相关命令 
 
  hadoop fs -ls 
 
 列出HDFS文件系统的第一级文件和第一级</div>
                                </li>
                                <li><a href="/article/1764.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/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E8%99%9A%E6%8B%9F%E6%9C%BA/1.htm">虚拟机</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a>
                                    <div>从学习到现在从事java开发一年多了，个人觉得对java只了解皮毛，很多东西都是用到再去慢慢学习，编程真的是一项艺术，要完成一段好的代码，需要懂得很多。 
最近项目经理让我负责一个组件开发，框架都由自己搭建，最让我头疼的是异常处理，我看了一些网上的源码，发现他们对异常的处理不是很重视，研究了很久都没有找到很好的解决方案。后来有幸看到一个200W美元的项目部分源码，通过他们对异常处理的解决方案，我终</div>
                                </li>
                                <li><a href="/article/1891.htm"
                                       title="记录整理-工作问题" target="_blank">记录整理-工作问题</a>
                                    <span class="text-muted">braveCS</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a>
                                    <div>1）那位同学还是CSV文件默认Excel打开看不到全部结果。以为是没写进去。同学甲说文件应该不分大小。后来log一下原来是有写进去。只是Excel有行数限制。那位同学进步好快啊。 
2）今天同学说写文件的时候提示jvm的内存溢出。我马上反应说那就改一下jvm的内存大小。同学说改用分批处理了。果然想问题还是有局限性。改jvm内存大小只能暂时地解决问题，以后要是写更大的文件还是得改内存。想问题要长远啊</div>
                                </li>
                                <li><a href="/article/2018.htm"
                                       title="org.apache.tools.zip实现文件的压缩和解压，支持中文" target="_blank">org.apache.tools.zip实现文件的压缩和解压，支持中文</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a>
                                    <div>刚开始用java.util.Zip，发现不支持中文（网上有修改的方法，但比较麻烦） 
后改用org.apache.tools.zip 
org.apache.tools.zip的使用网上有更简单的例子 
下面的程序根据实际需求，实现了压缩指定目录下指定文件的方法 
 



import java.io.BufferedReader;
import java.io.BufferedWrit</div>
                                </li>
                                <li><a href="/article/2145.htm"
                                       title="读书笔记-4" target="_blank">读书笔记-4</a>
                                    <span class="text-muted">chengxuyuancsdn</span>
<a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a>
                                    <div>1、JSTL 核心标签库标签 
2、避免SQL注入 
3、字符串逆转方法 
4、字符串比较compareTo 
5、字符串替换replace 
6、分拆字符串 
 
 
1、JSTL 核心标签库标签共有13个，
学习资料：http://www.cnblogs.com/lihuiyy/archive/2012/02/24/2366806.html
功能上分为4类：
(1)表达式控制标签：out</div>
                                </li>
                                <li><a href="/article/2272.htm"
                                       title="[物理与电子]半导体教材的一个小问题" target="_blank">[物理与电子]半导体教材的一个小问题</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E9%97%AE%E9%A2%98/1.htm">问题</a>
                                    <div> 
 
      各种模拟电子和数字电子教材中都有这个词汇-空穴 
 
      书中对这个词汇的解释是; 当电子脱离共价键的束缚成为自由电子之后,共价键中就留下一个空位,这个空位叫做空穴 
 
      我现在回过头翻大学时候的教材,觉得这个</div>
                                </li>
                                <li><a href="/article/2399.htm"
                                       title="Flashback Database --闪回数据库" target="_blank">Flashback Database --闪回数据库</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E9%97%AA%E5%9B%9E%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">闪回数据库</a>
                                    <div>Flashback 技术是以Undo segment中的内容为基础的， 因此受限于UNDO_RETENTON参数。要使用flashback 的特性，必须启用自动撤销管理表空间。 
在Oracle 10g中， Flash back家族分为以下成员： Flashback Database， Flashback Drop，Flashback Query(分Flashback Query,Flashbac</div>
                                </li>
                                <li><a href="/article/2526.htm"
                                       title="简单排序:插入排序" target="_blank">简单排序:插入排序</a>
                                    <span class="text-muted">dieslrae</span>
<a class="tag" taget="_blank" href="/search/%E6%8F%92%E5%85%A5%E6%8E%92%E5%BA%8F/1.htm">插入排序</a>
                                    <div>
    public void insertSort(int[] array){
        int temp;
        
        for(int i=1;i<array.length;i++){
            temp = array[i];
            
            for(int k=i-1;k>=0;k--)</div>
                                </li>
                                <li><a href="/article/2653.htm"
                                       title="C语言学习六指针小示例、一维数组名含义，定义一个函数输出数组的内容" target="_blank">C语言学习六指针小示例、一维数组名含义，定义一个函数输出数组的内容</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a>
                                    <div># include <stdio.h>

int main(void)
{
	int * p; //等价于 int *p 也等价于 int* p;
	int i = 5;
	char ch = 'A';

	//p = 5;	//error
	//p = &ch;	//error
	//p = ch;	//error

	p = &i;		// </div>
                                </li>
                                <li><a href="/article/2780.htm"
                                       title="centos下php redis扩展的安装配置3种方法" target="_blank">centos下php redis扩展的安装配置3种方法</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a>
                                    <div>方法一 
1.下载php redis扩展包     代码如下 复制代码    
#wget http://redis.googlecode.com/files/redis-2.4.4.tar.gz     
2 tar -zxvf 解压压缩包，cd /扩展包 （进入扩展包然后 运行phpize 一下是我环境中phpize的目录，/usr/local/php/bin/phpize (一定要</div>
                                </li>
                                <li><a href="/article/2907.htm"
                                       title="线程池(Executors)" target="_blank">线程池(Executors)</a>
                                    <span class="text-muted">shuizhaosi888</span>
<a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B%E6%B1%A0/1.htm">线程池</a>
                                    <div>在java类库中，任务执行的主要抽象不是Thread，而是Executor，将任务的提交过程和执行过程解耦 
	public interface Executor {

	    void execute(Runnable command);
	}
 
  
public class RunMain implements Executor{

	@Override
	pub</div>
                                </li>
                                <li><a href="/article/3034.htm"
                                       title="openstack 快速安装笔记" target="_blank">openstack 快速安装笔记</a>
                                    <span class="text-muted">haoningabc</span>
<a class="tag" taget="_blank" href="/search/openstack/1.htm">openstack</a>
                                    <div>前提是要配置好yum源 
版本icehouse，操作系统redhat6.5 
最简化安装，不要cinder和swift 
三个节点 
172 control节点keystone glance horizon 
173 compute节点nova 
173 network节点neutron 
 

control
/etc/sysctl.conf

net.ipv4.ip_forward =</div>
                                </li>
                                <li><a href="/article/3161.htm"
                                       title="从c面向对象的实现理解c++的对象（二）" target="_blank">从c面向对象的实现理解c++的对象（二）</a>
                                    <span class="text-muted">jimmee</span>
<a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/1.htm">面向对象</a><a class="tag" taget="_blank" href="/search/%E8%99%9A%E5%87%BD%E6%95%B0/1.htm">虚函数</a>
                                    <div>1. 类就可以看作一个struct，类的方法，可以理解为通过函数指针的方式实现的，类对象分配内存时，只分配成员变量的，函数指针并不需要分配额外的内存保存地址。 
2. c++中类的构造函数，就是进行内存分配(malloc)，调用构造函数 
3. c++中类的析构函数，就时回收内存(free) 
4. c++是基于栈和全局数据分配内存的，如果是一个方法内创建的对象，就直接在栈上分配内存了。 
专门在</div>
                                </li>
                                <li><a href="/article/3288.htm"
                                       title="如何让那个一个div可以拖动" target="_blank">如何让那个一个div可以拖动</a>
                                    <span class="text-muted">lingfeng520240</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
                                    <div>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml</div>
                                </li>
                                <li><a href="/article/3415.htm"
                                       title="第10章 高级事件（中）" target="_blank">第10章 高级事件（中）</a>
                                    <span class="text-muted">onestopweb</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%8B%E4%BB%B6/1.htm">事件</a>
                                    <div>index.html 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/</div>
                                </li>
                                <li><a href="/article/3542.htm"
                                       title="计算两个经纬度之间的距离" target="_blank">计算两个经纬度之间的距离</a>
                                    <span class="text-muted">roadrunners</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%A1%E7%AE%97/1.htm">计算</a><a class="tag" taget="_blank" href="/search/%E7%BA%AC%E5%BA%A6/1.htm">纬度</a><a class="tag" taget="_blank" href="/search/LBS/1.htm">LBS</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E5%BA%A6/1.htm">经度</a><a class="tag" taget="_blank" href="/search/%E8%B7%9D%E7%A6%BB/1.htm">距离</a>
                                    <div>要解决这个问题的时候，到网上查了很多方案，最后计算出来的都与百度计算出来的有出入。下面这个公式计算出来的距离和百度计算出来的距离是一致的。 
	/**
	 * 
	 * @param longitudeA
	 *            经度A点
	 * @param latitudeA
	 *            纬度A点
	 * @param longitudeB
	 *    </div>
                                </li>
                                <li><a href="/article/3669.htm"
                                       title="最具争议的10个Java话题" target="_blank">最具争议的10个Java话题</a>
                                    <span class="text-muted">tomcat_oracle</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>1、Java8已经到来。什么！？ Java8 支持lambda。哇哦，RIP Scala！   　　随着Java8 的发布，出现很多关于新发布的Java8是否有潜力干掉Scala的争论，最终的结论是远远没有那么简单。Java8可能已经在Scala的lambda的包围中突围，但Java并非是函数式编程王位的真正觊觎者。   　 
　2、Java 9 即将到来   　　 
Oracle早在8月份就发布</div>
                                </li>
                                <li><a href="/article/3796.htm"
                                       title="zoj 3826 Hierarchical Notation(模拟)" target="_blank">zoj 3826 Hierarchical Notation(模拟)</a>
                                    <span class="text-muted">阿尔萨斯</span>
<a class="tag" taget="_blank" href="/search/rar/1.htm">rar</a>
                                    <div> 题目链接：zoj 3826 Hierarchical Notation 
 题目大意：给定一些结构体，结构体有value值和key值，Q次询问，输出每个key值对应的value值。 
 解题思路：思路很简单，写个类词法的递归函数，每次将key值映射成一个hash值，用map映射每个key的value起始终止位置，预处理完了查询就很简单了。 这题是最后10分钟出的，因为没有考虑value为{}的情</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>