云崖先生

HTML学习

B/S架构介绍

　　在开始介绍HTML之前，我们得先知道一个Browser/Server端架构，也就是B/S架构，B/S架构是一种特殊的C/S架构，对于B/S架构来说，它的Client端其实就变成了Browser端，也就是浏览器。

　　我们整个上网的过程其实就是一个不断下载的过程，输入网址意味着就是输入Server端的IP地址，而Browser会自动为你添加80port（端口号），这些其实都是一种叫HTTP协议的应用层协议规定好了的，在Server端接收到请求后就会返回一些文件数据，此时通过Browser端的渲染，那么久会呈现出我们十分熟悉的网页。

　　通过点击某一链接又会重复上一次的步骤，所以整个上网的过程就是浏览器与服务器在不断的进行数据交互的一个过程，而浏览器本身其实就是一个解释器，它会将服务器返回的文件数据进行解释并渲染一遍。

　　我们这里也可以通过socket来搭建出一个非常简单的服务器，来与浏览器进行交互。

from socket import *

def run():
    server = socket(AF_INET,SOCK_STREAM) # 传输层基于TCP协议
    server.bind(("127.0.0.1",8080))
    server.listen(5)

    while 1:
        conn,addr = server.accept()
        data = conn.recv(1024)
        print(data)  # 浏览器中传来的信息
        # 必须HTTP协议发送内容才能被Browser所识别
        conn.sendall(bytes("HTTP/1.1 201 OK \r\n\r\n","utf8"))
        # 返回的内容
        conn.sendall(bytes("Hello,World!","utf8"))
        conn.close()

if __name__ == '__main__':
    run()

　　可以看到，上图我们的Server端返回了2条数据，一条是HTTP协议的返回头信息，一条是返回体信息。在返回体中我们写了一条HTML代码，最终这条HTML代码就被Browser端渲染了出来。

　　那么这样做其实是有问题的，我们应该是将HTML代码书写进一个文本中，当Browser端需要的时候再通过文件读取的方式读出字节，最后Server端通过TCP协议流式的将代码发送给Browser端，再由Browser端进行渲染。

HTML历史

　　htyper text markup language 即超文本标记语言

　　超文本: 就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

　　标记语言: 标记（标签）构成的语言.

　　HTML最早诞生于1990年，由物理学家蒂姆·伯纳斯-李所创建，在1989年的时候蒂姆·伯纳斯-李就曾在一份备忘录中提出一个基于互联网的超文本系统这样的概念，并且在1990年规定出了HTML并在同年写出了浏览器与软件。

版本	年份
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

HTML文档树

　　我们拿一段最简单的HTML代码举例，先不管写的是什么，先来看看它的结构。


DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>

<body>
    <div>
        <h1>hello，world!h1>
    div>
body>
html>

　　HTML中注释为，你可以使用CTRL+/来实现。

　　通过观察上面的这一小段代码，可以看出一个标准的HTML文档内容至少包含三部分。分别是最外层的标签，还有标签与标签。而我们最主要的内容就是在标签中进行编辑。

　　他其实就是一个树状结构，如下：

标签相关介绍

　　我们来看一下上面的这一小段HTML代码，里面有着各种各样的标签，标签具有以下特征：

　　1.由一对儿尖括号包裹的单词构成。例如:。所有的标签都不能以数字开头。

　　2.标签不区分大小写，如:或均可，但是为了可读性更推荐使用小写。

　　3.标签分为闭合标签与自闭合标签，闭合标签必须有开始标签与结束标签，如:与就是属于闭合标签，而就是属于自闭和标签。

　　4.标签支持嵌套，但是不能交叉嵌套，如：

　　除了标签本体外，我们还可以看见上图HTML代码中的标签还包含了一些属性，如，学习HTML就是学习标签，学习标签一定要贯穿着整个属性来学习。

　　1.属性通常是以键值对形式出现的. 例如 gender="male"

　　2.属性只能出现在开始标签或自闭和标签中.

　　3.属性名字全部小写. 属性值必须使用双引号或单引号包裹例如gender="male"。

　　4.如果属性值和属性名完全一样.直接写属性名即可. 例如 readonly。

　　另外，如果我们是使用自闭和标签，比如，我们在设置完属性后一般会给它添加上一条正斜杠，如。

!DOCTYPE HTML 文档声明

　　早期时候W3C标准没有出台时，各个浏览器对页面的渲染均采用不同的方法，这样会产生差异化。后来W3C标准出现后浏览器都开始采纳了这套标准，所以此标签的作用便是使用标准模式，如果不添加此标签代表使用浏览器自带的模式，也被称为怪异模式，因此后面的学习中一定要将它加上。

　　怪异模式：BackCompat，浏览器使用自己的解析标准进行页面渲染

　　标准模式：CSS1Comapt，浏览器采用W3C的解析标准进行页面渲染

head 头部标签

　　该标签的作用是专门提供一下网页的配置信息，如网页的标题，检索内容，解码格式等等，它里面包含了如下常用标签:

<head>标签中所包含的常用标签
标签名称	功能描述
<title>	指定整个网页的标题，在浏览器最上方显示。
<meta>	提供有关页面的基本信息
<link>	定义文档与外部资源的关系。
<style>	定义内部样式表与网页的关系

　　好了，那么接下来我们看看每个标签的详细使用与属性。

meta 标签

　　该元素可提供有关页面的原信息（mata-information）,针对搜索引擎和更新频度的描述和关键词。

　　标签位于文档的头部，不包含任何内容。

　　提供的信息是用户不可见的。标签的组成：标签共有两个属性，它们分别是http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。

http-equiv属性

　　它用来向浏览器传达一些有用的信息，帮助浏览器正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。


<meta http-equiv="refresh" content="2;URL=http://www.google.com">

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<meta http-equiv="X-UA-Compatible" content="IE-EmulateIE7">

　　，代表两秒后该页面刷新跳转到谷歌，常见于色情网站 = = 如果不指定则不跳转页面。

　　，请求头信息，可简写为。

　　，兼容IE7的标准，改成几兼容几，前提是在IE浏览器上用。由历史原因造成，告诉IE浏览器以最高级模式进行渲染。

name属性

　　主要用于页面的关键字和描述，是写给搜索引擎看的，关键字可以有多个用 ,号隔开，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。


<meta name="keywords" content="...">

<meta name="Description" content="...">

<meta name="viewport" content="width=device-width,initial-scale=1">

title 标签

</code>标签可以设置网页的标题名称。 <a href="http://img.e-com-net.com/image/info8/c927b9cb2ec74db69f8d014576770ee2.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c927b9cb2ec74db69f8d014576770ee2.jpg" alt="HTML学习_第6张图片" width="650" height="350" style="border:1px solid black;"></a> <h3 class="md-end-block md-heading">link 标签</h3> <div class="md-hr md-end-block"> <hr> </div> 　　<code><link></code>标签一般都是用于引入一些资源。如网页的缩略图，网页所需要的css文件，js文件等等。它有两个重要的属性，<code>ref</code>与<code>href</code>。 　　ref属性 　　　　一般用于表示资源的类型，如图标文件<code>icon</code>，css文件<code>stylesheet</code>等等。 　　href属性 　　　　表示需要链接的资源地址。 　　<code><link rel="icon" href="http://5b0988e595225.cdn.sohucs.com/images/20180418/5b68cd1128d44c64af8234b43f57b233.jpeg"></code> <a href="http://img.e-com-net.com/image/info8/f967d25ef40b4ebc8be5fbc20d765cd3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f967d25ef40b4ebc8be5fbc20d765cd3.jpg" alt="HTML学习_第7张图片" width="178" height="226" style="border:1px solid black;"></a> <a href="http://img.e-com-net.com/image/info8/729930f4c1dd4f4a932f6b89d7893805.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/729930f4c1dd4f4a932f6b89d7893805.jpg" alt="HTML学习_第8张图片" width="650" height="350" style="border:1px solid black;"></a> <h3 class="md-end-block md-heading">script 标签</h3> <div class="md-hr md-end-block"> <hr> </div> 　　<code><script></code>标签是用于引入js文件，这个一般不会将它放在<code><head></code>标签中，但是也会有人这么做。它有一个属性<code>src</code>，即引入的js文件链接地址。 　　<code><script src="xxx"></script></code> <h2 class="md-end-block md-heading">body 主体标签</h2> 　　该标签的作用是提供给用户预览的内容区域，你可以在<code><body></code>标签中写上如下的常用标签以及特殊符号来构建你的网页： <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><body>标签中所包含的常用标签 </th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>标签名称</td> <td>功能描述</td> <td>display</td> </tr> <tr class="md-end-block"> <td colspan="3">字体相关 </td> </tr> <tr class="md-end-block"> <td><font></td> <td>规定文本的字体、字体尺寸、字体颜色。不建议使用</td> <td>inline</td> </tr> <tr class="md-end-block"> <td><hn></td> <td><code>n</code>的取值范围是1~6; 从大到小. 用来表示标题.<code>h</code>系列独占一行</td> <td>block</td> </tr> <tr class="md-end-block"> <td><b></td> <td>文字加粗</td> <td>inline</td> </tr> <tr class="md-end-block"> <td><strong></td> <td>文字加粗</td> <td>inline</td> </tr> <tr class="md-end-block"> <td><i></td> <td>文字变斜体</td> <td>inline</td> </tr> <tr class="md-end-block"> <td><em></td> <td>文字变斜体</td> <td>inline</td> </tr> <tr class="md-end-block"> <td><u></td> <td>文字加入下划线</td> <td>inline</td> </tr> <tr class="md-end-block"> <td><s></td> <td>文字加入删除线</td> <td>inline</td> </tr> <tr class="md-end-block"> <td><del></td> <td>文字加入删除线</td> <td>inline</td> </tr> <tr class="md-end-block"> <td><strike></td> <td>文字加入删除线，H5不建议使用</td> <td>inline</td> </tr> <tr class="md-end-block"> <td><sup></td> <td>上角标</td> <td>inline</td> </tr> <tr class="md-end-block"> <td><sub></td> <td>下角标</td> <td>inline</td> </tr> <tr class="md-end-block"> <td colspan="3">排版相关 </td> </tr> <tr class="md-end-block"> <td><div></td> <td>分割标签，布局使用</td> <td>block</td> </tr> <tr class="md-end-block"> <td><span></td> <td>用来组合文档中的行内元素，与<code><div></code>标签类似</td> <td>inline</td> </tr> <tr class="md-end-block"> <td><br></td> <td>换行</td> <td>inline</td> </tr> <tr class="md-end-block"> <td><p></td> <td>换行</td> <td>block</td> </tr> <tr class="md-end-block"> <td><hr></td> <td>水平线，一条很细的横线</td> <td>inline</td> </tr> <tr class="md-end-block"> <td><center></td> <td>居中，H5不建议使用</td> <td>block</td> </tr> <tr class="md-end-block"> <td><pre></td> <td>预格式化，H5不建议使用</td> <td>block</td> </tr> <tr class="md-end-block"> <td colspan="3">列表相关 </td> </tr> <tr class="md-end-block"> <td><ul>系列</td> <td>用于定义无序列表。</td> <td>block</td> </tr> <tr class="md-end-block"> <td><ol>系列</td> <td>用于定义有序列表。</td> <td>block</td> </tr> <tr class="md-end-block"> <td><dl>系列</td> <td>用于定义自定义列表。</td> <td>block</td> </tr> <tr class="md-end-block"> <td colspan="3">表单相关 </td> </tr> <tr class="md-end-block"> <td><form>系列</td> <td>用于创建供用户输入的 HTML 表单。</td> <td>block</td> </tr> <tr class="md-end-block"> <td colspan="3">表格相关 </td> </tr> <tr class="md-end-block"> <td><table>系列</td> <td>定义 HTML 表格</td> <td>block</td> </tr> <tr class="md-end-block"> <td colspan="3">超链接 </td> </tr> <tr class="md-end-block"> <td><a></td> <td>定义超链接，用于从一个页面链接到另一个页面。</td> <td>inline</td> </tr> <tr class="md-end-block"> <td colspan="3">图像资源 </td> </tr> <tr class="md-end-block"> <td><img></td> <td>定义 HTML 页面中的图像。</td> <td>inline-block</td> </tr> <tr class="md-end-block"> <td colspan="3">内联框架 </td> </tr> <tr class="md-end-block"> <td><iframe></td> <td>规定一个内联框架。</td> <td>inline</td> </tr> </tbody> </table> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="2"><body>标签中所包含的常用特殊字符 </th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>特殊字符</td> <td>含义</td> </tr> <tr class="md-end-block"> <td>&nbsp;</td> <td>空格</td> </tr> <tr class="md-end-block"> <td>&lt;</td> <td>小于号 <code><</code></td> </tr> <tr class="md-end-block"> <td>&gt;</td> <td>大于号 <code>></code></td> </tr> <tr class="md-end-block"> <td>&quot;</td> <td>双引号 <code>''</code></td> </tr> <tr class="md-end-block"> <td>&copy;</td> <td>圆圈c ©</td> </tr> <tr class="md-end-block"> <td>&reg;</td> <td>圆圈r ®</td> </tr> <tr class="md-end-block"> <td>&trade;</td> <td>商标<code>™</code></td> </tr> <tr class="md-end-block"> <td>&amp;</td> <td>符号<code>&</code></td> </tr> </tbody> </table> <h3 class="md-end-block md-heading">内联标签与块级标签</h3> <div class="md-hr md-end-block"> <hr> </div> 　　上面表格中，有个display列，其中<code>block</code>为块级标签，<code>inline</code>为内联标签。 <blockquote> 　　内联标签的特点： 　　　　1.和其他元素都在一行上 　　　　2.不可设置宽高 　　　　3.宽度就是它的文字或图片的宽度，不可改变 　　　　4.内联元素只能容纳文本或者其他内联元素 　　特殊的2个内联标签： 　　　　<code><img></code>，<code><input></code>可设置宽高，这是2个特殊的内联标签，所以被标为<code>inline-block</code>，是指能设置宽高的内联标签，也被称为内联块级标签。 　　块级标签的特点： 　　　　1.总是在新行上开始； 　　　　2.可设置宽高 　　　　3.宽度缺省是它的容器的100%，除非设定一个宽度。 　　　　4.它可以容纳内联元素和其他块元素 　　块级元素的嵌套规则： 　　　　1.块级元素可以包含内联元素或者某些块级元素但内联元素不可以包含块级元素，它们只能包含内联元素 　　　　2.有几个特殊的块级元素只能包含内联元素，不能包含块级元素如<code><h1-6></code>，<code><dt></code>，<code></code> 　　　　3.<code><li></code>内可以包含<code><div></code> 　　　　4.块级元素与块级元素并列，内联元素与内联元素并列 </blockquote> <h3 class="md-end-block md-heading">两个重要的通用属性</h3> <div class="md-hr md-end-block"> <hr> </div> 　　所有标签都可以设置两个非常重要的通用属性，他们分别是<code>id</code>与<code>class</code>。 <blockquote> 　　<code>id</code>是HTML4.0后加入的，此前都是<code>name</code>，<code>id</code> 在当前HTML 文档中必须是唯一的。 　　<code>class</code>的作用为规定元素的一个或多个类名（引用样式表中的类）。<code>class</code>并不具有唯一性。 　　建议：<code>class</code>的命名用 <code>-</code> 来链接，而<code>id</code>的命名用 <code>_</code> 来链接。 </blockquote> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div class="header-menu"> 头部菜单 </div> <div class="left-menu"> 左侧菜单 </div> <div id="nav_right"> 右导航栏 </div> </body> </html></pre> </div> <h3 class="md-end-block md-heading">字体相关标签</h3> <div class="md-hr md-end-block"> <hr> </div> <h4 class="md-end-block md-heading">font 文字</h4> <div class="md-hr md-end-block"> <hr> </div> 　　作用：规定文本的字体、字体尺寸、字体颜色。不建议使用 <table class="md-table"> <thead> <tr class="md-end-block"> <th>属性</th> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>color</td> <td>rgb(x,x,x)，#xxxxxx，colorname</td> <td>不赞成使用。请使用样式取代它。规定文本的颜色。设置方式：单词 <code>#ff00cc</code> ,或者<code>rgb(0,0,255)</code>。</td> </tr> <tr class="md-end-block"> <td>face</td> <td>font_family</td> <td>不赞成使用。请使用样式取代它。规定文本的字体。设置字体。</td> </tr> <tr class="md-end-block"> <td>size</td> <td>number</td> <td>不赞成使用。请使用样式取代它。规定文本的大小，范围为1-7</td> </tr> </tbody> </table> <a href="http://img.e-com-net.com/image/info8/6fab75de6c8546d1911841a0b97db186.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6fab75de6c8546d1911841a0b97db186.jpg" alt="HTML学习_第9张图片" width="650" height="223" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <font color="red" size="6" face="微软雅黑">你好啊！</font> <br /> 你好啊！ </body> </html></pre> </div> <h4 class="md-end-block md-heading">hn 标题</h4> <div class="md-hr md-end-block"> <hr> </div> 　　作用：<code>n</code>的取值范围是1~6; 从大到小. 用来表示标题.<code>h</code>系列独占一行 <table class="md-table"> <thead> <tr class="md-end-block"> <th>属性</th> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>align</td> <td>left，center，right，justify</td> <td>不推荐使用。请使用样式替代它。规定标题中文本的排列。</td> </tr> </tbody> </table> <a href="http://img.e-com-net.com/image/info8/c7b7c64dc91c412b8d67e2a20f590fdf.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c7b7c64dc91c412b8d67e2a20f590fdf.jpg" alt="HTML学习_第10张图片" width="650" height="222" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6> </body> </html></pre> </div> <h4 class="md-end-block md-heading">b 加粗</h4> <div class="md-hr md-end-block"> <hr> </div> 　　作用：文字加粗 <a href="http://img.e-com-net.com/image/info8/d881121ae7984cf184d703c9d5c99bfc.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d881121ae7984cf184d703c9d5c99bfc.jpg" alt="HTML学习_第11张图片" width="650" height="221" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>这是普通文本 - <b>这是粗体文本</b>。</p> </body> </html></pre> </div> <h4 class="md-end-block md-heading">strong 加粗</h4> <div class="md-hr md-end-block"> <hr> </div> 　　作用：文字加粗 <a href="http://img.e-com-net.com/image/info8/da99418cad8745a0bb5f74da64ccd757.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/da99418cad8745a0bb5f74da64ccd757.jpg" alt="HTML学习_第12张图片" width="650" height="221" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>这是普通文本 - <strong>这是粗体文本</strong>。</p> </body> </html></pre> </div> <h4 class="md-end-block md-heading">i 斜体</h4> <div class="md-hr md-end-block"> <hr> </div> 　　作用：文字变斜体 <a href="http://img.e-com-net.com/image/info8/a1eb3d7f62f94d21b09ee60208a24fba.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a1eb3d7f62f94d21b09ee60208a24fba.jpg" alt="HTML学习_第13张图片" width="650" height="220" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>这是普通文本 - <em>这是斜体文本</em>。</p> </body> </html></pre> </div> <h4 class="md-end-block md-heading">em 斜体</h4> <div class="md-hr md-end-block"> <hr> </div> 　　作用：文字变斜体 <a href="http://img.e-com-net.com/image/info8/a1eb3d7f62f94d21b09ee60208a24fba.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a1eb3d7f62f94d21b09ee60208a24fba.jpg" alt="HTML学习_第14张图片" width="650" height="220" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>这是普通文本 - <em>这是斜体文本</em>。</p> </body> </html></pre> </div> <h4 class="md-end-block md-heading">u 下划线</h4> <div class="md-hr md-end-block"> <hr> </div> 　　作用：文字加入下划线 <a href="http://img.e-com-net.com/image/info8/5a6f0977a277413b8ba12598377af937.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5a6f0977a277413b8ba12598377af937.jpg" alt="HTML学习_第15张图片" width="650" height="221" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>这是普通文本 - <u>这是有下划线的文本</u>。</p> </body> </html></pre> </div> <h4 class="md-end-block md-heading">s 删除线</h4> <div class="md-hr md-end-block"> <hr> </div> 　　作用：文字加入删除线 <a href="http://img.e-com-net.com/image/info8/b0b7085e2cf84e3fbf5efd1f80d802a8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b0b7085e2cf84e3fbf5efd1f80d802a8.jpg" alt="HTML学习_第16张图片" width="650" height="221" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>这是普通文本 - <del>这是有删除线的文本</del>。</p> </body> </html></pre> </div> <h4 class="md-end-block md-heading">del 删除线</h4> <div class="md-hr md-end-block"> <hr> </div> 　　作用：文字加入删除线 <a href="http://img.e-com-net.com/image/info8/b0b7085e2cf84e3fbf5efd1f80d802a8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b0b7085e2cf84e3fbf5efd1f80d802a8.jpg" alt="HTML学习_第17张图片" width="650" height="221" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>这是普通文本 - <del>这是有删除线的文本</del>。</p> </body> </html></pre> </div> <h4 class="md-end-block md-heading">strike 删除线</h4> <div class="md-hr md-end-block"> <hr> </div> 　　作用：文字加入删除线，H5不建议使用 <a href="http://img.e-com-net.com/image/info8/b0b7085e2cf84e3fbf5efd1f80d802a8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b0b7085e2cf84e3fbf5efd1f80d802a8.jpg" alt="HTML学习_第18张图片" width="650" height="221" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>这是普通文本 - <strike>这是有删除线的文本</strike>。</p> </body> </html></pre> </div> <h4 class="md-end-block md-heading">sup与sub 角标</h4> <div class="md-hr md-end-block"> <hr> </div> 　　作用：上角标和下角标 <a href="http://img.e-com-net.com/image/info8/3358531205ec4fed9146a1245a47267d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3358531205ec4fed9146a1245a47267d.jpg" alt="HTML学习_第19张图片" width="650" height="224" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>上角标<sup>3</sup>下角标<sub>2</sub></p> </body> </html></pre> </div> <h3 class="md-end-block md-heading">排版相关标签</h3> <div class="md-hr md-end-block"> <hr> </div> <h4 class="md-end-block md-heading">div与span 布局</h4> <div class="md-hr md-end-block"> <hr> </div> 　　<code><div></code>作用：分割标签，布局使用。如果只会单纯的HTML，那么它的作用性很小，所以这里不太好举例。 　　<code></code>作用：用来组合文档中的行内元素，与<code><div></code>标签类似，如果只会HTML，那么它的作用性也很小，不太好举例。 <blockquote> 　　<code></code>和<code><div></code>唯一的区别在于：<code></code>是不换行的，而<code><div></code>是换行的。 　　如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说，DIV+CSS来实现各种样式。 　　<code><div></code>在浏览器中，默认是不会增加任何的效果的，但是语义变了，<code><div></code>中的所有元素是一个小区域。 　　<code><div></code>标签是一个容器级标签，里面什么都能放，甚至可以放div自己。 　　<code></code>也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。 　　就是说，<code></code>里面只能放置文字、图片、表单元素 </blockquote> 　　那么这里，我用一张图片举例。 <a href="http://img.e-com-net.com/image/info8/d658c398f498434cb6f0ead70087ffeb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d658c398f498434cb6f0ead70087ffeb.jpg" alt="HTML学习_第20张图片" width="650" height="287" style="border:1px solid black;"></a> 　　红色的都可以用<code><div></code>标签来设置宽高进行布局，而蓝色的部分由于<code></code>可以用来组合文档中的行内元素，那么蓝色部分里的每个小选项是都可以用<code></code>标签与其他标签进行组合完成的。 <h4 class="md-end-block md-heading">br与p 换行</h4> <div class="md-hr md-end-block"> <hr> </div> 　　<code> </code>作用：换行。它是一个内联标签，注意与<code></code>的区别。 　　<code></code>作用：换行。它是一个块级标签，注意与<code> </code>的区别。 <blockquote> 　　注意：<code></code>是一个文本级的标签，里面只能放文字，图片，表单元素，其他的一律不放。 </blockquote> <a href="http://img.e-com-net.com/image/info8/e517b044751140bd892cab714d19a354.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e517b044751140bd892cab714d19a354.jpg" alt="HTML学习_第21张图片" width="650" height="223" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> 哈哈哈哈 <p>p标签</p> 哈哈哈哈 <br />br标签 </body> </html></pre> </div> <h4 class="md-end-block md-heading">hr 水平线</h4> <div class="md-hr md-end-block"> <hr> </div> 　　作用：水平线，一条很细的横线。 <a href="http://img.e-com-net.com/image/info8/d8c59b7a89224b04b299e21172f2a11d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d8c59b7a89224b04b299e21172f2a11d.jpg" alt="HTML学习_第22张图片" width="650" height="224" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>hr的上面</p> <hr /> <p>hr的下面</p> </body> </html></pre> </div> <h4 class="md-end-block md-heading">center 居中</h4> <div class="md-hr md-end-block"> <hr> </div> 　　作用：居中，H5不建议使用 <a href="http://img.e-com-net.com/image/info8/492f6dc9c9ed4272961058528b215e42.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/492f6dc9c9ed4272961058528b215e42.jpg" alt="HTML学习_第23张图片" width="650" height="227" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>未居中</h1> <center><h1>居中</h1></center> </body> </html></pre> </div> <h4 class="md-end-block md-heading">pre 预格式化</h4> <div class="md-hr md-end-block"> <hr> </div> 　　作用：预格式化，H5不建议使用 <blockquote> 　　含义：将保留其中的所有的空白字符(空格、换行符)，原封不动的输出结果（告诉浏览器不要忽略空格和空行） 说明：真正排网页过程中，<code><pre></code>标签几乎用不着。但在PHP中用于打印一个数组时可能会使用到。 </blockquote> <a href="http://img.e-com-net.com/image/info8/6c46837e5ce1495ba0292aacaadbc338.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6c46837e5ce1495ba0292aacaadbc338.jpg" alt="HTML学习_第24张图片" width="650" height="226" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> 我想怎么写就怎么写 <pre> 我想怎么写就怎么写 </pre> </body> </html></pre> </div> <h3 class="md-end-block md-heading">列表相关标签</h3> <div class="md-hr md-end-block"> <hr> </div> <h4 class="md-end-block md-heading">ul与li 无序列表</h4> <div class="md-hr md-end-block"> <hr> </div> 　　作用：用于定义无序列表。注意：无序列表中必须有<code><li></code>标签来书写具体内容。 <table class="md-table"> <thead> <tr class="md-end-block"> <th>属性</th> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>compact</td> <td>compact</td> <td>不赞成使用。请使用样式取代它。规定列表呈现的效果比正常情况更小巧。</td> </tr> <tr class="md-end-block"> <td>type</td> <td>disc，square，circle</td> <td>不赞成使用。请使用样式取代它。规定列表的项目符号的类型。</td> </tr> </tbody> </table> <a href="http://img.e-com-net.com/image/info8/198ff55fda1a490f9c4792445e21f6b8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/198ff55fda1a490f9c4792445e21f6b8.jpg" alt="HTML学习_第25张图片" width="650" height="223" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <ul> <li>香蕉</li> <li>牛奶</li> <li>菠萝</li> </ul> </body> </html></pre> </div> <a href="http://img.e-com-net.com/image/info8/a3c31f90a4c24ea98cc443939aacdd8b.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a3c31f90a4c24ea98cc443939aacdd8b.jpg" alt="HTML学习_第26张图片" width="650" height="228" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h4>Disc 项目符号列表：</h4> <ul type="disc"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ul> <h4>Circle 项目符号列表：</h4> <ul type="circle"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ul> <h4>Square 项目符号列表：</h4> <ul type="square"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ul> </body> </html></pre> </div> <h4 class="md-end-block md-heading">ol与li 有序列表</h4> <div class="md-hr md-end-block"> <hr> </div> 　　作用：用于定义有序列表。注意：有序列表中必须有<code><li></code>标签来书写具体内容。 <table class="md-table"> <thead> <tr class="md-end-block"> <th>属性</th> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>compact</td> <td>compact</td> <td>HTML5 中不支持。HTML 4.01 中不赞成使用。规定列表呈现的效果比正常情况更小巧。</td> </tr> <tr class="md-end-block"> <td>reversed</td> <td>reversed</td> <td>规定列表顺序为降序。(9,8,7...)</td> </tr> <tr class="md-end-block"> <td>start</td> <td>number</td> <td>规定有序列表的起始值。</td> </tr> <tr class="md-end-block"> <td>type</td> <td>1，A，a，I，i</td> <td>规定在列表中使用的标记类型。</td> </tr> </tbody> </table> <a href="http://img.e-com-net.com/image/info8/96289b26aba7437a91bdbf37635c6f73.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/96289b26aba7437a91bdbf37635c6f73.jpg" alt="HTML学习_第27张图片" width="650" height="227" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <ol> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> <ol start="50"> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol> </body> </html></pre> </div> <a href="http://img.e-com-net.com/image/info8/afbd9be16cfc4fd59dc26984e59c971c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/afbd9be16cfc4fd59dc26984e59c971c.jpg" alt="HTML学习_第28张图片" width="650" height="228" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h4>数字列表：</h4> <ol> <li>苹果</li> <li>香蕉</li> </ol> <h4>字母列表：</h4> <ol type="A"> <li>苹果</li> <li>香蕉</li> </ol> <h4>小写字母列表：</h4> <ol type="a"> <li>苹果</li> <li>香蕉</li> </ol> <h4>罗马字母列表：</h4> <ol type="I"> <li>苹果</li> <li>香蕉</li> </ol> <h4>小写罗马字母列表：</h4> <ol type="i"> <li>苹果</li> <li>香蕉</li> </ol> </body> </html></pre> </div> <h4 class="md-end-block md-heading">dl与dt以及dd 自定义列表</h4> <div class="md-hr md-end-block"> <hr> </div> 　　作用：用于定义自定义列表。 　　<code><dl></code>为最外部，<code><dt></code>为标题，<code><dd></code>为段落。他们的使用场景也蛮多的，因为非常灵活。 <a href="http://img.e-com-net.com/image/info8/d2821e841d824953964a23610a7295f6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d2821e841d824953964a23610a7295f6.jpg" alt="HTML学习_第29张图片" width="650" height="220" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><html> <body> <h2>一个定义列表：</h2> <dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl> </body> </html></pre> </div> <h3 class="md-end-block md-heading">表单相关form系列</h3> <div class="md-hr md-end-block"> <hr> </div> 　　表单用于向服务器传递数据 　　表单能够包含 <code><input></code>元素，比如文本字段、复选框、单选框、提交按钮等等。 　　表单还可以包含<code><textarea></code>、<code><select></code>、<code><fieldset></code>和 <code><label></code>元素。 　　它会将位于表单标签内的子标签数据提取出来并发送给特定的路径，该路径会有相应的后台操作来处理这些数据。 <table class="md-table"> <thead> <tr class="md-end-block"> <th>属性</th> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>accept</td> <td>MIME_type</td> <td>HTML 5 中不支持。</td> </tr> <tr class="md-end-block"> <td>accept-charset</td> <td>charset_list</td> <td>规定服务器可处理的表单数据字符集。</td> </tr> <tr class="md-end-block"> <td>action</td> <td>URL</td> <td>规定当提交表单时向何处发送表单数据。</td> </tr> <tr class="md-end-block"> <td>autocomplete</td> <td>onoff</td> <td>规定是否启用表单的自动完成功能。</td> </tr> <tr class="md-end-block"> <td>enctype</td> <td>下方有</td> <td>规定在发送表单数据之前如何对其进行编码。</td> </tr> <tr class="md-end-block"> <td>method</td> <td>getpost</td> <td>规定用于发送 form-data 的 HTTP 方法。</td> </tr> <tr class="md-end-block"> <td>name</td> <td>form_name</td> <td>规定表单的名称。</td> </tr> <tr class="md-end-block"> <td>novalidate</td> <td>novalidate</td> <td>如果使用该属性，则提交表单时不进行验证。</td> </tr> <tr class="md-end-block"> <td>target</td> <td>_blank，_self,_parent，_top，framename</td> <td>规定在何处打开 action URL。</td> </tr> </tbody> </table> <blockquote> 　　<code>enctype</code> 属性可能的值： 　　　　application/x-www-form-urlencoded 　　　　multipart/form-data 　　　　text/plain 　　其中 <code>action</code>是提交时候的路径，<code>method</code>是提交方式常用的有两种<code>get</code>或者<code>post</code>，如果想上传文件<code>enctype</code>必须设置为multipart/form-data并且<code>action</code>必须为<code>post</code>方式才能进行文件的上传。 </blockquote> 　　在<code><form></code>系列标签中，共有以下几种常用的标签。 <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><form>标签中所包含的常用标签 </th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>标签名称</td> <td>功能描述</td> <td>display</td> </tr> <tr class="md-end-block"> <td><input></td> <td>输入框</td> <td>inline-block</td> </tr> <tr class="md-end-block"> <td><lable>·</td> <td>为<code><input></code>元素定义标注（标记）</td> <td>inline</td> </tr> <tr class="md-end-block"> <td><select></td> <td>选择框</td> <td>block</td> </tr> <tr class="md-end-block"> <td><textarea></td> <td>文本域</td> <td>inline</td> </tr> <tr class="md-end-block"> <td><fieldset></td> <td>美化相关</td> <td>未知</td> </tr> <tr class="md-end-block"> <td><legend></td> <td>美化相关</td> <td>未知</td> </tr> </tbody> </table> <blockquote> 　　注意：这里又出现了一个<code>inline-block</code>，说明它是一个可以设置宽高的内联块级标签。 </blockquote> <h4 class="md-end-block md-heading">input 输入框</h4> <div class="md-hr md-end-block"> <hr> </div> 　　<code><input></code>可以有多种形态，只需要设置属性<code>type</code>即可，如下表： <table class="md-table"> <thead> <tr class="md-end-block"> <th>type属性值</th> <th>表现形式</th> <th>对应代码</th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>text</td> <td>单行输入文本</td> <td><input type=text" /></td> </tr> <tr class="md-end-block"> <td>password</td> <td>密码输入框</td> <td><input type="password" /></td> </tr> <tr class="md-end-block"> <td>date</td> <td>日期输入框</td> <td><input type="date" /></td> </tr> <tr class="md-end-block"> <td>checkbox</td> <td>复选框</td> <td><input type="checkbox" checked="checked" /></td> </tr> <tr class="md-end-block"> <td>radio</td> <td>单选框</td> <td><input type="radio" /></td> </tr> <tr class="md-end-block"> <td>submit</td> <td>提交按钮</td> <td><input type="submit" value="提交" /></td> </tr> <tr class="md-end-block"> <td>reset</td> <td>重置按钮</td> <td><input type="reset" value="重置" /></td> </tr> <tr class="md-end-block"> <td>button</td> <td>普通按钮</td> <td><input type="button" value="普通按钮" /></td> </tr> <tr class="md-end-block"> <td>hidden</td> <td>隐藏输入框</td> <td><input type="hidden" /></td> </tr> <tr class="md-end-block"> <td>file</td> <td>文本选择框</td> <td><input type="file" /></td> </tr> <tr class="md-end-block"> <td>number</td> <td>数字输入框</td> <td><input type="number" /></td> </tr> </tbody> </table> 　　在<code><input></code>标签中，绝大部分标签都需要设置键值对的方式，因为它们最后的信息都是提交给整个<code><form></code>表单标签的。但是也有少部分不用，比如<code>button</code>，<code>reset</code>，<code>sumbit</code>等等。 <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><input>其他常用属性 </th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>属性</td> <td>值</td> <td>描述</td> </tr> <tr class="md-end-block"> <td>name</td> <td>field_name</td> <td>表单提交时的“键”，注意和id的区别</td> </tr> <tr class="md-end-block"> <td>value</td> <td>value</td> <td>表单提交时对应项的值</td> </tr> <tr class="md-end-block"> <td>checked</td> <td>checked</td> <td>radio和checkbox默认被选中的项</td> </tr> <tr class="md-end-block"> <td>readonly</td> <td>readonly</td> <td>text和password设置只读</td> </tr> <tr class="md-end-block"> <td>disabled</td> <td>disabled</td> <td>所有input均适用，变灰了，点不动了</td> </tr> <tr class="md-end-block"> <td>placeholder</td> <td>text</td> <td>规定帮助用户填写输入字段的提示。</td> </tr> <tr class="md-end-block"> <td>required</td> <td>required</td> <td>指示输入字段的值是必需的。</td> </tr> <tr class="md-end-block"> <td>size</td> <td>number_of_char</td> <td>定义输入字段的宽度。</td> </tr> <tr class="md-end-block"> <td>min</td> <td>number date</td> <td>定输入字段的最小值。</td> </tr> <tr class="md-end-block"> <td>max</td> <td>number date</td> <td>规定输入字段的最大值。</td> </tr> </tbody> </table> <blockquote> <ul class="ul-list"> <li class="md-list-item"> value：表单提交时对应项的值 <ul class="ul-list"> <li class="md-list-item"> type="button", "reset", "submit"时，为按钮上显示的文本年内容 </li> <li class="md-list-item"> type="text","password","hidden"时，为输入框的初始值 </li> <li class="md-list-item"> type="checkbox", "radio", "file"，为输入相关联的值 </li> </ul> </li> </ul> </blockquote> <a href="http://img.e-com-net.com/image/info8/0e4244d1b7db4421949690a66ef7fde5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0e4244d1b7db4421949690a66ef7fde5.jpg" alt="HTML学习_第30张图片" width="650" height="287" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body>  <form action="#" method="post" enctype="multipart/form-data"> <p>头像： <input type="file" name="avatar" /></p> <p>用户名: <input type="text" name="username" placeholder="请输入用户名" /></p> <p>密码： <input type="text" name="pwd" placeholder="请输入密码" /></p> <p>性别: 男<input type="radio" name="gender" value="male" />女<input type="radio" name="gender" value="female" /></p> <p>爱好: 篮球<input type="checkbox" name="hobby" value="basketball" checked />足球<input type="checkbox" name="hobby" value="football" /></p> <p><input type="reset" value="重新填写信息" /> <input type="submit" value="提交注册信息"> <input type="butoon" value="联系客服" disabled></p> </form> </body> </html></pre> </div> <h4 class="md-end-block md-heading">lable 标注</h4> <div class="md-hr md-end-block"> <hr> </div> 　　<code><label></code>标签为 <code><input></code>元素定义标注（标记）。 　　<code><label></code>元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 <code><label></code>元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 　　<code><label></code> 标签的 <code>for</code>属性应当与相关元素的 <code>id</code>属性相同。 <table class="md-table"> <thead> <tr class="md-end-block"> <th>属性</th> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>for</td> <td>id</td> <td>规定 label 绑定到哪个表单元素。</td> </tr> <tr class="md-end-block"> <td>form</td> <td>formid</td> <td>规定 label 字段所属的一个或多个表单。</td> </tr> </tbody> </table> 　　 　　我们先来看下面一段代码： <div class="cnblogs_code"> <pre><input type="radio" name="sex" /> 男 <input type="radio" name="sex" /> 女</pre> </div> 　　对于上面这样的单选框，我们只有点击那个单选框（小圆圈）才可以选中，点击“男”、“女”这两个文字时是无法选中的；于是，<code><label></code>标签派上了用场。 　　本质上来讲，“男”、“女”这两个文字和<code><input></code>标签时没有关系的，而label就是解决这个问题的。我们可以通过<code><label></code>把<code><input></code>和汉字包裹起来作为整体。 　　解决方法如下： <div class="cnblogs_code"> <pre><input type="radio" name="sex" id="nan" /> <label for="nan">男</label> <input type="radio" name="sex" id="nv" /> <label for="nv">女</label></pre> </div> 　　上方代码中，<code><input></code>元素要有一个<code>id</code>，然后<code><label></code>标签有一个<code><for></code>属性，和<code><id></code>相同，那么这个<code><label></code>和<code><input></code>就有绑定关系了。 　　当然了，复选框也有<code><label></code>：（任何表单元素都有<code><label></code>） <div class="cnblogs_code"> <pre><input type="checkbox" id="kk" /> <label for="kk">10天内免登陆</label> </pre> </div> <h4 class="md-end-block md-heading">select与optgroup以及option 选择框</h4> <div class="md-hr md-end-block"> <hr> </div> 　　这三组标签可做选择框： 　　其中<code><select></code>标签应该具有一个<code>name</code>,它相当于字典的<code>key</code>。 　　<code><optgroup></code>不是必须的一个标签，主要对<code><option></code>标签做分组管理，必须要属性<code>lable</code>为组名 　　<code><option></code>标签应该设置<code>value</code>，并且<code><option></code>标签可以设置<code>selected</code>作为默认选择。<code><option></code>的选择项相当于字典的<code>value</code>。 <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><select>标签属性 </th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>属性</td> <td>值</td> <td>描述</td> </tr> <tr class="md-end-block"> <td>autofocus</td> <td>autofocus</td> <td>规定在页面加载后文本区域自动获得焦点。</td> </tr> <tr class="md-end-block"> <td>disabled</td> <td>disabled</td> <td>规定禁用该下拉列表。</td> </tr> <tr class="md-end-block"> <td>form</td> <td>form_id</td> <td>规定文本区域所属的一个或多个表单。</td> </tr> <tr class="md-end-block"> <td>multiple</td> <td>multiple</td> <td>规定可选择多个选项。布尔属性，<code>True</code>或者<code>False</code>。</td> </tr> <tr class="md-end-block"> <td>name</td> <td>name</td> <td>规定下拉列表的名称。</td> </tr> <tr class="md-end-block"> <td>required</td> <td>required</td> <td>规定文本区域是必填的。</td> </tr> <tr class="md-end-block"> <td>size</td> <td>number</td> <td>规定下拉列表中可见选项的数目。</td> </tr> </tbody> </table> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><optgroup>标签属性 </th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>属性</td> <td>值</td> <td>描述</td> </tr> <tr class="md-end-block"> <td>label</td> <td>text</td> <td>为选项组规定描述。</td> </tr> <tr class="md-end-block"> <td>disabled</td> <td>disabled</td> <td>规定禁用该选项组。</td> </tr> </tbody> </table> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><option>标签属性 </th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>属性</td> <td>值</td> <td>描述</td> </tr> <tr class="md-end-block"> <td>disabled</td> <td>disabled</td> <td>规定此选项应在首次加载时被禁用。</td> </tr> <tr class="md-end-block"> <td>label</td> <td>text</td> <td>定义当使用 <code><optgroup></code> 时所使用的标注。</td> </tr> <tr class="md-end-block"> <td>selected</td> <td>selected</td> <td>规定选项（在首次显示在列表中时）表现为选中状态。</td> </tr> <tr class="md-end-block"> <td>value</td> <td>text</td> <td>定义送往服务器的选项值。</td> </tr> </tbody> </table> <a href="http://img.e-com-net.com/image/info8/5a56ef0f779c4f2aa6c4000e0a811d86.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5a56ef0f779c4f2aa6c4000e0a811d86.jpg" alt="HTML学习_第31张图片" width="650" height="286" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body>  <form action="#" method="post" enctype="multipart/form-data"> <p>头像： <input type="file" name="avatar" /></p> <p>用户名: <input type="text" name="username" placeholder="请输入用户名" /></p> <p>密码： <input type="text" name="pwd" placeholder="请输入密码" /></p> <p>性别: 男<input type="radio" name="gender" value="male" />女<input type="radio" name="gender" value="female" /></p> <p>爱好: 篮球<input type="checkbox" name="hobby" value="basketball" checked />足球<input type="checkbox" name="hobby" value="football" /></p> <p><input type="reset" value="重新填写信息" /> <input type="submit" value="提交注册信息"> <input type="butoon" value="联系客服" disabled></p> 居住地 <select name="addr"> <optgroup label="中国"> <option value="bejing" selected>北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="shenzhen">深圳</option> <option value="other">其他</option> </optgroup> <optgroup label="海外"> <option value="America">美国</option> <option value="Japanese">日本</option> <option value="England">英国</option> <option value="Germany">德国</option> <option value="Canada">加拿大</option> </optgroup> </select> </form> </body> </html></pre> </div> <h4 class="md-end-block md-heading">textarea 文本域</h4> <div class="md-hr md-end-block"> <hr> </div> 　　文本标签，和<code><text></code>标签类似。可使用<code>placeholder</code>定义默认显示值。 <table class="md-table"> <thead> <tr class="md-end-block"> <th>属性</th> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>autofocus</td> <td>autofocus</td> <td>规定在页面加载后文本区域自动获得焦点。</td> </tr> <tr class="md-end-block"> <td>cols</td> <td>number</td> <td>规定文本区内的可见宽度。</td> </tr> <tr class="md-end-block"> <td>disabled</td> <td>disabled</td> <td>规定禁用该文本区。</td> </tr> <tr class="md-end-block"> <td>form</td> <td>form_id</td> <td>规定文本区域所属的一个或多个表单。</td> </tr> <tr class="md-end-block"> <td>maxlength</td> <td>number</td> <td>规定文本区域的最大字符数。</td> </tr> <tr class="md-end-block"> <td>name</td> <td>name_of_textarea</td> <td>规定文本区的名称。</td> </tr> <tr class="md-end-block"> <td>placeholder</td> <td>text</td> <td>规定描述文本区域预期值的简短提示。</td> </tr> <tr class="md-end-block"> <td>readonly</td> <td>readonly</td> <td>规定文本区为只读。</td> </tr> <tr class="md-end-block"> <td>required</td> <td>required</td> <td>规定文本区域是必填的。</td> </tr> <tr class="md-end-block"> <td>rows</td> <td>number</td> <td>规定文本区内的可见行数。</td> </tr> <tr class="md-end-block"> <td>wrap</td> <td>hardsoft</td> <td>规定当在表单中提交时，文本区域中的文本如何换行。。</td> </tr> </tbody> </table> 　　其中<code>clos</code>和<code>rows</code>分别可以设置列数和行数，但是不经常使用。更推荐CSS <a href="http://img.e-com-net.com/image/info8/f1356deaed114cc586907429cce40285.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f1356deaed114cc586907429cce40285.jpg" alt="HTML学习_第32张图片" width="650" height="284" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body>  <form action="#" method="post" enctype="multipart/form-data"> <p>头像： <input type="file" name="avatar" /></p> <p>用户名: <input type="text" name="username" placeholder="请输入用户名" /></p> <p>密码： <input type="text" name="pwd" placeholder="请输入密码" /></p> <p>性别: 男<input type="radio" name="gender" value="male" />女<input type="radio" name="gender" value="female" /></p> <p>爱好: 篮球<input type="checkbox" name="hobby" value="basketball" checked />足球<input type="checkbox" name="hobby" value="football" /></p> <p><input type="reset" value="重新填写信息" /> <input type="submit" value="提交注册信息"> <input type="butoon" value="联系客服" disabled></p> 居住地 <select name="addr"> <optgroup label="中国"> <option value="bejing" selected>北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="shenzhen">深圳</option> <option value="other">其他</option> </optgroup> <optgroup label="海外"> <option value="America">美国</option> <option value="Japanese">日本</option> <option value="England">英国</option> <option value="Germany">德国</option> <option value="Canada">加拿大</option> </optgroup> </select> <p><textarea name="register_reason" cols="30" rows="10" placeholder="请填写充分理由"></textarea></p> </form> </body> </html></pre> </div> <h4 class="md-end-block md-heading">fieldset与legend 美化</h4> <div class="md-hr md-end-block"> <hr> </div> 　　美化标签，可以在<code><form></code>标签中的某个元素周边做一个特效。没啥用... <a href="http://img.e-com-net.com/image/info8/19d9a220aeb14b56ab5c5a62fc79d2cd.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/19d9a220aeb14b56ab5c5a62fc79d2cd.jpg" alt="HTML学习_第33张图片" width="650" height="220" style="border:1px solid black;"></a> <h4 class="md-end-block md-heading">结果展示</h4> <div class="md-hr md-end-block"> <hr> </div> 　　那么我们将上面代码整理一下，得到了一个比较简约的注册页面。 <a href="http://img.e-com-net.com/image/info8/16d9da20aedb4693b3b477dd96187ef0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/16d9da20aedb4693b3b477dd96187ef0.jpg" alt="HTML学习_第34张图片" width="650" height="285" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body>  <form action="#" method="post" enctype="multipart/form-data"> <fieldset > <legend><h1>欢迎注册</h1></legend> <p>头像： <input type="file" name="avatar" /></p> <p>用户名: <input type="text" name="username" placeholder="请输入用户名" /></p> <p>密码： <input type="text" name="pwd" placeholder="请输入密码" /></p> <p>性别: 男<input type="radio" name="gender" value="male" />女<input type="radio" name="gender" value="female" /></p> <p>爱好: 篮球<input type="checkbox" name="hobby" value="basketball" checked />足球<input type="checkbox" name="hobby" value="football" /></p> 居住地 <select name="addr"> <optgroup label="中国"> <option value="bejing" selected>北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="shenzhen">深圳</option> <option value="other">其他</option> </optgroup> <optgroup label="海外"> <option value="America">美国</option> <option value="Japanese">日本</option> <option value="England">英国</option> <option value="Germany">德国</option> <option value="Canada">加拿大</option> </optgroup> </select> </fieldset> <fieldset> <legend>请填写注册理由</legend> <p><textarea name="register_reason" cols="30" rows="10" placeholder="请填写充分理由"></textarea></p> </fieldset> <p><input type="reset" value="重新填写信息" /> <input type="submit" value="提交注册信息"> <input type="butoon" value="联系客服" disabled></p> </form> </body> </html></pre> </div> <h3 class="md-end-block md-heading">表格相关table系列</h3> <div class="md-hr md-end-block"> <hr> </div> 　　在<code><table></code>标签系列中，依然有很多标签。我们可以使用它们来做一个小表格。 　　<code><table></code>的2个应该设置的属性：<code>border="1"</code> <code>style="border-collapse:collapse;"</code> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><table>标签属性 </th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>属性</td> <td>值</td> <td>描述</td> </tr> <tr class="md-end-block"> <td>align</td> <td>left，center，right</td> <td>不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。</td> </tr> <tr class="md-end-block"> <td>bgcolor</td> <td>rgb(x,x,x)，#xxxxxx，colorname</td> <td>不赞成使用。请使用样式代替。规定表格的背景颜色。</td> </tr> <tr class="md-end-block"> <td>border</td> <td>pixels</td> <td>规定表格边框的宽度。</td> </tr> <tr class="md-end-block"> <td>cellpadding</td> <td>pixels，%</td> <td>规定单元边沿与其内容之间的空白。</td> </tr> <tr class="md-end-block"> <td>cellspacing</td> <td>pixels，%</td> <td>规定单元格之间的空白。</td> </tr> <tr class="md-end-block"> <td>frame</td> <td>void，above，below，hsides，lhs，rhs，vsides，box，border</td> <td>规定外侧边框的哪个部分是可见的。</td> </tr> <tr class="md-end-block"> <td>rules</td> <td>none，groups，rows，cols，all</td> <td>规定内侧边框的哪个部分是可见的。</td> </tr> <tr class="md-end-block"> <td>summary</td> <td>text</td> <td>规定表格的摘要。</td> </tr> <tr class="md-end-block"> <td>width</td> <td>%，pixels</td> <td>规定表格的宽度。</td> </tr> </tbody> </table> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><table>标签中所包含的常用标签 </th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>标签名称</td> <td>功能描述</td> <td>display</td> </tr> <tr class="md-end-block"> <td><caption></td> <td>定义表格标题</td> <td>未知</td> </tr> <tr class="md-end-block"> <td><thead></td> <td>定义表格的表头。该标签用于组合 HTML 表格的表头内容。</td> <td>block</td> </tr> <tr class="md-end-block"> <td><tfont></td> <td>定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格中的表注内容。</td> <td>block</td> </tr> <tr class="md-end-block"> <td><tbody></td> <td>定义表格主体（正文）。该标签用于组合 HTML 表格的主体内容。</td> <td>block</td> </tr> <tr class="md-end-block"> <td><th></td> <td>表头单元格 - 包含表头信息（由 th 元素创建）</td> <td>block</td> </tr> <tr class="md-end-block"> <td><td></td> <td>标准单元格 - 包含数据（由 td 元素创建）</td> <td>block</td> </tr> <tr class="md-end-block"> <td><tr></td> <td>定义 HTML 表格中的行。</td> <td>block</td> </tr> </tbody> </table> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><thead>标签属性 </th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>属性</td> <td>值</td> <td>描述</td> </tr> <tr class="md-end-block"> <td>align</td> <td>right，left，center，justify，char</td> <td>定义 thead 元素中内容的对齐方式。</td> </tr> <tr class="md-end-block"> <td>char</td> <td>character</td> <td>规定根据哪个字符来进行文本对齐。</td> </tr> <tr class="md-end-block"> <td>charoff</td> <td>number</td> <td>规定第一个对齐字符的偏移量。</td> </tr> <tr class="md-end-block"> <td>valign</td> <td>top，middle，bottom，baseline</td> <td>规定 thead 元素中内容的垂直对齐方式。</td> </tr> </tbody> </table> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><tfont>标签属性 </th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>属性</td> <td>值</td> <td>描述</td> </tr> <tr class="md-end-block"> <td>color</td> <td>rgb(x,x,x)，#xxxxxx，colorname</td> <td>不赞成使用。请使用样式取代它。规定文本的颜色。</td> </tr> <tr class="md-end-block"> <td>face</td> <td>font_family</td> <td>不赞成使用。请使用样式取代它。规定文本的字体。</td> </tr> <tr class="md-end-block"> <td>size</td> <td>number</td> <td>不赞成使用。请使用样式取代它。规定文本的大小。</td> </tr> </tbody> </table> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><tbody>标签属性 </th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>属性</td> <td>值</td> <td>描述</td> </tr> <tr class="md-end-block"> <td>align</td> <td>right，left，center，justify，char</td> <td>定义 tbody 元素中内容的对齐方式。</td> </tr> <tr class="md-end-block"> <td>char</td> <td>character</td> <td>规定根据哪个字符来进行文本对齐。</td> </tr> <tr class="md-end-block"> <td>charoff</td> <td>number</td> <td>规定第一个对齐字符的偏移量。</td> </tr> <tr class="md-end-block"> <td>valign</td> <td>top，middle，bottom，baseline</td> <td>规定 tbody 元素中内容的垂直对齐方式。</td> </tr> </tbody> </table> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><th>与<td>标签属性 </th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>属性</td> <td>值</td> <td>描述</td> </tr> <tr class="md-end-block"> <td>abbr</td> <td>text</td> <td>规定单元格中内容的缩写版本。</td> </tr> <tr class="md-end-block"> <td>align</td> <td>left，right，center，justify，char</td> <td>规定单元格内容的水平对齐方式。</td> </tr> <tr class="md-end-block"> <td>axis</td> <td>category_name</td> <td>对单元格进行分类。</td> </tr> <tr class="md-end-block"> <td>bgcolor</td> <td>rgb(x,x,x)，#xxxxxx，colorname</td> <td>不推荐使用。请使用样式替代它。规定表格单元格的背景颜色。</td> </tr> <tr class="md-end-block"> <td>char</td> <td>character</td> <td>规定根据哪个字符来进行内容的对齐。</td> </tr> <tr class="md-end-block"> <td>charoff</td> <td>number</td> <td>规定对齐字符的偏移量。</td> </tr> <tr class="md-end-block"> <td>colspan</td> <td>number</td> <td>设置单元格可横跨的列数。</td> </tr> <tr class="md-end-block"> <td>headers</td> <td>idrefs</td> <td>由空格分隔的表头单元格 ID 列表，为数据单元格提供表头信息。</td> </tr> <tr class="md-end-block"> <td>height</td> <td>pixels，%</td> <td>不推荐使用。请使用样式替代它。规定表格单元格的高度。</td> </tr> <tr class="md-end-block"> <td>nowrap</td> <td>nowrap</td> <td>不推荐使用。请使用样式取而代之。规定单元格中的内容是否折行。</td> </tr> <tr class="md-end-block"> <td>rowspan</td> <td>number</td> <td>规定单元格可横跨的行数。</td> </tr> <tr class="md-end-block"> <td>scope</td> <td>col，colgroup，row，rowgroup</td> <td>定义将表头数据与单元数据相关联的方法。</td> </tr> <tr class="md-end-block"> <td>valign</td> <td>top，middle，bottom，baseline</td> <td>规定单元格内容的垂直排列方式。</td> </tr> <tr class="md-end-block"> <td>width</td> <td>pixels，%</td> <td>不推荐使用。请使用样式取而代之。规定表格单元格的宽度。</td> </tr> </tbody> </table> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><tr>标签属性 </th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>属性</td> <td>值</td> <td>描述</td> </tr> <tr class="md-end-block"> <td>align</td> <td>right，left，center，justify，char</td> <td>定义表格行的内容对齐方式。</td> </tr> <tr class="md-end-block"> <td>bgcolor</td> <td>rgb(x,x,x)，#xxxxxx，colorname</td> <td>不赞成使用。请使用样式取而代之。规定表格行的背景颜色。</td> </tr> <tr class="md-end-block"> <td>char</td> <td>character</td> <td>规定根据哪个字符来进行文本对齐。</td> </tr> <tr class="md-end-block"> <td>charoff</td> <td>number</td> <td>规定第一个对齐字符的偏移量。</td> </tr> <tr class="md-end-block"> <td>valign</td> <td>top，middle，bottom，baseline</td> <td>规定表格行中内容的垂直对齐方式。</td> </tr> </tbody> </table> <h4 class="md-end-block md-heading">一个简单的表格</h4> <div class="md-hr md-end-block"> <hr> </div> <a href="http://img.e-com-net.com/image/info8/999df8a4fa5049fdb52e84c330f13060.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/999df8a4fa5049fdb52e84c330f13060.jpg" alt="HTML学习_第35张图片" width="650" height="243" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><html> <head> <style type="text/css"> thead {color:green} tbody {color:blue;height:50px} tfoot {color:red} </style> </head> <body> <table border="1" style="border-collapse:collapse;"> <caption>测试</caption> <thead> <tr> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>15</td> </tr> <tr> <td>李四</td> <td>16</td> </tr> </tbody> <tfoot> <tr> <td>页脚------</td> <td>页脚-------</td> </tr> </tfoot> </table> </body> </html> </pre> </div> <h4 class="md-end-block md-heading">合并单元格</h4> <div class="md-hr md-end-block"> <hr> </div> 　　对<code><tr></code>标签使用属性<code>rowspan</code>与<code>clospan</code>能进行单元格的合并，但是严格区分区域，如<code><tbody></code>下的<code><tr></code>设置<code>rowspan</code>只能与<code><tbody></code>下的其他空白处进行合并。 <a href="http://img.e-com-net.com/image/info8/74b92b71a57d49c688ff215449a4a7ed.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/74b92b71a57d49c688ff215449a4a7ed.jpg" alt="HTML学习_第36张图片" width="530" height="279" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <html> <head> <style type="text/css"> thead { color: green } tbody { color: blue; height: 50px } tfoot { color: red } </style> </head> <body> <table border="1" style="border-collapse:collapse;"> <caption>单元格合并演示</caption>  <thead> <tr> <th>属性名称</th> <th>属性值</th> <th>功能描述</th> <th>无</th> </tr> </thead>  <tbody> <tr> <td>rowspan</td> <td>number</td> <td>合并竖向单元格</td>  <td rowspan="4">演示</td> </tr> <tr> <td>rowspan</td> <td>number</td> <td>合并竖向单元格</td>  </tr> <tr> <td>colspan</td> <td>number</td> <td>合并横向单元格</td>  </tr> <tr> <td>colspan</td> <td>number</td> <td>合并横向单元格</td>  </tr> </tbody>  <tfoot> <tr> <td colspan="4">一份不太严格的统计</td> </tr> </tfoot> </table> </body> </html> </body> </html></pre> </div> <h3 class="md-end-block md-heading">a 超链接</h3> <div class="md-hr md-end-block"> <hr> </div> 　　作用：定义超链接，用于从一张页面链接到另一张页面。<code><a></code> 元素最重要的属性是 <code>href</code>属性，它指示链接的目标。 <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><a>标签重要属性 </th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>属性</td> <td>值</td> <td>描述</td> </tr> <tr class="md-end-block"> <td>href</td> <td>URL</td> <td>规定链接指向的页面的 URL。</td> </tr> <tr class="md-end-block"> <td>target</td> <td>_blank， _parent， _self， _top， framename</td> <td>规定在何处打开链接文档。</td> </tr> <tr class="md-end-block"> <td>title</td> <td>text</td> <td>悬停文本。</td> </tr> <tr class="md-end-block"> <td>name</td> <td>section_name</td> <td>主要用于设置一个锚点的名称。</td> </tr> </tbody> </table> <blockquote> 　　注意：target属性值 　　　　<code>_self</code>：在同一个网页中显示（默认值） 　　　　<code>_blank</code>：在新的窗口中打开。 　　　　<code>_parent</code>：在父窗口中显示 　　　　<code>_top</code>：在顶级窗口中显示 </blockquote> 　　<code><a></code>标签默认情况下都会有一条下划线，这条下划线可以在学习CSS后将它干掉。 　　另外，当<code>href="#"</code>的时候，代表为刷新页面。 　　如果想点击<code><a></code>标签没有任何作用，可以设置一条JavaScript语句，如下： 　　<code>href = “javascript:void(0)”</code>：阻止A标签默认的点击行为。 <div class="cnblogs_code"> <pre><a href="#" target="_blank" title="你好">点我</a></pre> </div> <a href="http://img.e-com-net.com/image/info8/9c26ef1bc5274a8888010db86e69cbb6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9c26ef1bc5274a8888010db86e69cbb6.jpg" alt="HTML学习_第37张图片" width="302" height="174" style="border:1px solid black;"></a> <h3 class="md-end-block md-heading">img 图像资源</h3> <div class="md-hr md-end-block"> <hr> </div> 　　作用：向网页中嵌入一幅图像。 　　请注意，从技术上讲，<code><img></code> 标签并不会在网页中插入图像，而是从网页上链接图像。<code><img></code>标签创建的是被引用图像的占位空间。 <table class="md-table"> <thead> <tr class="md-end-block"> <th>属性</th> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>alt</td> <td>text</td> <td>规定图像的替代文本。</td> </tr> <tr class="md-end-block"> <td>src</td> <td>URL</td> <td>规定显示图像的 URL。</td> </tr> <tr class="md-end-block"> <td>width</td> <td>pixels，%</td> <td>设置图像的宽度。</td> </tr> <tr class="md-end-block"> <td>height</td> <td>pixels，%</td> <td>定义图像的高度。</td> </tr> <tr class="md-end-block"> <td>title</td> <td>text</td> <td>悬停文本。</td> </tr> <tr class="md-end-block"> <td>align</td> <td>top，bottom，middle，left，right</td> <td>不推荐使用。规定如何根据周围的文本来排列图像。</td> </tr> </tbody> </table> <div class="cnblogs_code"> <pre><img src=".\peiqi.jpeg" alt="小猪佩奇" title="可爱的佩奇" width="200px"></pre> </div> 　　<code>.\</code>代表当前路径，可以省略 　　<code>..\</code>代表上级目录 　　也可以使用网络资源<code>http://</code>，但是要注意的是不要使用<code>file://</code>，因为在Unix下没有盘符的概念。 <a href="http://img.e-com-net.com/image/info8/802b563b45074418baa64d0143220d3a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/802b563b45074418baa64d0143220d3a.jpg" alt="HTML学习_第38张图片" width="332" height="298" style="border:1px solid black;"></a> <blockquote> 　　注意事项： 　　（1）如果要想保证图片等比例缩放，请只设置<code>width</code>和<code>height</code>中其中一个。 　　（2）如果想实现图文混排的效果，请使用<code>align</code>属性，取值为<code>left</code>或<code>right</code>。 </blockquote> <h3 class="md-end-block md-heading">a标签的妙用</h3> <div class="md-hr md-end-block"> <hr> </div> <h4 class="md-end-block md-heading">a与id属性</h4> <div class="md-hr md-end-block"> <hr> </div> 　　我们可以用<code><a></code>标签的<code>href</code>来绑定一个锚点，达到当前页面跳转的功能，这在博客园的目录中很常用。 <a href="http://img.e-com-net.com/image/info8/15321886e3504b5e83d8939da5891d72.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/15321886e3504b5e83d8939da5891d72.jpg" alt="HTML学习_第39张图片" width="650" height="275" style="border:1px solid black;"></a> 　　下面我们做一个返回首页的按钮。 <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> div{ height: 80px; } </style> </head> <body>  <div id="top">我是顶部</div> <div>---</div> <div>---</div> <div>---</div> <div>---</div> <div>---</div> <div>---</div> <div>---</div> <div>---</div> <div>---</div> <div>---</div> <div>---</div> <div>---</div> <div>---</div> <div>---</div> <div>---</div> <div>---</div> <a href="#top">返回顶部</a> </body> </html></pre> </div> <h4 class="md-end-block md-heading">a与img图片跳转链接</h4> <div class="md-hr md-end-block"> <hr> </div> 　　我们经常可以看见，当点击某一个图片的时候页面就会发生跳转，其实就是<code><a></code>与<code><img></code>的结合。 　　<code><a></code>标签是一个内联标签，而<code><img></code>是一个内联块级标签，我们需要将<code><img></code>标签包裹在<code><a></code>标签的内部，因此需要将<code><a></code>标签也设置为一个内联块级标签（可设置宽高，但是不会换行）才行。 　　设置方法： <div class="cnblogs_code"> <pre> a{ display:inline-block; } </pre> </div> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> a{ display: inline-block; } </style> </head> <body> <a href="http://www.baidu.com/"><img src="./peiqi.jpeg" alt="可爱的佩奇" title="点我跳转百度" width="300px"></a> </body> </html></pre> </div> <h3 class="md-end-block md-heading">内联框架 iframe</h3> <div class="md-hr md-end-block"> <hr> </div> 　　这个标签对于初学者来说会很少用到，但是它有一个非常强大的功能，这在后期学习中会体现出来。<code><iframe></code>可以伪造ajax请求并且它对上传文件的支持性特别好，这是后话以后再说。我们来看一下它的用法。 　　它有一个非常重要的属性<code>src</code>，可以将某一个网页完整的拿过来。 <table class="md-table"> <thead> <tr class="md-end-block"> <th>属性</th> <th>值</th> <th>描述</th> </tr> </thead> <tbody> <tr class="md-end-block"> <td>height</td> <td>pixels，%</td> <td>规定 iframe 的高度。</td> </tr> <tr class="md-end-block"> <td>width</td> <td>pixel，%</td> <td>定义 iframe 的宽度。</td> </tr> <tr class="md-end-block"> <td>name</td> <td>frame_name</td> <td>规定 iframe 的名称。</td> </tr> <tr class="md-end-block"> <td>scrolling</td> <td>yes，no，auto</td> <td>规定是否在 iframe 中显示滚动条。</td> </tr> <tr class="md-end-block"> <td>src</td> <td>URL</td> <td>规定在 iframe 中显示的文档的 URL</td> </tr> </tbody> </table> <a href="http://img.e-com-net.com/image/info8/ab9df35486e1438e8c8264829cf494d8.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ab9df35486e1438e8c8264829cf494d8.jpg" alt="HTML学习_第40张图片" width="650" height="199" style="border:1px solid black;"></a> <div class="cnblogs_code"> <pre><!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> </style> </head> <body> <iframe src="http://www.baidu.com//" width="800px"></iframe> </body> </html></pre> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1281247397237768192"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(HTML学习)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1897161808549048320.htm" title="【HTML学习笔记基础篇】" target="_blank">【HTML学习笔记基础篇】</a> 努力的小好 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>HTML学习笔记基础篇一、HTML概述1.1什么是HTML1.2HTML文档的基本结构二、HTML基础标签2.1标题标签2.2段落标签2.3换行标签2.4链接标签2.6列表标签2.7表格标签三、HTML进阶知识3.1行级元素与块级元素3.3语义化标签四、开发工具与技巧4.1开发工具4.2常用技巧五、总结六、示例一、HTML概述1.1什么是HTMLHTML，全称超文本标记语言（HyperTextMa</div> </li> <li><a href="/article/1896015991305990144.htm" title="HTML学习笔记" target="_blank">HTML学习笔记</a> 誓死守护发际线 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>文章目录(一)HTML简介一、网页1.什么是网页2.什么是HTML二、常用的浏览器1.常用的浏览器2.浏览器内核（渲染引擎）3.web标准(二)HTML标签一、HTML语法规范1.基本语法概述2.标签的关系二、HTML基本结构标签三、网页开发工具1.VSCode的使用：2.vsCode工具生成骨架标签新增代码1）标签2）lang语言3）charset字符集四、HTML常用标签1.语义化标签：2.标</div> </li> <li><a href="/article/1887587940989726720.htm" title="HTML学习笔记（1）" target="_blank">HTML学习笔记（1）</a> 熬夜患者 <a class="tag" taget="_blank" href="/search/HTML/1.htm">HTML</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>VSCode里面ctrl+/注释html元素：直接书写html名称，不需要hellodemo2、h1~h6标签标题标签标题标签标题标签标题标签标题标签标题标签标题标签标题标签3、div标签竖着布局的标签竖着布局的标签竖着布局的标签竖着布局的标签竖着布局的标签4、p标签段落标签段落标签段落标签段落标签段落标签5、a标签超链接标签点击跳转6、img标签7、列表标签列表标</div> </li> <li><a href="/article/1834307166228541440.htm" title="前端html学习笔记--列表标签" target="_blank">前端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/html/1.htm">html</a> <div>HTML列表标签表格是用来显示数据的，列表是用来布局的1.列表包括三大类：无序列表、有序列表、自定义列表一.无序列表无序列表的基本语法格式如下：//标签表示html中的无序列表列表项1列表项2列表项3①无序列表的各个列表项之间是并列的，不分前后顺序②中只能嵌套,不可以在标签中插入其他标签③之间相当于一个容器，可以容纳所有元素二.有序列表即为有排列顺序的列表有序列表的基本语法格式如下：//标签用于定</div> </li> <li><a href="/article/1831334367637630976.htm" title="HTML学习7[重点]" target="_blank">HTML学习7[重点]</a> 乌鸦不像写字台 <a class="tag" taget="_blank" href="/search/html%E5%AD%A6%E4%B9%A0/1.htm">html学习</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/github/1.htm">github</a> <div>HTML表单form一、表单二、提交数据三、用户注册表单四、下拉列表支持多选五、file控件六、hidden控件七、readonly和disabled八、input控件的maxlength一、表单表单有什么用？收集用户信息；表单展现之后，用户填写表单，点击提交按钮提交数据给服务器。怎么画一个表单？使用form标签画表单。一个网页中可以有多个表单form。表单最终是需要提交数据给服务器，form标签</div> </li> <li><a href="/article/1759891808881569792.htm" title="HTML学习笔记——08：表单＜form＞" target="_blank">HTML学习笔记——08：表单＜form＞</a> ruleslol <a class="tag" taget="_blank" href="/search/HTML/1.htm">HTML</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>HTML元素表示文档中的一个区域，此区域包含交互控件，用于向Web服务器提交信息。例如：登录页面。作用：搜集不同类型的用户输入，并向服务器传送数据。注意：表单本身并不可见！！！示例：firstname:lastname:多数情况下被用到的表单标签是输入标签（）。一、表单的属性1、action属性action=”要提交到的页面(xxx.html)”表单提交的地址，可以是网站也可以是一个请求处理地址。</div> </li> <li><a href="/article/1755788820697071616.htm" title="html中表单涉及的标记有哪几个,HTML学习笔记--表单标记" target="_blank">html中表单涉及的标记有哪几个,HTML学习笔记--表单标记</a> 吴端 <div>表单是网页上的一个特定区域。这个区域是由一对标记定义的。这一步有几方面的作用。第一方面，限定表单的范围。其它的表单对象，都要插入到表单之中。单击提交按纽时，提交的也是表单范围之内的内容。第二方面，携带表单的相关信息，例如处理表单的脚本程序的位置、提交表单的方法等。基本语法……语法解释标记的属性如下表所示属性描述name表单的名称method定义表单结果从浏览器传送到服务器的方法，一般有两种方法：g</div> </li> <li><a href="/article/1755723440809066496.htm" title="【html学习笔记】1.概念" target="_blank">【html学习笔记】1.概念</a> 日光倾 <a class="tag" taget="_blank" href="/search/HTML%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/1.htm">HTML学习笔记</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>1.概念1.1HTML标准格式HelloWorld1.2编辑方式新建一个笔记本文件，将html语法格式的内容写入。保存后将记事本的.txt后缀换成.html,就可以在浏览器里运行了1.3中文问题为了避免中文显示异常问题，可以添加代码1.4标签HTML是HyperTextMarkupLanguage超文本标记语言的缩写HTML是由一套标记标签markuptag组成，通常就叫标签标签由开始标签和结束标</div> </li> <li><a href="/article/1755038343529250816.htm" title="HTML学习（MDN）" target="_blank">HTML学习（MDN）</a> LXWHeaven <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E4%B9%8B%E8%B7%AF/1.htm">学习之路</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>HTML介绍HyperTextMarkupLanguage，超文本标记语言，用来定义网页结构。备注HTML对大小写不敏感。当使用标签下载资源（同源URL），提供download属性提供默认的保存文件名。块引用，行内引用，URL指向引用的资源，但是cite属性的内容不会在页面上显示，可以使用显示URL。缩略语（另用于首字母缩略词，已被废弃）。标记联系方式。计算机代码。变量名。电脑键盘或其他类型。标记</div> </li> <li><a href="/article/1754521988644225024.htm" title="re:从0开始的HTML学习之路 12. 表格" target="_blank">re:从0开始的HTML学习之路 12. 表格</a> 扶摇| <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.表格以格式化形式展示数据的一种手段，由行和列组成。使用table标签创建表格tr用于创建表格的行td用于创建表格的列th用于创建表头列，默认加粗且居中2.表格的属性border：设置表格的边框align：设置表格相对于周围元素的对齐方式width、height：设置表格的宽度和高度cellpadding：设置表格边缘与内容之间的空白，默认1pxcellspacing：设置单元格之间的空白，默认</div> </li> <li><a href="/article/1754521989235621888.htm" title="re:从0开始的HTML学习之路 13. 表单（完结撒花）" target="_blank">re:从0开始的HTML学习之路 13. 表单（完结撒花）</a> 扶摇| <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.表单现实生活中的表单：学员->学员信息表->学校存款人->存款单->银行表单：在网页中，用于搜集用户信息，将用户信息提交给后台服务器。一个表单由三个部分组成：表单域、表单控件、提示信息2.表单域包含所有要提交表单控件的区域，将该区域的信息提交给后台服务器。使用form标签创建表单域action：用于指定提交到后台服务器的地址method：用于选择请求方式（在此了解即可，深入了解需要学习Java</div> </li> <li><a href="/article/1754331666274336768.htm" title="转载：Html学习总结" target="_blank">转载：Html学习总结</a> kmoon_b426 <div>Html学习总结1.什么是html:HyperTextMarketlanguage，超文本标记语言,是用来描述网页语言，html使用标记标签来描述网页，html不是编程语言，是一种标记语言。2.经历过得版本:HTML2.0、HTML3.2、HTML4.0、HTML4.0.1、HTML53.H5新特性:•用于绘画的canvas元素•用于媒介回放的video和audio元素•对本地离线存储的更好的支持</div> </li> <li><a href="/article/1753781513561849856.htm" title="2024/1/26HTML学习：合并单元格，表单标签，语义化标签" target="_blank">2024/1/26HTML学习：合并单元格，表单标签，语义化标签</a> Douglas_fan <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</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/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>合并单元格“左上”原则不能跨结构合并表单标签搜索，登录，用户注册方面使用使用频次低1.input系列使用name分组checked默认选项上传多个文件，使用multiple按钮手机端网页</div> </li> <li><a href="/article/1753781385060958208.htm" title="2024/1/24HTML学习：路径" target="_blank">2024/1/24HTML学习：路径</a> Douglas_fan <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>路径3.2.1路径的介绍加载图片，需要找到对应的图片。通过一定的路径路径分两种绝对路径（了解）相对路径（常用）绝对路径：绝对位置，从盘符开始的路径1.盘符开头D:\..................................2.完整的网络地址https://...........................上图为绝对路径，由一个盘符出发mac没有盘符，根目录是'\'相对路径从当前文件开</div> </li> <li><a href="/article/1753315636886388736.htm" title="HTML学习" target="_blank">HTML学习</a> 北冥有鱼_16c5 <div>一名小白，正在努力自学图片发自App图片发自App图片发自App图片发自App图片发自App</div> </li> <li><a href="/article/1753000077330235392.htm" title="curator 入门" target="_blank">curator 入门</a> 冬瓜baba的笔记 <div>http://curator.apache.org/getting-started.html学习ZooKeeperhttp://zookeeper.apache.org/doc/trunk/zookeeperStarted.html使用curatorcurator的JAR包可从MavenCentral获得。Maven，Gradle，Ant等的用户可以轻松地将curator包含在他们的构建脚本中。M</div> </li> <li><a href="/article/1752789713976049664.htm" title="linux 应用最终是怎么调到底层驱动的" target="_blank">linux 应用最终是怎么调到底层驱动的</a> 跟屁虫 <a class="tag" taget="_blank" href="/search/linux%E6%BA%90%E7%A0%81/1.htm">linux源码</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>Linux系统调用怎么和内核或底层驱动交互的：https://www.cnblogs.com/Ph-one/p/8482919.html学习Linux系统下驱动程序开发已有大半年时间，心中一直有个疑惑：那就是诸如open、write、read等系统调用是怎么和内核或底层驱动建立起联系的呢？今天将自己的一些粗略的理解总结如下。学过Linux系统下驱动程序开发的都知道，大部分的基础性的驱动操作都包括3</div> </li> <li><a href="/article/1752480155852357632.htm" title="HTML学习笔记" target="_blank">HTML学习笔记</a> 取个名字太难了a <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5/1.htm">网页</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>一、网页1.1什么是网页网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页合集。网页是网站中的一页，通常是HTML格式的文件，它要通过浏览器来阅读。网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。1.2什么是HTMLHTML指的是超文本标记语言（Hype</div> </li> <li><a href="/article/1752186761510928384.htm" title="第十章单调栈part01(● 739. 每日温度 ● 496.下一个更大元素 I )" target="_blank">第十章单调栈part01(● 739. 每日温度 ● 496.下一个更大元素 I )</a> G_qingxin <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%E7%AC%94%E8%AE%B0/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/%E5%8D%95%E8%B0%83%E6%A0%88/1.htm">单调栈</a> <div>学习目标：●739.每日温度●496.下一个更大元素I学习内容：739.每日温度今天正式开始单调栈，这是单调栈一篇扫盲题目，也是经典题。大家可以读题，思考暴力的解法，然后在看单调栈的解法。就能感受出单调栈的巧妙https://programmercarl.com/0739.%E6%AF%8F%E6%97%A5%E6%B8%A9%E5%BA%A6.html学习内容：496.下一个更大元素I本题和73</div> </li> <li><a href="/article/1752186633504964608.htm" title="第九章动态规划part17(● 647. 回文子串 ● 516.最长回文子序列 ● 动态规划总结篇)" target="_blank">第九章动态规划part17(● 647. 回文子串 ● 516.最长回文子序列 ● 动态规划总结篇)</a> G_qingxin <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%E7%AC%94%E8%AE%B0/1.htm">算法笔记</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E8%A7%84%E5%88%92/1.htm">动态规划</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>学习目标：●647.回文子串●516.最长回文子序列●动态规划总结篇学习内容：647.回文子串动态规划解决的经典题目，如果没接触过的话，别硬想直接看题解。https://programmercarl.com/0647.%E5%9B%9E%E6%96%87%E5%AD%90%E4%B8%B2.html学习内容：516.最长回文子序列回文子串，求的是回文子串，而本题要求的是回文子序列，大家要搞清楚两者</div> </li> <li><a href="/article/1752186247880654848.htm" title="第十章单调栈part02(● 503.下一个更大元素II ● 42. 接雨水 )" target="_blank">第十章单调栈part02(● 503.下一个更大元素II ● 42. 接雨水 )</a> G_qingxin <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%E7%AC%94%E8%AE%B0/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/%E5%8D%95%E8%B0%83%E6%A0%88/1.htm">单调栈</a> <div>学习目标：●503.下一个更大元素II●42.接雨水学习内容：503.下一个更大元素II这道题和739.每日温度几乎如出一辙，可以自己尝试做一做https://programmercarl.com/0503.%E4%B8%8B%E4%B8%80%E4%B8%AA%E6%9B%B4%E5%A4%A7%E5%85%83%E7%B4%A0II.html学习内容：42.接雨水接雨水这道题目是面试中特别高频</div> </li> <li><a href="/article/1752089145880100864.htm" title="Tarjan 算法及其应用" target="_blank">Tarjan 算法及其应用</a> Kwjdefulgn <a class="tag" taget="_blank" href="/search/%E5%9B%BE%E8%AE%BA%E5%9F%BA%E7%A1%80/1.htm">图论基础</a> <div>Tarjan算法及其应用NO.1求强连通分量学习链接：https://www.cnblogs.com/shadowland/p/5872257.html学习心得：dfn[cur]记录访问cur结点的时间戳，low[cur]记录cur结点及其子树中时间戳最小是多少，严格意义上来讲low[cur]，记录的是在不回头遍历父节点的前提下第一次能访问到的最早的已遍历结点的时间戳。显然当访问cur结点的子节点</div> </li> <li><a href="/article/1751781564506718208.htm" title="前端HTML基本知识汇总" target="_blank">前端HTML基本知识汇总</a> 风继续吹Lao.z.c <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>自学前端开发，纯手工，非抄袭，每个知识点均自己收集，不敢保证十分全面，只敢保证笼统囊括前端html学习中的常见知识点。欢迎前端大佬前来补充。十分感谢......1.html基本框架：//这里到后期可以放置一些标签例如......到了后期css.javascript的相关学习就懂了Document//其中的document指的是你所创建的网页的名称//这里写正文内容2.html中框架特殊符号的相关解</div> </li> <li><a href="/article/1749550586602209280.htm" title="HTML学习（六）：列表表格表单" target="_blank">HTML学习（六）：列表表格表单</a> 蔚蓝色的风暴 <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/HTML/1.htm">HTML</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>##列表标签列表标签有三种（1）无序列表在无序列表中，每一项为yoyoyoyo结果为yoyoyoyo注意必须在中具有属性值type其中dics为实心圆点square为实心方点circle为空心圆也有相同的属性值，但不常用（2）有序列表里面每一项都是嗯哦效果为嗯哦具有属性值type属性值可以是1aAiIstart属性决定从几开始注意：是容器级标签，里面可以放任何东西，包括图片，包括（3）定义列表是d</div> </li> <li><a href="/article/1749230701024133120.htm" title="re:从0开始的HTML学习之路 6. 列表标签" target="_blank">re:从0开始的HTML学习之路 6. 列表标签</a> 扶摇| <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>1.列表标签可以整齐有序的展示一些内容2.无序列表使用ul标签创建无序列表使用li标签创建列表项项目1项目2项目33.有序列表使用ol标签创建有序列表使用li标签创建列表项项目1项目2项目34.定义列表使用dl标签创建定义列表使用dt标签创建需要描述的项目使用dd标签创建对项目的描述中国三大中心文化中心金融中心洗浴中心列表可以嵌套，就像这样，无序列表套有序列表济南市历城区历下区深圳市宝安区南山区</div> </li> <li><a href="/article/1749230701447757824.htm" title="re:从0开始的HTML学习之路 7. 图片标签" target="_blank">re:从0开始的HTML学习之路 7. 图片标签</a> 扶摇| <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.图片标签可以向网页中引入一张图片img标签引入图片img是一个自结束标签2.标签的属性src：指定需要插入图片的路径（本地路径，网络路径）alt：替换文本，图片无法正常显示时，替换的文本（有助于搜索引擎对图片的识别）title：提示文本，鼠标停放在图片上时，提示的文本width、height：设置图片的宽度和高度，单位是像素二者设置其中任意一个，另一个会等比例缩小通常不设置图片的宽和高，因为大</div> </li> <li><a href="/article/1749230701904936960.htm" title="re:从0开始的HTML学习之路 8. 路径问题" target="_blank">re:从0开始的HTML学习之路 8. 路径问题</a> 扶摇| <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>1.路径问题（重要）无论使用哪种语言编写应用程序，路径问题都至关重要，只要需要引入资源，必定使用路径2.物理路径比如在我的电脑上，图片所在的路径是D:\Working\WEB\dream.gif如果在HTML中用物理路径引入图片，并在vscode中右键用LiveServer运行，就会发现找不到图片，但在磁盘中打开的话就可以找到这样的话并不能找到图片文件系统：通常使用Windows操作系统，项目完成</div> </li> <li><a href="/article/1749230573915750400.htm" title="re:从0开始的HTML学习之路 0.编辑器安装配置、HTML标准结构生成" target="_blank">re:从0开始的HTML学习之路 0.编辑器安装配置、HTML标准结构生成</a> 扶摇| <a class="tag" taget="_blank" href="/search/%E4%BB%8E0%E5%BC%80%E5%A7%8B%E7%9A%84HTML%E4%B9%8B%E6%97%85/1.htm">从0开始的HTML之旅</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>写在前面感觉学AI好痛苦，还是学点别的吧hh1.安装一个自己会用的编辑器此时选择了VSCode安装一些插件：汉化(可有可无)，LiveServerLiveServer的作用：可以不需要在文件里双击运行(HTML的运行就是在浏览器打开啦）直接右键openwithLiveServer就可以运行写好的HTML文件了或者点点右下角的GOLive多尝试尝试。PS:使用的主题是onedarkpro，字体是fi</div> </li> <li><a href="/article/1749230574565867520.htm" title="re:从0开始的HTML学习之路 9.超链接" target="_blank">re:从0开始的HTML学习之路 9.超链接</a> 扶摇| <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.超链接使用a标签创建超链接超链接的属性href：用于指定跳转到目标页面的地址target：用于指定以什么方式打开页面可选值：_self：当前窗口打开，默认值_blank：新窗口打开2.各种链接介绍外部页面链接百度一下百度两下内部页面链接内部链接语义化标签空链接无指定页面，跳转到当前页面，可以实现“回到顶部”功能毫无反应链接下载链接：若链接的路径是一个文件，则为下载链接下载链接给其他网页元素添加</div> </li> <li><a href="/article/1749229555446464512.htm" title="re:从0开始的HTML学习之路 2. HTML的标准结构说明" target="_blank">re:从0开始的HTML学习之路 2. HTML的标准结构说明</a> 扶摇| <a class="tag" taget="_blank" href="/search/%E4%BB%8E0%E5%BC%80%E5%A7%8B%E7%9A%84HTML%E4%B9%8B%E6%97%85/1.htm">从0开始的HTML之旅</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.文档声明，用于告诉浏览器，当前HTML文档采用的是什么版本。必须写在当前HTML文档的首行（可执行代码的首行）HTML4的此标签与HTML5不同。2.根标签，整个HTML文档中所有标签都必须包裹在HTML根标签中lang：用于说明当前文档使用的语言。如：en为英文，zh-CN为中文，这个标签会影响浏览器的翻译提示，如果浏览器默认为中文，网页lang=en，那么Chrome就会弹出一个翻译提示（</div> </li> <li><a href="/article/88.htm" title="ztree设置禁用节点" target="_blank">ztree设置禁用节点</a> 3213213333332132 <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/ztree/1.htm">ztree</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/setDisabledNode/1.htm">setDisabledNode</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>ztree设置禁用节点的时候注意，当使用ajax后台请求数据,必须要设置为同步获取数据，否者会获取不到节点对象，导致设置禁用没有效果。 $(function(){ showTree(); setDisabledNode(); }); </div> </li> <li><a href="/article/215.htm" title="JVM patch by Taobao" target="_blank">JVM patch by Taobao</a> bookjovi <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a> <div>在网上无意中看到淘宝提交的hotspot patch，共四个，有意思，记录一下。 7050685：jsdbproc64.sh has a typo in the package name 7058036：FieldsAllocationStyle=2 does not work in 32-bit VM 7060619：C1 should respect inline and</div> </li> <li><a href="/article/342.htm" title="将session存储到数据库中" target="_blank">将session存储到数据库中</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/session/1.htm">session</a> <div>CREATE TABLE sessions ( id CHAR(32) NOT NULL, data TEXT, last_accessed TIMESTAMP NOT NULL, PRIMARY KEY (id) ); <?php /** * Created by PhpStorm. * User: michaeldu * Date</div> </li> <li><a href="/article/469.htm" title="Vector" target="_blank">Vector</a> 171815164 <a class="tag" taget="_blank" href="/search/vector/1.htm">vector</a> <div>public Vector<CartProduct> delCart(Vector<CartProduct> cart, String id) { for (int i = 0; i < cart.size(); i++) { if (cart.get(i).getId().equals(id)) { cart.remove(i); </div> </li> <li><a href="/article/596.htm" title="各连接池配置参数比较" target="_blank">各连接池配置参数比较</a> g21121 <a class="tag" taget="_blank" href="/search/%E8%BF%9E%E6%8E%A5%E6%B1%A0/1.htm">连接池</a> <div> 排版真心费劲，大家凑合看下吧，见谅~ Druid DBCP C3P0 Proxool 数据库用户名称 Username Username User 数据库密码 Password Password Password 驱动名</div> </li> <li><a href="/article/723.htm" title="[简单]mybatis insert语句添加动态字段" target="_blank">[简单]mybatis insert语句添加动态字段</a> 53873039oycg <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div> mysql数据库,id自增,配置如下： <insert id="saveTestTb" useGeneratedKeys="true" keyProperty="id" parameterType=&</div> </li> <li><a href="/article/850.htm" title="struts2拦截器配置" target="_blank">struts2拦截器配置</a> 云端月影 <a class="tag" taget="_blank" href="/search/struts2%E6%8B%A6%E6%88%AA%E5%99%A8/1.htm">struts2拦截器</a> <div>struts2拦截器interceptor的三种配置方法方法1. 普通配置法 <struts> <package name="struts2" extends="struts-default"> &</div> </li> <li><a href="/article/977.htm" title="IE中页面不居中，火狐谷歌等正常" target="_blank">IE中页面不居中，火狐谷歌等正常</a> aijuans <a class="tag" taget="_blank" href="/search/IE%E4%B8%AD%E9%A1%B5%E9%9D%A2%E4%B8%8D%E5%B1%85%E4%B8%AD/1.htm">IE中页面不居中</a> <div>问题是首页在火狐、谷歌、所有IE中正常显示，列表页的页面在火狐谷歌中正常，在IE6、7、8中都不中，觉得可能那个地方设置的让IE系列都不认识，仔细查看后发现，列表页中没写HTML模板部分没有添加DTD定义，就是<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3</div> </li> <li><a href="/article/1104.htm" title="String,int,Integer,char 几个类型常见转换" target="_blank">String,int,Integer,char 几个类型常见转换</a> antonyup_2006 <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a> <div>如何将字串 String 转换成整数 int? int i = Integer.valueOf(my_str).intValue(); int i=Integer.parseInt(str); 如何将字串 String 转换成Integer ? Integer integer=Integer.valueOf(str); 如何将整数 int 转换成字串 String ? 1.</div> </li> <li><a href="/article/1231.htm" title="PL/SQL的游标类型" target="_blank">PL/SQL的游标类型</a> 百合不是茶 <a class="tag" taget="_blank" href="/search/%E6%98%BE%E7%A4%BA%E6%B8%B8%E6%A0%87%28%E9%9D%99%E6%80%81%E6%B8%B8%E6%A0%87%29/1.htm">显示游标(静态游标)</a><a class="tag" taget="_blank" href="/search/%E9%9A%90%E5%BC%8F%E6%B8%B8%E6%A0%87/1.htm">隐式游标</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%A0%87%E7%9A%84%E6%9B%B4%E6%96%B0%E5%92%8C%E5%88%A0%E9%99%A4/1.htm">游标的更新和删除</a><a class="tag" taget="_blank" href="/search/%25rowtype/1.htm">%rowtype</a><a class="tag" taget="_blank" href="/search/ref%E6%B8%B8%E6%A0%87%28%E5%8A%A8%E6%80%81%E6%B8%B8%E6%A0%87%29/1.htm">ref游标(动态游标)</a> <div>游标是oracle中的一个结果集,用于存放查询的结果; PL/SQL中游标的声明; 1,声明游标 2,打开游标(默认是关闭的); 3,提取数据 4,关闭游标注意的要点:游标必须声明在declare中,使用open打开游标,fetch取游标中的数据,close关闭游标隐式游标:主要是对DML数据的操作隐</div> </li> <li><a href="/article/1358.htm" title="JUnit4中@AfterClass @BeforeClass @after @before的区别对比" target="_blank">JUnit4中@AfterClass @BeforeClass @after @before的区别对比</a> bijian1013 <a class="tag" taget="_blank" href="/search/JUnit4/1.htm">JUnit4</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>一.基础知识 JUnit4使用Java5中的注解（annotation），以下是JUnit4常用的几个annotation： @Before：初始化方法对于每一个测试方法都要执行一次（注意与BeforeClass区别，后者是对于所有方法执行一次）@After：释放资源对于每一个测试方法都要执行一次（注意与AfterClass区别，后者是对于所有方法执行一次</div> </li> <li><a href="/article/1485.htm" title="精通Oracle10编程SQL(12)开发包" target="_blank">精通Oracle10编程SQL(12)开发包</a> bijian1013 <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/plsql/1.htm">plsql</a> <div>/* *开发包 *包用于逻辑组合相关的PL/SQL类型（例如TABLE类型和RECORD类型）、PL/SQL项（例如游标和游标变量）和PL/SQL子程序（例如过程和函数） */ --包用于逻辑组合相关的PL/SQL类型、项和子程序，它由包规范和包体两部分组成 --建立包规范：包规范实际是包与应用程序之间的接口，它用于定义包的公用组件，包括常量、变量、游标、过程和函数等 --在包规</div> </li> <li><a href="/article/1612.htm" title="【EhCache二】ehcache.xml配置详解" target="_blank">【EhCache二】ehcache.xml配置详解</a> bit1129 <a class="tag" taget="_blank" href="/search/ehcache.xml/1.htm">ehcache.xml</a> <div>在ehcache官网上找了多次，终于找到ehcache.xml配置元素和属性的含义说明文档了，这个文档包含在ehcache.xml的注释中！ ehcache.xml ： http://ehcache.org/ehcache.xml ehcache.xsd ： http://ehcache.org/ehcache.xsd ehcache配置文件的根元素是ehcahe ehcac</div> </li> <li><a href="/article/1739.htm" title="java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderL" target="_blank">java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderL</a> 白糖_ <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a> <div>今天学习spring+cxf的时候遇到一个问题：在web.xml中配置了spring的上下文监听器： <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> 随后启动</div> </li> <li><a href="/article/1866.htm" title="angular.element" target="_blank">angular.element</a> boyitech <a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/AngularJS+API/1.htm">AngularJS API</a><a class="tag" taget="_blank" href="/search/angular.element/1.htm">angular.element</a> <div>angular.element 描述: 包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。（类似于jQuery的选择器啦）如果jQuery被引入了，则angular.element就可以看作是jQuery选择器，选择的对象可以使用jQuery的函数；如果jQuery不可用，angular.e</div> </li> <li><a href="/article/1993.htm" title="java-给定两个已排序序列，找出共同的元素。" target="_blank">java-给定两个已排序序列，找出共同的元素。</a> bylijinnan <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class CommonItemInTwoSortedArray { /** * 题目：给定两个已排序序列，找出共同的元素。 * 1.定义两个指针分别指向序列的开始。 * 如果指向的两个元素</div> </li> <li><a href="/article/2120.htm" title="sftp 异常，有遇到的吗？求解" target="_blank">sftp 异常，有遇到的吗？求解</a> Chen.H <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jcraft/1.htm">jcraft</a><a class="tag" taget="_blank" href="/search/auth/1.htm">auth</a><a class="tag" taget="_blank" href="/search/jsch/1.htm">jsch</a><a class="tag" taget="_blank" href="/search/jschexception/1.htm">jschexception</a> <div>com.jcraft.jsch.JSchException: Auth cancel at com.jcraft.jsch.Session.connect(Session.java:460) at com.jcraft.jsch.Session.connect(Session.java:154) at cn.vivame.util.ftp.SftpServerAccess.connec</div> </li> <li><a href="/article/2247.htm" title="[生物智能与人工智能]神经元中的电化学结构代表什么?" target="_blank">[生物智能与人工智能]神经元中的电化学结构代表什么?</a> comsci <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div> 我这里做一个大胆的猜想,生物神经网络中的神经元中包含着一些化学和类似电路的结构,这些结构通常用来扮演类似我们在拓扑分析系统中的节点嵌入方程一样,使得我们的神经网络产生智能判断的能力,而这些嵌入到节点中的方程同时也扮演着"经验"的角色.... 我们可以尝试一下...在某些神经</div> </li> <li><a href="/article/2374.htm" title="通过LAC和CID获取经纬度信息" target="_blank">通过LAC和CID获取经纬度信息</a> dai_lm <a class="tag" taget="_blank" href="/search/lac/1.htm">lac</a><a class="tag" taget="_blank" href="/search/cid/1.htm">cid</a> <div>方法1：用浏览器打开http://www.minigps.net/cellsearch.html，然后输入lac和cid信息(mcc和mnc可以填0)，如果数据正确就可以获得相应的经纬度方法2：发送HTTP请求到http://www.open-electronics.org/celltrack/cell.php?hex=0&lac=<lac>&cid=&</div> </li> <li><a href="/article/2501.htm" title="JAVA的困难分析" target="_blank">JAVA的困难分析</a> datamachine <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>前段时间转了一篇SQL的文章（http://datamachine.iteye.com/blog/1971896），文章不复杂，但思想深刻，就顺便思考了一下java的不足，当砖头丢出来，希望引点和田玉。 -----------------------------------------------------------------------------------------</div> </li> <li><a href="/article/2628.htm" title="小学5年级英语单词背诵第二课" target="_blank">小学5年级英语单词背诵第二课</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/english/1.htm">english</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a> <div>money 钱 paper 纸 speak 讲，说 tell 告诉 remember 记得，想起 knock 敲，击，打 question 问题 number 数字，号码 learn 学会，学习 street 街道 carry 搬运，携带 send 发送，邮寄，发射 must 必须 light 灯，光线，轻的 front </div> </li> <li><a href="/article/2755.htm" title="linux下面没有tree命令" target="_blank">linux下面没有tree命令</a> dcj3sjt126com <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>centos p安装 yum -y install tree mac os安装 brew install tree 首先来看tree的用法 tree 中文解释：tree 功能说明：以树状图列出目录的内容。语　　法：tree [-aACdDfFgilnNpqstux][-I <范本样式>][-P <范本样式</div> </li> <li><a href="/article/2882.htm" title="Map迭代方式，Map迭代，Map循环" target="_blank">Map迭代方式，Map迭代，Map循环</a> 蕃薯耀 <a class="tag" taget="_blank" href="/search/Map%E5%BE%AA%E7%8E%AF/1.htm">Map循环</a><a class="tag" taget="_blank" href="/search/Map%E8%BF%AD%E4%BB%A3/1.htm">Map迭代</a><a class="tag" taget="_blank" href="/search/Map%E8%BF%AD%E4%BB%A3%E6%96%B9%E5%BC%8F/1.htm">Map迭代方式</a> <div>Map迭代方式，Map迭代，Map循环 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年</div> </li> <li><a href="/article/3009.htm" title="Spring Cache注解+Redis" target="_blank">Spring Cache注解+Redis</a> hanqunfeng <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>Spring3.1 Cache注解依赖jar包：  <dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-redis</artifactId> </div> </li> <li><a href="/article/3136.htm" title="Guava中针对集合的 filter和过滤功能" target="_blank">Guava中针对集合的 filter和过滤功能</a> jackyrong <a class="tag" taget="_blank" href="/search/filter/1.htm">filter</a> <div>在guava库中，自带了过滤器(filter)的功能，可以用来对collection 进行过滤，先看例子： @Test public void whenFilterWithIterables_thenFiltered() { List<String> names = Lists.newArrayList("John"</div> </li> <li><a href="/article/3263.htm" title="学习编程那点事" target="_blank">学习编程那点事</a> lampcy <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>一年前的夏天，我还在纠结要不要改行，要不要去学php？能学到真本事吗？改行能成功吗？太多的问题，我终于不顾一切，下定决心，辞去了工作，来到传说中的帝都。老师给的乘车方式还算有效，很顺利的就到了学校，赶巧了，正好学校搬到了新校区。先安顿了下来，过了个轻松的周末，第一次到帝都，逛逛吧！接下来的周一，是我噩梦的开始，学习内容对我这个零基础的人来说，除了勉强完成老师布置的作业外，我已经没有时间和精力去</div> </li> <li><a href="/article/3390.htm" title="架构师之流处理---------bytebuffer的mark,limit和flip" target="_blank">架构师之流处理---------bytebuffer的mark,limit和flip</a> nannan408 <a class="tag" taget="_blank" href="/search/ByteBuffer/1.htm">ByteBuffer</a> <div>1.前言。如题，limit其实就是可以读取的字节长度的意思，flip是清空的意思，mark是标记的意思。 2.例子. 例子代码: String str = "helloWorld"; ByteBuffer buff = ByteBuffer.wrap(str.getBytes()); Sy</div> </li> <li><a href="/article/3517.htm" title="org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1, column 1" target="_blank">org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1, column 1</a> Everyday都不同 <a class="tag" taget="_blank" href="/search/%24/1.htm">$</a><a class="tag" taget="_blank" href="/search/%E8%BD%AC%E4%B9%89/1.htm">转义</a><a class="tag" taget="_blank" href="/search/el%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">el表达式</a> <div>最近在做Highcharts的过程中，在写js时，出现了以下异常：严重: Servlet.service() for servlet jsp threw exception org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1, </div> </li> <li><a href="/article/3644.htm" title="用Java实现发送邮件到163" target="_blank">用Java实现发送邮件到163</a> tntxia <a class="tag" taget="_blank" href="/search/java%E5%AE%9E%E7%8E%B0/1.htm">java实现</a> <div>/* 在java版经常看到有人问如何用javamail发送邮件？如何接收邮件？如何访问多个文件夹等。问题零散，而历史的回复早已经淹没在问题的海洋之中。本人之前所做过一个java项目，其中包含有WebMail功能，当初为用java实现而对javamail摸索了一段时间，总算有点收获。看到论坛中的经常有此方面的问题，因此把我的一些经验帖出来，希望对大家有些帮助。此篇仅介绍用</div> </li> <li><a href="/article/3771.htm" title="探索实体类存在的真正意义" target="_blank">探索实体类存在的真正意义</a> java小叶檀 <a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a> <div>一. 实体类简述实体类其实就是俗称的POJO,这种类一般不实现特殊框架下的接口，在程序中仅作为数据容器用来持久化存储数据用的 POJO（Plain Old Java Objects）简单的Java对象它的一般格式就是 public class A{ private String id; public Str</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> 按字母分类： <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>