橙子!

【Web前端】一文带你吃透HTML(完整篇)

前端学习路线小总结：

基础入门：
HTML CSS JavaScript
三大主流框架：
VUE REACT Angular
深入学习：
小程序 Node jQuery TypeScript 前端工程化

开始前端之旅吧!

一.HTML简介
- 1.什么是HTML？
- 2.HTML 标签
- 3.HTML 元素
- 4.HTML版本
- 5.Web 浏览器
- 6.HTML 网页结构
- 7.中文编码
- 8.编写第一个网页
二.HTML编辑器
三.HTML基础
- 1.HTML 标题
- 2.HTML 段落
- 3.HTML 链接
- 4.HTML 图像
四.HTML元素
- 1.HTML 元素语法
- 2.嵌套的 HTML 元素
- 3.HTML 空元素
五.HTML属性
六.HTML标题
- 1.HTML标题
- 2.HTML水平线
- 3.HTML 注释
七.HTML段落
- 1.HTML段落
- 2.HTML换行
八.HTML文本格式化
九.HTML链接
十.HTML头部
十一.HTML图像
十二.HTML表格
十三.HTML列表
十四.HTML区块
- 1.HTML区块元素
- 2.HTML内联元素
- 3.HTML的 div 元素
- 4.HTML的 span 元素
十五.HTML布局
- 1.使用div元素添加网页布局
- 2.使用table元素添加网页布局
十六.HTML表单和输入
- 1.文本域
- 2.密码字段
- 3.单选按钮
- 4.复选框
- 5.提交按钮
十七.HTML框架
- 1.iframe语法
- 2.iframe设置高度和宽度
- 3.iframe去除边框
- 4.使用 iframe 来显示目标链接页面
十八.HTML颜色
十九.脚本
- 1.HTML的 script 标签
- 2.HTML的 noscript 标签
二十.字符实体
二十一.URL
- 1.常见的 URL Scheme
二十二.HTML总结

一.HTML简介

万维网W3C标准中网页分为结构，表现和行为三部分，HTML用于描述页面的结构，CSS用于控制页面中的元素样式，JavaScript用于响应用户的操作。HTML，CSS和JavaScript组成了前端技术栈。

学习HTML就是学习标签的一个过程，难度指数低，重在反复练习，首先看看HTML文档的基本结构：


<html>
<head>
<meta charset="utf-8">
<title>小橙子前端教程title>
head>
<body>

<h1>标题h1>
<p>段落p>

body>
html>

1.什么是HTML？

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签。通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。

HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

2.HTML 标签

HTML标记标签又称为标签。

HTML 标签是由尖括号包围的关键词
HTML 标签通常是成对出现
标签对中的第一个标签是开始标签(开放标签)，第二个标签是结束标签(闭合标签)

<标签>内容标签>

所有 HTML 文档必须以声明开头，该声明并非一个 HTML 标签，它是一条“信息”，告知浏览器期望的文档类型。

3.HTML 元素

一个 HTML 元素包含了开始标签与结束标签。例如：

<h1>一级标题h1>

4.HTML版本

下面是HTML的历史版本：

版本	发布时间
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

5.Web 浏览器

要想学习Web前端，一定要先了解Web浏览器（如谷歌浏览器，Edge，Safari）。Web浏览器用于读取HTML文件，并将其作为网页显示。浏览器并不是直接显示HTML标签，而是负责网页的渲染和呈现，标签决定了如何展现HTML页面的内容给用户。例如：

6.HTML 网页结构

下面是HTML文档的基本结构，前面我们已经做了示例代码的展示：

7.中文编码

在一些浏览器直接输出中文会出现乱码的情况，当在浏览器输出中文乱码时，需要在头部将字符声明为 UTF-8 或 GBK。例如：

<meta charset="UTF-8">

8.编写第一个网页

前面介绍了HTML文档的一些基础信息，以及Web浏览器初识，接下来编写我们学习前端的第一个网页：

示例：使用记事本编写你的第一个网页！

<html>

<head>
    <title>这是我的第一个网页title>
head>

<body>
    
    <h1>望庐山瀑布h1>
    <h2>
        <font color=red>唐font> 李白
    h2>
    <p>日照香炉生紫烟，遥看瀑布挂前川。p>
    <p>飞流直下三千尺，疑是银河落九天。p>
body>

html>

新建一个文本文档，命名为index.html。编写代码，在默认浏览器中运行，查看显示效果！

二.HTML编辑器

这里推荐使用VsCode来编辑HTML代码！

vscode 是由微软开发的免费开源软件，它具有以下优势：

轻量级编辑器

丰富的插件系统

代码跟踪功能

三.HTML基础

1.HTML 标题

HTML 标题是通过

-

标签来定义的，例如：

    <h1>一级标题h1>
    <h2>二级标题h2>
    <h3>三级标题h3>

2.HTML 段落

HTML 段落是通过标签

来定义的，例如：

    <p>段落1p>
    <p>段落2p>
    <p>段落3p>

3.HTML 链接

HTML 链接是通过标签来定义的，例如：

<a href="https://www.baidu.com">百度一下a>

4.HTML 图像

HTML 图像是通过标签来定义的，例如：

<img src="/images/baidu.png" width="258" height="39" />

四.HTML元素

1.HTML 元素语法

HTML 元素以开始标签起始，以结束标签终止
元素的内容是开始标签与结束标签之间的内容，某些 HTML 元素具有空内容
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

2.嵌套的 HTML 元素

其实，大多数 HTML 元素可以嵌套使用，即HTML 元素可以包含其他 HTML 元素。所以，HTML 文档是由相互嵌套的 HTML 元素构成的，例如：


<html>

<body>
<p>段落1...p>
body>

html>

其中，对几个重要的标签做一个描述：

这个
元素定义了 HTML 文档中的一个段落。这个元素拥有一个开始标签
以及一个结束标签
。元素内容是: 段落1…。
元素定义了 HTML 文档的主体。这个元素拥有一个开始标签以及一个结束标签。元素内容是另一个 HTML 元素（p 元素）。
元素定义了整个 HTML 文档。这个元素拥有一个开始标签，以及一个结束标签。元素内容是另一个 HTML 元素（body 元素）。

3.HTML 空元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的，例如：

    <p>段落1p>
    <br>
    <p>段落2p>

其中，就是没有关闭标签的空元素（标签定义换行）。

在开始标签中添加斜杠，比如，是关闭空元素的正确方法。

五.HTML属性

属性是 HTML 元素提供的附加信息，属性值应该始终被包括在引号内，如果属性值本身就含有双引号，那么必须使用单引号包含属性值。

HTML 元素可以设置属性，属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。

例如，HTML的链接标签中添加属性：

<a href="http://www.baidu.com">百度一下a>

HTML 链接由标签定义。链接的地址在 href 属性中指定。

六.HTML标题

1.HTML标题

标题是通过

标签进行定义的。

定义最大的标题。

定义最小的标题。浏览器会自动地在标题的前后添加空行，例如：

    <h1>一级标题h1>
    <h2>二级标题h2>
    <h3>三级标题h3>

标题用来正确的显示文章结构，通过不同的标题可以为文章建立索引，所以，标题是很重要的存在，所以，不要仅仅是为了生成粗体或大号的文本而使用标题。

2.HTML水平线

标签在 HTML 页面中创建水平线，例如：

    <p>段落1p>
    <hr>
    <p>段落2p>
    <hr>
    <p>段落3p>

3.HTML 注释

可以将注释插入 HTML 代码中，提高代码可读性，浏览器会忽略注释，也不会显示它们。

七.HTML段落

1.HTML段落

HTML可以将文档分为不同的段落。段落是通过

标签定义的，例如：

<p>段落1...p>
<p>段落2...p>

2.HTML换行

使用标签在不产生新的段落的情况下换行，例如：

<p>这是<br>换行的<br>演示p>

元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

八.HTML文本格式化

HTML 使用标签 (“bold”) 与 (“italic”) 对输出的文本进行格式, 如：粗体 or 斜体。也可使用标签替换加粗标签来使用, 替换标签使用。但是两者的含义不同，或者 标签有你要呈现的文本是重要的，所以要突出显示的意思。

标签	作用
	定义粗体文本
	定义着重文字
	定义斜体文字
	定义小号文字
…	…

文本格式化的标签及其作用：

标签作用

定义粗体文本

定义着重文字

定义斜体文字

定义小号文字

… …

详细的HTML标签参考标签参考手册哦

九.HTML链接

HTML 使用超级链接与网络上的另一个文档相连，点击链接可以从一张页面跳转到另一张页面。

HTML使用标签来设置超文本链接。

在标签中使用了href属性来描述链接的地址。

一个未访问过的链接显示为蓝色字体并带有下划线，访问过的链接显示为紫色并带有下划线，点击链接时，链接显示为红色并带有下划线。

例如，使用标签定义超文本链接：

<a href="url">链接文本a>

其中，可以定义属性实现相应的功能：

使用 target 属性，你可以定义被链接的文档在何处显示。

id 属性可用于创建一个 HTML 文档书签。

十.HTML头部

1.HTML 元素：

元素包含了所有的头部标签元素。在元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。可以添加在头部区域的元素标签为: , <style>, <meta>, <link>, <script>, <noscript> 和 <base>。</code> <hr> 2.HTML <code><title></code>元素： <code><title></code> 标签定义了不同文档的标题。 <ul> <li class="task-list-item"> 定义了浏览器工具栏的标题</li> <li class="task-list-item"> 当网页添加到收藏夹时，显示在收藏夹中的标题</li> <li class="task-list-item"> 显示在搜索引擎结果页面的标题</li> </ul> 例如，下面的HTML文档代码： <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文档标题</title> </head> <body> <p>文档内容......</p> </body> </html> </code></pre> <hr> 3.HTML <code><base></code>元素： <code><base></code> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接，例如： <pre><code class="prism language-html"><head> <base href="http://www.baidu.com/images/" target="_blank"> </head> </code></pre> <hr> 4.HTML <code><link></code>元素 <code><link></code> 标签定义了文档与外部资源之间的关系，例如： <pre><code class="prism language-html"><head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> </code></pre> <hr> 5.HTML <code><stytle></code>元素 <code><style></code> 标签定义了HTML文档的样式文件引用地址，例如： <pre><code class="prism language-html"><head> <style type="text/css"> body {background-color:yellow} p {color:blue} </style> </head> </code></pre> <hr> 6.HTML <code><meta></code>元素 <code><meta></code>标签描述了一些基本的元数据。 <ul> <li class="task-list-item"> 标签提供了元数据。元数据也不显示在页面上，但会被浏览器解析。</li> <li class="task-list-item"> 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。</li> <li class="task-list-item"> 一般放置于 <code><head></code> 区域。</li> </ul> <hr> 7.HTML <code><script></code>元素 <code><script></code>标签用于加载脚本文件，如： JavaScript。 <hr> <h1>十一.HTML图像</h1> 在 HTML 中，图像由<code><img></code> 标签定义，<code><img></code> 是空标签。 要在页面上显示图像，需要使用源属性（src），源属性的值是图像的 URL 地址，例如： <pre><code class="prism language-html"><img src="url" alt="some_text"> </code></pre> <code>alt</code> 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，浏览器将显示这个替代性的文本而不是图像，例如： <pre><code class="prism language-html"><img src="boat.gif" alt="显示图像"> </code></pre> height（高度）与 width（宽度）属性用于设置图像的高度与宽度。默认单位是像素，例如： <pre><code class="prism language-html"><img src="baidu.jpg" alt="百度" width="200" height="100"> </code></pre> <blockquote> 注意：加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。 </blockquote> <hr> <h1>十二.HTML表格</h1> 表格由 <code><table></code> 标签来定义。每个表格均有若干行（由 <code><tr></code> 标签定义），每行被分割为若干单元格（由 <code><td></code> 标签定义）。字母 <code>td</code> 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等，例如： <pre><code class="prism language-html"><table border="1"> <tr> <td>你好</td> <td>你好</td> </tr> <tr> <td>你好</td> <td>你好</td> </tr> </table> </code></pre> 大多数情况我们需要给表格加上边框，也可以不使用边框。 表格的表头使用 <code><th></code> 标签进行定义，大多数浏览器会把表头显示为粗体居中的文本。 <hr> <h1>十三.HTML列表</h1> HTML 支持有序、无序和定义列表: <ul> <li>无序列表使用 <code><ul></code> 标签定义，使用粗体圆点（典型的小黑圆圈）进行标记，每个列表项始于 <code><li></code> 标签，例如：</li> </ul> <pre><code class="prism language-html"> <ul> <li>java</li> <li>python</li> </ul> </code></pre> <img src="http://img.e-com-net.com/image/info8/b0d48127950542abb065a761bc39a3db.jpg" alt="在这里插入图片描述" width="0" height="0"> <ul> <li>有序列表使用<code><ol></code> 标签定义，使用数字进行标记，每个列表项始于 <code><li></code> 标签，例如：</li> </ul> <pre><code class="prism language-html"> <ol> <li>java</li> <li>python</li> </ol> </code></pre> <img src="http://img.e-com-net.com/image/info8/2d91f0a115054daaa0f0d39e7cccd143.jpg" alt="在这里插入图片描述" width="0" height="0"> <ul> <li>自定义列表以 <code><dl></code> 标签开始，每个自定义列表项以 <code><dt></code> 开始。每个自定义列表项的定义以 <code><dd></code> 开始，自定义列表是项目和注释的组合，例如：</li> </ul> <pre><code class="prism language-html"> <dl> <dt>java</dt> <dd>-诞生于1995年</dd> <dt>python</dt> <dd>-诞生于1991年</dd> </dl> </code></pre> <img src="http://img.e-com-net.com/image/info8/ba829f8ff0904312959966f51b941868.jpg" alt="在这里插入图片描述" width="0" height="0"> <hr> <h1>十四.HTML区块</h1> HTML 可以通过 <code><div></code> 和 <code></code>将元素组合起来。 大多数 HTML 元素被定义为块级元素或内联元素。 <h2>1.HTML区块元素</h2> 块级元素在浏览器显示时，通常会以新行来开始和结束。 <h2>2.HTML内联元素</h2> 内联元素在浏览器显示时通常不会以新行开始。 <h2>3.HTML的 div 元素</h2> HTML <code><div></code> 元素是块级元素，它是用于组合其他 HTML 元素的容器。 例：让文档中的一块区域显示为红色，另一块区域加粗且显示为蓝色，HTML文档代码如下。 <pre><code class="prism language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h1>望庐山瀑布</h1> <h2>唐李白</h2> <div style="color:red"> <p>日照香炉生紫烟，</p> <p>遥看瀑布挂前川。</p> </div> <div style="font-weight:bold;color:blue"> <p>飞流直下三千尺，</p> <p>疑是银河落九天。</p> </div> </body> </html> </code></pre> 显示效果： <img src="http://img.e-com-net.com/image/info8/35e3facdb0a047dba57bdd4e64bfa916.jpg" alt="在这里插入图片描述" width="0" height="0"> <code><div></code>标签常用于组合块级元素，以便通过 CSS 来对这些元素进行格式化。 <h2>4.HTML的 span 元素</h2> HTML <code></code> 元素是内联元素，可用作文本的容器。 例：对文档中的一部分文本进行着色，HTML代码如下。 <pre><code class="prism language-html"> <h2><span style="color:chartreuse">唐</span> -李白</h2> </code></pre> 显示效果： <img src="http://img.e-com-net.com/image/info8/0bb7d0d6786c49058108c866969b2593.jpg" alt="在这里插入图片描述" width="0" height="0"> <code></code> 用于对文档中的行内元素进行组合。 <hr> <h1>十五.HTML布局</h1> 布局用于改善网站的外观，我们可以使用<code><div></code>或者<code><table></code>添加网页布局，大多数网站可以使用 <code><div></code> 或者 <code><table></code> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 <h2>1.使用div元素添加网页布局</h2> <code>div</code> 元素是用于分组 HTML 元素的块级元素。例如： <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小橙子前端教程!</title> </head> <body> <div id="container" style="width:600px"> <div id="header" style="background-color:cornflowerblue;"> <h1 style="margin-bottom:0;">--唐诗三百首--</h1> </div>   <div id="menu" style="background-color:dimgrey;height:200px;width:200px;float:left;"> <b>菜单</b><br> 望庐山瀑布<br> 静夜思<br> 绝句<br> 琵琶行 </div> <div id="content" style="background-color:aliceblue;height:200px;width:400px;float:left;"> 望庐山瀑布<br> 翻译译文：香炉峰在阳光的照射下生起紫色烟霞，远远望见瀑布似白色绢绸悬挂在山前。高崖上飞腾直落的瀑布好像有几千尺，让人恍惚以为银河从天上泻落到人间。 </div>  <div id="footer" style="background-color:cadetblue;clear:both;text-align:center;"> 橙子！</div> </div> </body> </html> </code></pre> <img src="http://img.e-com-net.com/image/info8/9989ee7617ba4916920685efffb3c238.jpg" alt="在这里插入图片描述" width="0" height="0"> <h2>2.使用table元素添加网页布局</h2> 我们还可以使用table标签添加网页布局，例如： <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小橙子前端教程!</title> </head> <body> <table width="600" border="0"> <tr> <td colspan="2" style="background-color:cornflowerblue"> <h1>--唐诗三百首--</h1> </td> </tr> <tr> <td style="background-color:dimgrey;width:200px;vertical-align:top;"> <b>菜单</b><br> 望庐山瀑布<br> 静夜思<br> 绝句<br> 琵琶行 </td>  <td style="background-color:aliceblue;height:200px;width:400px;vertical-align:top;"> 望庐山瀑布<br> 翻译译文：香炉峰在阳光的照射下生起紫色烟霞，远远望见瀑布似白色绢绸悬挂在山前。高崖上飞腾直落的瀑布好像有几千尺，让人恍惚以为银河从天上泻落到人间。</td> </tr> <tr> <td colspan="2" style="background-color:cadetblue;text-align:center;"> 橙子！</td> </tr> </table> </body> </html> </code></pre> <img src="http://img.e-com-net.com/image/info8/90581b43833c4886ba34b40753453282.jpg" alt="在这里插入图片描述" width="0" height="0"> <code><table></code>元素主要用于创建表格，虽然可以用于添加网页布局，但是不建议使用！ <hr> <h1>十六.HTML表单和输入</h1> <code>HTML 表单</code>用于收集用户的输入信息，HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。 <code>表单是一个包含表单元素的区域</code>，表单元素是允许用户在表单中输入内容，比如：文本域（textarea）、下拉列表（select）、单选框（radio-buttons）、复选框（checkbox）等等。 我们使用标签来创建表单，多数情况下被用到的表单标签是输入标签 <code><input></code>。 <h2>1.文本域</h2> 文本域(Text Fields)通过 <code><input type="text"></code> 来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域，例如： <pre><code class="prism language-html"><body> <form> First <input type="text" name="firstname"><br> Last <input type="text" name="lastname"> </form> </body> </code></pre> <img src="http://img.e-com-net.com/image/info8/af1c6a5d773542b6bf91647ebb1f13d6.jpg" alt="在这里插入图片描述" width="0" height="0"> <h2>2.密码字段</h2> 密码字段通过标签 <code><input type="password"></code> 来定义，例如： <pre><code class="prism language-html"><form> Password: <input type="password" name="pwd"> </form> </code></pre> <img src="http://img.e-com-net.com/image/info8/ff2d4396b97641d3b69f04b5f2d55bb6.jpg" alt="在这里插入图片描述" width="0" height="0"> 密码字段字符不会明文显示，而是以星号 <code>*</code> 或圆点 <code>.</code> 替代。 <h2>3.单选按钮</h2> 单选按钮(Radio Buttons)通过<code><input type="radio"></code>标签来定义,例如： <pre><code class="prism language-html"><form action=""> <input type="radio" name="sex" value="male">男<br> <input type="radio" name="sex" value="female">女 </form> </code></pre> <img src="http://img.e-com-net.com/image/info8/a5cc85e46eca4cdea7e5ce22b6ac733a.jpg" alt="在这里插入图片描述" width="0" height="0"> <h2>4.复选框</h2> 复选框(Checkboxes)通过标签<code><input type="checkbox"></code>来定义，例如： <pre><code class="prism language-html"> <form> <input type="checkbox" name="vehicle" value="Bike">语文<br> <input type="checkbox" name="vehicle" value="Car">数学<br> <input type="checkbox" name="vehicle" value="Bike">英语<br> <input type="checkbox" name="vehicle" value="Car">历史 </form> </code></pre> <img src="http://img.e-com-net.com/image/info8/cef0504f829a4eebbcc5337da232d90d.jpg" alt="在这里插入图片描述" width="0" height="0"> <h2>5.提交按钮</h2> 提交按钮用<code><input type="submit"></code>标签来定义，例如： <pre><code class="prism language-html"><form name="input" action="html_form_action.php" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> </code></pre> <img src="http://img.e-com-net.com/image/info8/56f16d70324a4587ab1ef18adadbcfa5.jpg" alt="在这里插入图片描述" width="0" height="0"> 在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 html_form_action.php 文件，该页面将显示出输入的结果。 <code>method</code> 属性用于定义表单数据的提交方式，可以是以下值： <code>post</code>：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。 <code>get</code>：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等。 <hr> <h1>十七.HTML框架</h1> 有时候我们希望在同一个浏览器界面中显示不止一个页面，这时候就要用到框架。 <h2>1.iframe语法</h2> iframe语法格式如下： <pre><code class="prism language-html"><iframe src="URL"></iframe> </code></pre> <h2>2.iframe设置高度和宽度</h2> <code>height</code> 和 <code>width</code> 属性用来定义iframe标签的高度与宽度，例如： <pre><code class="prism language-html"><iframe loading="lazy" src="demo_iframe.htm" width="200" height="200"></iframe> </code></pre> <h2>3.iframe去除边框</h2> <code>frameborder</code> 属性用于定义iframe表示是否显示边框，例如： <pre><code class="prism language-html"><iframe src="demo_iframe.htm" frameborder="0"></iframe> </code></pre> <h2>4.使用 iframe 来显示目标链接页面</h2> <code>iframe</code> 可以显示一个目标链接的页面，例如： <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小橙子前端教程！</title> </head> <body> <iframe src="demo_iframe.htm" name="iframe_a" width="800" height="400"></iframe> <p><a href="https://blog.csdn.net/zhangxia_?spm=1000.2115.3001.5343" target="iframe_a">橙子！的博客</a></p> <p><b>注意：</b> 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架，所以在点击链接时页面会显示在 iframe框架中。</p> </body> </html> </code></pre> <img src="http://img.e-com-net.com/image/info8/783f8b2b244940f7b852a1ce40dbdd85.jpg" alt="在这里插入图片描述" width="0" height="0"> <hr> <h1>十八.HTML颜色</h1> <code>HTML 颜色</code>由红色、绿色、蓝色混合而成。 HTML 颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。 每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。 <img src="http://img.e-com-net.com/image/info8/807e73cda7904b31bd0840eaf53bc4a4.jpg" alt="在这里插入图片描述" width="0" height="0"> 具体颜色效果可以查表。 <hr> <h1>十九.脚本</h1> <h2>1.HTML的 script 标签</h2> <code><script></code> 标签用于定义客户端脚本，比如 JavaScript。<code><script></code> 元素既可包含脚本语句，也可通过 <code>src</code> 属性指向外部脚本文件，例如： <pre><code class="prism language-html"><script> document.write("Hello World!"); </script> </code></pre> <h2>2.HTML的 noscript 标签</h2> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，<code><noscript></code>元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素，在浏览器禁止使用脚本时，会显示该标签内的内容，例如： <pre><code class="prism language-html"><script> document.write("Hello World!") </script> <noscript>抱歉，你的浏览器不支持 JavaScript!</noscript> </code></pre> <hr> <h1>二十.字符实体</h1> HTML中预留的字符和一些键盘上找不到的字符必须使用<code>字符实体</code>来替换！ 如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。 <table> <thead> <tr> <th>显示结果</th> <th>描述</th> <th>实体名称</th> <th>实体编号</th> </tr> </thead> <tbody> <tr> <td></td> <td>空格</td> <td><code> </code></td> <td><code> </code></td> </tr> <tr> <td><</td> <td>小于号</td> <td><code><</code></td> <td><code><</code></td> </tr> <tr> <td>></td> <td>大于号</td> <td><code>></code></td> <td><code>></code></td> </tr> <tr> <td>&</td> <td>和号</td> <td><code>&</code></td> <td><code>&</code></td> </tr> </tbody> </table> 实体名称对大小写敏感，实际实体名称使用时参考HTML实体参考手册！ <hr> <h1>二十一.URL</h1> <code>URL(统一资源定位器)</code>是一个网页地址。 可以使用网址，例如：www.baidu.com或者使用IP地址来访问。 <code>Web浏览器</code>通过URL从Web服务器请求页面。 <h2>1.常见的 URL Scheme</h2> <table> <thead> <tr> <th>Scheme</th> <th>访问</th> <th>作用</th> </tr> </thead> <tbody> <tr> <td>http</td> <td>超文本传输协议</td> <td>以 http:// 开头的普通网页。不加密。</td> </tr> <tr> <td>https</td> <td>安全超文本传输协议</td> <td>安全网页，加密所有信息交换。</td> </tr> <tr> <td>ftp</td> <td>文件传输协议</td> <td>用于将文件下载或上传至网站。</td> </tr> <tr> <td>file</td> <td></td> <td>您计算机上的文件。</td> </tr> </tbody> </table> URL 只能使用 ASCII 字符集。 <hr> <h1>二十二.HTML总结</h1> <code>恭喜你！现在我们已经顺利的通过了HTML的学习。</code>在前端三剑客HTML，CSS和JavaScript中，HTML学习相对简单，在学习的过程中一定要注重实践，学习常用的标签。 <a href="http://img.e-com-net.com/image/info8/a984c9026f1e464a869f27a83e55e731.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a984c9026f1e464a869f27a83e55e731.jpg" alt="【Web前端】一文带你吃透HTML(完整篇)_第2张图片" width="650" height="204" style="border:1px solid black;"></a> </div> </div>�� </div> </div> </div>  <div id="SOHUCS" sid="1586940849810427904"></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">你可能感兴趣的:(前端,编程进阶之路,JavaWeb基础教程系列,Java编程,进阶之路,前端,html,html5,1024程序员节)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1891419025662078976.htm" title="swagger使用指引" target="_blank">swagger使用指引</a> MA_Y_ <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>1.swagger介绍在前后端分离开发中通常由后端程序员设计接口，完成后需要编写接口文档，最后将文档交给前端工程师，前端工程师参考文档进行开发。可以通过一些工具快速生成接口文档，本项目通过Swagger生成接口在线文档。什么是Swagger？OpenAPI规范（OpenAPISpecification简称OAS）是Linux基金会的一个项目，试图通过定义一种用来描述API格式或API定义的语言，来</div> </li> <li><a href="/article/1891418268934139904.htm" title="前端面试题常考汇总1" target="_blank">前端面试题常考汇总1</a> RayFars <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>JS部分1.解释JavaScript中的闭包，并举例说明其应用场景闭包是指函数能够记住并访问它的词法作用域，即使这个函数在词法作用域之外执行。应用场景：数据隐藏：通过闭包，可以创建私有变量，只通过特定的函数来访问和修改这些变量。回调函数和事件处理：闭包常用于设置回调函数，因为回调函数需要访问其外部函数的变量。functioncreateCounter(){letcount=0;returnfunc</div> </li> <li><a href="/article/1891418268216913920.htm" title="编程笔试题" target="_blank">编程笔试题</a> 小白修行 <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>1、给定一个长度为n的数组a,和一个数字k,每次操作必须选择一个非空区间[l,r]将区间中所有数字乘上k,A先手且希望最终数组和最大，B后手希望数组和最小，问一轮过后数组和sum是多少。数据范围：1<=n<=1e3,-1e9<=a[i],k<=1e9题目意思解读这道题描述了一个两人博弈的场景，涉及对数组的操作和最终数组元素和的计算，下面详细解释题目中的各个要素和规则：输入信息数组a：给定一个长度为</div> </li> <li><a href="/article/1891412466286522368.htm" title="RTOS 特性及其思考" target="_blank">RTOS 特性及其思考</a> TianYaKe-天涯客 <a class="tag" taget="_blank" href="/search/arm%E5%BC%80%E5%8F%91/1.htm">arm开发</a> <div>前言最近在研究FreeRTOS，觉得RTOS有些特性还是比较有趣的，有一些想法，问了一下AI，简单探讨一下。有纰漏请指出，转载请说明。学习交流请发邮件1280253714@qq.com百问网《FreeRTOS入门与工程实践-基于STM32F103》教程-基于DShanMCU-103(STM32F103)|百问网为什么有些项目，裸机编程不再适用，需要RTOS一、任务调度与并发处理裸机编程：在裸机环境</div> </li> <li><a href="/article/1891407802275000320.htm" title="前端知识速记--css篇：CSS3中的常见动画及实现方式" target="_blank">前端知识速记--css篇：CSS3中的常见动画及实现方式</a> 无限大. <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E9%80%9F%E8%AE%B0/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/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a> <div>前端知识速记–css篇：CSS3中的常见动画及实现方式常见的CSS3动画1.过渡(Transitions)过渡是一种非常简单的动画效果，允许你在元素的状态变更时平滑过渡到新状态。语法格式：transition:propertydurationtiming-functiondelay;property：指定要过渡的CSS属性，例如background-color。duration：过渡的持续时间，例</div> </li> <li><a href="/article/1891405405515476992.htm" title="html中用npm包" target="_blank">html中用npm包</a> 是谁眉眼 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一.用webpack工具打包npm包到dist下js文件为浏览器能识别的文件1.创建一个文件夹html中引用打包后的js文件注意打包后的js文件是局部变量如果要在html中引入js中的变量先去js中把变量改成全局变量2.先初始化一个管理包的文件：输入npm命令“npminit-y3.输入npm命令安装webpack及webpack-cli，“npmiwebpackwebpack-cli-D”，然后</div> </li> <li><a href="/article/1891404648825286656.htm" title="操作系统——复习题(一)" target="_blank">操作系统——复习题(一)</a> 尘埃于光年 <a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a><a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a> <div>操作系统——复习题(一)-第二章进程和线程练习题一、单项选择题1.在操作系统中引入“进程”概念的主要目的是（B）。A.改善用户编程环境B.描述程序动态执行过程的性质C.使程序与计算过程一一对应D.提高程序的运行速度2.已经获得除（C）以外的所有运行所需要资源的进程处于就绪状态A、存储器B、打印机C、CPUD、磁盘空间3.某进程在运行过程中需要等待从磁盘上读入数据，此时该进程的状态将（C）。当系统完</div> </li> <li><a href="/article/1891399980241973248.htm" title="MySQL底层原理学习" target="_blank">MySQL底层原理学习</a> jiqiren1994 <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/database/1.htm">database</a> <div>一、MySQL体系架构MySQLServer架构自顶向下大致可以分网络连接层、服务层、存储引擎层和系统文件层。1.网络连接层客户端连接器（ClientConnectors）：提供与MySQL服务器建立的支持。目前几乎支持所有主流的服务端编程技术，例如常见的Java、C、Python、.NET等，它们通过各自API技术与MySQL建立连接。2.服务层（MySQLServer）服务层是MySQLSer</div> </li> <li><a href="/article/1891399224038322176.htm" title="PLC自动化工程师成长学习过程" target="_blank">PLC自动化工程师成长学习过程</a> crown6465 <a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>PLC自动化工程师成长学习路径：从入门到精通的五个阶段PLC（可编程逻辑控制器）是工业自动化领域的核心设备，PLC工程师需要具备跨学科的知识体系和实践能力。以下是PLC工程师从入门到精通的成长路径，分为五个阶段。第一阶段：基础知识储备（0-6个月）目标：建立自动化领域的基础理论框架。学科基础电工电子基础：学习电路分析、模拟/数字电路、电气元件（继电器、接触器、传感器）原理。自动化原理：理解控制理论</div> </li> <li><a href="/article/1891397584522637312.htm" title="0基础Deepseek-AI编程课程" target="_blank">0基础Deepseek-AI编程课程</a> 2501_90533339 <a class="tag" taget="_blank" href="/search/AI%E7%BC%96%E7%A8%8B/1.htm">AI编程</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>这个0基础Deepseek-AI编程班课程，专门为没有编程经验的学员设计，涵盖了AI编程的基础知识，并深入讲解算法类工具的设计思维，让学员掌握AI编程的核心技能，最终能够独立开发AI工具。课程亮点✅从零开始：即使是0基础的小白，也能快速入门AI编程，掌握核心概念。✅实战驱动：课程不仅仅讲解理论，更会带领学员动手实操，设计属于自己的AI工具。✅深入AI算法：掌握AI编程的逻辑，理解如何构建和优化AI</div> </li> <li><a href="/article/1891370962901856256.htm" title="lua 5.1语法约定" target="_blank">lua 5.1语法约定</a> xiejunna <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>Lua5.1参考手册由罗伯特·Ierusalimschy路易斯HenriquedeFigueiredo沃尔德蔡氏‚一个版权©2006A¢A€“2012Lua.org,银行业者。免费的根据Lua许可证。内容一个‚·指数一个‚·其他版本一个‚·英语一个‚·portuguAƒAª年代一个‚·espaAƒA±ol1A¢A€“介绍Lua是一个扩展编程语言设计的支持一般过程式编程与数据描述设施。它还提供了很好</div> </li> <li><a href="/article/1891368818505216000.htm" title="Lua 5.1中文编程手册：全面指南与实践" target="_blank">Lua 5.1中文编程手册：全面指南与实践</a> 元楼 <div>本文还有配套的精品资源，点击获取简介：Lua是一种轻量级脚本语言，常嵌入到应用程序中提供扩展性。本手册是Lua5.1版本的官方文档中文翻译，涵盖了语法、特性到使用方法的全面指南。内容包括基础语法、数据类型、表、控制结构、函数、模块、元编程、错误处理、C接口、垃圾收集、线程及标准库等关键概念。此外，还包含如何解压和使用手册的说明。手册适用于各级别开发者，并为多个应用领域提供了实践指导。1.Lua语言</div> </li> <li><a href="/article/1891368691791097856.htm" title="Lua 5.1 参考手册" target="_blank">Lua 5.1 参考手册</a> weixin_30822451 <div>Lua5.1参考手册byRobertoIerusalimschy,LuizHenriquedeFigueiredo,WaldemarCeles云风译www.codingnow.comCopyright©2006Lua.org,PUC-Rio.Allrightsreserved.1-介绍Lua是一个扩展式程序设计语言，它被设计成支持通用的过程式编程，并有相关数据描述的设施。Lua也能对面向对象编程，</div> </li> <li><a href="/article/1891360490878201856.htm" title="本地部署model scope魔搭大模型流程" target="_blank">本地部署model scope魔搭大模型流程</a> CQller <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/jupyter/1.htm">jupyter</a><a class="tag" taget="_blank" href="/search/pytorch/1.htm">pytorch</a> <div>一、安装python二、安装Gradio三、添加镜像加速四、运行字符串倒叙五、运行绘图六、安装常用软件包和库七、我目前使用的软件包和库简介八、文字生成图片AI模型九、文字回复AI模型一、安装python可参考安装步骤：python学习笔记-python安装与环境变量配置_python环境变量-CSDN博客二、安装Gradio在cmd执行以下命令。Gradio封装了功能丰富的前端用户界面，一会儿用来</div> </li> <li><a href="/article/1891358097788694528.htm" title="html5游戏引擎-Pharse.js学习笔记（一）" target="_blank">html5游戏引擎-Pharse.js学习笔记（一）</a> 18520195858 <a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/c%2Fc%2B%2B/1.htm">c/c++</a><a class="tag" taget="_blank" href="/search/ViewUI/1.htm">ViewUI</a> <div>1.前言前几天随着flappybird这样的小游戏的火爆，使我这种也曾了解过html5技术的js业余爱好者也开始关注游戏开发。研究过两个个比较成熟的html5游戏引擎，感觉用引擎还是要方便一些。所以决定从今天正式开始研究html5游戏引擎，并且将从看官网demo的学习整理成博客和大家一起分享。我了解过cocos-2dforhtml5和phaser.js这两个引擎，其中前者比较复杂，对于有过coco</div> </li> <li><a href="/article/1891354445409742848.htm" title="Python的那些事第二十三篇：Express（Node.js）与 Python：一场跨语言的浪漫邂逅" target="_blank">Python的那些事第二十三篇：Express（Node.js）与 Python：一场跨语言的浪漫邂逅</a> 暮雨哀尘 <a class="tag" taget="_blank" href="/search/Python%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B/1.htm">Python的那些事</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/express/1.htm">express</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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/web%E5%BC%80%E5%8F%91/1.htm">web开发</a> <div>摘要在当今的编程世界里，Node.js和Python像是两个性格迥异的超级英雄，一个以速度和灵活性著称，另一个则以强大和优雅闻名。本文将探讨如何通过Express框架将Node.js和Python结合起来，打造出一个高效、有趣的Web应用。我们将通过一系列幽默风趣的实例和表格，展示这种跨语言合作的无限可能。如果你厌倦了单调的技术论文，那么这篇论文绝对能让你眼前一亮！1.引言：当Node.js遇上P</div> </li> <li><a href="/article/1891353060706414592.htm" title="springboot项目配置https" target="_blank">springboot项目配置https</a> 愿企鹅飞（｡ò ∀ ó｡） <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/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/jar/1.htm">jar</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a> <div>1，必须去服务商购买一个ssl证书。2，以我想的是这个域名的8080端口当前端，8070当后端，3，前端配置简单直接去下载nginx证书把里面的key和证书粘到对应位置即可（用宝塔简单）4.springboot后端服务（下载Tomcat证书）按照这个方法https://blog.csdn.net/baidu_37302589/article/details/100692957配置端口配置成我需要的</div> </li> <li><a href="/article/1891352051170996224.htm" title="30.4:Python如何安装Pandas库？（课程共4100字）" target="_blank">30.4:Python如何安装Pandas库？（课程共4100字）</a> 小兔子平安 <a class="tag" taget="_blank" href="/search/Python%E5%AE%8C%E6%95%B4%E5%AD%A6%E4%B9%A0%E5%85%A8%E8%A7%A3%E7%AD%94/1.htm">Python完整学习全解答</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/pandas/1.htm">pandas</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>课程概述（课程共4100字）①安装Pandas库打开命令提示符或终端窗口，输入以下命令来安装Pandas：当安装完成后，可以使用以下命令来验证Pandas是否已正确安装：②数据处理和分析读写数据数据清洗和预处理数据分组和聚合数据可视化③Python学习的深入讨论Python的应用领域Python的优点和缺点学习Python的建议学习Python的挑战课程总结课程概述Python是一种功能强大的编程</div> </li> <li><a href="/article/1891350284202995712.htm" title="java web 项目中封装的下拉列表小组件：实现下拉列表使用者前后端0行代码 ..." target="_blank">java web 项目中封装的下拉列表小组件：实现下拉列表使用者前后端0行代码 ...</a> weixin_34383618 <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/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/ViewUI/1.htm">ViewUI</a> <div>导读：主要从4个方面来阐述，1：背景；2：思路；3：代码实现；4：使用一：封装背景像easyui之类的纯前端组件，也有下拉列表组件，但是使用的时候，每个下拉列表，要配一个URL,以及设置URL反回来的值和select的text，和value的对应关系，这有2个问题：一使用者必须知道URL，二，如果页面有10个下拉表表，要请求后台10次，肯定影响性能，而我想要的是使用者只要申明用哪个数据字典就行了，</div> </li> <li><a href="/article/1891348516928811008.htm" title="Linux编程：嵌入式ARM平台Linux网络实时性能优化" target="_blank">Linux编程：嵌入式ARM平台Linux网络实时性能优化</a> 橘色的喵 <a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/%E5%8A%9F%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">功能优化</a><a class="tag" taget="_blank" href="/search/arm%E5%BC%80%E5%8F%91/1.htm">arm开发</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E5%AE%9E%E6%97%B6/1.htm">实时</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E6%A0%B8%E4%BC%98%E5%8C%96/1.htm">内核优化</a> <div>文章目录0.概要1.时钟周期与网络性能的权衡时钟周期（ClockPeriod）**优化策略：****副作用：**2.网络中断优化**问题：****优化策略：****副作用：**3.网络协议栈优化**优化策略：****副作用：**4.禁用内存页面交换（禁用Swap）为什么禁用Swap？**禁用Swap配置：****副作用：**5.配置`swappiness`为0**如何设置`swappiness`为</div> </li> <li><a href="/article/1891328972709490688.htm" title="Netty的ByteBuf为何如此高效？深入解析其设计与优势" target="_blank">Netty的ByteBuf为何如此高效？深入解析其设计与优势</a> 星辰@Sea <a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E6%9E%B6%E6%9E%84/1.htm">系统架构</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/Netty/1.htm">Netty</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a> <div>前言在高性能网络编程中，Netty因其卓越的性能和灵活性而被广泛应用。本文将深入探讨Netty的核心组件之一——ByteBuf的设计理念及其优势。部署准备一、JavaNIOBuffer的痛点在传统JavaNIO编程中，ByteBuffer存在以下缺陷：容量固定：初始化后无法自动扩容读写模式切换：需要调用flip()方法切换API复杂：position/limit等指针管理繁琐内存管理：直接内存需要</div> </li> <li><a href="/article/1891326699874873344.htm" title="PTA基础编程题目集 7-16 求符合给定条件的整数集" target="_blank">PTA基础编程题目集 7-16 求符合给定条件的整数集</a> 万万没想到，我竟要搬砖 <a class="tag" taget="_blank" href="/search/PTA%E5%9F%BA%E7%A1%80%E7%BC%96%E7%A8%8B%E9%A2%98%E7%9B%AE%E9%9B%86%E7%AC%94%E8%AE%B0/1.htm">PTA基础编程题目集笔记</a><a class="tag" taget="_blank" href="/search/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>题目思路见注释7-16求符合给定条件的整数集(15分)给定不超过6的正整数A，考虑从A开始的连续4个数字。请输出所有由它们组成的无重复数字的3位数。输入格式：输入在一行中给出A。输出格式：输出满足条件的的3位数，要求从小到大，每行6个整数。整数间以空格分隔，但行末不能有多余空格。输入样例：2输出样例：2342352432452532543243253423453523544234254324354</div> </li> <li><a href="/article/1891325943818022912.htm" title="前端面试题2（vue3）" target="_blank">前端面试题2（vue3）</a> GIS-CL <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E9%A2%98/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/vue.js/1.htm">vue.js</a> <div>1.Vue3中的CompositionAPI是什么？与OptionsAPI的区别是什么？答案：CompositionAPI是Vue3引入的一种新的编程模型，它允许开发者以更灵活和模块化的方式组织代码。与传统的OptionsAPI相比，CompositionAPI通过setup()函数集中管理组件的状态和行为，使得逻辑复用和代码组织变得更加容易。OptionsAPI：在Vue2中广泛使用，通过dat</div> </li> <li><a href="/article/1891325847495831552.htm" title="空气质量查询API：守护呼吸健康的科技力量" target="_blank">空气质量查询API：守护呼吸健康的科技力量</a> <a class="tag" taget="_blank" href="/search/api/1.htm">api</a> <div>前言在环境污染日益成为全球关注焦点的今天，空气质量数据已成为人们日常生活中不可或缺的信息之一。为了更便捷地获取这些关键数据，空气质量查询API应运而生，成为连接公众与空气质量数据的桥梁。本文将深入探讨空气质量查询API的概念、功能、应用场景以及其对公众健康的影响。空气质量查询API概述空气质量查询API，即应用程序编程接口，是一种开放接口，允许用户通过编程方式查询指定地区的空气质量指数（AQI）和</div> </li> <li><a href="/article/1891323423041318912.htm" title="vertx" target="_blank">vertx</a> 三笠爷 <a class="tag" taget="_blank" href="/search/vert.x/1.htm">vert.x</a> <div>vert.x是reactive(响应式编程),是一种思想,特点:事件驱动(发挥单台机器的性能):单台机器上,用少量线程处理大量并发异步处理请求(多个服务间通信阻塞较少,响应时间降低):https://vertx.io/官网基于netty的、运行在jvm之上的、支持多种编程语言的高性能异步、非阻塞、响应式全栈javaweb框架eclipse软件基金会顶级java开源项目之一在techempower.</div> </li> <li><a href="/article/1891322918294581248.htm" title="如何构建高效的 Vue 3 前端项目结构" target="_blank">如何构建高效的 Vue 3 前端项目结构</a> 东锋1.3 <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>假如你正在深入开发一个Vue项目，起初一切感觉顺畅简单。但随着应用的增长，你的文件夹开始泛滥，组件变得混乱，寻找文件就像大海捞针。听起来熟悉吗？其实你并不孤单。一个有组织的文件结构是可扩展、可维护和高效前端开发的支柱。但关键问题是：没有一种放之四海而皆准的结构。完美的设置取决于你的项目规模、复杂性和团队动态。那么，如何开始呢？如何平衡简单性和可扩展性？在这篇文章中，我将分解Vue3项目的最优文件结</div> </li> <li><a href="/article/1891322538965921792.htm" title="Cursor前端开发提示词分享" target="_blank">Cursor前端开发提示词分享</a> 前端程序猿i <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>点击设置将提示词复制黏贴进输入框里即可Alwaysrespondin中文DONOTGIVEMEHIGHLEVELSTUFF,IFIASKFORFIXOREXPLANATION,IWANTACTUALCODEOREXPLANATION!!!IDON'TWANT"Here'showyoucanblablabla"-Youareaseniorfrontendengineer.-Ifcommandsnee</div> </li> <li><a href="/article/1891322286766616576.htm" title="PTA 基础编程题目集 7-16 求符合给定条件的整数集 C语言" target="_blank">PTA 基础编程题目集 7-16 求符合给定条件的整数集 C语言</a> 今天你写代码了嘛？ <div>PTA基础编程题目集7-16求符合给定条件的整数集C语言给定不超过6的正整数A，考虑从A开始的连续4个数字。请输出所有由它们组成的无重复数字的3位数。输入格式：输入在一行中给出A。输出格式：输出满足条件的的3位数，要求从小到大，每行6个整数。整数间以空格分隔，但行末不能有多余空格。输入样例：2输出样例：234235243245253254324325342345352354423425432435</div> </li> <li><a href="/article/1891321027351343104.htm" title="使用 HTML CSS 和 JAVASCRIPT 的黑洞动画" target="_blank">使用 HTML CSS 和 JAVASCRIPT 的黑洞动画</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><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>使用HTMLCSS和JAVASCRIPT的黑洞动画BlackHoleAnimationbody{margin:0;overflow:hidden;background:radial-gradient(ellipseatcenter,black,#1a1a1a);height:100vh;display:flex;justify-content:center;align-items:center;}</div> </li> <li><a href="/article/1891318881629302784.htm" title="Vue3 中的 defineProps：优雅地实现子父组件传值" target="_blank">Vue3 中的 defineProps：优雅地实现子父组件传值</a> 良月柒 <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>Vue.js一直以来都是前端开发者们钟爱的框架之一，而在最新的Vue3中，引入了一些新的特性和改进，其中之一就是defineProps。defineProps提供了一种更加明确和类型安全的方式来定义子组件的props，让子父组件之间的数据传递更加清晰和可维护。本文将介绍Vue3中defineProps的用法以及如何在子组件中使用它来接收父组件传递的props数据。什么是defineProps？de</div> </li> <li><a href="/article/66.htm" title="项目中枚举与注解的结合使用" target="_blank">项目中枚举与注解的结合使用</a> 飞翔的马甲 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/annotation/1.htm">annotation</a> <div>前言：版本兼容，一直是迭代开发头疼的事，最近新版本加上了支持新题型，如果新创建一份问卷包含了新题型，那旧版本客户端就不支持，如果新创建的问卷不包含新题型，那么新旧客户端都支持。这里面我们通过给问卷类型枚举增加自定义注解的方式完成。顺便巩固下枚举与注解。一、枚举 1.在创建枚举类的时候，该类已继承java.lang.Enum类，所以自定义枚举类无法继承别的类，但可以实现接口。 </div> </li> <li><a href="/article/193.htm" title="【Scala十七】Scala核心十一：下划线_的用法" target="_blank">【Scala十七】Scala核心十一：下划线_的用法</a> bit1129 <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a> <div>下划线_在Scala中广泛应用，_的基本含义是作为占位符使用。_在使用时是出问题非常多的地方，本文将不断完善_的使用场景以及所表达的含义 1. 在高阶函数中使用 scala> val list = List(-3,8,7,9) list: List[Int] = List(-3, 8, 7, 9) scala> list.filter(_ > 7) r</div> </li> <li><a href="/article/320.htm" title="web缓存基础：术语、http报头和缓存策略" target="_blank">web缓存基础：术语、http报头和缓存策略</a> dalan_123 <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a> <div>对于很多人来说，去访问某一个站点，若是该站点能够提供智能化的内容缓存来提高用户体验，那么最终该站点的访问者将络绎不绝。缓存或者对之前的请求临时存储，是http协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求，这是受控于对该内容所声明的缓存策略。接下来将讨web内容缓存策略的基本概念，具体包括如如何选择缓存策略以保证互联网范围内的缓存能够正确处理的您的内容，并谈论下</div> </li> <li><a href="/article/447.htm" title="crontab 问题" target="_blank">crontab 问题</a> 周凡杨 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/crontab/1.htm">crontab</a><a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a> <div> 一： 0481-079 Reached a symbol that is not expected. 背景： */5 * * * * /usr/IBMIHS/rsync.sh </div> </li> <li><a href="/article/574.htm" title="让tomcat支持2级域名共享session" target="_blank">让tomcat支持2级域名共享session</a> g21121 <a class="tag" taget="_blank" href="/search/session/1.htm">session</a> <div>tomcat默认情况下是不支持2级域名共享session的，所有有些情况下登陆后从主域名跳转到子域名会发生链接session不相同的情况，但是只需修改几处配置就可以了。打开tomcat下conf下context.xml文件找到Context标签,修改为如下内容如果你的域名是www.test.com <Context sessionCookiePath="/path&q</div> </li> <li><a href="/article/701.htm" title="web报表工具FineReport常用函数的用法总结（数学和三角函数）" target="_blank">web报表工具FineReport常用函数的用法总结（数学和三角函数）</a> 老A不折腾 <a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/finereport/1.htm">finereport</a><a class="tag" taget="_blank" href="/search/%E6%80%BB%E7%BB%93/1.htm">总结</a> <div> ABS ABS(number):返回指定数字的绝对值。绝对值是指没有正负符号的数值。 Number:需要求出绝对值的任意实数。示例: ABS(-1.5)等于1.5。 ABS(0)等于0。 ABS(2.5)等于2.5。 ACOS ACOS(number):返回指定数值的反余弦值。反余弦值为一个角度，返回角度以弧度形式表示。 Number:需要返回角</div> </li> <li><a href="/article/828.htm" title="linux 启动java进程 sh文件" target="_blank">linux 启动java进程 sh文件</a> 墙头上一根草 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/jar/1.htm">jar</a> <div>#!/bin/bash #初始化服务器的进程PId变量 user_pid=0; robot_pid=0; loadlort_pid=0; gateway_pid=0; ######### #检查相关服务器是否启动成功 #说明： #使用JDK自带的JPS命令及grep命令组合，准确查找pid #jps 加 l 参数，表示显示java的完整包路径 #使用awk，分割出pid </div> </li> <li><a href="/article/955.htm" title="我的spring学习笔记5-如何使用ApplicationContext替换BeanFactory" target="_blank">我的spring学习笔记5-如何使用ApplicationContext替换BeanFactory</a> aijuans <a class="tag" taget="_blank" href="/search/Spring+3+%E7%B3%BB%E5%88%97/1.htm">Spring 3 系列</a> <div>如何使用ApplicationContext替换BeanFactory？ package onlyfun.caterpillar.device; import org.springframework.beans.factory.BeanFactory; import org.springframework.beans.factory.xml.XmlBeanFactory; import</div> </li> <li><a href="/article/1082.htm" title="Linux 内存使用方法详细解析" target="_blank">Linux 内存使用方法详细解析</a> annan211 <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AD%98/1.htm">内存</a><a class="tag" taget="_blank" href="/search/Linux%E5%86%85%E5%AD%98%E8%A7%A3%E6%9E%90/1.htm">Linux内存解析</a> <div>来源 http://blog.jobbole.com/45748/ 我是一名程序员，那么我在这里以一个程序员的角度来讲解Linux内存的使用。一提到内存管理，我们头脑中闪出的两个概念，就是虚拟内存，与物理内存。这两个概念主要来自于linux内核的支持。 Linux在内存管理上份为两级，一级是线性区，类似于00c73000-00c88000，对应于虚拟内存，它实际上不占用</div> </li> <li><a href="/article/1209.htm" title="数据库的单表查询常用命令及使用方法(-)" target="_blank">数据库的单表查询常用命令及使用方法(-)</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E8%A1%A8%E6%9F%A5%E8%AF%A2/1.htm">单表查询</a> <div> 创建数据库; --建表 create table bloguser(username varchar2(20),userage number(10),usersex char(2)); 创建bloguser表,里面有三个字段 &nbs</div> </li> <li><a href="/article/1336.htm" title="多线程基础知识" target="_blank">多线程基础知识</a> bijian1013 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><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/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/java%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">java多线程</a> <div>一．进程和线程进程就是一个在内存中独立运行的程序，有自己的地址空间。如正在运行的写字板程序就是一个进程。 “多任务”：指操作系统能同时运行多个进程（程序）。如WINDOWS系统可以同时运行写字板程序、画图程序、WORD、Eclipse等。线程：是进程内部单一的一个顺序控制流。线程和进程 a. 每个进程都有独立的</div> </li> <li><a href="/article/1463.htm" title="fastjson简单使用实例" target="_blank">fastjson简单使用实例</a> bijian1013 <a class="tag" taget="_blank" href="/search/fastjson/1.htm">fastjson</a> <div>一.简介阿里巴巴fastjson是一个Java语言编写的高性能功能完善的JSON库。它采用一种“假定有序快速匹配”的算法，把JSON Parse的性能提升到极致，是目前Java语言中最快的JSON库；包括“序列化”和“反序列化”两部分，它具备如下特征： </div> </li> <li><a href="/article/1590.htm" title="【RPC框架Burlap】Spring集成Burlap" target="_blank">【RPC框架Burlap】Spring集成Burlap</a> bit1129 <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>Burlap和Hessian同属于codehaus的RPC调用框架，但是Burlap已经几年不更新，所以Spring在4.0里已经将Burlap的支持置为Deprecated,所以在选择RPC框架时，不应该考虑Burlap了。这篇文章还是记录下Burlap的用法吧，主要是复制粘贴了Hessian与Spring集成一文，【RPC框架Hessian四】Hessian与Spring集成 </div> </li> <li><a href="/article/1717.htm" title="【Mahout一】基于Mahout 命令参数含义" target="_blank">【Mahout一】基于Mahout 命令参数含义</a> bit1129 <a class="tag" taget="_blank" href="/search/Mahout/1.htm">Mahout</a> <div>1. mahout seqdirectory $ mahout seqdirectory --input (-i) input Path to job input directory(原始文本文件). --output (-o) output The directory pathna</div> </li> <li><a href="/article/1844.htm" title="linux使用flock文件锁解决脚本重复执行问题" target="_blank">linux使用flock文件锁解决脚本重复执行问题</a> ronin47 <a class="tag" taget="_blank" href="/search/linux+lock%E3%80%80%E9%87%8D%E5%A4%8D%E6%89%A7%E8%A1%8C/1.htm">linux lock　重复执行</a> <div>linux的crontab命令，可以定时执行操作，最小周期是每分钟执行一次。关于crontab实现每秒执行可参考我之前的文章《linux crontab 实现每秒执行》现在有个问题，如果设定了任务每分钟执行一次，但有可能一分钟内任务并没有执行完成，这时系统会再执行任务。导致两个相同的任务在执行。例如： <? // test .php </div> </li> <li><a href="/article/1971.htm" title="java-74-数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字" target="_blank">java-74-数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class OcuppyMoreThanHalf { /** * Q74 数组中有一个数字出现的次数超过了数组长度的一半，找出这个数字 * two solutions: * 1.O(n) * see <beauty of coding>--每次删除两个不同的数字，不改变数组的特性 * 2.O(nlogn) * 排序。中间</div> </li> <li><a href="/article/2098.htm" title="linux 系统相关命令" target="_blank">linux 系统相关命令</a> candiio <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>系统参数 cat /proc/cpuinfo cpu相关参数 cat /proc/meminfo 内存相关参数 cat /proc/loadavg 负载情况性能参数 1）top M：按内存使用排序 P：按CPU占用排序 1：显示各CPU的使用情况 k：kill进程 o：更多排序规则回车：刷新数据 2）ulimit ulimit -a：显示本用户的系统限制参</div> </li> <li><a href="/article/2225.htm" title="[经营与资产]保持独立性和稳定性对于软件开发的重要意义" target="_blank">[经营与资产]保持独立性和稳定性对于软件开发的重要意义</a> comsci <a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E5%BC%80%E5%8F%91/1.htm">软件开发</a> <div> 一个软件的架构从诞生到成熟，中间要经过很多次的修正和改造如果在这个过程中，外界的其它行业的资本不断的介入这种软件架构的升级过程中那么软件开发者原有的设计思想和开发路线</div> </li> <li><a href="/article/2352.htm" title="在CentOS5.5上编译OpenJDK6" target="_blank">在CentOS5.5上编译OpenJDK6</a> Cwind <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/OpenJDK/1.htm">OpenJDK</a> <div>几番周折终于在自己的CentOS5.5上编译成功了OpenJDK6，将编译过程和遇到的问题作一简要记录，备查。 0. OpenJDK介绍 OpenJDK是Sun（现Oracle）公司发布的基于GPL许可的Java平台的实现。其优点： 1、它的核心代码与同时期Sun（-> Oracle）的产品版基本上是一样的，血统纯正，不用担心性能问题，也基本上没什么兼容性问题；（代码上最主要的差异是</div> </li> <li><a href="/article/2479.htm" title="java乱码问题" target="_blank">java乱码问题</a> dashuaifu <a class="tag" taget="_blank" href="/search/java%E4%B9%B1%E7%A0%81%E9%97%AE%E9%A2%98/1.htm">java乱码问题</a><a class="tag" taget="_blank" href="/search/js%E4%B8%AD%E6%96%87%E4%B9%B1%E7%A0%81/1.htm">js中文乱码</a> <div>swfupload上传文件参数值为中文传递到后台接收中文乱码在js中用setPostParams（{"tag" : encodeURI( document.getElementByIdx_x("filetag").value，"utf-8")}）; 然后在servlet中String t</div> </li> <li><a href="/article/2606.htm" title="cygwin很多命令显示command not found的解决办法" target="_blank">cygwin很多命令显示command not found的解决办法</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/cygwin/1.htm">cygwin</a> <div>cygwin很多命令显示command not found的解决办法修改cygwin.BAT文件如下 @echo off D: set CYGWIN=tty notitle glob set PATH=%PATH%;d:\cygwin\bin;d:\cygwin\sbin;d:\cygwin\usr\bin;d:\cygwin\usr\sbin;d:\cygwin\us</div> </li> <li><a href="/article/2733.htm" title="[介绍]从 Yii 1.1 升级" target="_blank">[介绍]从 Yii 1.1 升级</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/yii2/1.htm">yii2</a> <div>2.0 版框架是完全重写的，在 1.1 和 2.0 两个版本之间存在相当多差异。因此从 1.1 版升级并不像小版本间的跨越那么简单，通过本指南你将会了解两个版本间主要的不同之处。如果你之前没有用过 Yii 1.1，可以跳过本章，直接从"入门篇"开始读起。请注意，Yii 2.0 引入了很多本章并没有涉及到的新功能。强烈建议你通读整部权威指南来了解所有新特性。这样有可能会发</div> </li> <li><a href="/article/2860.htm" title="Linux SSH免登录配置总结" target="_blank">Linux SSH免登录配置总结</a> eksliang <a class="tag" taget="_blank" href="/search/ssh-keygen/1.htm">ssh-keygen</a><a class="tag" taget="_blank" href="/search/Linux+SSH%E5%85%8D%E7%99%BB%E5%BD%95%E8%AE%A4%E8%AF%81/1.htm">Linux SSH免登录认证</a><a class="tag" taget="_blank" href="/search/Linux+SSH%E4%BA%92%E4%BF%A1/1.htm">Linux SSH互信</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2187265 一、原理我们使用ssh-keygen在ServerA上生成私钥跟公钥，将生成的公钥拷贝到远程机器ServerB上后,就可以使用ssh命令无需密码登录到另外一台机器ServerB上。生成公钥与私钥有两种加密方式，第一种是</div> </li> <li><a href="/article/2987.htm" title="手势滑动销毁Activity" target="_blank">手势滑动销毁Activity</a> gundumw100 <a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>老是效仿ios，做android的真悲催！有需求：需要手势滑动销毁一个Activity 怎么办尼？自己写？不用~，网上先问一下百度。结果： http://blog.csdn.net/xiaanming/article/details/20934541 首先将你需要的Activity继承SwipeBackActivity，它会在你的布局根目录新增一层SwipeBackLay</div> </li> <li><a href="/article/3114.htm" title="JavaScript变换表格边框颜色" target="_blank">JavaScript变换表格边框颜色</a> ini <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/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>效果查看：http://hovertree.com/texiao/js/2.htm代码如下，保存到HTML文件也可以查看效果： <html> <head> <meta charset="utf-8"> <title>表格边框变换颜色代码-何问起</title> </head> <body&</div> </li> <li><a href="/article/3241.htm" title="Kafka Rest : Confluent" target="_blank">Kafka Rest : Confluent</a> kane_xie <a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a><a class="tag" taget="_blank" href="/search/REST/1.htm">REST</a><a class="tag" taget="_blank" href="/search/confluent/1.htm">confluent</a> <div>最近拿到一个kafka rest的需求，但kafka暂时还没有提供rest api（应该是有在开发中，毕竟rest这么火），上网搜了一下，找到一个Confluent Platform，本文简单介绍一下安装。这里插一句，给大家推荐一个九尾搜索，原名叫谷粉SOSO，不想fanqiang谷歌的可以用这个。以前在外企用谷歌用习惯了，出来之后用度娘搜技术问题，那匹配度简直感人。环境声明：Ubu</div> </li> <li><a href="/article/3368.htm" title="Calender不是单例" target="_blank">Calender不是单例</a> men4661273 <a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a><a class="tag" taget="_blank" href="/search/Calender/1.htm">Calender</a> <div> 在我们使用Calender的时候，使用过Calendar.getInstance()来获取一个日期类的对象，这种方式跟单例的获取方式一样，那么它到底是不是单例呢，如果是单例的话，一个对象修改内容之后，另外一个线程中的数据不久乱套了吗？从试验以及源码中可以得出，Calendar不是单例。测试： Calendar c1 = </div> </li> <li><a href="/article/3495.htm" title="线程内存和主内存之间联系" target="_blank">线程内存和主内存之间联系</a> qifeifei <a class="tag" taget="_blank" href="/search/java+thread/1.htm">java thread</a> <div>1， java多线程共享主内存中变量的时候，一共会经过几个阶段， lock:将主内存中的变量锁定，为一个线程所独占。 unclock:将lock加的锁定解除，此时其它的线程可以有机会访问此变量。 read:将主内存中的变量值读到工作内存当中。 load:将read读取的值保存到工作内存中的变量副本中。 </div> </li> <li><a href="/article/3622.htm" title="schedule和scheduleAtFixedRate" target="_blank">schedule和scheduleAtFixedRate</a> tangqi609567707 <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/timer/1.htm">timer</a><a class="tag" taget="_blank" href="/search/schedule/1.htm">schedule</a> <div>原文地址：http://blog.csdn.net/weidan1121/article/details/527307 import java.util.Timer;import java.util.TimerTask;import java.util.Date; /** * @author vincent */public class TimerTest { </div> </li> <li><a href="/article/3749.htm" title="erlang 部署" target="_blank">erlang 部署</a> wudixiaotie <a class="tag" taget="_blank" href="/search/erlang/1.htm">erlang</a> <div>1.如果在启动节点的时候报这个错： {"init terminating in do_boot",{'cannot load',elf_format,get_files}} 则需要在reltool.config中加入 {app, hipe, [{incl_cond, exclude}]}, 2.当generate时，遇到： ERROR</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>

【Web前端】一文带你吃透HTML(完整篇)

开始前端之旅吧!

一.HTML简介

1.什么是HTML？

2.HTML 标签

3.HTML 元素

4.HTML版本

5.Web 浏览器

6.HTML 网页结构

7.中文编码

8.编写第一个网页

二.HTML编辑器

三.HTML基础

1.HTML 标题

`-`
标签来定义的，例如：

`<h1>一级标题h1> <h2>二级标题h2> <h3>三级标题h3>`

2.HTML 段落

HTML 段落是通过标签
来定义的，例如：

`<p>段落1p> <p>段落2p> <p>段落3p>`

标签来定义的，例如：

`<h1>一级标题h1> <h2>二级标题h2> <h3>三级标题h3>`

2.HTML 段落

3.HTML 链接

4.HTML 图像

四.HTML元素

1.HTML 元素语法

2.嵌套的 HTML 元素

3.HTML 空元素

五.HTML属性

六.HTML标题

1.HTML标题

2.HTML水平线

3.HTML 注释

七.HTML段落

1.HTML段落

2.HTML换行

八.HTML文本格式化

九.HTML链接

十.HTML头部

【Web前端】一文带你吃透HTML(完整篇)

开始前端之旅吧!

一.HTML简介

1.什么是HTML？

2.HTML 标签

3.HTML 元素

4.HTML版本

5.Web 浏览器

6.HTML 网页结构

7.中文编码

8.编写第一个网页

二.HTML编辑器

三.HTML基础

1.HTML 标题

- 标签来定义的，例如： <h1>一级标题h1> <h2>二级标题h2> <h3>三级标题h3> 2.HTML 段落 HTML 段落是通过标签 来定义的，例如： <p>段落1p> <p>段落2p> <p>段落3p>

标签来定义的，例如： <h1>一级标题h1> <h2>二级标题h2> <h3>三级标题h3>

2.HTML 段落

3.HTML 链接

4.HTML 图像

四.HTML元素

1.HTML 元素语法

2.嵌套的 HTML 元素

3.HTML 空元素

五.HTML属性

六.HTML标题

1.HTML标题

2.HTML水平线

3.HTML 注释

七.HTML段落

1.HTML段落

2.HTML换行

八.HTML文本格式化

九.HTML链接

十.HTML头部

`-`
标签来定义的，例如：

`<h1>一级标题h1> <h2>二级标题h2> <h3>三级标题h3>`

2.HTML 段落

HTML 段落是通过标签
来定义的，例如：

`<p>段落1p> <p>段落2p> <p>段落3p>`

标签来定义的，例如：

`<h1>一级标题h1> <h2>二级标题h2> <h3>三级标题h3>`