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/1903641836078034944.htm"
title="github上传文件方法格式" target="_blank">github上传文件方法格式</a>
<span class="text-muted">镜宇秋霖丶</span>
<a class="tag" taget="_blank" href="/search/github/1.htm">github</a><a class="tag" taget="_blank" href="/search/github/1.htm">github</a>
<div>echo"#myHtmlFirst1.0">>README.mdgitinitgitaddREADME.md(这条指令改成下面的)gitadd.gitcommit-m"firstcommit"gitbranch-Mmaingitremoteaddorigingit@github.com:xxxxxxxxx/myHtmlFirst1.0.gitgitpush-uoriginmain以上是第一次上传以</div>
</li>
<li><a href="/article/1903635905923575808.htm"
title="HTML语言的贪心算法" target="_blank">HTML语言的贪心算法</a>
<span class="text-muted">宇瞳月</span>
<a class="tag" taget="_blank" href="/search/%E5%8C%85%E7%BD%97%E4%B8%87%E8%B1%A1/1.htm">包罗万象</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
<div>HTML语言的贪心算法：理论与实践引言在编程和算法研究中，贪心算法是一种广泛应用的解决问题的方法。它通过对每一阶段选择最优解的方式来构建整个问题的解决方案。贪心算法不一定能在所有情况下得到最优解，但在许多实际问题中，它能够提供一个足够好的近似解。本文将探讨贪心算法的基本概念、典型应用、优缺点，并结合HTML语言的特点，提出一些具体的实现示例和思考。一、贪心算法的基本概念贪心算法是一种求解最优化问题</div>
</li>
<li><a href="/article/1903596056646578176.htm"
title="HTML5实现左右滑动数据变化" target="_blank">HTML5实现左右滑动数据变化</a>
<span class="text-muted">ice_junjun</span>
<a class="tag" taget="_blank" href="/search/HTML/1.htm">HTML</a><a class="tag" taget="_blank" href="/search/%E5%B7%A6%E5%8F%B3%E6%BB%91%E5%8A%A8/1.htm">左右滑动</a>
<div>在HTML中怎么样实现左右滑动？代码附上Bootstrap实例-下拉菜单（Dropdowns）-->-->欢迎登陆页面！这是一个超大屏幕（Jumbotron）的实例。学习更多-->响应式表格布局产品付款日期状态产品123/11/2013待发货产品210/11/2013发货中产品320/10/2013待确认产品420/10/2013已退货产品123/11/2013待发货产品210/11/2013发货</div>
</li>
<li><a href="/article/1903584828356358144.htm"
title="JavaScript常用函数测试demo" target="_blank">JavaScript常用函数测试demo</a>
<span class="text-muted">sunny05296</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
<div>JavaScript常用函数测试demovimJavaScriptTestDemo.html内容如下：JavaScriptfunctionstestdemoEnterF12toviewtheconsoleoutputmessageofconsole.log()EnterF5torefresh//JavaScriptint2string/string2inttestfunctiontest01(){</div>
</li>
<li><a href="/article/1903570180479447040.htm"
title="Maxwell 架构" target="_blank">Maxwell 架构</a>
<span class="text-muted">QTVLC</span>
<a class="tag" taget="_blank" href="/search/nvidia/1.htm">nvidia</a>
<div>http://digi.163.com/14/0218/23/9LDCTFON00162DSP.html【IT168评测】随着一句“娘娘，封神啦（宝鸡口音）”，中国的观众迅速认识到了两个极其出彩的相声演员。如果说关键词是引发关注的最大因素，那么提到“GeForce”，各位想到的又是什么？相信不少读者第一次真正认识到NVIDIA（以下简称NV）这个公司还是从一款叫GeForce256的显卡开始，当年</div>
</li>
<li><a href="/article/1903566523113467904.htm"
title="jmeter中，上传文件的MIME类型" target="_blank">jmeter中，上传文件的MIME类型</a>
<span class="text-muted">小han的日常</span>
<a class="tag" taget="_blank" href="/search/jmeter/1.htm">jmeter</a><a class="tag" taget="_blank" href="/search/jmeter/1.htm">jmeter</a>
<div>text/plain：用于纯文本文件，如.txt文件。text/html：用于HTML文档，即.html文件。application/msword：MicrosoftWord文档，即.doc和.docx文件。image/jpeg：JPEG图像，对应.jpg和.jpeg文件。image/png：PNG图像，对应.png文件。image/gif：GIF图像，对应.gif文件。</div>
</li>
<li><a href="/article/1903563110808088576.htm"
title="通过Bokeh实现大规模数据可视化的最佳实践【从静态图表到实时更新】" target="_blank">通过Bokeh实现大规模数据可视化的最佳实践【从静态图表到实时更新】</a>
<span class="text-muted">步入烟尘</span>
<a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%E6%8C%87%E5%8D%97/1.htm">算法指南</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">信息可视化</a><a class="tag" taget="_blank" href="/search/Bokeh/1.htm">Bokeh</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>本文已收录于《Python超入门指南全册》本专栏专门针对零基础和需要进阶提升的同学所准备的一套完整教学，从基础到精通不断进阶深入，后续还有实战项目，轻松应对面试，专栏订阅地址：https://blog.csdn.net/mrdeam/category_12647587.html优点：订阅限时19.9付费专栏，私信博主还可进入全栈VIP答疑群，作者优先解答机会（代码指导、远程服务），群里大佬众多可以</div>
</li>
<li><a href="/article/1903562099653668864.htm"
title="轻松帮你搞清楚Python爬虫数据可视化的流程" target="_blank">轻松帮你搞清楚Python爬虫数据可视化的流程</a>
<span class="text-muted">liuhaoran___</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
<div>Python爬虫数据可视化的流程主要是通过网络爬取所需的数据，并利用相关的库将数据分析结果以图形化的方式展示出来，帮助用户更直观地理解数据背后的信息。Python爬虫+数据可视化步骤1.获取目标网站的数据使用`requests`或者`selenium`库从网页上抓取信息。对于动态加载内容的页面可以考虑结合JavaScript渲染引擎。2.解析HTML内容提取有用信息常见工具如BeautifulSo</div>
</li>
<li><a href="/article/1903550490524839936.htm"
title="spring MVC 介绍" target="_blank">spring MVC 介绍</a>
<span class="text-muted">LCY133</span>
<a class="tag" taget="_blank" href="/search/spring%E5%90%8E%E7%AB%AF/1.htm">spring后端</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>SpringMVC是Spring框架中用于构建Web应用的核心模块，基于MVC设计模式（Model-View-Controller）实现。以下是其核心概念的整理：1.MVC设计模式•Model（模型）：封装业务数据和业务逻辑（如POJO对象、Service层）。•View（视图）：负责数据展示（如JSP、Thymeleaf、HTML）。•Controller（控制器）：接收请求，调用业务逻辑，返回</div>
</li>
<li><a href="/article/1903547590134263808.htm"
title="详细的HTML网页错误状态码" target="_blank">详细的HTML网页错误状态码</a>
<span class="text-muted">丶大黄蜂</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99%E6%9C%8D%E5%8A%A1/1.htm">网站服务</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
<div>重点内容HTTP400-请求无效HTTP401.1-未授权：登录失败HTTP401.2-未授权：服务器配置问题导致登录失败HTTP401.3-ACL禁止访问资源HTTP401.4-未授权：授权被筛选器拒绝HTTP401.5-未授权：ISAPI或CGI授权失败HTTP403-禁止访问HTTP403-对Internet服务管理器的访问仅限于LocalhostHTTP403.1禁止访问：禁止可执行访问H</div>
</li>
<li><a href="/article/1903546580225552384.htm"
title="js在html有几种存在方式,JavaScript输出方式有哪些？" target="_blank">js在html有几种存在方式,JavaScript输出方式有哪些？</a>
<span class="text-muted">王若琳</span>
<a class="tag" taget="_blank" href="/search/js%E5%9C%A8html%E6%9C%89%E5%87%A0%E7%A7%8D%E5%AD%98%E5%9C%A8%E6%96%B9%E5%BC%8F/1.htm">js在html有几种存在方式</a>
<div>JavaScript输出方式有哪些？下面本篇文章给大家介绍一下JavaScript常见的输出方式。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。1.通过弹窗的形式来输出alert(需要输出的内容);alert("helloworld");confirm(需要输出的内容);confirm("你好吗?");prompt(需要输出的内容);prompt("请输入内容：");注意点:如果</div>
</li>
<li><a href="/article/1903546579323777024.htm"
title="判断html标签是否存在,jquery怎么判断标签元素是否存在？" target="_blank">判断html标签是否存在,jquery怎么判断标签元素是否存在？</a>
<span class="text-muted">BugHunter666</span>
<a class="tag" taget="_blank" href="/search/%E5%88%A4%E6%96%ADhtml%E6%A0%87%E7%AD%BE%E6%98%AF%E5%90%A6%E5%AD%98%E5%9C%A8/1.htm">判断html标签是否存在</a>
<div>jquery怎么判断标签元素是否存在？下面本篇文章给大家介绍一下在jquery中判断页面标签元素是否存在的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。jquery判断页面标签元素是否存在在传统的Javascript里，当我们对某个页面元素进行某种操作前，最好先判断这个元素是否存在。原因是对一个不存在的元素进行操作是不允许的。例如：document.getElementBy</div>
</li>
<li><a href="/article/1903545697416835072.htm"
title="静态html 500错误,HTTP-500错误" target="_blank">静态html 500错误,HTTP-500错误</a>
<span class="text-muted">金门走狗</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%99%E6%80%81html/1.htm">静态html</a><a class="tag" taget="_blank" href="/search/500%E9%94%99%E8%AF%AF/1.htm">500错误</a>
<div>http500内部服务器(HTTP-InternalServerError)错误说明IIS服务器无法解析ASP代码，访问一个静态页面试试是否也出现这个问题，如果访问静态页面没问题，那就要分以下几种情况来分析了：①你是否改变过计算机名称。②站点所在的文件目录是否自定义了安全属性。③安装了域控制器后是否调整了域策略。如果是其中的一种情况，请一一将改变的参数设置回来看是否解决问题。如果静态空间也无法访问</div>
</li>
<li><a href="/article/1903536101478428672.htm"
title="下面的html存在什么错误？怎样修改？" target="_blank">下面的html存在什么错误？怎样修改？</a>
<span class="text-muted">2301_79698214</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</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>tr{height:60px;}td,th{width:150px;text-align:center;}functionaddNode(){vartab=document.getElementById("tab");vartr=document.createElement("tr");vartd=document.createElement("td");td.innerHTML="";vartd</div>
</li>
<li><a href="/article/1903500168817340416.htm"
title="负载均衡策略之轮询策略" target="_blank">负载均衡策略之轮询策略</a>
<span class="text-muted">Time-Traveler</span>
<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%E4%B8%8E%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">算法与数据结构</a>
<div>本文转自:https://mozillazg.com/2019/02/load-balancing-strategy-algorithm-weighted-round-robin.html#hidround-robin,尊重原创前言:本文简单介绍一下轮询(RoundRobin)这个负载均衡策略。轮询选择(RoundRobin):轮询选择指的是从已有的后端节点列表中按顺序依次选择一个节点出来提供服务</div>
</li>
<li><a href="/article/1903499412290727936.htm"
title="4（四） Jmeter自动化报表html生成" target="_blank">4（四） Jmeter自动化报表html生成</a>
<span class="text-muted">夜晚打字声</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E5%85%B7/1.htm">工具</a><a class="tag" taget="_blank" href="/search/jmeter/1.htm">jmeter</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">自动化</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a>
<div>从JMeter3.0开始已支持自动生成动态报告，我们可以更容易根据生成的报告来完成我们的性能测试报告。如何生成html测试报告如果未生成结果文件（.jtl）,可运行如下命令生成报告:jmeter-n-ttest.jmx-lresult.jtl-e-o/tmp/ResultReport参数:-n：以非GUI形式运行Jmeter-t：source.jmx脚本路径-l：运行结果保存路径（.jtl）,此文</div>
</li>
<li><a href="/article/1903479994265432064.htm"
title="jquery基础和导航栏" target="_blank">jquery基础和导航栏</a>
<span class="text-muted">声声codeGrandMaster</span>
<a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
<div>jquery基础和导航栏目录1jQuery基础2jQuery事件3jQuery影藏和显示4jQuery滑动5、区块属性6、导航栏1jQuery基础介绍jQuery是一个JavaScript库。jQuery极大地简化了JavaScript编程。jQuery很容易学习。基础语法：$(selector).action()美元符号定义jQuery选择符（selector）“查询"和"查找”HTML元素jQ</div>
</li>
<li><a href="/article/1903429327760977920.htm"
title="HTTP请求过程详解" target="_blank">HTTP请求过程详解</a>
<span class="text-muted">酥暮沐</span>
<a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a>
<div>一、整体流程概述HTTP请求过程从用户输入URL开始，到页面完成渲染结束，主要分为DNS解析、建立连接、发送请求、处理响应、渲染页面、断开连接六个核心阶段。重要：当用户输入URL后，浏览器首先解析域名，通过DNS查询获取服务器IP。接着通过三次握手建立TCP连接，如果是HTTPS还会进行TLS加密协商。然后浏览器发送HTTP请求，服务器处理后返回响应数据。浏览器解析HTML/CSS，构建DOM和渲</div>
</li>
<li><a href="/article/1903411680512110592.htm"
title="html hover作用另外一个对象,css:hover状态改变另一个元素样式的使用" target="_blank">html hover作用另外一个对象,css:hover状态改变另一个元素样式的使用</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/hover%E4%BD%9C%E7%94%A8%E5%8F%A6%E5%A4%96%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1/1.htm">hover作用另外一个对象</a>
<div>效果演示css:hover状态改变另一个元素样式的使用.box{width:150px;height:150px;background-color:#069;line-height:150px;text-align:center;margin:20px0;color:#FFF;}.change{font-size:20px;color:#0cf;}/*情景一：两个是兄弟元素*/.box:hover</div>
</li>
<li><a href="/article/1903408274821148672.htm"
title="单页响应式 图片懒加载HTML页面" target="_blank">单页响应式 图片懒加载HTML页面</a>
<span class="text-muted">Wiktok</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>设计说明响应式设计：使用CSSGrid布局，根据屏幕宽度自动调整色块数量在不同设备上都有良好的显示效果懒加载：使用标签的loading="lazy"属性实现原生懒加载图片在滚动到视口附近时才会加载色块展示：使用随机生成的色块作为内容展示每个色块都有独特的颜色和编号色块有悬停效果和阴影效果分类展示：将色块分为自然风光、城市建筑和抽象艺术三类每类都有独立的标题和网格布局响应式懒加载页面*{margin</div>
</li>
<li><a href="/article/1903404862289276928.htm"
title="CSS实现当鼠标停留在一个元素上时，使得两个元素的样式发生改变" target="_blank">CSS实现当鼠标停留在一个元素上时，使得两个元素的样式发生改变</a>
<span class="text-muted">Lipn</span>
<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/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>这里我们实现一个鼠标停留在input框时，使得input和button两个元素的边框都变颜色首先该元素结构如下，HTML是这样的第一步：当鼠标悬停在input上时，使用css伪类选择器，代码如下：这里空格是后代选择器，:hover是伪类选择器.testinput:hover{}第二步：当鼠标悬停在input上时，选中button元素：从html可以看到input和button属于兄弟关系，相邻兄弟</div>
</li>
<li><a href="/article/1903395533653864448.htm"
title="Spring系列学习之Spring Messaging消息支持" target="_blank">Spring系列学习之Spring Messaging消息支持</a>
<span class="text-muted">m0_74825488</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/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/linq/1.htm">linq</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
<div>英文原文：https://docs.spring.io/spring-boot/docs/current/reference/html/boot-features-messaging.html目录JMSActiveMQ支持Artemis支持使用JNDIConnectionFactory发送消息接收消息AMQPRabbitMQ支持发送消息接收消息ApacheKafka支持发送消息接收消息Kafka流</div>
</li>
<li><a href="/article/1903379388280401920.htm"
title="HTML5前端第七章节" target="_blank">HTML5前端第七章节</a>
<span class="text-muted">NaZiMeKiY</span>
<a class="tag" taget="_blank" href="/search/HTML5/1.htm">HTML5</a><a class="tag" taget="_blank" href="/search/1024%E7%A8%8B%E5%BA%8F%E5%91%98%E8%8A%82/1.htm">1024程序员节</a>
<div>本章节为前端网页页面实战，包含我们之前所学的全部内容一.创建项目目录1.网站根目录：网站根目录指的是存放网站的第一层文件夹，内部包含当前网站的所有素材，包含HTML，CSS，需要的素材图片等等2.根目录之下的文件夹（1）.images文件夹：存放固定使用的图片素材（2）.uploads文件夹：存放非固定使用的图片素材（3）.CSS文件夹：存放CSS文件（使用link标签引入）在CSS文件夹中又分为</div>
</li>
<li><a href="/article/1903357455702749184.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/%E8%87%AA%E5%8A%A8%E5%8C%96/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是一种非常流行的编程语言，也是许多接口自动化测试框架的首选语言。下面是一个简单的接口自动化测试框架的思路：1.安装必要的库和工具：在Python中，我们可以使用requests库来发送HTTP请求，使用unittest库来编写测试用例，使用HTMLTestRunner库来生成测试报告。此外，我们还需要安装一个代码编辑器，如PyCharm或VSCode。2.创建测试用例：编写测试用例是接</div>
</li>
<li><a href="/article/1903354055103672320.htm"
title="前端小食堂 | Day17 - 前端安全の金钟罩" target="_blank">前端小食堂 | Day17 - 前端安全の金钟罩</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/%E5%AE%89%E5%85%A8/1.htm">安全</a><a class="tag" taget="_blank" href="/search/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a>
<div>️今日盾牌：XSS/CSRF攻防全解析1.XSS防御の三重结界//危险操作：直接渲染未过滤内容document.getElementById('content').innerHTML=userInput;//✅安全姿势一：文本转义constescapeHTML=(str)=>{constmap={'&':'&','':'>','"':'"',"'":'''};ret</div>
</li>
<li><a href="/article/1903326671696621568.htm"
title="H5 毛玻璃个人简约引导页源码" target="_blank">H5 毛玻璃个人简约引导页源码</a>
<span class="text-muted">caslncas</span>
<a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81/1.htm">源码</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
<div>源码名称：毛玻璃个人简约引导页源码源码介绍：一款毛玻璃引导页源码，可以大量添加旗下站点和友情链接。手机端、电脑端背景自适应。需求环境：H5下载地址：https://www.changyouzuhao.cn/11921.html</div>
</li>
<li><a href="/article/1903313048848887808.htm"
title="VUE-Element-UI：select-tree" target="_blank">VUE-Element-UI：select-tree</a>
<span class="text-muted">johnrui</span>
<a class="tag" taget="_blank" href="/search/FrontEnd/1.htm">FrontEnd</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
<div>一、概述本文主要是在Element-UI+VUE框架下，利用el-select、el-tree组件实现了下拉框多选、回显的效果，如下图：二、实例代码1.HTML代码2.JS代码varvm=newVue({el:'#app',data:{mineStatus:"",mineStatusValue:[],remarksItemCheckedList:[],//回显数据["A","B"]remarksI</div>
</li>
<li><a href="/article/1903306109549080576.htm"
title="浏览器渲染流程" target="_blank">浏览器渲染流程</a>
<span class="text-muted">前端岳大宝</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A0%B8%E5%BF%83%E7%9F%A5%E8%AF%86%E6%80%BB%E7%BB%93/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/javascript/1.htm">javascript</a>
<div>以下是关于浏览器渲染流程的系统梳理，涵盖基础原理、关键阶段、性能优化及进阶知识，帮助我们深入理解现代浏览器如何将代码转换为用户可见的像素：一、核心渲染流程（CriticalRenderingPath）浏览器渲染流程分为六个核心阶段，决定页面首次加载和更新的性能：1.构建DOM（DocumentObjectModel）过程：解析HTML生成DOM树（逐步解析，遇到可能阻塞）。阻塞因素：未添加asyn</div>
</li>
<li><a href="/article/1903301826799792128.htm"
title="网页版 123 分身数字人源码搭建，OEM贴牌" target="_blank">网页版 123 分身数字人源码搭建，OEM贴牌</a>
<span class="text-muted">18538162800=余</span>
<a class="tag" taget="_blank" href="/search/%E9%9F%B3%E8%A7%86%E9%A2%91/1.htm">音视频</a><a class="tag" taget="_blank" href="/search/%E7%9F%A9%E9%98%B5/1.htm">矩阵</a>
<div>在数字化时代的浪潮下，数字人技术蓬勃发展，网页版123分身数字人源码搭建为众多开发者和企业提供了实现个性化数字人应用的可能。本文将深入探讨其技术开发过程，从底层架构到关键技术实现，全方位解析如何构建一个功能强大的网页版数字人系统。技术架构设计前端展示层HTML5与CSS3：构建数字人的可视化界面，实现流畅的动画效果和交互元素。利用CSS3的过渡、动画属性，为数字人的动作、表情变化提供细腻的视觉呈现</div>
</li>
<li><a href="/article/1903290731443843072.htm"
title="探索HTML5 Canvas的无限可能：一个丰富多彩的开源项目" target="_blank">探索HTML5 Canvas的无限可能：一个丰富多彩的开源项目</a>
<span class="text-muted">黎情卉Desired</span>
<div>探索HTML5Canvas的无限可能：一个丰富多彩的开源项目去发现同类优质开源项目:https://gitcode.com/在这个充满活力的数字时代，JavaScript、HTML和CSS已经成为构建互动式网页体验的核心技术。今天，我们向您推荐一个独特而有趣的开源项目，它将这些技术结合在一起，创造出一系列生动活泼的可视化元素，包括时钟、计时器、地图、国际象棋、温度计等，让您在学习和实践中感受HTM</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>