HTML学习

HTML学习

B/S架构介绍

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

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

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

 

HTML学习_第1张图片

 

  我们这里也可以通过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()

 

HTML学习_第2张图片

 

  可以看到,上图我们的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学习_第3张图片

 

标签相关介绍

  我们来看一下上面的这一小段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属性

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

 


<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属性

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

 


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

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

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

 

HTML学习_第4张图片

 

HTML学习_第5张图片

 

title 标签


  </code><span class="md-plain">标签可以设置网页的标题名称。</span></span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <h3 class="md-end-block md-heading"><span><span class="md-plain">link 标签</span></span></h3> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s"><code><link></code><span class="md-plain">标签一般都是用于引入一些资源。如网页的缩略图,网页所需要的css文件,js文件等等。它有两个重要的属性,<span class="md-pair-s"><code>ref</code><span class="md-plain">与<span class="md-pair-s"><code>href</code><span class="md-plain">。</span></span></span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s "><strong>ref属性</strong></span></span></p> <p class="md-end-block md-p"><span class="md-tab">     <span class="md-plain">一般用于表示资源的类型,如图标文件<span class="md-pair-s"><code>icon</code><span class="md-plain">,css文件<span class="md-pair-s"><code>stylesheet</code><span class="md-plain">等等。</span></span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s "><strong>href属性</strong></span></span></p> <p class="md-end-block md-p"><span class="md-tab">     <span class="md-plain">表示需要链接的资源地址。</span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p">  <span class="md-pair-s"><code><link rel="icon" href="http://5b0988e595225.cdn.sohucs.com/images/20180418/5b68cd1128d44c64af8234b43f57b233.jpeg"></code></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <h3 class="md-end-block md-heading"><span><span class="md-plain">script 标签</span></span></h3> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p">  <span class="md-tab"><span class="md-pair-s"><code><script></code><span class="md-plain">标签是用于引入js文件,这个一般不会将它放在<span class="md-pair-s"><code><head></code><span class="md-plain">标签中,但是也会有人这么做。它有一个属性<span class="md-pair-s"><code>src</code><span class="md-plain">,即引入的js文件链接地址。</span></span></span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p">  <span class="md-pair-s"><code><script src="xxx"></script></code></span></p> <p class="md-end-block md-p"> </p> <h2 class="md-end-block md-heading"><span><span class="md-plain">body 主体标签</span></span></h2> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">该标签的作用是提供给用户预览的内容区域,你可以在<span class="md-pair-s"><code><body></code><span class="md-plain">标签中写上如下的常用标签以及特殊符号来构建你的网页:</span></span></span></span></p> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><span style="font-size: 18px;"><span class="td-span"><<span class="md-plain">body>标签中所包含的常用标签</span></span>  </span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-pair-s "><strong>标签名称</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>功能描述</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>display</strong></span></span></td> </tr> <tr class="md-end-block"> <td colspan="3"><span class="td-span"><span class="md-pair-s "><strong>字体相关</strong></span></span>  </td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">font></span></span></span></td> <td><span class="td-span"><span class="md-plain">规定文本的字体、字体尺寸、字体颜色。不建议使用</span></span></td> <td><span class="td-span"><span class="md-plain">inline</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">hn></span></span></span></td> <td><span class="td-span"><span class="md-pair-s"><code>n</code><span class="md-plain">的取值范围是1~6; 从大到小. 用来表示标题.<span class="md-pair-s"><code>h</code><span class="md-plain">系列独占一行</span></span></span></span></span></td> <td><span class="td-span"><span class="md-plain">block</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">b></span></span></span></td> <td><span class="td-span"><span class="md-plain">文字加粗</span></span></td> <td><span class="td-span"><span class="md-plain">inline</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">strong></span></span></span></td> <td><span class="td-span"><span class="md-plain">文字加粗</span></span></td> <td><span class="td-span"><span class="md-plain">inline</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">i></span></span></span></td> <td><span class="td-span"><span class="md-plain">文字变斜体</span></span></td> <td><span class="td-span"><span class="md-plain">inline</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">em></span></span></span></td> <td><span class="td-span"><span class="md-plain">文字变斜体</span></span></td> <td><span class="td-span"><span class="md-plain">inline</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">u></span></span></span></td> <td><span class="td-span"><span class="md-plain">文字加入下划线</span></span></td> <td><span class="td-span"><span class="md-plain">inline</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">s></span></span></span></td> <td><span class="td-span"><span class="md-plain">文字加入删除线</span></span></td> <td><span class="td-span"><span class="md-plain">inline</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">del></span></span></span></td> <td><span class="td-span"><span class="md-plain">文字加入删除线</span></span></td> <td><span class="td-span"><span class="md-plain">inline</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">strike></span></span></span></td> <td><span class="td-span"><span class="md-plain">文字加入删除线,H5不建议使用</span></span></td> <td><span class="td-span"><span class="md-plain">inline</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">sup></span></span></span></td> <td><span class="td-span"><span class="md-plain">上角标</span></span></td> <td><span class="td-span"><span class="md-plain">inline</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">sub></span></span></span></td> <td><span class="td-span"><span class="md-plain">下角标</span></span></td> <td><span class="td-span"><span class="md-plain">inline</span></span></td> </tr> <tr class="md-end-block"> <td colspan="3"><span class="td-span"><span class="md-pair-s "><strong>排版相关</strong></span></span>  </td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">div></span></span></span></td> <td><span class="td-span"><span class="md-plain">分割标签,布局使用</span></span></td> <td><span class="td-span"><span class="md-plain">block</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">span></span></span></span></td> <td><span class="td-span"><span class="md-plain">用来组合文档中的行内元素,与<span class="md-pair-s"><code><div></code><span class="md-plain">标签类似</span></span></span></span></td> <td><span class="td-span"><span class="md-plain">inline</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">br></span></span></span></td> <td><span class="td-span"><span class="md-plain">换行</span></span></td> <td><span class="td-span"><span class="md-plain">inline</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">p></span></span></span></td> <td><span class="td-span"><span class="md-plain">换行</span></span></td> <td><span class="td-span"><span class="md-plain">block</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">hr></span></span></span></td> <td><span class="td-span"><span class="md-plain">水平线,一条很细的横线</span></span></td> <td><span class="td-span"><span class="md-plain">inline</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">center></span></span></span></td> <td><span class="td-span"><span class="md-plain">居中,H5不建议使用</span></span></td> <td><span class="td-span"><span class="md-plain">block</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">pre></span></span></span></td> <td><span class="td-span"><span class="md-plain">预格式化,H5不建议使用</span></span></td> <td><span class="td-span"><span class="md-plain">block</span></span></td> </tr> <tr class="md-end-block"> <td colspan="3"><span class="td-span"><span class="md-pair-s "><strong>列表相关</strong></span></span>  </td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">ul>系列</span></span></span></td> <td><span class="td-span"><span class="md-plain">用于定义无序列表。</span></span></td> <td><span class="td-span"><span class="md-plain">block</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">ol>系列</span></span></span></td> <td><span class="td-span"><span class="md-plain">用于定义有序列表。</span></span></td> <td><span class="td-span"><span class="md-plain">block</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">dl>系列</span></span></span></td> <td><span class="td-span"><span class="md-plain">用于定义自定义列表。</span></span></td> <td><span class="td-span"><span class="md-plain">block</span></span></td> </tr> <tr class="md-end-block"> <td colspan="3"><span class="td-span"><span class="md-pair-s "><strong>表单相关</strong></span></span>  </td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">form>系列</span></span></span></td> <td><span class="td-span"><span class="md-plain">用于创建供用户输入的 HTML 表单。</span></span></td> <td><span class="td-span"><span class="md-plain">block</span></span></td> </tr> <tr class="md-end-block"> <td colspan="3"><span class="td-span"><span class="md-pair-s "><strong>表格相关</strong></span></span>  </td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">table>系列</span></span></span></td> <td><span class="td-span"><span class="md-plain">定义 HTML 表格</span></span></td> <td><span class="td-span"><span class="md-plain">block</span></span></td> </tr> <tr class="md-end-block"> <td colspan="3"><span class="td-span"><span class="md-pair-s "><strong>超链接</strong></span></span>  </td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">a></span></span></span></td> <td><span class="td-span"><span class="md-plain">定义超链接,用于从一个页面链接到另一个页面。</span></span></td> <td><span class="td-span"><span class="md-plain">inline</span></span></td> </tr> <tr class="md-end-block"> <td colspan="3"><span class="td-span"><span class="md-pair-s "><strong>图像资源</strong></span></span>  </td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">img></span></span></span></td> <td><span class="td-span"><span class="md-plain">定义 HTML 页面中的图像。</span></span></td> <td><span class="td-span"><span class="md-plain">inline-block</span></span></td> </tr> <tr class="md-end-block"> <td colspan="3"><span class="td-span"><span class="md-pair-s "><strong>内联框架</strong></span></span>  </td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">iframe></span></span></span></td> <td><span class="td-span"><span class="md-plain">规定一个内联框架。</span></span></td> <td><span class="td-span"><span class="md-plain">inline</span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="2"><span style="font-size: 18px;"><span class="td-span"><<span class="md-plain">body>标签中所包含的常用特殊字符</span></span> </span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-pair-s "><strong>特殊字符</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>含义</strong></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span>&<span class="md-plain">nbsp;</span></span></span></td> <td><span class="td-span"><span class="md-plain">空格</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span>&<span class="md-plain">lt;</span></span></span></td> <td><span class="td-span"><span class="md-plain">小于号 <span class="md-pair-s"><code><</code></span></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span>&<span class="md-plain">gt;</span></span></span></td> <td><span class="td-span"><span class="md-plain">大于号 <span class="md-pair-s"><code>></code></span></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span>&<span class="md-plain">quot;</span></span></span></td> <td><span class="td-span"><span class="md-plain">双引号 <span class="md-pair-s"><code>''</code></span></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span>&<span class="md-plain">copy;</span></span></span></td> <td><span class="td-span"><span class="md-plain">圆圈c ©</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span>&<span class="md-plain">reg;</span></span></span></td> <td><span class="td-span"><span class="md-plain">圆圈r ®</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span>&<span class="md-plain">trade;</span></span></span></td> <td><span class="td-span"><span class="md-plain">商标<span class="md-pair-s"><code>™</code></span></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span>&<span class="md-plain">amp;</span></span></span></td> <td><span class="td-span"><span class="md-plain">符号<span class="md-pair-s"><code>&</code></span></span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <h3 class="md-end-block md-heading"><span class="md-plain">内联标签与块级标签</span></h3> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">上面表格中,有个<span class="md-pair-s "><strong>display</strong><span class="md-plain">列,其中<span class="md-pair-s"><code>block</code><span class="md-plain">为块级标签,<span class="md-pair-s"><code>inline</code><span class="md-plain">为内联标签。</span></span></span></span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <blockquote> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">内联标签的特点:</span></span></p> <p class="md-end-block md-p"><span class="md-tab">     <span class="md-plain">1.和其他元素都在一行上</span></span></p> <p class="md-end-block md-p"><span class="md-tab">     <span class="md-plain">2.不可设置宽高</span></span></p> <p class="md-end-block md-p"><span class="md-tab">     <span class="md-plain">3.宽度就是它的文字或图片的宽度,不可改变</span></span></p> <p class="md-end-block md-p"><span class="md-tab">     <span class="md-plain">4.内联元素只能容纳文本或者其他内联元素</span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">特殊的2个内联标签:</span></span></p> <p class="md-end-block md-p"><span class="md-tab">     <span class="md-pair-s"><code><img></code><span class="md-plain">,<span class="md-pair-s"><code><input></code><span class="md-plain">可设置宽高,这是2个特殊的内联标签,所以被标为<span class="md-pair-s"><code>inline-block</code><span class="md-plain">,是指能设置宽高的内联标签,也被称为内联块级标签。</span></span></span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">块级标签的特点:</span></span></p> <p class="md-end-block md-p"><span class="md-tab">     <span class="md-plain">1.总是在新行上开始;</span></span></p> <p class="md-end-block md-p"><span class="md-tab">     <span class="md-plain">2.可设置宽高</span></span></p> <p class="md-end-block md-p"><span class="md-tab">     <span class="md-plain">3.宽度缺省是它的容器的100%,除非设定一个宽度。</span></span></p> <p class="md-end-block md-p"><span class="md-tab">     <span class="md-plain">4.它可以容纳内联元素和其他块元素</span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-plain">  块级元素的嵌套规则:</span></p> <p class="md-end-block md-p"><span class="md-tab">     <span class="md-plain">1.块级元素可以包含内联元素或者某些块级元素但内联元素不可以包含块级元素,它们只能包含内联元素</span></span></p> <p class="md-end-block md-p"><span class="md-tab">     <span class="md-plain">2.有几个特殊的块级元素只能包含内联元素,不能包含块级元素如<span class="md-pair-s"><code><h1-6></code><span class="md-plain">,<span class="md-pair-s"><code><dt></code><span class="md-plain">,<span class="md-pair-s"><code><p></code></span></span></span></span></span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">     <span class="md-plain">3.<span class="md-pair-s"><code><li></code><span class="md-plain">内可以包含<span class="md-pair-s"><code><div></code></span></span></span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">     <span class="md-plain">4.块级元素与块级元素并列,内联元素与内联元素并列</span></span></p> <p class="md-end-block md-p"> </p> </blockquote> <p class="md-end-block md-p"> </p> <h3 class="md-end-block md-heading"><span class="md-plain">两个重要的通用属性</span></h3> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"><span class="md-tab">   所有<span class="md-plain">标签都可以设置两个非常重要的通用属性,他们分别是<span class="md-pair-s"><code>id</code><span class="md-plain">与<span class="md-pair-s"><code>class</code><span class="md-plain">。</span></span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <blockquote> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s"><code>id</code><span class="md-plain">是HTML4.0后加入的,此前都是<span class="md-pair-s"><code>name</code><span class="md-plain">,<span class="md-pair-s"><code>id</code><span class="md-plain"> 在 当前HTML 文档中必须是唯一的。</span></span></span></span></span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s"><code>class</code><span class="md-plain">的作用为规定元素的一个或多个类名(引用样式表中的类)。<span class="md-pair-s"><code>class</code><span class="md-plain">并不具有唯一性。</span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <strong><span class="md-plain">建议:<span class="md-pair-s"><code>class</code><span class="md-plain">的命名用 <span class="md-pair-s"><code>-</code><span class="md-plain"> 来链接,而<span class="md-pair-s"><code>id</code><span class="md-plain">的命名用 <span class="md-pair-s"><code>_</code><span class="md-plain"> 来链接。</span></span></span></span></span></span></span></span></span></strong></span></p> </blockquote> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="header-menu"</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 头部菜单 </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="left-menu"</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 左侧菜单 </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="nav_right"</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 右导航栏 </span><span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p class="md-end-block md-p"> </p> <h3 class="md-end-block md-heading"><span class="md-plain">字体相关标签</span></h3> <div class="md-hr md-end-block"> <hr> </div> <h4 class="md-end-block md-heading"><span><span class="md-plain">font 文字</span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">作用:规定文本的字体、字体尺寸、字体颜色。不建议使用</span></span></p> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th><span class="td-span"><span class="md-plain">属性</span></span></th> <th><span class="td-span"><span class="md-plain">值</span></span></th> <th><span class="td-span"><span class="md-plain">描述</span></span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">color</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em><span class="md-plain">rgb(x,x,x),<span class="md-pair-s "><strong><span class="md-plain">#xxxxxx</span></strong><span class="md-plain">,colorname</span></span></span></em></span></span></td> <td><span class="td-span"><span class="md-plain">不赞成使用。请使用样式取代它。规定文本的颜色。设置方式:单词 <span class="md-pair-s"><code>#ff00cc</code><span class="md-plain"> ,或者<span class="md-pair-s"><code>rgb(0,0,255)</code><span class="md-plain">。</span></span></span></span></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">face</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>font_family</em></span></span></td> <td><span class="td-span"><span class="md-plain">不赞成使用。请使用样式取代它。规定文本的字体。设置字体。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">size</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>number</em></span></span></td> <td><span class="td-span"><span class="md-plain">不赞成使用。请使用样式取代它。规定文本的大小,范围为1-7</span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">font </span><span style="color: #ff0000;">color</span><span style="color: #0000ff;">="red"</span><span style="color: #ff0000;"> size</span><span style="color: #0000ff;">="6"</span><span style="color: #ff0000;"> face</span><span style="color: #0000ff;">="微软雅黑"</span><span style="color: #0000ff;">></span>你好啊!<span style="color: #0000ff;"></</span><span style="color: #800000;">font</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">br </span><span style="color: #0000ff;">/></span><span style="color: #000000;"> 你好啊! </span><span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span><span class="md-plain">hn 标题</span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">作用:<span class="md-pair-s"><code>n</code><span class="md-plain">的取值范围是1~6; 从大到小. 用来表示标题.<span class="md-pair-s"><code>h</code><span class="md-plain">系列独占一行</span></span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th><span class="td-span"><span class="md-plain">属性</span></span></th> <th><span class="td-span"><span class="md-plain">值</span></span></th> <th><span class="td-span"><span class="md-plain">描述</span></span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">align</span></span></span></td> <td><span class="td-span"><span class="md-plain">left,center,right,justify</span></span></td> <td><span class="td-span"><span class="md-plain">不推荐使用。请使用样式替代它。规定标题中文本的排列。</span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>这是标题 1<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>这是标题 2<span style="color: #0000ff;"></</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span>这是标题 3<span style="color: #0000ff;"></</span><span style="color: #800000;">h3</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>这是标题 4<span style="color: #0000ff;"></</span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h5</span><span style="color: #0000ff;">></span>这是标题 5<span style="color: #0000ff;"></</span><span style="color: #800000;">h5</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h6</span><span style="color: #0000ff;">></span>这是标题 6<span style="color: #0000ff;"></</span><span style="color: #800000;">h6</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span><span class="md-plain">b 加粗</span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">作用:文字加粗</span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>这是普通文本 - <span style="color: #0000ff;"><</span><span style="color: #800000;">b</span><span style="color: #0000ff;">></span>这是粗体文本<span style="color: #0000ff;"></</span><span style="color: #800000;">b</span><span style="color: #0000ff;">></span>。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span><span class="md-plain">strong 加粗</span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">作用:文字加粗</span></span></p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>这是普通文本 - <span style="color: #0000ff;"><</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>这是粗体文本<span style="color: #0000ff;"></</span><span style="color: #800000;">strong</span><span style="color: #0000ff;">></span>。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span><span class="md-plain">i 斜体</span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">作用:文字变斜体</span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>这是普通文本 - <span style="color: #0000ff;"><</span><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>这是斜体文本<span style="color: #0000ff;"></</span><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span><span class="md-plain">em 斜体</span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">作用:文字变斜体</span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>这是普通文本 - <span style="color: #0000ff;"><</span><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>这是斜体文本<span style="color: #0000ff;"></</span><span style="color: #800000;">em</span><span style="color: #0000ff;">></span>。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span><span class="md-plain">u 下划线</span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">作用:文字加入下划线</span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>这是普通文本 - <span style="color: #0000ff;"><</span><span style="color: #800000;">u</span><span style="color: #0000ff;">></span>这是有下划线的文本<span style="color: #0000ff;"></</span><span style="color: #800000;">u</span><span style="color: #0000ff;">></span>。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span><span class="md-plain">s 删除线</span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">作用:文字加入删除线</span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>这是普通文本 - <span style="color: #0000ff;"><</span><span style="color: #800000;">del</span><span style="color: #0000ff;">></span>这是有删除线的文本<span style="color: #0000ff;"></</span><span style="color: #800000;">del</span><span style="color: #0000ff;">></span>。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span><span class="md-plain">del 删除线</span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">作用:文字加入删除线</span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>这是普通文本 - <span style="color: #0000ff;"><</span><span style="color: #800000;">del</span><span style="color: #0000ff;">></span>这是有删除线的文本<span style="color: #0000ff;"></</span><span style="color: #800000;">del</span><span style="color: #0000ff;">></span>。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span><span class="md-plain">strike 删除线</span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">作用:文字加入删除线,H5不建议使用</span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>这是普通文本 - <span style="color: #0000ff;"><</span><span style="color: #800000;">strike</span><span style="color: #0000ff;">></span>这是有删除线的文本<span style="color: #0000ff;"></</span><span style="color: #800000;">strike</span><span style="color: #0000ff;">></span>。<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span><span class="md-plain">sup与<span><span class="md-plain">sub 角标</span></span></span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">作用:上角标和下角标</span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>上角标<span style="color: #0000ff;"><</span><span style="color: #800000;">sup</span><span style="color: #0000ff;">></span>3<span style="color: #0000ff;"></</span><span style="color: #800000;">sup</span><span style="color: #0000ff;">></span>下角标<span style="color: #0000ff;"><</span><span style="color: #800000;">sub</span><span style="color: #0000ff;">></span>2<span style="color: #0000ff;"></</span><span style="color: #800000;">sub</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p class="md-end-block md-p"> </p> <h3 class="md-end-block md-heading"><span class="md-plain">排版相关标签</span></h3> <div class="md-hr md-end-block"> <hr> </div> <h4 class="md-end-block md-heading"><span><span class="md-plain">div与<span><span class="md-plain">span 布局</span></span></span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s"><code><div></code><span class="md-plain">作用:分割标签,布局使用。如果只会单纯的HTML,那么它的作用性很小,所以这里不太好举例。</span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s"><code><span></code><span class="md-plain">作用:用来组合文档中的行内元素,与<span class="md-pair-s"><code><div></code><span class="md-plain">标签类似,如果只会HTML,那么它的作用性也很小,不太好举例。</span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <blockquote> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s "><strong><span class="md-pair-s"><code><span></code><span class="md-plain">和<span class="md-pair-s"><code><div></code><span class="md-plain">唯一的区别在于</span></span></span></span></strong><span class="md-plain">:<span class="md-pair-s"><code><span></code><span class="md-plain">是不换行的,而<span class="md-pair-s"><code><div></code><span class="md-plain">是换行的。</span></span></span></span></span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">如果单独在网页中插入这两个元素,不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说,DIV+CSS来实现各种样式。</span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s"><code><div></code><span class="md-plain">在浏览器中,默认是不会增加任何的效果的,但是语义变了,<span class="md-pair-s"><code><div></code><span class="md-plain">中的所有元素是一个小区域。</span></span></span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s"><code><div></code><span class="md-plain">标签是一个<span class="md-pair-s "><strong>容器级</strong><span class="md-plain">标签,里面什么都能放,甚至可以放div自己。</span></span></span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s"><code><span></code><span class="md-plain">也是表达“小区域、小跨度”的标签,但是是一个<span class="md-pair-s "><strong>文本级</strong><span class="md-plain">的标签。</span></span></span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">就是说,<span class="md-pair-s"><code><span></code><span class="md-plain">里面只能放置文字、图片、表单元素</span></span></span></span></p> </blockquote> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">那么这里,我用一张图片举例。</span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">红色的都可以用<span class="md-pair-s"><code><div></code><span class="md-plain">标签来设置宽高进行布局,而蓝色的部分由于<span class="md-pair-s"><code><span></code><span class="md-plain">可以用来组合文档中的行内元素,那么蓝色部分里的每个小选项是都可以用<span class="md-pair-s"><code><span></code><span class="md-plain">标签与其他标签进行组合完成的。</span></span></span></span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span><span class="md-plain">br与<span><span class="md-plain">p 换行</span></span></span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s"><code><br></code><span class="md-plain">作用:换行。它是一个内联标签,注意与<span class="md-pair-s"><code><p></code><span class="md-plain">的区别。</span></span></span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s"><code><p></code><span class="md-plain">作用:换行。它是一个块级标签,注意与<span class="md-pair-s"><code><br></code><span class="md-plain">的区别。</span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <blockquote> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s "><strong><span class="md-plain">注意:<span class="md-pair-s"><code><p></code><span class="md-plain">是一个文本级的标签,里面只能放文字,图片,表单元素,其他的一律不放。</span></span></span></strong></span></span></p> </blockquote> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 哈哈哈哈 </span><span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>p标签<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 哈哈哈哈 </span><span style="color: #0000ff;"><</span><span style="color: #800000;">br </span><span style="color: #0000ff;">/></span><span style="color: #000000;">br标签 </span><span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span><span class="md-plain">hr 水平线</span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">作用:水平线,一条很细的横线。</span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>hr的上面<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">hr </span><span style="color: #0000ff;">/></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>hr的下面<span style="color: #0000ff;"></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span><span class="md-plain">center 居中</span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">作用:居中,H5不建议使用</span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>未居中<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">center</span><span style="color: #0000ff;">><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>居中<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></</span><span style="color: #800000;">center</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span><span class="md-plain">pre 预格式化</span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">作用:预格式化,H5不建议使用</span></span></p> <p class="md-end-block md-p"> </p> <blockquote> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">含义:将保留其中的所有的空白字符(空格、换行符),原封不动的输出结果(告诉浏览器不要忽略空格和空行)<span class="md-softbreak"> <span class="md-plain">​<span class="md-tab"> <span class="md-plain">说明:真正排网页过程中,<span class="md-pair-s"><code><pre></code><span class="md-plain">标签几乎用不着。但在PHP中用于打印一个数组时可能会使用到。</span></span></span></span></span></span></span></span></p> </blockquote> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 我 想 怎 么 写 就 怎 么 写 </span><span style="color: #0000ff;"><</span><span style="color: #800000;">pre</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 我 想 怎 么 写 就 怎 么 写 </span><span style="color: #0000ff;"></</span><span style="color: #800000;">pre</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p class="md-end-block md-p"> </p> <h3 class="md-end-block md-heading"><span class="md-plain">列表相关标签</span></h3> <div class="md-hr md-end-block"> <hr> </div> <h4 class="md-end-block md-heading"><span><span class="md-plain">ul与<span><span class="md-plain">li 无序列表</span></span></span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">作用:用于定义无序列表。注意:无序列表中必须有<span class="md-pair-s"><code><li></code><span class="md-plain">标签来书写具体内容。</span></span></span></span></p> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th><span class="td-span"><span class="md-plain">属性</span></span></th> <th><span class="td-span"><span class="md-plain">值</span></span></th> <th><span class="td-span"><span class="md-plain">描述</span></span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">compact</span></span></span></td> <td><span class="td-span"><span class="md-plain">compact</span></span></td> <td><span class="td-span"><span class="md-plain">不赞成使用。请使用样式取代它。规定列表呈现的效果比正常情况更小巧。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">type</span></span></span></td> <td><span class="td-span"><span class="md-plain">disc,square,circle</span></span></td> <td><span class="td-span"><span class="md-plain">不赞成使用。请使用样式取代它。规定列表的项目符号的类型。</span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>香蕉<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>牛奶<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>菠萝<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>Disc 项目符号列表:<span style="color: #0000ff;"></</span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="disc"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>苹果<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>香蕉<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>柠檬<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>桔子<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>Circle 项目符号列表:<span style="color: #0000ff;"></</span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="circle"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>苹果<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>香蕉<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>柠檬<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>桔子<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>Square 项目符号列表:<span style="color: #0000ff;"></</span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ul </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="square"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>苹果<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>香蕉<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>柠檬<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>桔子<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span><span class="md-plain">ol与li<span><span class="md-plain"> 有序列表</span></span></span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">作用:用于定义有序列表。注意:有序列表中必须有<span class="md-pair-s"><code><li></code><span class="md-plain">标签来书写具体内容。</span></span></span></span></p> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th><span class="td-span"><span class="md-plain">属性</span></span></th> <th><span class="td-span"><span class="md-plain">值</span></span></th> <th><span class="td-span"><span class="md-plain">描述</span></span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">compact</span></span></span></td> <td><span class="td-span"><span class="md-plain">compact</span></span></td> <td><span class="td-span"><span class="md-plain">HTML5 中不支持。HTML 4.01 中不赞成使用。规定列表呈现的效果比正常情况更小巧。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">reversed</span></span></span></td> <td><span class="td-span"><span class="md-plain">reversed</span></span></td> <td><span class="td-span"><span class="md-plain">规定列表顺序为降序。(9,8,7...)</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">start</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>number</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定有序列表的起始值。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">type</span></span></span></td> <td><span class="td-span"><span class="md-plain">1,A,a,I,i</span></span></td> <td><span class="td-span"><span class="md-plain">规定在列表中使用的标记类型。</span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>咖啡<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>牛奶<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>茶<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ol </span><span style="color: #ff0000;">start</span><span style="color: #0000ff;">="50"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>咖啡<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>牛奶<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>茶<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>数字列表:<span style="color: #0000ff;"></</span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>苹果<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>香蕉<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>字母列表:<span style="color: #0000ff;"></</span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ol </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="A"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>苹果<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>香蕉<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>小写字母列表:<span style="color: #0000ff;"></</span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ol </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="a"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>苹果<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>香蕉<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>罗马字母列表:<span style="color: #0000ff;"></</span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ol </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="I"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>苹果<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>香蕉<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span>小写罗马字母列表:<span style="color: #0000ff;"></</span><span style="color: #800000;">h4</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">ol </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="i"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>苹果<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span>香蕉<span style="color: #0000ff;"></</span><span style="color: #800000;">li</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span><span class="md-plain"><span><span class="md-plain"><span><span class="md-plain">dl与dt以及dd 自定义列表</span></span></span></span></span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">作用:用于定义自定义列表。</span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s"><code><dl></code><span class="md-plain">为最外部,<span class="md-pair-s"><code><dt></code><span class="md-plain">为标题,<span class="md-pair-s"><code><dd></code><span class="md-plain">为段落。他们的使用场景也蛮多的,因为非常灵活。</span></span></span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span>一个定义列表:<span style="color: #0000ff;"></</span><span style="color: #800000;">h2</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dl</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>计算机<span style="color: #0000ff;"></</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>用来计算的仪器 ... ...<span style="color: #0000ff;"></</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span>显示器<span style="color: #0000ff;"></</span><span style="color: #800000;">dt</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span>以视觉方式显示信息的装置 ... ...<span style="color: #0000ff;"></</span><span style="color: #800000;">dd</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">dl</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p class="md-end-block md-p"> </p> <h3 class="md-end-block md-heading"><span class="md-plain">表单相关form<span><span class="md-plain">系列</span></span></span></h3> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">表单用于向服务器传递数据</span></span></p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">表单能够包含 <span class="md-pair-s"><code><input></code><span class="md-plain">元素,比如文本字段、复选框、单选框、提交按钮等等。</span></span></span></span></p> <p class="md-end-block md-p"><span class="md-plain">   表单还可以包含<span class="md-pair-s"><code><textarea></code><span class="md-plain">、<span class="md-pair-s"><code><select></code><span class="md-plain">、<span class="md-pair-s"><code><fieldset></code><span class="md-plain">和 <span class="md-pair-s"><code><label></code><span class="md-plain">元素。</span></span></span></span></span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">它会将位于表单标签内的子标签数据提取出来并发送给特定的路径,该路径会有相应的后台操作来处理这些数据。</span></span></p> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th><span class="td-span"><span class="md-plain">属性</span></span></th> <th><span class="td-span"><span class="md-plain">值</span></span></th> <th><span class="td-span"><span class="md-plain">描述</span></span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">accept</span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>MIME_type</em></span></span></td> <td><span class="td-span"><span class="md-plain">HTML 5 中不支持。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">accept-charset</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>charset_list</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定服务器可处理的表单数据字符集。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">action</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>URL</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定当提交表单时向何处发送表单数据。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">autocomplete</span></span></span></td> <td><span class="td-span"><span class="md-plain">onoff</span></span></td> <td><span class="td-span"><span class="md-plain">规定是否启用表单的自动完成功能。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">enctype</span></span></span></td> <td><span class="td-span"><span class="md-plain">下方有</span></span></td> <td><span class="td-span"><span class="md-plain">规定在发送表单数据之前如何对其进行编码。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">method</span></span></span></td> <td><span class="td-span"><span class="md-plain">getpost</span></span></td> <td><span class="td-span"><span class="md-plain">规定用于发送 form-data 的 HTTP 方法。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">name</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>form_name</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定表单的名称。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">novalidate</span></span></span></td> <td><span class="td-span"><span class="md-plain">novalidate</span></span></td> <td><span class="td-span"><span class="md-plain">如果使用该属性,则提交表单时不进行验证。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">target</span></span></span></td> <td><span class="td-span"><span>_<span class="md-plain">blank,<span>_<span class="md-plain">self,<span>_<span class="md-plain">parent,<span>_<span class="md-plain">top,framename</span></span></span></span></span></span></span></span></span></td> <td><span class="td-span"><span class="md-plain">规定在何处打开 action URL。</span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <blockquote> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s"><code>enctype</code><span class="md-plain"> 属性可能的值:</span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">     <span class="md-plain">application/x-www-form-urlencoded</span></span></p> <p class="md-end-block md-p"><span class="md-tab">     <span class="md-plain">multipart/form-data </span></span></p> <p class="md-end-block md-p"><span class="md-tab">     <span class="md-plain">text/plain</span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">其中 <span class="md-pair-s"><code>action</code><span class="md-plain">是提交时候的路径,<span class="md-pair-s"><code>method</code><span class="md-plain">是提交方式常用的有两种<span class="md-pair-s"><code>get</code><span class="md-plain">或者<span class="md-pair-s"><code>post</code><span class="md-plain">,<span class="md-pair-s "><strong><span class="md-plain">如果想上传文件<span class="md-pair-s"><code>enctype</code><span class="md-plain">必须设置为multipart/form-data并且<span class="md-pair-s"><code>action</code><span class="md-plain">必须为<span class="md-pair-s"><code>post</code><span class="md-plain">方式才能进行文件的上传。</span></span></span></span></span></span></span></strong></span></span></span></span></span></span></span></span></span></span></span></p> </blockquote> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">在<span class="md-pair-s"><code><form></code><span class="md-plain">系列标签中,共有以下几种常用的标签。</span></span></span></span></p> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><span style="font-size: 18px;"><span class="td-span"><<span class="md-plain">form>标签中所包含的常用标签</span></span>  </span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-pair-s "><strong>标签名称</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>功能描述</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>display</strong></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">input></span></span></span></td> <td><span class="td-span"><span class="md-plain">输入框</span></span></td> <td><span class="td-span"><span class="md-plain">inline-block</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">lable>·</span></span></span></td> <td><span class="td-span"><span class="md-plain">为<span class="md-pair-s"><code><input></code><span class="md-plain">元素定义标注(标记)</span></span></span></span></td> <td><span class="td-span"><span class="md-plain">inline</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">select></span></span></span></td> <td><span class="td-span"><span class="md-plain">选择框</span></span></td> <td><span class="td-span"><span class="md-plain">block</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">textarea></span></span></span></td> <td><span class="td-span"><span class="md-plain">文本域</span></span></td> <td><span class="td-span"><span class="md-plain">inline</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">fieldset></span></span></span></td> <td><span class="td-span"><span class="md-plain">美化相关</span></span></td> <td><span class="td-span"><span class="md-plain">未知</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">legend></span></span></span></td> <td><span class="td-span"><span class="md-plain">美化相关</span></span></td> <td><span class="td-span"><span class="md-plain">未知</span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <blockquote> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">注意:这里又出现了一个<span class="md-pair-s"><code>inline-block</code><span class="md-plain">,说明它是一个可以设置宽高的内联块级标签。</span></span></span></span></p> </blockquote> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span><span class="md-plain">input 输入框</span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s"><code><input></code><span class="md-plain">可以有多种形态,只需要设置属性<span class="md-pair-s"><code>type</code><span class="md-plain">即可,如下表:</span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th><span class="td-span"><span class="md-plain">type属性值</span></span></th> <th><span class="td-span"><span class="md-plain">表现形式</span></span></th> <th><span class="td-span"><span class="md-plain">对应代码</span></span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">text</span></span></td> <td><span class="td-span"><span class="md-plain">单行输入文本</span></span></td> <td><span class="td-span"><span class="md-plain"><input type=text" /></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">password</span></span></td> <td><span class="td-span"><span class="md-plain">密码输入框</span></span></td> <td><span class="td-span"><span><<span class="md-plain">input type="password" /></span></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">date</span></span></td> <td><span class="td-span"><span class="md-plain">日期输入框</span></span></td> <td><span class="td-span"><span><<span class="md-plain">input type="date" /></span></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">checkbox</span></span></td> <td><span class="td-span"><span class="md-plain">复选框</span></span></td> <td><span class="td-span"><span><<span class="md-plain">input type="checkbox" checked="checked" /></span></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">radio</span></span></td> <td><span class="td-span"><span class="md-plain">单选框</span></span></td> <td><span class="td-span"><span><<span class="md-plain">input type="radio" /></span></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">submit</span></span></td> <td><span class="td-span"><span class="md-plain">提交按钮</span></span></td> <td><span class="td-span"><span><<span class="md-plain">input type="submit" value="提交" /></span></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">reset</span></span></td> <td><span class="td-span"><span class="md-plain">重置按钮</span></span></td> <td><span class="td-span"><span><<span class="md-plain">input type="reset" value="重置" /></span></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">button</span></span></td> <td><span class="td-span"><span class="md-plain">普通按钮</span></span></td> <td><span class="td-span"><span><<span class="md-plain">input type="button" value="普通按钮" /></span></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">hidden</span></span></td> <td><span class="td-span"><span class="md-plain">隐藏输入框</span></span></td> <td><span class="td-span"><span><<span class="md-plain">input type="hidden" /></span></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">file</span></span></td> <td><span class="td-span"><span class="md-plain">文本选择框</span></span></td> <td><span class="td-span"><span><<span class="md-plain">input type="file" /></span></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">number</span></span></td> <td><span class="td-span"><span class="md-plain">数字输入框</span></span></td> <td><span class="td-span"><span><<span class="md-plain">input type="number" /></span></span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">在<span class="md-pair-s"><code><input></code><span class="md-plain">标签中,绝大部分标签都需要设置键值对的方式,因为它们最后的信息都是提交给整个<span class="md-pair-s"><code><form></code><span class="md-plain">表单标签的。但是也有少部分不用,比如<span class="md-pair-s"><code>button</code><span class="md-plain">,<span class="md-pair-s"><code>reset</code><span class="md-plain">,<span class="md-pair-s"><code>sumbit</code><span class="md-plain">等等。</span></span></span></span></span></span></span></span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><span style="font-size: 18px;"><span class="td-span"><<span class="md-plain">input>其他常用属性</span></span>  </span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-pair-s "><strong>属性</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>值</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>描述</strong></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">name</span></span></td> <td><span class="td-span"><span class="md-plain">field_name</span></span></td> <td><span class="td-span"><span class="md-plain">表单提交时的“键”,注意和id的区别</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">value</span></span></td> <td><span class="td-span"><span class="md-plain">value</span></span></td> <td><span class="td-span"><span class="md-plain">表单提交时对应项的值</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">checked</span></span></td> <td><span class="td-span"><span class="md-plain">checked</span></span></td> <td><span class="td-span"><span class="md-plain">radio和checkbox默认被选中的项</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">readonly</span></span></td> <td><span class="td-span"><span class="md-plain">readonly</span></span></td> <td><span class="td-span"><span class="md-plain">text和password设置只读</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">disabled</span></span></td> <td><span class="td-span"><span class="md-plain">disabled</span></span></td> <td><span class="td-span"><span class="md-plain">所有input均适用,变灰了,点不动了</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">placeholder</span></span></td> <td><span class="td-span"><span class="md-plain">text</span></span></td> <td><span class="td-span"><span class="md-plain">规定帮助用户填写输入字段的提示。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">required</span></span></td> <td><span class="td-span"><span class="md-plain">required</span></span></td> <td><span class="td-span"><span class="md-plain">指示输入字段的值是必需的。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">size</span></span></td> <td><span class="td-span"><span class="md-plain">number_of_char</span></span></td> <td><span class="td-span"><span class="md-plain">定义输入字段的宽度。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">min</span></span></td> <td><span class="td-span"><span class="md-plain">number date</span></span></td> <td><span class="td-span"><span class="md-plain">定输入字段的最小值。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">max</span></span></td> <td><span class="td-span"><span class="md-plain">number date</span></span></td> <td><span class="td-span"><span class="md-plain">规定输入字段的最大值。</span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <blockquote> <p class="md-end-block md-p"> </p> <ul class="ul-list"> <li class="md-list-item"> <p class="md-end-block md-p"><span class="md-plain">value:表单提交时对应项的值</span></p> <ul class="ul-list"> <li class="md-list-item"> <p class="md-end-block md-p"><span class="md-plain">type="button", "reset", "submit"时,为按钮上显示的文本年内容</span></p> </li> <li class="md-list-item"> <p class="md-end-block md-p"><span class="md-plain">type="text","password","hidden"时,为输入框的初始值</span></p> </li> <li class="md-list-item"> <p class="md-end-block md-p"><span class="md-plain">type="checkbox", "radio", "file",为输入相关联的值</span></p> </li> </ul> <p class="md-end-block md-p"> </p> </li> </ul> </blockquote> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;">上传文件必须留意from标签的method以及enctype属性</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">form </span><span style="color: #ff0000;">action</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> method</span><span style="color: #0000ff;">="post"</span><span style="color: #ff0000;"> enctype</span><span style="color: #0000ff;">="multipart/form-data"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>头像:<span style="color: #ff0000;">  </span><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="file"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="avatar"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>用户名:<span style="color: #ff0000;"> </span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="username"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="请输入用户名"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>密码:<span style="color: #ff0000;">    </span><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="pwd"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="请输入密码"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>性别: 男<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="gender"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="male"</span> <span style="color: #0000ff;">/></span>女<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="gender"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="female"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>爱好: 篮球<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="hobby"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="basketball"</span><span style="color: #ff0000;"> checked </span><span style="color: #0000ff;">/></span>足球<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="hobby"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="football"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="reset"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="重新填写信息"</span> <span style="color: #0000ff;">/></span><span style="color: #ff0000;"> </span><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="提交注册信息"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;"> </span><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="butoon"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="联系客服"</span><span style="color: #ff0000;"> disabled</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span class="md-plain">lable 标注</span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p">  <span class="md-pair-s"><code><label></code><span class="md-plain">标签为 <span class="md-pair-s"><code><input></code><span class="md-plain">元素定义标注(标记)。</span></span></span></span></p> <p class="md-end-block md-p">  <span class="md-pair-s"><code><label></code><span class="md-plain">元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 <span class="md-pair-s"><code><label></code><span class="md-plain">元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。</span></span></span></span></p> <p class="md-end-block md-p">  <span class="md-pair-s"><code><label></code><span class="md-plain"> 标签的 <span class="md-pair-s"><code>for</code><span class="md-plain">属性应当与相关元素的 <span class="md-pair-s"><code>id</code><span class="md-plain">属性相同。</span></span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th><span class="td-span">属性</span></th> <th><span class="td-span">值</span></th> <th><span class="td-span">描述</span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">for</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>id</em></span></span></td> <td><span class="td-span">规定 label 绑定到哪个表单元素。</span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">form</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>formid</em></span></span></td> <td><span class="td-span">规定 label 字段所属的一个或多个表单。</span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p">  </p> <p class="md-end-block md-p"><span class="md-tab md-expand">  <span class="md-plain">我们先来看下面一段代码:</span></span></p> <div class="cnblogs_code"> <pre><input type="radio" name="sex" /><span> 男 <input type="radio" name="sex" /> 女</span></pre> </div> <p> </p> <p class="md-end-block md-p"><span class="md-tab">  <span class="md-plain">对于上面这样的单选框,我们只有点击那个单选框(小圆圈)才可以选中,点击“男”、“女”这两个文字时是无法选中的;于是,<span class="md-pair-s"><code><label></code><span class="md-plain">标签派上了用场。</span></span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">  <span class="md-plain">本质上来讲,“男”、“女”这两个文字和<span class="md-pair-s"><code><input></code><span class="md-plain">标签时没有关系的,而label就是解决这个问题的。我们可以通过<span class="md-pair-s"><code><label></code><span class="md-plain">把<span class="md-pair-s"><code><input></code><span class="md-plain">和汉字包裹起来作为整体。</span></span></span></span></span></span></span></span></p> <p class="md-end-block md-p"><span class="md-plain">  解决方法如下:</span></p> <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> <p> </p> <p class="md-end-block md-p"><span class="md-tab">  <span class="md-plain">上方代码中,<span class="md-pair-s"><code><input></code><span class="md-plain">元素要有一个<span class="md-pair-s"><code>id</code><span class="md-plain">,然后<span class="md-pair-s"><code><label></code><span class="md-plain">标签有一个<span class="md-pair-s"><code><for></code><span class="md-plain">属性,和<span class="md-pair-s"><code><id></code><span class="md-plain">相同,那么这个<span class="md-pair-s"><code><label></code><span class="md-plain">和<span class="md-pair-s"><code><input></code><span class="md-plain">就有绑定关系了。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p> <p class="md-end-block md-p"><span class="md-plain">  当然了,复选框也有<span class="md-pair-s"><code><label></code><span class="md-plain">:(任何表单元素都有<span class="md-pair-s"><code><label></code><span class="md-plain">)</span></span></span></span></span></p> <div class="cnblogs_code"> <pre><input type="checkbox" id="kk" /> <label for="kk">10天内免登陆</label> </pre> </div> <p> </p> <h4 class="md-end-block md-heading"><span><span class="md-plain"><span><span class="md-plain"><span><span class="md-plain">select与optgroup以及option 选择框</span></span></span></span></span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">这三组标签可做选择框:</span></span></p> <p class="md-end-block md-p"><span class="md-plain"> <span class="md-tab">   <span class="md-pair-s "><strong><span class="md-plain">其中<span class="md-pair-s"><code><select></code><span class="md-plain">标签应该具有一个<span class="md-pair-s"><code>name</code><span class="md-plain">,它相当于字典的<span class="md-pair-s"><code>key</code><span class="md-plain">。</span></span></span></span></span></span></span></strong></span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s"><code><optgroup></code><span class="md-plain">不是必须的一个标签,主要对<span class="md-pair-s"><code><option></code><span class="md-plain">标签做分组管理,必须要属性<span class="md-pair-s"><code>lable</code><span class="md-plain">为组名</span></span></span></span></span></span></span></p> <p class="md-end-block md-p"><span class="md-plain"> <span class="md-tab">   <span class="md-pair-s "><strong><span class="md-pair-s"><code><option></code><span class="md-plain">标签应该设置<span class="md-pair-s"><code>value</code><span class="md-plain">,并且<span class="md-pair-s"><code><option></code><span class="md-plain">标签可以设置<span class="md-pair-s"><code>selected</code><span class="md-plain">作为默认选择。<span class="md-pair-s"><code><option></code><span class="md-plain">的选择项相当于字典的<span class="md-pair-s"><code>value</code><span class="md-plain">。</span></span></span></span></span></span></span></span></span></span></span></span></strong></span></span></span></p> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><span style="font-size: 18px;"><span class="td-span"><<span class="md-plain">select>标签属性</span></span>  </span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-pair-s "><strong>属性</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>值</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>描述</strong></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">autofocus</span></span></span></td> <td><span class="td-span"><span class="md-plain">autofocus</span></span></td> <td><span class="td-span"><span class="md-plain">规定在页面加载后文本区域自动获得焦点。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">disabled</span></span></span></td> <td><span class="td-span"><span class="md-plain">disabled</span></span></td> <td><span class="td-span"><span class="md-plain">规定禁用该下拉列表。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">form</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>form_id</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定文本区域所属的一个或多个表单。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">multiple</span></span></span></td> <td><span class="td-span"><span class="md-plain">multiple</span></span></td> <td><span class="td-span"><span class="md-plain">规定可选择多个选项。布尔属性,<span class="md-pair-s"><code>True</code><span class="md-plain">或者<span class="md-pair-s"><code>False</code><span class="md-plain">。</span></span></span></span></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">name</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>name</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定下拉列表的名称。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">required</span></span></span></td> <td><span class="td-span"><span class="md-plain">required</span></span></td> <td><span class="td-span"><span class="md-plain">规定文本区域是必填的。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">size</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>number</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定下拉列表中可见选项的数目。</span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><span style="font-size: 18px;"><span class="td-span"><<span class="md-plain">optgroup>标签属性</span></span>  </span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-pair-s "><strong>属性</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>值</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>描述</strong></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">label</span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>text</em></span></span></td> <td><span class="td-span"><span class="md-plain">为选项组规定描述。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">disabled</span></span></td> <td><span class="td-span"><span class="md-plain">disabled</span></span></td> <td><span class="td-span"><span class="md-plain">规定禁用该选项组。</span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><span style="font-size: 18px;"><span class="td-span"><<span class="md-plain">option>标签属性</span></span>  </span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-pair-s "><strong>属性</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>值</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>描述</strong></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">disabled</span></span></span></td> <td><span class="td-span"><span class="md-plain">disabled</span></span></td> <td><span class="td-span"><span class="md-plain">规定此选项应在首次加载时被禁用。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">label</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>text</em></span></span></td> <td><span class="td-span"><span class="md-plain">定义当使用 <span class="md-pair-s"><code><optgroup></code><span class="md-plain"> 时所使用的标注。</span></span></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">selected</span></span></span></td> <td><span class="td-span"><span class="md-plain">selected</span></span></td> <td><span class="td-span"><span class="md-plain">规定选项(在首次显示在列表中时)表现为选中状态。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">value</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>text</em></span></span></td> <td><span class="td-span"><span class="md-plain">定义送往服务器的选项值。</span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;">上传文件必须留意from标签的method以及enctype属性</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">form </span><span style="color: #ff0000;">action</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> method</span><span style="color: #0000ff;">="post"</span><span style="color: #ff0000;"> enctype</span><span style="color: #0000ff;">="multipart/form-data"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>头像:<span style="color: #ff0000;">  </span><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="file"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="avatar"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>用户名:<span style="color: #ff0000;"> </span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="username"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="请输入用户名"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>密码:<span style="color: #ff0000;">    </span><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="pwd"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="请输入密码"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>性别: 男<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="gender"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="male"</span> <span style="color: #0000ff;">/></span>女<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="gender"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="female"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>爱好: 篮球<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="hobby"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="basketball"</span><span style="color: #ff0000;"> checked </span><span style="color: #0000ff;">/></span>足球<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="hobby"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="football"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="reset"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="重新填写信息"</span> <span style="color: #0000ff;">/></span><span style="color: #ff0000;"> </span><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="提交注册信息"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;"> </span><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="butoon"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="联系客服"</span><span style="color: #ff0000;"> disabled</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 居住地 </span><span style="color: #0000ff;"><</span><span style="color: #800000;">select </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="addr"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">optgroup </span><span style="color: #ff0000;">label</span><span style="color: #0000ff;">="中国"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="bejing"</span><span style="color: #ff0000;"> selected</span><span style="color: #0000ff;">></span>北京<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="shanghai"</span><span style="color: #0000ff;">></span>上海<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="guangzhou"</span><span style="color: #0000ff;">></span>广州<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="shenzhen"</span><span style="color: #0000ff;">></span>深圳<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="other"</span><span style="color: #0000ff;">></span>其他<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">optgroup</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">optgroup </span><span style="color: #ff0000;">label</span><span style="color: #0000ff;">="海外"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="America"</span><span style="color: #0000ff;">></span>美国<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="Japanese"</span><span style="color: #0000ff;">></span>日本<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="England"</span><span style="color: #0000ff;">></span>英国<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="Germany"</span><span style="color: #0000ff;">></span>德国<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="Canada"</span><span style="color: #0000ff;">></span>加拿大<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">optgroup</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">select</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p> </p> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span><span class="md-plain">textarea 文本域</span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">文本标签,和<span class="md-pair-s"><code><text></code><span class="md-plain">标签类似。可使用<span class="md-pair-s"><code>placeholder</code><span class="md-plain">定义默认显示值。</span></span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th><span class="td-span"><span class="md-plain">属性</span></span></th> <th><span class="td-span"><span class="md-plain">值</span></span></th> <th><span class="td-span"><span class="md-plain">描述</span></span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">autofocus</span></span></span></td> <td><span class="td-span"><span class="md-plain">autofocus</span></span></td> <td><span class="td-span"><span class="md-plain">规定在页面加载后文本区域自动获得焦点。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">cols</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>number</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定文本区内的可见宽度。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">disabled</span></span></span></td> <td><span class="td-span"><span class="md-plain">disabled</span></span></td> <td><span class="td-span"><span class="md-plain">规定禁用该文本区。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">form</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>form_id</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定文本区域所属的一个或多个表单。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">maxlength</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>number</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定文本区域的最大字符数。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">name</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>name_of_textarea</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定文本区的名称。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">placeholder</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>text</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定描述文本区域预期值的简短提示。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">readonly</span></span></span></td> <td><span class="td-span"><span class="md-plain">readonly</span></span></td> <td><span class="td-span"><span class="md-plain">规定文本区为只读。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">required</span></span></span></td> <td><span class="td-span"><span class="md-plain">required</span></span></td> <td><span class="td-span"><span class="md-plain">规定文本区域是必填的。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">rows</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>number</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定文本区内的可见行数。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">wrap</span></span></span></td> <td><span class="td-span"><span class="md-plain">hardsoft</span></span></td> <td><span class="td-span"><span class="md-plain">规定当在表单中提交时,文本区域中的文本如何换行。。</span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s "><strong><span class="md-plain">其中<span class="md-pair-s"><code>clos</code><span class="md-plain">和<span class="md-pair-s"><code>rows</code><span class="md-plain">分别可以设置列数和行数,但是不经常使用。更推荐CSS</span></span></span></span></span></strong></span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;">上传文件必须留意from标签的method以及enctype属性</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">form </span><span style="color: #ff0000;">action</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> method</span><span style="color: #0000ff;">="post"</span><span style="color: #ff0000;"> enctype</span><span style="color: #0000ff;">="multipart/form-data"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>头像:<span style="color: #ff0000;">  </span><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="file"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="avatar"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>用户名:<span style="color: #ff0000;"> </span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="username"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="请输入用户名"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>密码:<span style="color: #ff0000;">    </span><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="pwd"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="请输入密码"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>性别: 男<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="gender"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="male"</span> <span style="color: #0000ff;">/></span>女<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="gender"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="female"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>爱好: 篮球<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="hobby"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="basketball"</span><span style="color: #ff0000;"> checked </span><span style="color: #0000ff;">/></span>足球<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="hobby"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="football"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="reset"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="重新填写信息"</span> <span style="color: #0000ff;">/></span><span style="color: #ff0000;"> </span><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="提交注册信息"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;"> </span><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="butoon"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="联系客服"</span><span style="color: #ff0000;"> disabled</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 居住地 </span><span style="color: #0000ff;"><</span><span style="color: #800000;">select </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="addr"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">optgroup </span><span style="color: #ff0000;">label</span><span style="color: #0000ff;">="中国"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="bejing"</span><span style="color: #ff0000;"> selected</span><span style="color: #0000ff;">></span>北京<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="shanghai"</span><span style="color: #0000ff;">></span>上海<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="guangzhou"</span><span style="color: #0000ff;">></span>广州<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="shenzhen"</span><span style="color: #0000ff;">></span>深圳<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="other"</span><span style="color: #0000ff;">></span>其他<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">optgroup</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">optgroup </span><span style="color: #ff0000;">label</span><span style="color: #0000ff;">="海外"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="America"</span><span style="color: #0000ff;">></span>美国<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="Japanese"</span><span style="color: #0000ff;">></span>日本<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="England"</span><span style="color: #0000ff;">></span>英国<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="Germany"</span><span style="color: #0000ff;">></span>德国<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="Canada"</span><span style="color: #0000ff;">></span>加拿大<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">optgroup</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">select</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">><</span><span style="color: #800000;">textarea </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="register_reason"</span><span style="color: #ff0000;"> cols</span><span style="color: #0000ff;">="30"</span><span style="color: #ff0000;"> rows</span><span style="color: #0000ff;">="10"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="请填写充分理由"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">textarea</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p> </p> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span><span class="md-plain"><span><span class="md-plain">fieldset与legend 美化</span></span></span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">美化标签,可以在<span class="md-pair-s"><code><form></code><span class="md-plain">标签中的某个元素周边做一个特效。没啥用...</span></span></span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span class="md-plain">结果展示</span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">那么我们将上面代码整理一下,得到了一个比较简约的注册页面。</span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;">上传文件必须留意于from标签的method以及enctype属性</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">form </span><span style="color: #ff0000;">action</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> method</span><span style="color: #0000ff;">="post"</span><span style="color: #ff0000;"> enctype</span><span style="color: #0000ff;">="multipart/form-data"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">fieldset </span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">legend</span><span style="color: #0000ff;">><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>欢迎注册<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></</span><span style="color: #800000;">legend</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>头像:<span style="color: #ff0000;">  </span><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="file"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="avatar"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>用户名:<span style="color: #ff0000;"> </span> <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="username"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="请输入用户名"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>密码:<span style="color: #ff0000;">    </span><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="pwd"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="请输入密码"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>性别: 男<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="gender"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="male"</span> <span style="color: #0000ff;">/></span>女<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="radio"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="gender"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="female"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span>爱好: 篮球<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="hobby"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="basketball"</span><span style="color: #ff0000;"> checked </span><span style="color: #0000ff;">/></span>足球<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="hobby"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="football"</span> <span style="color: #0000ff;">/></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span><span style="color: #000000;"> 居住地 </span><span style="color: #0000ff;"><</span><span style="color: #800000;">select </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="addr"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">optgroup </span><span style="color: #ff0000;">label</span><span style="color: #0000ff;">="中国"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="bejing"</span><span style="color: #ff0000;"> selected</span><span style="color: #0000ff;">></span>北京<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="shanghai"</span><span style="color: #0000ff;">></span>上海<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="guangzhou"</span><span style="color: #0000ff;">></span>广州<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="shenzhen"</span><span style="color: #0000ff;">></span>深圳<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="other"</span><span style="color: #0000ff;">></span>其他<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">optgroup</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">optgroup </span><span style="color: #ff0000;">label</span><span style="color: #0000ff;">="海外"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="America"</span><span style="color: #0000ff;">></span>美国<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="Japanese"</span><span style="color: #0000ff;">></span>日本<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="England"</span><span style="color: #0000ff;">></span>英国<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="Germany"</span><span style="color: #0000ff;">></span>德国<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">option </span><span style="color: #ff0000;">value</span><span style="color: #0000ff;">="Canada"</span><span style="color: #0000ff;">></span>加拿大<span style="color: #0000ff;"></</span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">optgroup</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">select</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">fieldset</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">fieldset</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">legend</span><span style="color: #0000ff;">></span>请填写注册理由<span style="color: #0000ff;"></</span><span style="color: #800000;">legend</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">><</span><span style="color: #800000;">textarea </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="register_reason"</span><span style="color: #ff0000;"> cols</span><span style="color: #0000ff;">="30"</span><span style="color: #ff0000;"> rows</span><span style="color: #0000ff;">="10"</span><span style="color: #ff0000;"> placeholder</span><span style="color: #0000ff;">="请填写充分理由"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">textarea</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">fieldset</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">p</span><span style="color: #0000ff;">><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="reset"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="重新填写信息"</span> <span style="color: #0000ff;">/></span><span style="color: #ff0000;"> </span><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="submit"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="提交注册信息"</span><span style="color: #0000ff;">></span><span style="color: #ff0000;"> </span><span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="butoon"</span><span style="color: #ff0000;"> value</span><span style="color: #0000ff;">="联系客服"</span><span style="color: #ff0000;"> disabled</span><span style="color: #0000ff;">></</span><span style="color: #800000;">p</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p> </p> <p class="md-end-block md-p"> </p> <h3 class="md-end-block md-heading"><span class="md-plain">表格相关table<span><span class="md-plain">系列</span></span></span></h3> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">在<span class="md-pair-s"><code><table></code><span class="md-plain">标签系列中,依然有很多标签。我们可以使用它们来做一个小表格。</span></span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s"><code><table></code><span class="md-plain">的2个应该设置的属性:<span class="md-pair-s"><code>border="1"</code><span class="md-plain"> <span class="md-pair-s"><code>style="border-collapse:collapse;"</code></span></span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><span style="font-size: 18px;"><span class="td-span"><<span class="md-plain">table>标签属性</span></span>  </span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-pair-s "><strong>属性</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>值</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>描述</strong></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">align</span></span></span></td> <td><span class="td-span"><span class="md-plain">left,center,right</span></span></td> <td><span class="td-span"><span class="md-plain">不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">bgcolor</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em><span class="md-plain">rgb(x,x,x),<span class="md-pair-s "><strong><span class="md-plain">#xxxxxx</span></strong><span class="md-plain">,colorname</span></span></span></em></span></span></td> <td><span class="td-span"><span class="md-plain">不赞成使用。请使用样式代替。规定表格的背景颜色。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">border</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>pixels</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定表格边框的宽度。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">cellpadding</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>pixels,%</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定单元边沿与其内容之间的空白。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">cellspacing</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>pixels,%</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定单元格之间的空白。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">frame</span></span></span></td> <td><span class="td-span"><span class="md-plain">void,above,below,hsides,lhs,rhs,vsides,box,border</span></span></td> <td><span class="td-span"><span class="md-plain">规定外侧边框的哪个部分是可见的。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">rules</span></span></span></td> <td><span class="td-span"><span class="md-plain">none,groups,rows,cols,all</span></span></td> <td><span class="td-span"><span class="md-plain">规定内侧边框的哪个部分是可见的。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">summary</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>text</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定表格的摘要。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">width</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>%,pixels</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定表格的宽度。</span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><span style="font-size: 18px;"><span class="td-span"><<span class="md-plain">table>标签中所包含的常用标签</span></span>  </span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-pair-s "><strong>标签名称</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>功能描述</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>display</strong></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">caption></span></span></span></td> <td><span class="td-span"><span class="md-plain">定义表格标题</span></span></td> <td><span class="td-span"><span class="md-plain">未知</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">thead></span></span></span></td> <td><span class="td-span"><span class="md-plain">定义表格的表头。该标签用于组合 HTML 表格的表头内容。</span></span></td> <td><span class="td-span"><span class="md-plain">block</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">tfont></span></span></span></td> <td><span class="td-span"><span class="md-plain">定义表格的页脚(脚注或表注)。该标签用于组合 HTML 表格中的表注内容。</span></span></td> <td><span class="td-span"><span class="md-plain">block</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">tbody></span></span></span></td> <td><span class="td-span"><span class="md-plain">定义表格主体(正文)。该标签用于组合 HTML 表格的主体内容。</span></span></td> <td><span class="td-span"><span class="md-plain">block</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">th></span></span></span></td> <td><span class="td-span"><span class="md-plain">表头单元格 - 包含表头信息(由 th 元素创建)</span></span></td> <td><span class="td-span"><span class="md-plain">block</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">td></span></span></span></td> <td><span class="td-span"><span class="md-plain">标准单元格 - 包含数据(由 td 元素创建)</span></span></td> <td><span class="td-span"><span class="md-plain">block</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span><<span class="md-plain">tr></span></span></span></td> <td><span class="td-span"><span class="md-plain">定义 HTML 表格中的行。</span></span></td> <td><span class="td-span"><span class="md-plain">block</span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><span style="font-size: 18px;"><span class="td-span"><<span class="md-plain">thead>标签属性</span></span>  </span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-pair-s "><strong>属性</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>值</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>描述</strong></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">align</span></span></span></td> <td><span class="td-span"><span class="md-plain">right,left,center,justify,char</span></span></td> <td><span class="td-span"><span class="md-plain">定义 thead 元素中内容的对齐方式。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">char</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>character</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定根据哪个字符来进行文本对齐。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">charoff</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>number</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定第一个对齐字符的偏移量。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">valign</span></span></span></td> <td><span class="td-span"><span class="md-plain">top,middle,bottom,baseline</span></span></td> <td><span class="td-span"><span class="md-plain">规定 thead 元素中内容的垂直对齐方式。</span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><span style="font-size: 18px;"><span class="td-span"><<span class="md-plain">tfont>标签属性</span></span>  </span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-pair-s "><strong>属性</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>值</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>描述</strong></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">color</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em><span class="md-plain">rgb(x,x,x),<span class="md-pair-s "><strong><span class="md-plain">#xxxxxx</span></strong><span class="md-plain">,colorname</span></span></span></em></span></span></td> <td><span class="td-span"><span class="md-plain">不赞成使用。请使用样式取代它。规定文本的颜色。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">face</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>font_family</em></span></span></td> <td><span class="td-span"><span class="md-plain">不赞成使用。请使用样式取代它。规定文本的字体。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">size</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>number</em></span></span></td> <td><span class="td-span"><span class="md-plain">不赞成使用。请使用样式取代它。规定文本的大小。</span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><span style="font-size: 18px;"><span class="td-span"><<span class="md-plain">tbody>标签属性</span></span>  </span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-pair-s "><strong>属性</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>值</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>描述</strong></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">align</span></span></span></td> <td><span class="td-span"><span class="md-plain">right,left,center,justify,char</span></span></td> <td><span class="td-span"><span class="md-plain">定义 tbody 元素中内容的对齐方式。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">char</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>character</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定根据哪个字符来进行文本对齐。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">charoff</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>number</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定第一个对齐字符的偏移量。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">valign</span></span></span></td> <td><span class="td-span"><span class="md-plain">top,middle,bottom,baseline</span></span></td> <td><span class="td-span"><span class="md-plain">规定 tbody 元素中内容的垂直对齐方式。</span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><span style="font-size: 18px;"><span class="td-span"><<span class="md-plain">th>与<<span class="md-plain">td>标签属性</span></span></span>  </span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-pair-s "><strong>属性</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>值</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>描述</strong></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">abbr</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>text</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定单元格中内容的缩写版本。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">align</span></span></span></td> <td><span class="td-span"><span class="md-plain">left,right,center,justify,char</span></span></td> <td><span class="td-span"><span class="md-plain">规定单元格内容的水平对齐方式。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">axis</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>category_name</em></span></span></td> <td><span class="td-span"><span class="md-plain">对单元格进行分类。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">bgcolor</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em><span class="md-plain">rgb(x,x,x),<span class="md-pair-s "><strong><span class="md-plain">#xxxxxx</span></strong><span class="md-plain">,colorname</span></span></span></em></span></span></td> <td><span class="td-span"><span class="md-plain">不推荐使用。请使用样式替代它。规定表格单元格的背景颜色。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">char</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>character</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定根据哪个字符来进行内容的对齐。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">charoff</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>number</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定对齐字符的偏移量。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">colspan</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>number</em></span></span></td> <td><span class="td-span"><span class="md-plain">设置单元格可横跨的列数。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">headers</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>idrefs</em></span></span></td> <td><span class="td-span"><span class="md-plain">由空格分隔的表头单元格 ID 列表,为数据单元格提供表头信息。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">height</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>pixels,%</em></span></span></td> <td><span class="td-span"><span class="md-plain">不推荐使用。请使用样式替代它。规定表格单元格的高度。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">nowrap</span></span></span></td> <td><span class="td-span"><span class="md-plain">nowrap</span></span></td> <td><span class="td-span"><span class="md-plain">不推荐使用。请使用样式取而代之。规定单元格中的内容是否折行。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">rowspan</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>number</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定单元格可横跨的行数。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">scope</span></span></span></td> <td><span class="td-span"><span class="md-plain">col,colgroup,row,rowgroup</span></span></td> <td><span class="td-span"><span class="md-plain">定义将表头数据与单元数据相关联的方法。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">valign</span></span></span></td> <td><span class="td-span"><span class="md-plain">top,middle,bottom,baseline</span></span></td> <td><span class="td-span"><span class="md-plain">规定单元格内容的垂直排列方式。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">width</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>pixels,%</em></span></span></td> <td><span class="td-span"><span class="md-plain">不推荐使用。请使用样式取而代之。规定表格单元格的宽度。</span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><span style="font-size: 18px;"><span class="td-span"><<span class="md-plain">tr>标签属性</span></span>  </span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-pair-s "><strong>属性</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>值</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>描述</strong></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">align</span></span></span></td> <td><span class="td-span"><span class="md-plain">right,left,center,justify,char</span></span></td> <td><span class="td-span"><span class="md-plain">定义表格行的内容对齐方式。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">bgcolor</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em><span class="md-plain">rgb(x,x,x),<span class="md-pair-s "><strong><span class="md-plain">#xxxxxx</span></strong><span class="md-plain">,colorname</span></span></span></em></span></span></td> <td><span class="td-span"><span class="md-plain">不赞成使用。请使用样式取而代之。规定表格行的背景颜色。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">char</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>character</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定根据哪个字符来进行文本对齐。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">charoff</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>number</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定第一个对齐字符的偏移量。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">valign</span></span></span></td> <td><span class="td-span"><span class="md-plain">top,middle,bottom,baseline</span></span></td> <td><span class="td-span"><span class="md-plain">规定表格行中内容的垂直对齐方式。</span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span class="md-plain">一个简单的表格</span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;"> thead </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">green</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;"> tbody </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">blue</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;">height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">50px</span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;"> tfoot </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;">color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;">red</span><span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">table </span><span style="color: #ff0000;">border</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="border-collapse:collapse;"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">caption</span><span style="color: #0000ff;">></span>测试<span style="color: #0000ff;"></</span><span style="color: #800000;">caption</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">thead</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>姓名<span style="color: #0000ff;"></</span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>年龄<span style="color: #0000ff;"></</span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">thead</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tbody</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>张三<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>15<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>李四<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>16<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tbody</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tfoot</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>页脚------<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>页脚-------<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tfoot</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">table</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span> </pre> </div> <p> </p> <p> </p> <h4 class="md-end-block md-heading"><span class="md-plain">合并单元格</span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">对<span class="md-pair-s"><code><tr></code><span class="md-plain">标签使用属性<span class="md-pair-s"><code>rowspan</code><span class="md-plain">与<span class="md-pair-s"><code>clospan</code><span class="md-plain">能进行单元格的合并,但是严格区分区域,如<span class="md-pair-s"><code><tbody></code><span class="md-plain">下的<span class="md-pair-s"><code><tr></code><span class="md-plain">设置<span class="md-pair-s"><code>rowspan</code><span class="md-plain">只能与<span class="md-pair-s"><code><tbody></code><span class="md-plain">下的其他空白处进行合并。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;"> thead </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> green </span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;"> tbody </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> blue</span><span style="background-color: #f5f5f5; color: #000000;">;</span><span style="background-color: #f5f5f5; color: #ff0000;"> height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 50px </span><span style="background-color: #f5f5f5; color: #000000;">}</span><span style="background-color: #f5f5f5; color: #800000;"> tfoot </span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> color</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> red </span><span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">table </span><span style="color: #ff0000;">border</span><span style="color: #0000ff;">="1"</span><span style="color: #ff0000;"> style</span><span style="color: #0000ff;">="border-collapse:collapse;"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">caption</span><span style="color: #0000ff;">></span>单元格合并演示<span style="color: #0000ff;"></</span><span style="color: #800000;">caption</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 表头</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">thead</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>属性名称<span style="color: #0000ff;"></</span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>属性值<span style="color: #0000ff;"></</span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>功能描述<span style="color: #0000ff;"></</span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span>无<span style="color: #0000ff;"></</span><span style="color: #800000;">th</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">thead</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 表体</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tbody</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>rowspan<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>number<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>合并竖向单元格<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 注意,tbody中的rowspan只能与tbody中的合并,同理,tfoot中的也只能与tfoot中的合并</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td </span><span style="color: #ff0000;">rowspan</span><span style="color: #0000ff;">="4"</span><span style="color: #0000ff;">></span>演示<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>rowspan<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>number<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>合并竖向单元格<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 空白</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>colspan<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>number<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>合并横向单元格<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 空白</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>colspan<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>number<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>合并横向单元格<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 空白</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tbody</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;"> 页脚</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tfoot</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">td </span><span style="color: #ff0000;">colspan</span><span style="color: #0000ff;">="4"</span><span style="color: #0000ff;">></span>一份不太严格的统计<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">tfoot</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">table</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p> </p> <p class="md-end-block md-p"> </p> <h3 class="md-end-block md-heading"><span><span class="md-plain">a 超链接</span></span></h3> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">作用:定义超链接,用于从一张页面链接到另一张页面。<span class="md-pair-s"><code><a></code><span class="md-plain"> 元素最重要的属性是 <span class="md-pair-s"><code>href</code><span class="md-plain">属性,它指示链接的目标。</span></span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th colspan="3"><span style="font-size: 18px;"><span class="td-span"><<span class="md-plain">a>标签重要属性</span></span>  </span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-pair-s "><strong>属性</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>值</strong></span></span></td> <td><span class="td-span"><span class="md-pair-s "><strong>描述</strong></span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">href</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>URL</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定链接指向的页面的 URL。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">target</span></span></span></td> <td><span class="td-span"><span class="md-plain">_blank, _parent, _self, _top, <span class="md-pair-s "><em>framename</em></span></span></span></td> <td><span class="td-span"><span class="md-plain">规定在何处打开链接文档。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">title</span></span></td> <td><span class="td-span"><span class="md-plain">text</span></span></td> <td><span class="td-span"><span class="md-plain">悬停文本。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">name</span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>section_name</em></span></span></td> <td><span class="td-span"><span class="md-plain">主要用于设置一个锚点的名称。</span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <blockquote> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">注意:target属性值</span></span></p> <p class="md-end-block md-p"><span class="md-tab">     <span class="md-pair-s"><code>_self</code><span class="md-plain">:在同一个网页中显示(默认值)</span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">     <span class="md-pair-s"><code>_blank</code><span class="md-plain">:<span class="md-pair-s "><strong>在新的窗口中打开</strong><span class="md-plain">。</span></span></span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">     <span class="md-pair-s"><code>_parent</code><span class="md-plain">:在父窗口中显示</span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">     <span class="md-pair-s"><code>_top</code><span class="md-plain">:在顶级窗口中显示</span></span></span></p> </blockquote> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s"><code><a></code><span class="md-plain">标签默认情况下都会有一条下划线,这条下划线可以在学习CSS后将它干掉。</span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">另外,当<span class="md-pair-s"><code>href="#"</code><span class="md-plain">的时候,代表为刷新页面。</span></span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">如果想点击<span class="md-pair-s"><code><a></code><span class="md-plain">标签没有任何作用,可以设置一条JavaScript语句,如下:</span></span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s"><code>href = “javascript:void(0)”</code><span class="md-plain">:阻止A标签默认的点击行为。</span></span></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#"</span><span style="color: #ff0000;"> target</span><span style="color: #0000ff;">="_blank"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="你好"</span><span style="color: #0000ff;">></span>点我<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span></pre> </div> <p> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <h3 class="md-end-block md-heading"><span><span class="md-plain">img 图像资源</span></span></h3> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">作用:向网页中嵌入一幅图像。</span></span></p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">请注意,从技术上讲,<span class="md-pair-s"><code><img></code><span class="md-plain"> 标签并不会在网页中插入图像,而是从网页上链接图像。<span class="md-pair-s"><code><img></code><span class="md-plain">标签创建的是被引用图像的占位空间。</span></span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th><span class="td-span"><span class="md-plain">属性</span></span></th> <th><span class="td-span"><span class="md-plain">值</span></span></th> <th><span class="td-span"><span class="md-plain">描述</span></span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">alt</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>text</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定图像的替代文本。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">src</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>URL</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定显示图像的 URL。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">width</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>pixels,%</em></span></span></td> <td><span class="td-span"><span class="md-plain">设置图像的宽度。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">height</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>pixels,%</em></span></span></td> <td><span class="td-span"><span class="md-plain">定义图像的高度。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-plain">title</span></span></td> <td><span class="td-span"><span class="md-plain">text</span></span></td> <td><span class="td-span"><span class="md-plain">悬停文本。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">align</span></span></span></td> <td><span class="td-span"><span class="md-plain">top,bottom,middle,left,right</span></span></td> <td><span class="td-span"><span class="md-plain">不推荐使用。规定如何根据周围的文本来排列图像。</span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">=".\peiqi.jpeg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="小猪佩奇"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="可爱的佩奇"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="200px"</span><span style="color: #0000ff;">></span></pre> </div> <p> </p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s"><code>.\</code><span class="md-plain">代表当前路径,可以省略</span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s"><code>..\</code><span class="md-plain">代表上级目录</span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">也可以使用网络资源<span class="md-pair-s"><code>http://</code><span class="md-plain">,但是要注意的是不要使用<span class="md-pair-s"><code>file://</code><span class="md-plain">,因为在Unix下没有盘符的概念。</span></span></span></span></span></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <blockquote> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s "><strong>注意事项:</strong><span class="md-softbreak"> <span class="md-plain">​</span></span></span></span></p> <p class="md-end-block md-p"><span class="md-tab"><span class="md-pair-s "><span class="md-softbreak"><span class="md-plain"><span class="md-tab">  <span class="md-plain">(1)如果要想保证图片等比例缩放,请只设置<span class="md-pair-s"><code>width</code><span class="md-plain">和<span class="md-pair-s"><code>height</code><span class="md-plain">中其中一个。<span class="md-softbreak"> <span class="md-plain">​</span></span></span></span></span></span></span></span></span></span></span></span></p> <p class="md-end-block md-p"><span class="md-tab"><span class="md-pair-s "><span class="md-softbreak"><span class="md-plain"><span class="md-tab"><span class="md-plain"><span class="md-pair-s"><span class="md-plain"><span class="md-pair-s"><span class="md-plain"><span class="md-softbreak"><span class="md-plain"><span class="md-tab">  <span class="md-plain">(2)如果想实现图文混排的效果,请使用<span class="md-pair-s"><code>align</code><span class="md-plain">属性,取值为<span class="md-pair-s"><code>left</code><span class="md-plain">或<span class="md-pair-s"><code>right</code><span class="md-plain">。</span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p> </blockquote> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"> </p> <h3 class="md-end-block md-heading"><span><span class="md-plain">a标签的妙用</span></span></h3> <div class="md-hr md-end-block"> <hr> </div> <h4 class="md-end-block md-heading"><span><span class="md-plain">a与id属性</span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">我们可以用<span class="md-pair-s"><code><a></code><span class="md-plain">标签的<span class="md-pair-s"><code>href</code><span class="md-plain">来绑定一个锚点,达到当前页面跳转的功能,这在博客园的目录中很常用。</span></span></span></span></span></span></p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">下面我们做一个返回首页的按钮。</span></span></p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;"> div</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> height</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> 80px</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #008000;"><!--</span><span style="color: #008000;">id具有唯一性</span><span style="color: #008000;">--></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="top"</span><span style="color: #0000ff;">></span>我是顶部<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>---<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>---<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>---<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>---<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>---<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>---<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>---<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>---<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>---<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>---<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>---<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>---<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>---<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>---<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>---<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>---<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#top"</span><span style="color: #0000ff;">></span>返回顶部<span style="color: #0000ff;"></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p> </p> <p class="md-end-block md-p"> </p> <h4 class="md-end-block md-heading"><span><span class="md-plain"><span><span class="md-plain">a与img图片跳转链接</span></span></span></span></h4> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">我们经常可以看见,当点击某一个图片的时候页面就会发生跳转,其实就是<span class="md-pair-s"><code><a></code><span class="md-plain">与<span class="md-pair-s"><code><img></code><span class="md-plain">的结合。</span></span></span></span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-pair-s"><code><a></code><span class="md-plain">标签是一个内联标签,而<span class="md-pair-s"><code><img></code><span class="md-plain">是一个内联块级标签,我们需要将<span class="md-pair-s"><code><img></code><span class="md-plain">标签包裹在<span class="md-pair-s"><code><a></code><span class="md-plain">标签的内部,因此需要将<span class="md-pair-s"><code><a></code><span class="md-plain">标签也设置为一个内联块级标签(可设置宽高,但是不会换行)才行。</span></span></span></span></span></span></span></span></span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">设置方法:</span></span></p> <div class="cnblogs_code"> <pre><span style="color: #000000;"> a{ display:inline-block; } </span><span style="color: #008000;"><!--</span><span style="color: #008000;">css来设置,将a标签转变为内联块级标签</span><span style="color: #008000;">--></span></pre> </div> <p> </p> <p class="md-end-block md-p"> </p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;"> a</span><span style="background-color: #f5f5f5; color: #000000;">{</span><span style="background-color: #f5f5f5; color: #ff0000;"> display</span><span style="background-color: #f5f5f5; color: #000000;">:</span><span style="background-color: #f5f5f5; color: #0000ff;"> inline-block</span><span style="background-color: #f5f5f5; color: #000000;">;</span> <span style="background-color: #f5f5f5; color: #000000;">}</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">a </span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="http://www.baidu.com/"</span><span style="color: #0000ff;">><</span><span style="color: #800000;">img </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="./peiqi.jpeg"</span><span style="color: #ff0000;"> alt</span><span style="color: #0000ff;">="可爱的佩奇"</span><span style="color: #ff0000;"> title</span><span style="color: #0000ff;">="点我跳转百度"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="300px"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">a</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p> </p> <p class="md-end-block md-p"> </p> <h3 class="md-end-block md-heading"><span class="md-plain">内联框架 iframe</span></h3> <div class="md-hr md-end-block"> <hr> </div> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">这个标签对于初学者来说会很少用到,但是它有一个非常强大的功能,这在后期学习中会体现出来。<span class="md-pair-s"><code><iframe></code><span class="md-plain">可以伪造ajax请求并且它对上传文件的支持性特别好,这是后话以后再说。我们来看一下它的用法。</span></span></span></span></p> <p class="md-end-block md-p"><span class="md-tab">   <span class="md-plain">它有一个非常重要的属性<span class="md-pair-s"><code>src</code><span class="md-plain">,可以将某一个网页完整的拿过来。</span></span></span></span></p> <p class="md-end-block md-p"> </p> <table class="md-table"> <thead> <tr class="md-end-block"> <th><span class="td-span"><span class="md-plain">属性</span></span></th> <th><span class="td-span"><span class="md-plain">值</span></span></th> <th><span class="td-span"><span class="md-plain">描述</span></span></th> </tr> </thead> <tbody> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">height</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>pixels,%</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定 iframe 的高度。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">width</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>pixel,%</em></span></span></td> <td><span class="td-span"><span class="md-plain">定义 iframe 的宽度。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">name</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>frame_name</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定 iframe 的名称。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">scrolling</span></span></span></td> <td><span class="td-span"><span class="md-plain">yes,no,auto</span></span></td> <td><span class="td-span"><span class="md-plain">规定是否在 iframe 中显示滚动条。</span></span></td> </tr> <tr class="md-end-block"> <td><span class="td-span"><span class="md-meta-i-c md-link"><span class="md-plain">src</span></span></span></td> <td><span class="td-span"><span class="md-pair-s "><em>URL</em></span></span></td> <td><span class="td-span"><span class="md-plain">规定在 iframe 中显示的文档的 URL</span></span></td> </tr> </tbody> </table> <p class="md-end-block md-p"> </p> <p class="md-end-block md-p"><span class="md-image md-img-loaded"><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></span></p> <div class="cnblogs_code"> <pre><span style="color: #0000ff;"><!</span><span style="color: #ff00ff;">doctype html</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">html </span><span style="color: #ff0000;">lang</span><span style="color: #0000ff;">="en"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">charset</span><span style="color: #0000ff;">="UTF-8"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">http-equiv</span><span style="color: #0000ff;">="X-UA-Compatible"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie=edge"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span>Document<span style="color: #0000ff;"></</span><span style="color: #800000;">title</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"><</span><span style="color: #800000;">iframe </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://www.baidu.com//"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="800px"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">iframe</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #0000ff;"></</span><span style="color: #800000;">html</span><span style="color: #0000ff;">></span></pre> </div> <p> </p> </div> </div> </div> </div> <!--PC和WAP自适应版--> <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"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(HTML学习)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1897161808549048320.htm" title="【HTML学习笔记基础篇】" target="_blank">【HTML学习笔记基础篇】</a> <span class="text-muted">努力的小好</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%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> <span class="text-muted">誓死守护发际线</span> <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> <span class="text-muted">熬夜患者</span> <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> <span class="text-muted">元气满满鸭</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>HTML列表标签表格是用来显示数据的,列表是用来布局的1.列表包括三大类:无序列表、有序列表、自定义列表一.无序列表无序列表的基本语法格式如下://标签表示html中的无序列表列表项1列表项2列表项3①无序列表的各个列表项之间是并列的,不分前后顺序②中只能嵌套,不可以在标签中插入其他标签③之间相当于一个容器,可以容纳所有元素二.有序列表即为有排列顺序的列表有序列表的基本语法格式如下://标签用于定</div> </li> <li><a href="/article/1831334367637630976.htm" title="HTML学习7[重点]" target="_blank">HTML学习7[重点]</a> <span class="text-muted">乌鸦不像写字台</span> <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> <span class="text-muted">ruleslol</span> <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> <span class="text-muted">吴端</span> <div>表单是网页上的一个特定区域。这个区域是由一对标记定义的。这一步有几方面的作用。第一方面,限定表单的范围。其它的表单对象,都要插入到表单之中。单击提交按纽时,提交的也是表单范围之内的内容。第二方面,携带表单的相关信息,例如处理表单的脚本程序的位置、提交表单的方法等。基本语法……语法解释标记的属性如下表所示属性描述name表单的名称method定义表单结果从浏览器传送到服务器的方法,一般有两种方法:g</div> </li> <li><a href="/article/1755723440809066496.htm" title="【html学习笔记】1.概念" target="_blank">【html学习笔记】1.概念</a> <span class="text-muted">日光倾</span> <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> <span class="text-muted">LXWHeaven</span> <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> <span class="text-muted">扶摇|</span> <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> <span class="text-muted">扶摇|</span> <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> <span class="text-muted">kmoon_b426</span> <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> <span class="text-muted">Douglas_fan</span> <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> <span class="text-muted">Douglas_fan</span> <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> <span class="text-muted">北冥有鱼_16c5</span> <div>一名小白,正在努力自学图片发自App图片发自App图片发自App图片发自App图片发自App</div> </li> <li><a href="/article/1753000077330235392.htm" title="curator 入门" target="_blank">curator 入门</a> <span class="text-muted">冬瓜baba的笔记</span> <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> <span class="text-muted">跟 屁 虫</span> <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> <span class="text-muted">取个名字太难了a</span> <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> <span class="text-muted">G_qingxin</span> <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> <span class="text-muted">G_qingxin</span> <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> <span class="text-muted">G_qingxin</span> <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> <span class="text-muted">Kwjdefulgn</span> <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> <span class="text-muted">风继续吹Lao.z.c</span> <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> <span class="text-muted">蔚蓝色的风暴</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF/1.htm">web前端</a><a class="tag" taget="_blank" href="/search/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> <span class="text-muted">扶摇|</span> <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> <span class="text-muted">扶摇|</span> <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> <span class="text-muted">扶摇|</span> <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> <span class="text-muted">扶摇|</span> <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> <span class="text-muted">扶摇|</span> <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> <span class="text-muted">扶摇|</span> <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> <span class="text-muted">3213213333332132</span> <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> <span class="text-muted">bookjovi</span> <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> <span class="text-muted">dcj3sjt126com</span> <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> <span class="text-muted">171815164</span> <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> <span class="text-muted">g21121</span> <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> <span class="text-muted">53873039oycg</span> <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> <span class="text-muted">云端月影</span> <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> <span class="text-muted">aijuans</span> <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> <span class="text-muted">antonyup_2006</span> <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> <span class="text-muted">百合不是茶</span> <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> <span class="text-muted">bijian1013</span> <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> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/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> <span class="text-muted">bit1129</span> <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> <span class="text-muted">白糖_</span> <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> <span class="text-muted">boyitech</span> <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> <span class="text-muted">bylijinnan</span> <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> <span class="text-muted">Chen.H</span> <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> <span class="text-muted">comsci</span> <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> <span class="text-muted">dai_lm</span> <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> <span class="text-muted">datamachine</span> <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> <span class="text-muted">dcj3sjt126com</span> <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> <span class="text-muted">dcj3sjt126com</span> <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> <span class="text-muted">蕃薯耀</span> <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> <span class="text-muted">hanqunfeng</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>Spring3.1 Cache注解  依赖jar包: <!-- redis --> <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> <span class="text-muted">jackyrong</span> <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> <span class="text-muted">lampcy</span> <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> <span class="text-muted">nannan408</span> <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> <span class="text-muted">Everyday都不同</span> <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> <span class="text-muted">tntxia</span> <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> <span class="text-muted">java小叶檀</span> <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"> <strong>按字母分类:</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>