html学习-html标签图文详解（一）
本文主要内容
• 头标签
• 排版标签：
``
• 字体标记：
• 超链接
• 图片标签
前言
web标准
web标准介绍：
• w3c：万维网联盟组织，用来制定web标准的机构（组织）
• web标准：制作网页要遵循的规范。
• web标准规范的分类：结构标准、表现标准、行为标准。
• 结构：html。表现：css。行为：JavaScript。
web标准总结：
• 结构标准：相当于人的身体。html就是用来制作网页的。
• 表现标准： 相当于人的衣服。css就是对网页进行美化的。
• 行为标准： 相当于人的动作。JS就是让网页动起来，具有生命力的。
浏览器介绍
浏览器是网页运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、猎豹浏览器、Safari和Opera等。如下图所示：
浏览器 内核
IE trident
chrome / 欧鹏 blink
火狐 gecko
Safari webkit
浏览器内核：
PS：「浏览器内核」也就是浏览器所采用的「渲染引擎」，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。渲染引擎是兼容性问题出现的根本原因。
一、HTML的介绍
1、HTML的概述：
html全称为HyperText Markup Language，译为超文本标记语言，不是一种编程语言，是一种描述性的标记语言，用于描述超文本中内容的显示方式。比如字体什么颜色，大小等。
• 超文本：音频，视频，图片称为超文本。
• 标记 ：<英文单词或者字母>称为标记，一个HTML页面都是由各种标记组成。
作用：HTML是负责描述文档语义的语言。
注意：HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程)，HTML页面直接由浏览器解析执行。
HTML是负责描述文档语义的语言
html中，除了语义，其他什么都没有。
html是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述文字的语义，这些标签在浏览器里面是看不到的，所以称为“超文本”，所以就是“超文本标记语言”了。 所以，接下来，我们肯定要学习一堆html中的标签对儿，这些标签对儿能够给文本不同的语义。
比如，面试的时候问你，h1标签有什么作用？
• 正确答案：给文本增加主标题的语义。
• 错误答案：给文字加粗、加黑、变大。
2、HTML的历史
我们专门来对XHTML做一个介绍。
XHTML介绍： XHTML：Extensible Hypertext Markup Language，可扩展超文本标注语言。 XHTML的主要目的是为了取代HTML，也可以理解为HTML的升级版。 HTML的标记书写很不规范，会造成其它的设备(ipad、手机、电视等)无法正常显示。 XHTML与HTML4.0的标记基本上一样。 XHTML是严格的、纯净的HTML。
我们稍后将对XHTML的编写规范进行介绍。
3、HTML的网络术语
• 网页 ：由各种标记组成的一个页面就叫网页。
• 主页(首页) : 一个网站的起始页面或者导航页面。
• 标记：
称为开始标记 ，
称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
• 元素：
内容
称为元素.
• 属性：给每一个标签所做的辅助信息。
• xhtml： 符合XML语法标准的HTML。
• dhtml：dynamic，动态的。javascript + css + html合起来的页面就是一个dhtml。
• http：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP：邮件传输协议，ftp：文件传输协议。
4、HTML的编辑工具
• NotePad：记事本。
• EditPlus：语法高亮显示。技巧： 根据颜色判断单词是否出错 （不是100%）。不好的地方：没有代码提示。
• UltraEdit：根据颜色判断单词是否出错，可以显示2进制数据。
• Sublime Text：新一代的代码编辑器（用的人很多）。
• dw(dreamweaver，专业工具) ：建立WEB站点和应用程序的专业工具。它将布局功能、开发工具、代码编辑组合在一起。有代码提示。
PS：后缀名不能决定文件格式，只能决定打开文件打开的方式。
5、计算机编码介绍
计算机，不能直接存储文字，存储的是编码。
计算机只能处理二进制的数据，其它数据，比如：0-9、a-z、A-Z，这些字符，我们定义一套规则来表示。假如：A用110表示，B用111表示等。
ASCII码： 美国发布的，用1个字节(8位二进制)来表示一个字符，共可以表示2^8=256个字符。 美国的国家语言是英语，只要能表示0-9、a-z、A-Z、特殊符号。
ANSI编码： 每个国家为了显示本国的语言，都对ASCII码进行了扩展。用2个字节(16位二进制)来表示一个汉字，共可以表示2^16＝65536个汉字。例如： 中国的ANSI编码是GB2312编码(简体)，对6763汉字进行编码，含600多特殊字符。另外还有GBK(简体)。 日本的ANSI编码是JIS编码。 台湾的ANSI编码是BIG5编码（繁体）。
GBK： 对GB2312进行了扩展，用来显示罕见的、古汉语的汉字。现在已经收录了2.1万左右。并提供了1890个汉字码位。K的含义就是“扩展”。
Unicode编码(统一编码)： 用4个字节(32位二进制)来表示一个字符，想法不错，但效率太低。例如，字母A用ASCII表示的话一个字节就够，可用Unicode编码的话，得用4个字节表示，造成了空间的极大浪费。A的Unicode编码是0000 0000 0000 0000 0000 0000 0100 0000
UTF-8(Unicode Transform Format)编码： 根据字符的不同，选择其编码的长度。比如：一个字符A用1个字节表示，一个汉字用2个字节表示。
毫无疑问，开发中，都用UTF-8编码吧，准没错。
中文能够使用的字符集两种：
• 第一种：UTF-8。UTF-8是国际通用字库，里面涵盖了所有地球上所有人类的语言文字，比如阿拉伯文、汉语、鸟语……
• 第二种：GBK（对GB2312进行了扩展）。gb2312 是国标，是中国的字库，里面仅涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号。
字库规模： UTF-8（字全） > gb2312（只有汉字）
重点1：避免乱码
我们用meta标签声明的当前这个html文档的字库，一定要和保存的文件编码类型一样，否则乱码！（重点）。
当我们不设置的时候，sublime默认类型就是UTF-8。而一旦更改为gb2312的时候，就一定要记得设置一下sublime的保存类型： 文件→ set File Encoding to → Chinese Simplified(GBK)。
重点2：UTF-8和gb2312的比较
保存大小：UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）
总结：
• UTF-8：字多，有各种国家的语言，但是保存尺寸大，文件臃肿；
• gb2312：字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。
列出2个使用情形：
1） 你们公司是做日本动漫的，经常出现一些日语动漫的名字，网页要使用UTF-8。如果用gb2312将无法显示日语。 2） 你们公司就是中文网页，极度的追求网页的显示速度，要使用gb2312。如果使用UTF-8将每个汉字多一个byte，所以5000个汉字，多5kb。
我们亲测：
• qq网、网易、搜狐都是使用gb2312。这些公司，都追求显示速度。
• 新华网藏语频道，使用的是UTF-8，保证字符集的数量。
对了，我们是怎么查看网页的编码方式的呢？在浏览器中打开网页，右键，选择“查看网页源代码”，找到me标签中的charset属性即可。 那么，我们为什么可以查看网页的源代码呢？因为这个打开的网页已经存到我的临时文件夹里了，临时文件夹里的html是纯文本文件，纯文本文件自然剋以查看网页的源代码了。
6、HTML颜色介绍
颜色表示：
• 纯单词表示：red、green、blue、orange、gray等
• 10进制表示：rgb(255,0,0)
• 16进制表示：#FF0000、#0000FF、#00FF00等
RGB色彩模式：
• 自然界中所有的颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得，这就是人们常说的三原色原理。
• RGB三原色也叫加色模式，这是因为当我们把不同光的波长加到一起的时候，可以得到不同的混合色。例：红+绿=黄色，红+蓝＝紫色，绿+蓝=青
• 在数字视频中，对RGB三基色各进行8位编码就构成了大约1678万种颜色，这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式。
• RGB各有256级(0-255)亮度，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256=16777216。
二、HTML的规范
• HTML是一个弱势语言
• HTML不区分大小写
• HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
• HTML的结构：
o 声明部分：主要作用是用来告诉浏览器这个页面使用的是哪个标准。是HTML5标准。
o head部分：将页面的一些额外信息告诉服务器。不会显示在页面上。
o body部分：我们所写的代码必须放在此标签內。
目前，IE浏览器是完全不支持H5的，支持最好的是Opera浏览器，可以支持95%以上；其次是google，可以支持一部分H5。
1、编写XHTML的规范：
（1）所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：
（2）所有的标记都必须小写。
（3）所有的标记都必须关闭。
• 双边标记：
• 单边标记：
转成
转成
，还有
（4）所有的属性值必须加引号。
（5）所有的属性必须有值。
、
（6）XHTML文档开头必须要有DTD文档类型定义
2、HTML的基本语法特性
（1）HTML对换行不敏感，对tab不敏感
HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。
也就是说，HTML不是依靠缩进来表示嵌套的，就是看标签的包裹关系。但是，我们发现有良好的缩进，代码更易读。要求大家都正确缩进标签。
百度为了追求极致的显示速度，所以HTML标签都没有换行、都没有缩进（tab），HTML和换不换行无关，标签的层次依然清晰，只不过程序员不可读了。如下图所示：
（2）空白折叠现象
HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。
举例如下：
（3）标签要严格封闭
标签不封闭是灾难性的。
标签不封闭的举例如下：
三、HTML结构详解
备注：
• 所有的浏览器默认情况下都会忽略空格和空行
• 每个标签都有私有属性。也都有公有属性。
• html中表示长度的单位都是像素。HTML只有一种单位就是像素。
HTML标签通常是成对出现的（双边标记），比如
和
，也有单独呈现的标签（单边标记），如：
、
和 等。
属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。
使用Emmet插件快速生成html的骨架(不用看)
在Sublime Text中安装Emmet插件。
新建html文件，输入html:xt，按Tab键后（或者按Ctrl+E），自动生成的代码如下： Document 新建html，输入html:5后，按 Tab键后，自动生成的代码如下：（看） Document 1、文档声明头 任何一个标准的HTML页面，第一行一定是一个以 所以，HTML就觉得，把一些规范严格的标准，又制定了一个XHTML1.0。在XHTML中的字母X，表示“严格的”。 总结一下，HTML4.01一共有6种DTD，说白了，HTML第一行语句一共有6种：  下面对上图中的三种小规范进行解释： • strict：表示“严格的”，这种模式里面的要求更为严格。这种严格体现在哪里？有一些标签不能使用。 比如，u标签，就是给一个本文加下划线，但是这和HTML的本质有冲突，因为HTML只能负责语义，不能负责样式，而u这个下划线是样式。所以，在strict中是不能使用u标签的。 那怎么给文本增加下划线呢？今后的css将使用css属性来解决。 那么，XHTML1.0更为严格，因为这个体系本身规定比如标签必须是小写字母、必须严格闭合标签、必须使用引号引起属性等等。 • Transitional：表示“普通的”，这种模式就是没有一些别的规范。 • Frameset：表示“框架”，在框架的页面使用。 在sublime输入的html:xt，x表示XHTML，t表示transitional。 HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了（W3C自己打脸了）： 2、头标签 头标签都放在头部分之间。包括： 、、、 • ：指定整个网页的标题，在浏览器最上方显示。 • ：为页面上的所有链接规标题栏显示的内容定默认地址或默认目标。 • ：提供有关页面的基本信息 • ：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。 • ：定义文档与外部资源的关系。 我们打开EditPlus软件（我们可以用WEBSTORM），新建一个html文件，自动生成的代码如下： <title>Document 上面的标签都不用记，但是另外还有一个标签是需要记住的： 上面这个标签的意思是说，3秒之后，自动跳转到百度页面。 我们接下来对各个头标签进行介绍。 （1）字符集 charset 我们发现，在头标签中，有下面这种标签： 字符集用meta标签中的charset定义，meta表示“元”。“元”配置，就是表示基本的配置项目。 charset就是charactor set（即“字符集”），这里采用的是。这个meta不用背，用sublime生成就行。 浏览器就是通过meta来看网页是什么字符集的。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。 （2）定义“关键词” 举例如下： 这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。 （3）定义“页面描述” meta除了可以设置字符集，还可以设置关键字和页面描述。 我们把含有meta标签的这一行代码抽象一下： name即“名字”，content即“内容”。 只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。 设置页面描述的举例： 效果如下：（搜索网页时会显示）  （4）title标签 网页的标题 title也是有助于SEO搜索引擎优化的。 html的完整骨架： 综上所述，html的比较完整的骨架是这样： Document
<pre><code></body>
</html>
</code></pre>
<p>面试题：<br> • 问：网页的head标签里面，表示的是页面的配置，有什么配置？<br> • 答：字符集、关键词、页面描述、页面标题。（今后我们还能看见一些其他的配置：IE适配、视口、iPhone小图标等等）<br> 3、标签的属性<br> 其属性有：<br> • bgcolor：设置整个网页的背景颜色。<br> • background：设置整个网页的背景图片。<br> • text：设置网页中的文本颜色。<br> • leftmargin：网页的左边距。IE浏览器默认是8个像素。<br> • topmargin：网页的上边距。<br> • rightmargin：网页的右边距。<br> • bottommargin：网页的下边距。</p> 标签另外还有一些属性，这里用个例子来解释：  上方代码中，当我们对点我点我这几个字使用超链时，link属性表示默认显示的颜色、alink属性表示鼠标点击但是还没有松开时的颜色、vlink属性表示点击完成之后显示的颜色。效果如下：  接下来，我们讲一下里的各种标签的属性。 一、排版标签 注释标签 段落标签
<p> </p>
<p>This is a paragraph</p>
<p>This is another paragraph</p> 属性： • align="属性值"：对齐方式。属性值包括left center right。 举例：
<p><a href="http://img.e-com-net.com/image/info8/94392cbbe0da481d8e84db143b154864.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/94392cbbe0da481d8e84db143b154864.jpg" alt="html学习-html标签图文详解（一）_第6张图片" width="649" height="644" style="border:1px solid black;"></a></p>
<p>段落，是英语paragraph“段落”缩写。<br> HTML标签是分等级的，HTML将所有的标签分为两种：<br> • 文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input）<br> • 容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。<br> 从学习p的第一天开始，就要死死记住：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。<br> 错误写法：（尝试把 h 放到 p 里）<br> </p>
<p><br> 我是一个小段落<br> </p>
<h1>我是一级标题</h1>
<br>
<p></p>
<br> 网页效果如下：
<br> <a href="http://img.e-com-net.com/image/info8/9c6c1e9c9df64afdb376130a84a7ee58.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9c6c1e9c9df64afdb376130a84a7ee58.jpg" alt="html学习-html标签图文详解（一）_第7张图片" width="638" height="324" style="border:1px solid black;"></a>
<br> 上图显示，浏览器不允许你这么做，我们使用Chrome的F12审查元素发现，浏览器自己把p封闭掉了，不让你去包裹h1。
<br> PS：Chrome浏览器是世界上HTML5支持最好的浏览器。提供了非常好的开发工具，非常适合我们开发人员使用。审查元素功能的快捷键是F12。
<br> 块级标签
<div>
和
<br> div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。
<br> CSS课程中你将知道，这两个东西，都是最最重要的“盒子”。
<br> div：把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。
<br> div标签的属性：
<br> • align=“属性值”：设置块儿的位置。属性值可选择：left、right、 center。
</div>
<p>和</p>
<div>
唯一的区别在于： 是不换行的，而
<div>
是换行的。
<br> 如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说，DIV+CSS来实现各种样式。
<br> 效果举例：
<br> <a href="http://img.e-com-net.com/image/info8/a98e2da7ad1e4a87a02fb84dd5a959d2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a98e2da7ad1e4a87a02fb84dd5a959d2.jpg" alt="html学习-html标签图文详解（一）_第8张图片" width="602" height="607" style="border:1px solid black;"></a>
<br> div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。 div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。
<br> span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。 就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
<br> span里面是放置小元素的，div里面放置大东西的。举例如下：
<br> span举例：
<br>
<p><br> 简介简介简介简介简介简介简介简介<br> <br> 详细信息<br> 购买<br> <br> </p>
<br> div举例：
<br>
<div class="header">
<br>
<div class="logo"></div>
<br>
<div class="nav"></div>
<br>
</div>
<br>
<div class="content">
<br>
<div class="guanggao"></div>
<br>
<div class="dongxi"></div>
<br>
</div>
<br>
<div class="footer"></div>
<br> 所以，我们亲切的称呼这种模式叫做“div+css”。div标签负责布局，负责结构，负责分块。css负责样式。
<br> 换行标签
<br>（已废弃）
<br> 当你打算结束一行，而又不想开始一个新段落时，
<br> 标签就派上用场了。无论你将它置于何处，
<br> 标签都会产生一个强制的换行。
<br> This
<br> is a para
<br>graph with line breaks
<br> 效果如下：
</div>
</div>
<p></p>
<p>上图显示，</p>
<p>标签和<br>标签的区别在于：</p>
<p>标签会在段落的前后自动插入一个空行，而<br>标签没有空行；而且<br>标签没有属性。<br> 注意<br> 没有结束标签，把<br>标签写为 <br> 是经得起未来考验的做法，XHTML 和 XML 都接受在打开的标签内部来关闭标签的做法。</p>
<p><a href="http://img.e-com-net.com/image/info8/7ea77105c38a4c4db6584707ccd6a574.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7ea77105c38a4c4db6584707ccd6a574.jpg" alt="html学习-html标签图文详解（一）_第9张图片" width="602" height="607" style="border:1px solid black;"></a><br> 水平线标签</p>
<hr>（已废弃）
<br> 水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。 效果如下：
<br> <a href="http://img.e-com-net.com/image/info8/fba9da0b30104e29a8e87ce88ebe2e1a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fba9da0b30104e29a8e87ce88ebe2e1a.jpg" alt="html学习-html标签图文详解（一）_第10张图片" width="607" height="340" style="border:1px solid black;"></a>
<br> 属性：
<br> • align=“属性值”：设定线条置放位置。属性值可选择：left right center。
<br> • size=“2” ：设定线条粗细。以像素为单位，内定为2。
<br> • width=“500"或width=“70%”：设定线条长度。可以是绝对值（单位是像素）或相对值。如果设置为相对值的话，内定为100%。
<br> • color=”#0000FF"：设置线条颜色。
<br> • noshade：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体，这是内定值。 属性效果演示：
<p></p>
<p><a href="http://img.e-com-net.com/image/info8/cdd565be847543d8b9ccb76ecde68732.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/cdd565be847543d8b9ccb76ecde68732.jpg" alt="html学习-html标签图文详解（一）_第11张图片" width="583" height="370" style="border:1px solid black;"></a></p>
<p>内容居中标签 </p>
<center>
<br> 此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。 效果演示：
<br> <a href="http://img.e-com-net.com/image/info8/3bee0d269cd54257ba3584d56305c215.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3bee0d269cd54257ba3584d56305c215.jpg" alt="html学习-html标签图文详解（一）_第12张图片" width="650" height="321" style="border:1px solid black;"></a>
<br> 到了H5里面，center标签不建议使用。
</center>
<p></p>
<p>预定义（预格式化）标签：</p>
<pre><br>
含义：将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行） 说明：真正排网页过程中，<pre>标签几乎用不着。但在PHP中用于打印一个数组时使用。<br>
效果演示：<br>
<a href="http://img.e-com-net.com/image/info8/825dd39c64184b8187ce01aa9580a8a8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/825dd39c64184b8187ce01aa9580a8a8.jpg" alt="html学习-html标签图文详解（一）_第13张图片" width="550" height="508" style="border:1px solid black;"></a><br>
上图中，好像红框部分的字体变小了，而且还出现了缩进，好吧， 这个其实是浏览器搞的鬼。 为什么要有<pre>这个标签呢？答案是：<br>
所有的浏览器默认情况下都会忽略空格和空行。<br>
好吧，其实这个标签也用的比较少。<br>
二、字体标签<br>
标题<br>
标题使用<h1>至</h1><h6>标签进行定义。</h6><h1>定义最大的标题，</h1><h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。 效果演示：<br>
<a href="http://img.e-com-net.com/image/info8/c5b9211699744d3c8e4201d92a7df8f7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c5b9211699744d3c8e4201d92a7df8f7.jpg" alt="html学习-html标签图文详解（一）_第14张图片" width="597" height="796" style="border:1px solid black;"></a><br>
字体标签（已废弃）<br>
属性：<br>
• color=“红色"或color=”#ff00cc"或color=“new rgb(0,0,255)”：设置字体颜色。 设置方式：单词 \ #ff00cc \ rgb(0,0,255)<br>
• size：设置字体大小。 取值范围只能是：1至7。取值时，如果取值大于7那就按照7来算，如果取值小于1那就按照1来算。如果想要更大的字体，那就只能通过css样式来解决。 设置：用’+2’代表值是5 或直接给值<br>
• face=“微软雅黑”：设置字体类型。注意在写字体时，“微软雅黑”这个字不能写错。 举例：<br>
<font face="微软雅黑" color="#FF0000" size="10">vae</font><br>
效果：<br>
<a href="http://img.e-com-net.com/image/info8/68e635a9c9484190a3f133f6dcd6ae18.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/68e635a9c9484190a3f133f6dcd6ae18.jpg" alt="html学习-html标签图文详解（一）_第15张图片" width="577" height="278" style="border:1px solid black;"></a><br>
特殊字符（转义字符）<br>
• ：空格 （non-breaking spacing，不断打空格）<br>
• <：小于号（less than）<br>
• >：大于号（greater than）<br>
• &：符号&<br>
• "：双引号<br>
• '：单引号<br>
• ©：版权©<br>
• ™：商标™<br>
• 绐：文字绐。其实，#32464是汉字绐的unicode编码。<br>
要求背诵的特殊字符有： 、<、>、©。<br>
比如说，你想把<p>作为一个文本在页面上显示，直接写</p><p>是肯定不行的，因为这代表的是一个段落标签，所以这里需要用到转义字符。应该这么写：<br>
这是一个HTML语言的<p>标签<br>
正确的效果如下：<br>
<a href="http://img.e-com-net.com/image/info8/dd4f9a3441184fc4bb847a2ef86f7d29.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/dd4f9a3441184fc4bb847a2ef86f7d29.jpg" alt="html学习-html标签图文详解（一）_第16张图片" width="585" height="259" style="border:1px solid black;"></a><br>
错误的效果如下：<br>
<a href="http://img.e-com-net.com/image/info8/c502a4c1aaea4b68b4edb2c2ee1869de.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c502a4c1aaea4b68b4edb2c2ee1869de.jpg" alt="html学习-html标签图文详解（一）_第17张图片" width="609" height="272" style="border:1px solid black;"></a><br>
其实我们只要记住前三个符号就行了，其他的在需要的时候查一下就行了。而且，EditPlus软件中是可以直接点击这些符号进行选择的：<br>
<a href="http://img.e-com-net.com/image/info8/2ee250eabba340aa806553eadbe5e4c7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2ee250eabba340aa806553eadbe5e4c7.jpg" alt="html学习-html标签图文详解（一）_第18张图片" width="604" height="406" style="border:1px solid black;"></a><br>
来一张表格，方便需要的时候查询：<br>
特殊字符 描述 字符的代码<br>
空格符 <br>
< 小于号 <</p>
</h6></pre></pre></pre>
<p></p>
<blockquote>
<p>大于号 ><br> & 和号 &<br> ￥ 人民币 ¥<br> © 版权 ©<br> ® 注册商标 ®<br> ° 摄氏度 °<br> ± 正负号 ±<br> × 乘号 ×<br> ÷ 除号 ÷<br> ² 平方2（上标2） ²<br> ³ 立方3（上标3） ³<br> 一些小标签/小标记<br> • <u>：下划线标记<br> • <s>或</s></u><del>：中划线标记（删除线）<br> • <i>或<em>：斜体标记<br> 效果：<br> <a href="http://img.e-com-net.com/image/info8/8e0c5ed155c64665aec713f2e3522ba9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8e0c5ed155c64665aec713f2e3522ba9.jpg" alt="html学习-html标签图文详解（一）_第19张图片" width="641" height="284" style="border:1px solid black;"></a><br> 上面的这几个标签，常用于做一些小装饰、小图标。比如：<br> 20180118_2340.png<br> 这张图中，我们通过查看京东网站的代码发现，箭头处的小图标都是用的标签<i>。<br> div的主要目的是用来布局，而小装饰却可以用来<br> 粗体标签<b>或<strong>（已废弃）<br> 效果：<br> <a href="http://img.e-com-net.com/image/info8/a146e35f5991426195cc26f31393209c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a146e35f5991426195cc26f31393209c.jpg" alt="html学习-html标签图文详解（一）_第20张图片" width="650" height="242" style="border:1px solid black;"></a></strong></b></i></em></i></del></p>
</blockquote>
<p>上标<sup> 下标<sub><br> 上小标这两个标签容易混淆，怎么记呢？这样记：b的意思是bottom：底部 举例：<br> O<sup>2</sup> 5<sub>3</sub><br> 效果：<br> <a href="http://img.e-com-net.com/image/info8/813d6f5437f54acb9689adea5a1efbf0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/813d6f5437f54acb9689adea5a1efbf0.jpg" alt="html学习-html标签图文详解（一）_第21张图片" width="620" height="238" style="border:1px solid black;"></a><br> 三、超链接<br> 超链接有三种形式：<br> 1、外部链接：链接到外部文件。举例：<br> 点击进入另外一个文件<br> a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。<br> href是英语hypertext reference超文本地址的缩写。读作“喝瑞夫”，不要读作“喝夫”。<br> 效果：<br> <a href="http://img.e-com-net.com/image/info8/4d39b2b65cdd4f05bd901fad65ef8fdf.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4d39b2b65cdd4f05bd901fad65ef8fdf.jpg" alt="html学习-html标签图文详解（一）_第22张图片" width="565" height="219" style="border:1px solid black;"></a><br> 当然，我们也可以直接点进链接，访问一个网址。举例如下；<br> 点我点我<br> 2、锚链接： 指给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就是利用到了锚链接。 首先我们要创建一个锚点，也就是说，使用name属性或者id属性给那个特定的位置起个名字。效果如下：<br> <a href="http://img.e-com-net.com/image/info8/62f33be6000a409f87bfca16997ea7fa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/62f33be6000a409f87bfca16997ea7fa.jpg" alt="html学习-html标签图文详解（一）_第23张图片" width="558" height="394" style="border:1px solid black;"></a><br> 上图中解释：<br> 11行代码表示，顶部这个锚的名字叫做name1。 然后在底部设置超链接，点击时将回到顶部（此时，网页中的url的末尾也出现了#name1）。注意上图中红框部分的#号不要忘记了，表示跳到名为name1的特定位置，这是规定。如果少了#号，点击之后，就会跳到name1这个文件或者name1这个文件夹中去。<br> 如果我们将上图中的第28行代码写成：<br> 回到顶部<br> 那就表示，点击之后，跳转到a.html页面的name1锚点中去。<br> 说明：name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的。<br> 3、邮件链接： 代码举例：<br> 点击进入我的邮箱<br> 效果：点击之后，会弹出outlook，作用不大。<br> 超链接的属性<br> • href：目标URL<br> • title：悬停文本。<br> • name：主要用于设置一个锚点的名称。<br> • target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：<br> o _self：在同一个网页中显示（默认值）<br> o _blank：在新的窗口中打开。<br> o _parent：在父窗口中显示<br> o <em>top：在顶级窗口中显示<br> title属性举例：<br> 结婚照<br> 效果如下：<br> <a href="http://img.e-com-net.com/image/info8/eb5b4be9137743508b7ad24ae3b838a1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/eb5b4be9137743508b7ad24ae3b838a1.jpg" alt="html学习-html标签图文详解（一）_第24张图片" width="611" height="234" style="border:1px solid black;"></a><br> target属性举例：<br> 链接的内容<br> blank就是“空白”的意思，就表示新建一个空白窗口。为啥有一个</em> ，就是规定，没啥好解释的。 也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了target=”_blank”，就是在新的空白标签页中打开。<br> 备注1：分清楚img和a标签的各自的属性<br> 区别如下：<br> <br> <br> 备注2：a是一个文本级的标签<br> 比如一个段落中的所有文字都能够被点击，那么应该是p包裹a：</sub></sup></p>
<p> 段落段落段落段落段落段落 </p> 而不是a包裹p：
<p> 段落段落段落段落段落段落 </p> a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。 四、图片标签 img: 代表的就是一张图片。是单边标记。 img是自封闭标签，也称为单标签。 能插入的图片类型： • 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别，css课上讲。 • 不能往网页中插入的图片格式是：psd、ai HTML页面不是直接插入图片，而是插入图片的引用地址，所以也要把图片上传到服务器上。 src属性：图片的相对路径和绝对路径 这里涉及到图片的一个属性： • src属性：指图片的路径。 在写图片的路径时，有两种写法：相对路径、绝对路径 1、写法一：相对路径 相对当前页面所在的路径。两个标记 . 和 .. 分表代表当前目录和父路径。 举例1： img 是image“图片”的简写，src 是英语source“资源”的缩写。 相对路径不会出现这种情况： aaa/../bbb/1.jpg ../要么不写，要么就写在开头。 举例2： 上方代码的意思是说，当前页面有一个并列的文件夹images，在文件夹images中存放了一张图片1.jpg 效果：  相对路径的面试题。现有如下文件层级图：  问题：如果想在index.html中插入1.png，那么对应的img语句是？ 分析： 现在document是最大的文件夹，里面有两个文件夹work和photo。work中又有一个文件夹叫做myweb。myweb文件夹里面有index.html。 所以index.html在myweb文件夹里面，上一级就是work文件夹，上两级就是document文件夹。通过document文件夹当做一个中转站，进入photo文件夹，看到了1.png。 答案： 2、写法二：绝对路径 绝对路径包括以下两种： （1）以盘符开始的绝对路径。举例： （2）网络路径。举例：
<img src="http://img.e-com-net.com/image/info8/ac0260e2c5ea448a974084f48f011bc0.jpg" width="0" height="0"> 大家打开上面的img中的链接，扫一扫，可能有惊喜哦。 相对路径和绝对路径的总结 相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。 相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。 问题：我的网页在C盘，图片却在D盘，能不能插入呢？ 答案： 用相对路径不能，用绝对路径也不能。 注意：可以使用file://来插入，但是这种方法，没有任何意义！因为服务器上没有所谓c盘、d盘。 下面的方法是行的，但是没有任何工程上的意义，这是因为服务器没有盘符，linux系统没有盘符：
<img alt="" src=""> 总结一下： • 我们现在无论是在a标签、img标签，如果要用路径。只有两种路径能用，就是相对路径和绝对路径。 • 相对路径，就是../ image/ 这种路径。从自己出发，找到别人； • 绝对路径，就是http://开头的路径。 • 绝对不允许使用file://开头的东西，这个是完全错误的！ img标签的其他属性 • width：宽度 • height：高度 • Align：指图片的水平对齐方式，属性值可以是：left、center、right • title：提示性文本。公有属性。也就是鼠标悬停时出现的文本。 • border：给图片加边框（描边），单位是像素，边框的颜色是黑色 • Hspace：指图片左右的边距 • Vspace：指图片上下的边距 • Alt：当图片显示不出来的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思。（有的浏览器不支持） 举例： 效果：  Alt属性效果演示：  • 图片的align属性：图片和周围文字的相对位置。属性取值可以是：bottom（默认）、center、top、left、right。 我们来分别看一下这align属性的这几个属性值的区别。 1、align=""，图片和文字低端对齐。即默认情况下的显示效果：  2、align="center"：图片和文字水平方向上居中对齐。显示效果：  3、align="top"：图片与文字顶端对齐。显示效果：  4、align="left"：图片在文字的左边。显示效果：  5、align="right"：图片在文字的右边。显示效果：  注意事项： （1）如果要想保证图片等比例缩放，请只设置width和height中其中一个。 （2）如果想实现图文混排的效果，请使用align属性，取值为left或right。
<p>热点问题<br> 指的是对图片的局部区域加超链接。 我们知道，如果给图片加一个超链接，那个点击这个图片的任意区域，都会跳转到新的位置。举例：<br> <br> 上方代码表明：给图片加一个超链接，那个点击这个图片的任意区域，都会跳转到新的位置。 现在，我只想对图片的局部区域加超链接，该怎么做呢？这里的难点在于坐标的确定，此时需要用到Dreamweaver。<br> <a href="http://img.e-com-net.com/image/info8/b70e30b05cf94ff5a2059118b7bd2621.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b70e30b05cf94ff5a2059118b7bd2621.jpg" alt="html学习-html标签图文详解（一）_第25张图片" width="631" height="252" style="border:1px solid black;"></a><br> 上图中，切换到“设计”标签，然后：<br> <a href="http://img.e-com-net.com/image/info8/853f42ac27574fd59adfce934dc1e39b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/853f42ac27574fd59adfce934dc1e39b.jpg" alt="html学习-html标签图文详解（一）_第26张图片" width="631" height="300" style="border:1px solid black;"></a><br> 上图中，点击菜单栏插入-图像，导入图片：<br> <a href="http://img.e-com-net.com/image/info8/8461beb59e644b97a2d6c858a6fb3034.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8461beb59e644b97a2d6c858a6fb3034.jpg" alt="html学习-html标签图文详解（一）_第27张图片" width="596" height="670" style="border:1px solid black;"></a><br> ，在图片上点击右键，选择属性，弹出属性面板：<br> <a href="http://img.e-com-net.com/image/info8/0fdb39c55a704b74bb9f39904ac6539a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0fdb39c55a704b74bb9f39904ac6539a.jpg" alt="html学习-html标签图文详解（一）_第28张图片" width="617" height="640" style="border:1px solid black;"></a><br> 上图中，我们可以利用红框部分的地图绘制需要添加超链接的区域。箭头处表示的是要链接到的文件。蓝框部分表示打开新页面的方式，蓝狂部分的new是没有下划线的，它和_blank的含义是一样的。<a href="http://img.e-com-net.com/image/info8/b511c2037409400ab2ef322c8cb7cd5a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b511c2037409400ab2ef322c8cb7cd5a.jpg" alt="html学习-html标签图文详解（一）_第29张图片" width="637" height="380" style="border:1px solid black;"></a><br> 局部区域的热点设置完毕后，上图显示，红框部分就是多出的代码，也正是我们需要的代码。多出的代码如下：<br> <img alt="" width="488" height="730" src=""><br> <br> <area><br> <br> 上方代码中，第一行的usemap="#Map"表示我要引用名为Map的地图。 然后第02至第04行就给出了地图的定义。 效果演示：</p>
<p><a href="http://img.e-com-net.com/image/info8/fc113b7019d643e28640e603eb7a78be.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fc113b7019d643e28640e603eb7a78be.jpg" alt="html学习-html标签图文详解（一）_第30张图片" width="543" height="827" style="border:1px solid black;"></a></p>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1600862519344267264"></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)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1891405405515476992.htm"
title="html中用npm包" target="_blank">html中用npm包</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/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/1891358097788694528.htm"
title="html5游戏引擎-Pharse.js学习笔记（一）" target="_blank">html5游戏引擎-Pharse.js学习笔记（一）</a>
<span class="text-muted">18520195858</span>
<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/1891321027351343104.htm"
title="使用 HTML CSS 和 JAVASCRIPT 的黑洞动画" target="_blank">使用 HTML CSS 和 JAVASCRIPT 的黑洞动画</a>
<span class="text-muted">谏君之</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/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/1891313206572412928.htm"
title="对于简单的HTML、CSS、JavaScript前端，我们可以通过几种方式连接后端" target="_blank">对于简单的HTML、CSS、JavaScript前端，我们可以通过几种方式连接后端</a>
<span class="text-muted">昨今</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a>
<div>1.使用FetchAPI发送HTTP请求（最简单的方式）：//home.html//示例：提交表单数据到后端constsubmitForm=async(formData)=>{try{constresponse=awaitfetch('http://your-backend-url/api/submit',{method:'POST',headers:{'Content-Type':'applic</div>
</li>
<li><a href="/article/1891295036713267200.htm"
title="高级前端工程师Vue面试题" target="_blank">高级前端工程师Vue面试题</a>
<span class="text-muted">盼盼盼</span>
<a class="tag" taget="_blank" href="/search/%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/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>HTML/CSS1.解释HTML5中的元素及其用途。元素用于通过JavaScript绘制图形，比如图表、图像处理等。它提供了一个图形上下文，可以进行2D图形绘制。2.CSS中display:none和visibility:hidden有什么区别？display:none会将元素从文档流中完全移除，不占据空间。而visibility:hidden则元素依然占据空间，只是变得不可见。3.描述CSSFl</div>
</li>
<li><a href="/article/1891286204062691328.htm"
title="mac+CLion+redis6.2本地源码调试" target="_blank">mac+CLion+redis6.2本地源码调试</a>
<span class="text-muted">王冬的csdn</span>
<a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a>
<div>1.下载安装CLion下载地址：https://www.jetbrains.com.cn/clion/download/other.html安装过程自行百度2.下载redis源码gitclonehttp://github.com/redis/redis.git3.添加CMakeLists.txt文件1、\redis-6.2\cmake_minimum_required(VERSION3.0FATA</div>
</li>
<li><a href="/article/1891285192904077312.htm"
title="html5 判断长按操作,移动端h5模拟长按事件" target="_blank">html5 判断长按操作,移动端h5模拟长按事件</a>
<span class="text-muted">weixin_39933414</span>
<a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%88%A4%E6%96%AD%E9%95%BF%E6%8C%89%E6%93%8D%E4%BD%9C/1.htm">判断长按操作</a>
<div>1、标志位vartimer='';varisLongTouch=false;//加个标志位，防止settimeout因为事件循环和实际时间有偏差vartarget=document.getElementById('target');target.addEventListener('touchstart',function(){timer=setTimeout(function(){isLongTo</div>
</li>
<li><a href="/article/1891281664047378432.htm"
title="electron-vue 安装环境、构建+打包（mac和windows）这一篇就够了" target="_blank">electron-vue 安装环境、构建+打包（mac和windows）这一篇就够了</a>
<span class="text-muted">阿毛sky</span>
<a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>由于公司需要，下一个项目需要做CS开发，技术选型分析后，选择了electron（Electron是一个使用JavaScript,HTML和CSS等Web技术创建原生程序的框架）研究发现，electron与vue-cli3.0脚手架做了很好的融合，对于我们这种用惯了vue，以及elementUI这些UI框架的Web前端开发工程师来说，实在太友好了，不过，这是一门国外框架技术，不仅是环境搭建、安装、文</div>
</li>
<li><a href="/article/1891276997259227136.htm"
title="nodejs：express + js-mdict 网页查询英汉词典，能播放声音" target="_blank">nodejs：express + js-mdict 网页查询英汉词典，能播放声音</a>
<span class="text-muted">belldeep</span>
<a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a><a class="tag" taget="_blank" href="/search/web%E6%9C%8D%E5%8A%A1/1.htm">web服务</a><a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a><a class="tag" taget="_blank" href="/search/express/1.htm">express</a><a class="tag" taget="_blank" href="/search/js-mdict/1.htm">js-mdict</a>
<div>向DeepSeekR1提问：我想写一个Web前端网页，后台用nodejs+js-mdict,实现在线查询英语单词1.项目结构首先，创建一个项目目录，结构如下：mydict-app/├──public/│├──index.html│├──styles.css│└──script.js├──server/│└──server.js├──package.json└──README.md英汉词典文件（*.</div>
</li>
<li><a href="/article/1891273089291972608.htm"
title="nodejs：express + js-mdict 网页查询英汉词典，能显示图片" target="_blank">nodejs：express + js-mdict 网页查询英汉词典，能显示图片</a>
<span class="text-muted">belldeep</span>
<a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/js-mdict/1.htm">js-mdict</a><a class="tag" taget="_blank" href="/search/express/1.htm">express</a>
<div>向DeepSeekR1提问：我想写一个Web前端网页，后台用nodejs+js-mdict,实现在线查询英语单词，并能显示图片1.项目结构首先，创建一个项目目录，结构如下：mydict-app/├──public/│├──index.html│├──styles.css│└──script.js├──server/│└──server.js├──package.json└──README.md英汉</div>
</li>
<li><a href="/article/1891246733363572736.htm"
title="使用JavaScript设计一款简单的数字时钟" target="_blank">使用JavaScript设计一款简单的数字时钟</a>
<span class="text-muted">布啦啦李</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E6%97%B6%E9%92%9F/1.htm">时钟</a>
<div>本文目录使用JavaScript设计一款带日期显示的数字时钟效果预览1.项目概述2.HTML结构代码说明3.CSS样式代码说明4.JavaScript逻辑代码说明5.运行效果使用JavaScript设计一款带日期显示的数字时钟本文将详细介绍如何使用HTML、CSS和JavaScript设计一款带日期显示的数字时钟。我们将逐步讲解每一行代码的作用，帮助你理解如何实现一个实时更新的时钟，并扩展功能以显</div>
</li>
<li><a href="/article/1891220629676421120.htm"
title="DPlayer + vue3 使用" target="_blank">DPlayer + vue3 使用</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/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/%E8%A7%86%E9%A2%91/1.htm">视频</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a>
<div>帮助文档https://dplayer.diygod.dev/zh/guide.html#special-thanks安装pnpminstalldplayer--savepnpminstall@types/dplayer--save-dev使用方法import{ref,onMounted,onBeforeUnmount}from'vue';importDPlayerfrom'dplayer';im</div>
</li>
<li><a href="/article/1891210036970057728.htm"
title="Bootstrap4 信息提示框" target="_blank">Bootstrap4 信息提示框</a>
<span class="text-muted">lsx202406</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>Bootstrap4信息提示框Bootstrap是一个流行的前端框架，它提供了一系列的工具和组件来帮助开发者快速搭建响应式网站。在Bootstrap4中，信息提示框（Tooltip）是一个非常有用的组件，它可以帮助用户更好地理解页面上的元素。本文将详细介绍Bootstrap4的信息提示框组件，包括其基本用法、配置选项以及与实际应用的结合。一、基本用法1.1HTML结构要使用Bootstrap4的信</div>
</li>
<li><a href="/article/1891191003134619648.htm"
title="i510300h和i78750h参数对比哪个好" target="_blank">i510300h和i78750h参数对比哪个好</a>
<span class="text-muted">妙龙</span>
<a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0%E6%9C%AC/1.htm">笔记本</a>
<div>i510300H是笔记本平台的标准电压处理器，为四核心八线程，主频2.5GHz，睿频4.5GHz，45WTDP，8M三级缓存，passmark跑分为9026分。我的笔记本就是活动时8折抢购的https://list.jd.com/list.html?i7-8750H的规格是6核心12线程，coffcelake架构，主频2.2GHz，单核最大睿频4.1GHz，六核最大睿频3.9GHz，L3缓存9MB</div>
</li>
<li><a href="/article/1891190498744397824.htm"
title="腾讯云通过API怎样调用deepseek" target="_blank">腾讯云通过API怎样调用deepseek</a>
<span class="text-muted">ZhangJiQun&MXP</span>
<a class="tag" taget="_blank" href="/search/2024%E5%A4%A7%E6%A8%A1%E5%9E%8B%E4%BB%A5%E5%8F%8A%E7%AE%97%E5%8A%9B/1.htm">2024大模型以及算力</a><a class="tag" taget="_blank" href="/search/%E6%95%99%E5%AD%A6/1.htm">教学</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/1.htm">语言模型</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E7%84%B6%E8%AF%AD%E8%A8%80%E5%A4%84%E7%90%86/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>
<div>腾讯云通过API怎样调用deepseek目录腾讯云通过API怎样调用deepseekhtml方式curl方式重点说明：不需要SK，仅仅使用ip和端口号html方式<metacharset=</div>
</li>
<li><a href="/article/1891189866662785024.htm"
title="Pinia入门" target="_blank">Pinia入门</a>
<span class="text-muted">qincjun</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0%E6%8C%87%E5%8D%97/1.htm">前端学习指南</a><a class="tag" taget="_blank" href="/search/pinia/1.htm">pinia</a>
<div>一、铺垫pinia官网：https://pinia.vuejs.org/zh/getting-started.html以下的内容全部来自官网；只不过有时候访问官网上不去；只能自己扒下来；pinia的前端使用非常简单；只需要掌握几个步骤就可以二、套路1.用你喜欢的包管理器安装pinia：yarnaddpinia#或者使用npmnpminstallpinia2.创建一个pinia实例(根store)并</div>
</li>
<li><a href="/article/1891184069010583552.htm"
title="前端框架Vue内容回顾" target="_blank">前端框架Vue内容回顾</a>
<span class="text-muted">GISer_Jinger</span>
<a class="tag" taget="_blank" href="/search/Javascript/1.htm">Javascript</a><a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>前端面试Vue必备内容详解如果你正在准备Vue相关的前端面试，这份详细指南将帮助你掌握Vue核心知识，助你高效备战面试。1.Vue基础知识1.1Vue的核心概念声明式渲染：Vue采用数据驱动视图的方式，通过{{}}语法或v-bind绑定数据，无需手动操作DOM。组件化开发：Vue提供了单文件组件（SFC），支持HTML、CSS、JS组合在.vue文件中，提高代码复用性和可维护性。数据驱动：Vue采</div>
</li>
<li><a href="/article/1891180914868809728.htm"
title="python自动化框架pytest_全功能Python测试框架：pytest" target="_blank">python自动化框架pytest_全功能Python测试框架：pytest</a>
<span class="text-muted">weixin_39637646</span>
<div>python通用测试框架大多数人用的是unittest+HTMLTestRunner，这段时间看到了pytest文档，发现这个框架和丰富的plugins很好用，所以来学习下pytest.image.pngpytest是一个非常成熟的全功能的Python测试框架，主要有以下几个特点：简单灵活，容易上手支持参数化能够支持简单的单元测试和复杂的功能测试，还可以用来做selenium/appnium等自动</div>
</li>
<li><a href="/article/1891180536957825024.htm"
title="print不起作用 pytest_全功能Python测试框架：pytest" target="_blank">print不起作用 pytest_全功能Python测试框架：pytest</a>
<span class="text-muted">吕欲知</span>
<a class="tag" taget="_blank" href="/search/print%E4%B8%8D%E8%B5%B7%E4%BD%9C%E7%94%A8/1.htm">print不起作用</a><a class="tag" taget="_blank" href="/search/pytest/1.htm">pytest</a>
<div>python通用测试框架大多数人用的是unittest+HTMLTestRunner，这段时间看到了pytest文档，发现这个框架和丰富的plugins很好用，所以来学习下pytest.pytest是一个非常成熟的全功能的Python测试框架，主要有以下几个特点：简单灵活，容易上手支持参数化能够支持简单的单元测试和复杂的功能测试，还可以用来做selenium/appnium等自动化测试、接口自动化</div>
</li>
<li><a href="/article/1891172716447330304.htm"
title="【从0带做】基于Springboot3+Vue3的高校食堂点餐系统" target="_blank">【从0带做】基于Springboot3+Vue3的高校食堂点餐系统</a>
<span class="text-muted">ADFVBM</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">学习路线</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4/1.htm">阿里巴巴</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>大家好，我是武哥，最近给大家手撸了一个基于SpringBoot3+Vue3的高校食堂点餐系统，可用于毕业设计、课程设计、练手学习，系统全部原创，如有遇到网上抄袭站长的，欢迎联系博主~详细介绍https://www.javaxm.cn/star/gxstdc.html项目在线体验地址体验地址：（请电脑端浏览器访问）：http://43.142.9.148:81/用户账号：aaa密码：123456系统</div>
</li>
<li><a href="/article/1891168055833194496.htm"
title="Python满屏飘字代码" target="_blank">Python满屏飘字代码</a>
<span class="text-muted">Want595</span>
<a class="tag" taget="_blank" href="/search/%E8%B6%A3%E5%91%B3%E7%BC%96%E7%A8%8B/1.htm">趣味编程</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>系列专栏《Python趣味编程》《C/C++趣味编程》《HTML趣味编程》《Java趣味编程》系列文章序号直达链接Tkinter1Python李峋同款可写字版跳动的爱心2Python跳动的双爱心3Python蓝色跳动的爱心4Python动漫烟花5Python粒子烟花Turtle1Python满屏飘字2Python蓝色流星雨3Python金色流星雨4Python漂浮爱心5Python爱心光波①6Py</div>
</li>
<li><a href="/article/1891156083381170176.htm"
title="HTML5(十二)——一文读懂 WebSocket 原理" target="_blank">HTML5(十二)——一文读懂 WebSocket 原理</a>
<span class="text-muted">m0_70646989</span>
<a class="tag" taget="_blank" href="/search/Web%E5%89%8D%E7%AB%AF/1.htm">Web前端</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
<div>二、WebSocket通信过程================WebSocket协议可分为两部分：握手阶段和数据通信阶段。WebSocket为应用层协议，定义在TCP/IP协议栈之上，连接服务器的url是以ws或wss开头的。ws开头的默认TCP端口为80，wss开头的默认端口为443。ws（websocket）是不安全的，容易被窃听，只要别人知道你的ip和端口号，任何人都可以去连接通讯。wss（</div>
</li>
<li><a href="/article/1891133639043903488.htm"
title="大数据之-hdfs+hive+hbase+kudu+presto集群(6节点)" target="_blank">大数据之-hdfs+hive+hbase+kudu+presto集群(6节点)</a>
<span class="text-muted">管哥的运维私房菜</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/hdfs/1.htm">hdfs</a><a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a><a class="tag" taget="_blank" href="/search/kudu/1.htm">kudu</a><a class="tag" taget="_blank" href="/search/presto/1.htm">presto</a><a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a>
<div>几个主要软件的下载地址：prestohttps://prestosql.io/docs/current/index.htmlkudurpm包地址https://github.com/MartinWeindel/kudu-rpm/releaseshivehttp://mirror.bit.edu.cn/apache/hive/hdfshttp://archive.apache.org/dist/ha</div>
</li>
<li><a href="/article/1891130865065455616.htm"
title="简析 .NET Core 构成体系" target="_blank">简析 .NET Core 构成体系</a>
<span class="text-muted">weixin_30613727</span>
<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/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/runtime/1.htm">runtime</a>
<div>简析.NETCore构成体系出处：http://www.cnblogs.com/vipyoumay/p/5613373.htmlhttps://github.com/PrismLibrary/Prism是一个用于在WPF，Windows10UWP和XamarinForms中构建松散耦合，可维护和可测试的XAML应用程序的框架。https://docs.microsoft.com/en-us/pre</div>
</li>
<li><a href="/article/1891122041952727040.htm"
title="Python爬虫获取股市数据，有哪些常用方法？" target="_blank">Python爬虫获取股市数据，有哪些常用方法？</a>
<span class="text-muted">股票程序化交易接口</span>
<a class="tag" taget="_blank" href="/search/%E9%87%8F%E5%8C%96%E4%BA%A4%E6%98%93/1.htm">量化交易</a><a class="tag" taget="_blank" href="/search/%E8%82%A1%E7%A5%A8API%E6%8E%A5%E5%8F%A3/1.htm">股票API接口</a><a class="tag" taget="_blank" href="/search/Python%E8%82%A1%E7%A5%A8%E9%87%8F%E5%8C%96%E4%BA%A4%E6%98%93/1.htm">Python股票量化交易</a><a class="tag" taget="_blank" href="/search/python%E7%88%AC%E8%99%AB/1.htm">python爬虫</a><a class="tag" taget="_blank" href="/search/%E8%82%A1%E5%B8%82%E6%95%B0%E6%8D%AE/1.htm">股市数据</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E6%8A%93%E5%8F%96/1.htm">网页抓取</a><a class="tag" taget="_blank" href="/search/api/1.htm">api</a><a class="tag" taget="_blank" href="/search/%E8%82%A1%E7%A5%A8%E9%87%8F%E5%8C%96%E6%8E%A5%E5%8F%A3/1.htm">股票量化接口</a><a class="tag" taget="_blank" href="/search/%E8%82%A1%E7%A5%A8API%E6%8E%A5%E5%8F%A3/1.htm">股票API接口</a>
<div>Python股票接口实现查询账户，提交订单，自动交易（1）Python股票程序交易接口查账，提交订单，自动交易（2）股票量化，Python炒股，CSDN交流社区>>>网页直接抓取法Python中有许多库可用于解析HTML页面来获取股市数据。例如BeautifulSoup，它能够轻松地从网页的HTML结构中提取出想要的数据。当我们定位到包含股市数据的网页时，利用BeautifulSoup可以根据HT</div>
</li>
<li><a href="/article/1891118763131072512.htm"
title="Python 爬虫实战：在东方财富网抓取股票行情数据，辅助投资决策" target="_blank">Python 爬虫实战：在东方财富网抓取股票行情数据，辅助投资决策</a>
<span class="text-muted">西攻城狮北</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E5%AE%9E%E6%88%98%E6%A1%88%E4%BE%8B/1.htm">实战案例</a><a class="tag" taget="_blank" href="/search/%E4%B8%9C%E6%96%B9%E8%B4%A2%E5%AF%8C%E7%BD%91/1.htm">东方财富网</a>
<div>目录一、引言二、准备工作1.环境搭建2.获取目标网址三、分析网页结构1.查看HTML结构2.分析请求方式四、编写爬虫代码1.导入必要的库2.设置请求头3.获取股票行情数据4.保存数据到CSV文件5.主函数五、数据分析与可视化1.加载数据2.数据清洗3.数据分析4.数据可视化六、总结一、引言在金融投资领域，股票行情数据是投资者做出决策的重要依据。东方财富网作为国内领先的金融信息平台，提供了丰富的股票</div>
</li>
<li><a href="/article/1891069455673389056.htm"
title="利用Python进行数据清洗与预处理：Pandas的高级用法" target="_blank">利用Python进行数据清洗与预处理：Pandas的高级用法</a>
<span class="text-muted">步入烟尘</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/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>本文已收录于《Python超入门指南全册》本专栏专门针对零基础和需要进阶提升的同学所准备的一套完整教学，从基础到精通不断进阶深入，后续还有实战项目，轻松应对面试，专栏订阅地址：https://blog.csdn.net/mrdeam/category_12647587.html优点：订阅限时19.9付费专栏，私信博主还可进入全栈VIP答疑群，作者优先解答机会（代码指导、远程服务），群里大佬众多可以</div>
</li>
<li><a href="/article/1891064917126082560.htm"
title="Mac配置环境变量时终端显示bash-3.2解决方案" target="_blank">Mac配置环境变量时终端显示bash-3.2解决方案</a>
<span class="text-muted">dearbaba_11</span>
<a class="tag" taget="_blank" href="/search/%5CN/1.htm">\N</a>
<div>Mac配置环境变量时终端显示bash-3.2解决方案参考文章：（1）Mac配置环境变量时终端显示bash-3.2解决方案（2）https://www.cnblogs.com/jasmine0112/p/12285114.html备忘一下。</div>
</li>
<li><a href="/article/1891053069785952256.htm"
title="高可用（HA）架构" target="_blank">高可用（HA）架构</a>
<span class="text-muted">weixin_34344403</span>
<a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><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>
<div>http://aokunsang.iteye.com/blog/2053719浅谈web应用的负载均衡、集群、高可用(HA)解决方案http://zhuanlan.51cto.com/art/201612/524201.htm互联网架构“高可用”http://www.blogjava.net/ivanwan/archive/2013/12/25/408014.htmlLVS/Nginx/HAPro</div>
</li>
<li><a href="/article/1891048274958282752.htm"
title="WEB漏洞-XXE&XML之利用检测绕过" target="_blank">WEB漏洞-XXE&XML之利用检测绕过</a>
<span class="text-muted">网小白白</span>
<a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/1.htm">网络安全</a>
<div>XXE"xmlexternalentityinjection"-XML外部实体注入漏洞服务端接收和解析了来自用户端的xml数据,而又没有做严格的安全控制,从而导致xml外部实体注入xml基本语法XML被设计用来结构化、存储以及传输信息;恰恰相反,HTML是被设计用来显示数据，其焦点是数据的外观。XML没有预定义的标签。它仅仅是纯文本而已。有能力处理纯文本的软件都可以处理XML。XML不会做任何事情</div>
</li>
<li><a href="/article/119.htm"
title="Spring中@Value注解，需要注意的地方" target="_blank">Spring中@Value注解，需要注意的地方</a>
<span class="text-muted">无量</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a><a class="tag" taget="_blank" href="/search/%40Value/1.htm">@Value</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a>
<div>Spring 3以后,支持@Value注解的方式获取properties文件中的配置值，简化了读取配置文件的复杂操作
1、在applicationContext.xml文件(或引用文件中)中配置properties文件
<bean id="appProperty"
class="org.springframework.beans.fac</div>
</li>
<li><a href="/article/246.htm"
title="mongoDB 分片" target="_blank">mongoDB 分片</a>
<span class="text-muted">开窍的石头</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a>
<div> mongoDB的分片。要mongos查询数据时候 先查询configsvr看数据在那台shard上，configsvr上边放的是metar信息，指的是那条数据在那个片上。由此可以看出mongo在做分片的时候咱们至少要有一个configsvr,和两个以上的shard（片）信息。
第一步启动两台以上的mongo服务
&nb</div>
</li>
<li><a href="/article/373.htm"
title="OVER(PARTITION BY)函数用法" target="_blank">OVER(PARTITION BY)函数用法</a>
<span class="text-muted">0624chenhong</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a>
<div>这篇写得很好，引自
http://www.cnblogs.com/lanzi/archive/2010/10/26/1861338.html
OVER(PARTITION BY)函数用法
2010年10月26日
OVER(PARTITION BY)函数介绍
开窗函数 &nb</div>
</li>
<li><a href="/article/500.htm"
title="Android开发中，ADB server didn't ACK 解决方法" target="_blank">Android开发中，ADB server didn't ACK 解决方法</a>
<span class="text-muted">一炮送你回车库</span>
<a class="tag" taget="_blank" href="/search/Android%E5%BC%80%E5%8F%91/1.htm">Android开发</a>
<div>首先通知：凡是安装360、豌豆荚、腾讯管家的全部卸载，然后再尝试。
一直没搞明白这个问题咋出现的，但今天看到一个方法，搞定了！原来是豌豆荚占用了 5037 端口导致。
参见原文章：一个豌豆荚引发的血案——关于ADB server didn't ACK的问题
简单来讲，首先将Windows任务进程中的豌豆荚干掉，如果还是不行，再继续按下列步骤排查。
&nb</div>
</li>
<li><a href="/article/627.htm"
title="canvas中的像素绘制问题" target="_blank">canvas中的像素绘制问题</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/canvas/1.htm">canvas</a>
<div>pixl的绘制，1.如果绘制点正处于相邻像素交叉线，绘制x像素的线宽，则从交叉线分别向前向后绘制x/2个像素，如果x/2是整数，则刚好填满x个像素，如果是小数，则先把整数格填满，再去绘制剩下的小数部分，绘制时，是将小数部分的颜色用来除以一个像素的宽度，颜色会变淡。所以要用整数坐标来画的话（即绘制点正处于相邻像素交叉线时），线宽必须是2的整数倍。否则会出现不饱满的像素。
2.如果绘制点为一个像素的</div>
</li>
<li><a href="/article/754.htm"
title="编码乱码问题" target="_blank">编码乱码问题</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/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A0%81/1.htm">编码</a>
<div>1、JVM中单个字符占用的字节长度跟编码方式有关，而默认编码方式又跟平台是一一对应的或说平台决定了默认字符编码方式；2、对于单个字符：ISO-8859-1单字节编码，GBK双字节编码，UTF-8三字节编码；因此中文平台(中文平台默认字符集编码GBK)下一个中文字符占2个字节，而英文平台(英文平台默认字符集编码Cp1252(类似于ISO-8859-1))。
3、getBytes()、getByte</div>
</li>
<li><a href="/article/881.htm"
title="java 求几个月后的日期" target="_blank">java 求几个月后的日期</a>
<span class="text-muted">darkranger</span>
<a class="tag" taget="_blank" href="/search/calendar/1.htm">calendar</a><a class="tag" taget="_blank" href="/search/getinstance/1.htm">getinstance</a>
<div>Date plandate = planDate.toDate();
SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd");
Calendar cal = Calendar.getInstance();
cal.setTime(plandate);
// 取得三个月后时间
cal.add(Calendar.M</div>
</li>
<li><a href="/article/1008.htm"
title="数据库设计的三大范式（通俗易懂）" target="_blank">数据库设计的三大范式（通俗易懂）</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93%E5%A4%8D%E4%B9%A0/1.htm">数据库复习</a>
<div>关系数据库中的关系必须满足一定的要求。满足不同程度要求的为不同范式。数据库的设计范式是数据库设计所需要满足的规范。只有理解数据库的设计范式，才能设计出高效率、优雅的数据库，否则可能会设计出错误的数据库.
目前，主要有六种范式：第一范式、第二范式、第三范式、BC范式、第四范式和第五范式。满足最低要求的叫第一范式，简称1NF。在第一范式基础上进一步满足一些要求的为第二范式，简称2NF。其余依此类推。</div>
</li>
<li><a href="/article/1135.htm"
title="想学工作流怎么入手" target="_blank">想学工作流怎么入手</a>
<span class="text-muted">atongyeye</span>
<a class="tag" taget="_blank" href="/search/jbpm/1.htm">jbpm</a>
<div>工作流在工作中变得越来越重要，很多朋友想学工作流却不知如何入手。 很多朋友习惯性的这看一点，那了解一点，既不系统，也容易半途而废。好比学武功，最好的办法是有一本武功秘籍。研究明白，则犹如打通任督二脉。
系统学习工作流，很重要的一本书《JBPM工作流开发指南》。
本人苦苦学习两个月，基本上可以解决大部分流程问题。整理一下学习思路，有兴趣的朋友可以参考下。
1 首先要</div>
</li>
<li><a href="/article/1262.htm"
title="Context和SQLiteOpenHelper创建数据库" target="_blank">Context和SQLiteOpenHelper创建数据库</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/Context%E5%88%9B%E5%BB%BA%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">Context创建数据库</a>
<div> 一直以为安卓数据库的创建就是使用SQLiteOpenHelper创建,但是最近在android的一本书上看到了Context也可以创建数据库,下面我们一起分析这两种方式创建数据库的方式和区别,重点在SQLiteOpenHelper
一:SQLiteOpenHelper创建数据库:
1,SQLi</div>
</li>
<li><a href="/article/1389.htm"
title="浅谈group by和distinct" target="_blank">浅谈group by和distinct</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</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/group+by/1.htm">group by</a><a class="tag" taget="_blank" href="/search/distinct/1.htm">distinct</a>
<div> group by和distinct只了去重意义一样，但是group by应用范围更广泛些，如分组汇总或者从聚合函数里筛选数据等。
譬如：统计每id数并且只显示数大于3
select id ,count(id) from ta</div>
</li>
<li><a href="/article/1516.htm"
title="vi opertion" target="_blank">vi opertion</a>
<span class="text-muted">征客丶</span>
<a class="tag" taget="_blank" href="/search/mac/1.htm">mac</a><a class="tag" taget="_blank" href="/search/opration/1.htm">opration</a><a class="tag" taget="_blank" href="/search/vi/1.htm">vi</a>
<div>进入 command mode （命令行模式）
按 esc 键
再按 shift + 冒号
注：以下命令中 带 $ 【在命令行模式下进行】，不带 $ 【在非命令行模式下进行】
一、文件操作
1.1、强制退出不保存
$ q!
1.2、保存
$ w
1.3、保存并退出
$ wq
1.4、刷新或重新加载已打开的文件
$ e
二、光标移动
2.1、跳到指定行
数字</div>
</li>
<li><a href="/article/1643.htm"
title="【Spark十四】深入Spark RDD第三部分RDD基本API" target="_blank">【Spark十四】深入Spark RDD第三部分RDD基本API</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a>
<div>
对于K/V类型的RDD,如下操作是什么含义？
val rdd = sc.parallelize(List(("A",3),("C",6),("A",1),("B",5))
rdd.reduceByKey(_+_).collect
reduceByKey在这里的操作，是把</div>
</li>
<li><a href="/article/1770.htm"
title="java类加载机制" target="_blank">java类加载机制</a>
<span class="text-muted">BlueSkator</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%99%9A%E6%8B%9F%E6%9C%BA/1.htm">虚拟机</a>
<div>java类加载机制
1.java类加载器的树状结构
引导类加载器
^
|
扩展类加载器
^
|
系统类加载器
java使用代理模式来完成类加载，java的类加载器也有类似于继承的关系，引导类是最顶层的加载器，它是所有类的根加载器，它负责加载java核心库。当一个类加载器接到装载类到虚拟机的请求时，通常会代理给父类加载器，若已经是根加载器了，就自己完成加载。
虚拟机区分一个Cla</div>
</li>
<li><a href="/article/1897.htm"
title="动态添加文本框" target="_blank">动态添加文本框</a>
<span class="text-muted">BreakingBad</span>
<a class="tag" taget="_blank" href="/search/%E6%96%87%E6%9C%AC%E6%A1%86/1.htm">文本框</a>
<div> <script> var num=1; function AddInput() { var str=""; str+="<input </div>
</li>
<li><a href="/article/2024.htm"
title="读《研磨设计模式》-代码笔记-单例模式" target="_blank">读《研磨设计模式》-代码笔记-单例模式</a>
<span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a>
<div>声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/
public class Singleton {
}
/*
* 懒汉模式。注意，getInstance如果在多线程环境中调用，需要加上synchronized，否则存在线程不安全问题
*/
class LazySingleton</div>
</li>
<li><a href="/article/2151.htm"
title="iOS应用打包发布常见问题" target="_blank">iOS应用打包发布常见问题</a>
<span class="text-muted">chenhbc</span>
<a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/iOS%E5%8F%91%E5%B8%83/1.htm">iOS发布</a><a class="tag" taget="_blank" href="/search/iOS%E4%B8%8A%E4%BC%A0/1.htm">iOS上传</a><a class="tag" taget="_blank" href="/search/iOS%E6%89%93%E5%8C%85/1.htm">iOS打包</a>
<div>这个月公司安排我一个人做iOS客户端开发，由于急着用，我先发布一个版本，由于第一次发布iOS应用，期间出了不少问题，记录于此。
1、使用Application Loader 发布时报错：Communication error.please use diagnostic mode to check connectivity.you need to have outbound acc</div>
</li>
<li><a href="/article/2278.htm"
title="工作流复杂拓扑结构处理新思路" target="_blank">工作流复杂拓扑结构处理新思路</a>
<span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E4%BC%81%E4%B8%9A%E5%BA%94%E7%94%A8/1.htm">企业应用</a><a class="tag" taget="_blank" href="/search/OO/1.htm">OO</a>
<div> 我们走的设计路线和国外的产品不太一样，不一样在哪里呢？ 国外的流程的设计思路是通过事先定义一整套规则(类似XPDL)来约束和控制流程图的复杂度(我对国外的产品了解不够多，仅仅是在有限的了解程度上面提出这样的看法)，从而避免在流程引擎中处理这些复杂的图的问题，而我们却没有通过事先定义这样的复杂的规则来约束和降低用户自定义流程图的灵活性，这样一来，在引擎和流程流转控制这一个层面就会遇到很</div>
</li>
<li><a href="/article/2405.htm"
title="oracle 11g新特性Flashback data archive" target="_blank">oracle 11g新特性Flashback data archive</a>
<span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a>
<div>1. 什么是flashback data archive
Flashback data archive是oracle 11g中引入的一个新特性。Flashback archive是一个新的数据库对象，用于存储一个或多表的历史数据。Flashback archive是一个逻辑对象，概念上类似于表空间。实际上flashback archive可以看作是存储一个或多个表的所有事务变化的逻辑空间。 </div>
</li>
<li><a href="/article/2532.htm"
title="多叉树:2-3-4树" target="_blank">多叉树:2-3-4树</a>
<span class="text-muted">dieslrae</span>
<a class="tag" taget="_blank" href="/search/%E6%A0%91/1.htm">树</a>
<div> 平衡树多叉树,每个节点最多有4个子节点和3个数据项,2,3,4的含义是指一个节点可能含有的子节点的个数,效率比红黑树稍差.一般不允许出现重复关键字值.2-3-4树有以下特征:
1、有一个数据项的节点总是有2个子节点(称为2-节点)
2、有两个数据项的节点总是有3个子节点(称为3-节</div>
</li>
<li><a href="/article/2659.htm"
title="C语言学习七动态分配 malloc的使用" target="_blank">C语言学习七动态分配 malloc的使用</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/language/1.htm">language</a><a class="tag" taget="_blank" href="/search/malloc/1.htm">malloc</a>
<div>/*
2013年3月15日15:16:24
malloc 就memory(内存) allocate(分配)的缩写
本程序没有实际含义，只是理解使用
*/
# include <stdio.h>
# include <malloc.h>
int main(void)
{
int i = 5; //分配了4个字节 静态分配
int * p </div>
</li>
<li><a href="/article/2786.htm"
title="Objective-C编码规范[译]" target="_blank">Objective-C编码规范[译]</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E8%A7%84%E8%8C%83/1.htm">代码规范</a>
<div>
原文链接 : The official raywenderlich.com Objective-C style guide
原文作者 : raywenderlich.com Team
译文出自 : raywenderlich.com Objective-C编码规范
译者 : Sam Lau
</div>
</li>
<li><a href="/article/2913.htm"
title="0.性能优化-目录" target="_blank">0.性能优化-目录</a>
<span class="text-muted">frank1234</span>
<a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a>
<div>从今天开始笔者陆续发表一些性能测试相关的文章，主要是对自己前段时间学习的总结，由于水平有限，性能测试领域很深，本人理解的也比较浅，欢迎各位大咖批评指正。
主要内容包括：
一、性能测试指标
吞吐量、TPS、响应时间、负载、可扩展性、PV、思考时间
http://frank1234.iteye.com/blog/2180305
二、性能测试策略
生产环境相同 基准测试 预热等
htt</div>
</li>
<li><a href="/article/3040.htm"
title="Java父类取得子类传递的泛型参数Class类型" target="_blank">Java父类取得子类传递的泛型参数Class类型</a>
<span class="text-muted">happyqing</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%B3%9B%E5%9E%8B/1.htm">泛型</a><a class="tag" taget="_blank" href="/search/%E7%88%B6%E7%B1%BB/1.htm">父类</a><a class="tag" taget="_blank" href="/search/%E5%AD%90%E7%B1%BB/1.htm">子类</a><a class="tag" taget="_blank" href="/search/Class/1.htm">Class</a>
<div>
import java.lang.reflect.ParameterizedType;
import java.lang.reflect.Type;
import org.junit.Test;
abstract class BaseDao<T> {
public void getType() {
//Class<E> clazz =</div>
</li>
<li><a href="/article/3167.htm"
title="跟我学SpringMVC目录汇总贴、PDF下载、源码下载" target="_blank">跟我学SpringMVC目录汇总贴、PDF下载、源码下载</a>
<span class="text-muted">jinnianshilongnian</span>
<a class="tag" taget="_blank" href="/search/springMVC/1.htm">springMVC</a>
<div>
----广告--------------------------------------------------------------
网站核心商详页开发
掌握Java技术，掌握并发/异步工具使用，熟悉spring、ibatis框架；
掌握数据库技术，表设计和索引优化，分库分表/读写分离；
了解缓存技术，熟练使用如Redis/Memcached等主流技术；
了解Ngin</div>
</li>
<li><a href="/article/3294.htm"
title="the HTTP rewrite module requires the PCRE library" target="_blank">the HTTP rewrite module requires the PCRE library</a>
<span class="text-muted">流浪鱼</span>
<a class="tag" taget="_blank" href="/search/rewrite/1.htm">rewrite</a>
<div>./configure: error: the HTTP rewrite module requires the PCRE library.
模块依赖性Nginx需要依赖下面3个包
1. gzip 模块需要 zlib 库 ( 下载: http://www.zlib.net/ )
2. rewrite 模块需要 pcre 库 ( 下载: http://www.pcre.org/ )
3. s</div>
</li>
<li><a href="/article/3421.htm"
title="第12章 Ajax（中）" target="_blank">第12章 Ajax（中）</a>
<span class="text-muted">onestopweb</span>
<a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</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/3548.htm"
title="Optimize query with Query Stripping in Web Intelligence" target="_blank">Optimize query with Query Stripping in Web Intelligence</a>
<span class="text-muted">blueoxygen</span>
<a class="tag" taget="_blank" href="/search/BO/1.htm">BO</a>
<div>http://wiki.sdn.sap.com/wiki/display/BOBJ/Optimize+query+with+Query+Stripping+in+Web+Intelligence
and a very straightfoward video
http://www.sdn.sap.com/irj/scn/events?rid=/library/uuid/40ec3a0c-936</div>
</li>
<li><a href="/article/3675.htm"
title="Java开发者写SQL时常犯的10个错误" target="_blank">Java开发者写SQL时常犯的10个错误</a>
<span class="text-muted">tomcat_oracle</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a>
<div>1、不用PreparedStatements 有意思的是，在JDBC出现了许多年后的今天，这个错误依然出现在博客、论坛和邮件列表中，即便要记住和理解它是一件很简单的事。开发者不使用PreparedStatements的原因可能有如下几个： 他们对PreparedStatements不了解 他们认为使用PreparedStatements太慢了 他们认为写Prepar</div>
</li>
<li><a href="/article/3802.htm"
title="世纪互联与结盟有感" target="_blank">世纪互联与结盟有感</a>
<span class="text-muted">阿尔萨斯</span>
<div> 10月10日，世纪互联与（Foxcon）签约成立合资公司，有感。
全球电子制造业巨头（全球500强企业）与世纪互联共同看好IDC、云计算等业务在中国的增长空间，双方迅速果断出手，在资本层面上达成合作，此举体现了全球电子制造业巨头对世纪互联IDC业务的欣赏与信任，另一方面反映出世纪互联目前良好的运营状况与广阔的发展前景。
众所周知，精于电子产品制造（世界第一），对于世纪互联而言，能够与结盟</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>