陶甜也

web学习 HTML基础（很详细）

web学习 HTMI 基础

1、HTML的基本结构




<html>
	<head>
		<meta charset="UTF-8">                       
		<title>title>
	head>
	<body>
	body>
html>

示例：


<html>
	<head>
		<meta charset="UTF-8">
		<title>我做的第一个网页title>
	head>
	<body>
		你好，HTML。
	body>
html>

使用浏览器打开该html文件即可

显示的结果：

****编写html的细节****：

1 html文档内容由标签和文本内容组成。

2 html的标签是由w3c组织规定好的，不能随意编写。

3 html标签不区分大小写。（建议使用小写字母）

4 开始标签和结束标签要成对出现。

5 在编写html时，要注意缩进，编写出层次结构。

2.head 中的标签

2.1 title标签

1、作用：该标签是为HTML网页添加标题；

2、使用方法：

如图，在两个之间的</code>之间，黄色框架里就是html网页的标题； <a href="http://img.e-com-net.com/image/info8/f8565ab6a8a4411289c292a04397ce8f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f8565ab6a8a4411289c292a04397ce8f.jpg" alt="web学习 HTML基础（很详细）_第2张图片" width="575" height="309" style="border:1px solid black;"></a> <h3>2.2 meta标签</h3> <h4>2.2.1设置搜索关键字（搜索引擎优化）（现在不常用）</h4> 1、作用：通过在其他网页，搜索关键字来查找到该HTML网页。设置搜索关键字，在自己做的HTML网页是看不到的，因为用来引导搜索引擎进行收录的，而不进行显示内容。 2、使用方法：如图，在head中使用该标签； 快捷键：打出meta +tab键就能自动补全成为<code><meta /></code> <a href="http://img.e-com-net.com/image/info8/32135b381cff46eca7e312f1035456a7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/32135b381cff46eca7e312f1035456a7.jpg" alt="web学习 HTML基础（很详细）_第3张图片" width="650" height="266" style="border:1px solid black;"></a> <h4>2.2.2 网页描述</h4> 1、作用：通过在其他网页，搜索描述来查找到该HTML网页。设置搜索描述，在自己做的HTML网页是看不到的，因为用来引导搜索引擎进行收录的，而不进行显示内容。 2、使用方法：如图，在head中使用该标签； <a href="http://img.e-com-net.com/image/info8/2cc48c0cd86d4dc782dc976d06ed2633.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2cc48c0cd86d4dc782dc976d06ed2633.jpg" alt="web学习 HTML基础（很详细）_第4张图片" width="650" height="223" style="border:1px solid black;"></a> <h4>2.2.3 自动跳转</h4> 1、作用：定义一定的时间之后自动跳转到指定的网页 2、使用方法： 例如：3秒后自动跳转到www.baidu.com <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我做的第一个网页</title> <meta http-equiv="refresh" content="3 ; url=http://www.baidu.com"/> </head> <body> 注意：3秒后自动跳转到www.baidu.com(百度) </body> </html> </code></pre> 使用浏览器打开该html文件即可; 打开的网页如下图所示： <a href="http://img.e-com-net.com/image/info8/e518166babd643d4a9d2b3ba98c3e175.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e518166babd643d4a9d2b3ba98c3e175.jpg" alt="web学习 HTML基础（很详细）_第5张图片" width="581" height="394" style="border:1px solid black;"></a> 3秒后的页面如图所示： <a href="http://img.e-com-net.com/image/info8/8087dbfd9f6d4e73b7c7e00f2c00b69c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8087dbfd9f6d4e73b7c7e00f2c00b69c.jpg" alt="web学习 HTML基础（很详细）_第6张图片" width="650" height="384" style="border:1px solid black;"></a> <h2>2.3 script标签</h2> 作用：在页面中编写javascript代码或引入javacript文件 <h2>2.4 style 标签</h2> 作用：在页面中编写css代码 <h2>2.5 link标签</h2> 作用：引入其他文件(例如css文件) <h2>2.6 base标签</h2> 作用：设置页面链接前缀 当页面中的a超链接标签没有设置href属性的值和没有设置target属性的值时，默认使用base标签中的href属性的值和target属性的值。 <h2>3.body中的标签（写在两个body之间的）</h2> <h3>3.1 标题标签 h1 …h6</h3> 一共6级标签，使用时会自动换行。 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我做的第一个网页</title> </head> <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> </html> </code></pre> 结果： <a href="http://img.e-com-net.com/image/info8/f9b3e851ec0b4927a76794e2951cf4bb.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f9b3e851ec0b4927a76794e2951cf4bb.jpg" alt="web学习 HTML基础（很详细）_第7张图片" width="516" height="446" style="border:1px solid black;"></a> <h3>3.2 段落标签 p</h3> 1、作用：增大了行间距 2、使用： <a href="http://img.e-com-net.com/image/info8/0662f64f41ca45b1a4ded67d3a27b615.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0662f64f41ca45b1a4ded67d3a27b615.jpg" alt="web学习 HTML基础（很详细）_第8张图片" width="516" height="446" style="border:1px solid black;"></a> <h3>3.3 换行标签 br</h3> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我做的第一个网页</title> </head> <body> 你快乐吗？<br />我很快乐！ </body> </html> </code></pre> 结果： <a href="http://img.e-com-net.com/image/info8/65edbf195fac45439c9a53f9c201277e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/65edbf195fac45439c9a53f9c201277e.jpg" alt="web学习 HTML基础（很详细）_第9张图片" width="516" height="194" style="border:1px solid black;"></a> <h3>3.5 水平线 hr</h3> hr标签的属性： size 设置粗细 width 设置宽度 color 设置颜色 align 对齐方式（默认居中对齐） <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我做的第一个网页</title> </head> <body> <hr color="aquamarine" width="300" size="7" align="left"/> 你快乐吗？<br />我很快乐！ </body> </html> </code></pre> 结果： <a href="http://img.e-com-net.com/image/info8/4c43258159b64c4cb14c18a6528e30ae.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4c43258159b64c4cb14c18a6528e30ae.jpg" alt="web学习 HTML基础（很详细）_第10张图片" width="516" height="238" style="border:1px solid black;"></a> <h3>3.6 14.加粗（strong、b）和斜体（em、i）</h3> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我做的第一个网页</title> </head> <body> <strong>你快乐吗？</strong><br /> <b>我很快乐！</b><br /> <em>快乐很简单</em><br /> <i>笑一笑</i> <br /> </body> </html> </code></pre> 结果： <a href="http://img.e-com-net.com/image/info8/83b4bcf066594f77aba381ebe1400271.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/83b4bcf066594f77aba381ebe1400271.jpg" alt="web学习 HTML基础（很详细）_第11张图片" width="516" height="257" style="border:1px solid black;"></a> <h3>3.7 独占一行 div</h3> 1、作用：独占一行的效果，div+css做页面布局 2、例题： <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>数学的重要性</title> </head> <body > <h1>数学的重要性</h1> <em>2019/11/26</em> <hr color="aquamarine" /> <p>我想要个披萨，我想点个12寸的</p> <p>外卖员告诉我没有十二寸的了两个六寸的行不行</p> <p>经过我的计算两个六寸的比十二寸的要小很多</p> 由此可见<br /> <strong>数学是重要的！</strong> <div><strong>我是什么效果</strong></div> </body> </html> </code></pre> 实现的效果： <a href="http://img.e-com-net.com/image/info8/fe4cb8db07ee414c94166380b74c4577.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/fe4cb8db07ee414c94166380b74c4577.jpg" alt="web学习 HTML基础（很详细）_第12张图片" width="516" height="498" style="border:1px solid black;"></a> <h3>3.8 19.图像标签 img</h3> 1、作用：添加图片 2、属性：<code><img 属性 /></code> src=“图片路径” title=“鼠标停在图片上时提示的文字内容” alt=“图片加载失败时提示的文字内容” width=“图片宽度”（单位像素px） height=“图片高度”（单位像素px） border=”图片边框”（单位像素px） 例题：给页面添加动图 第一步：找到喜欢的动图存放在img文件夹所在的目录里 <ul> <li class="task-list-item"> <a href="http://img.e-com-net.com/image/info8/f6ebb24b4b8542939362c984760b204e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f6ebb24b4b8542939362c984760b204e.jpg" alt="web学习 HTML基础（很详细）_第13张图片" width="397" height="335" style="border:1px solid black;"></a></li> </ul> 第二步：添加图片 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <img src="img/小屁孩gif.gif" title="小屁孩" alt="小屁孩" width="1200" height="520" border="10"/> </body> </html> </code></pre> 显示： <a href="http://img.e-com-net.com/image/info8/d5fc2c59918041efb2ec1582f5185f88.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d5fc2c59918041efb2ec1582f5185f88.jpg" alt="web学习 HTML基础（很详细）_第14张图片" width="650" height="346" style="border:1px solid black;"></a> <h3>3.9 超链接<code><a></code></h3> 1、作用：<code><a></code>标签，超链接标签，用来链接到其他页面或本页面其他位置。 2、属性:****href**** 链接地址 1 链接到其他网站页面 href=“http://www.baidu.com” 2 链接到自己网站的其他页面 href=“2.html” 3 邮箱链接(打开邮箱客户端) href=“mailto:aaa@163.com” 4 链接到锚点 href="#abc" (需要设置锚点<code><a name="abc"></a></code>) 注释： 锚点，是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。 使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。 创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。 3、使用方式：<a href=”链接地址”target=“打开链接的位置“> 显示在页面上的内容 <code></a></code> 例题： <pre><code class="prism language-html"><!DOCTYPE html>  <html> <head> <meta charset="UTF-8"> <title>常用网站</title> </head> <body> <ul> <a href="https://www.jd.com/" target="_parent"> <li>京东超市</li> <img src="img/京东.jpg" alt="京东" title="京东" height="100" width="200" /> </a> <a href="https://www.baidu.com/" target="_parent"> <li>百度查询</li> <img src="img/百度.jpeg" alt="百度" title="百度" height="100" width="200" /> </a> <a href="https://www.taobao.com/" target="_parent"> <li>淘宝购物</li> <img src="img/淘宝.jpg" alt="淘宝" title="淘宝" height="100" width="200" /> </a> </ul> </body> </html> </code></pre> 结果： <a href="http://img.e-com-net.com/image/info8/4f2403573be849a5b18137756a4bcec9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4f2403573be849a5b18137756a4bcec9.jpg" alt="web学习 HTML基础（很详细）_第15张图片" width="565" height="574" style="border:1px solid black;"></a> <h3>3.10 行级标签 span</h3> 1、作用：与div一样常用，需要标签又不想影响整个布局的时候用。比如文本框后面的提示，常与CSS联用。 2、示例： <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <span>行级标签</span> 试试 </body> </html> </code></pre> 结果： <a href="http://img.e-com-net.com/image/info8/5454987aa7f94585af18b6beb4d0fc08.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/5454987aa7f94585af18b6beb4d0fc08.png" alt="web学习 HTML基础（很详细）_第16张图片" width="204" height="197" style="border:1px solid black;"></a> <h3>3.11 设置字体的大小和颜色 font</h3> 1、作用：可以设置字体的颜色与大小。 2.示例： <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 字体与颜色 <br /> <font size="7" color="red">字体与颜色</font> </body> </html> </code></pre> 结果： <a href="http://img.e-com-net.com/image/info8/5bf98bf446b04865bd84b42e096cbc77.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/5bf98bf446b04865bd84b42e096cbc77.png" alt="web学习 HTML基础（很详细）_第17张图片" width="376" height="199" style="border:1px solid black;"></a> <h3>3.12 注释和特殊符号</h3> 1、注释 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> 1、打出<>,就会有提示，选择就会出现如下注释：  2、使用快捷键Ctrl + / ，就会把选中的代码注释，或者把鼠标放在这行代码最后，按快捷键Ctrl + / ，就会注释整行，取消快捷也是用快捷键Ctrl + / 例如：  </body> </html> </code></pre> 2、特殊符号 <table> <thead> <tr> <th>空格</th> <th><code> </code></th> <th><code><a href="#">百度</a> <a href="#">新浪</a></code></th> </tr> </thead> <tbody> <tr> <td>大于号(>)</td> <td><code>></code></td> <td>如果时间<code>></code>晚上6点，就坐车回家</td> </tr> <tr> <td>小于号(<)</td> <td><code><</code></td> <td>如果时间<code><</code>早上7点，就走路去上学</td> </tr> <tr> <td>引号(")</td> <td><code>"</code></td> <td>W3C规范中，HTML的属性值必须用成对的<code>quot;</code>引起来<code>"</code>;</td> </tr> <tr> <td>版权符号©</td> <td><code>©</code></td> <td><code>©</code> 2003-2016百度</td> </tr> </tbody> </table> <h3>3.13 列表标签</h3> 列表的种类： （1）无序列表 <code><ul> <li></li> </ul></code> （2）有序列表 <code><ol> <li></li> </ol></code> （3）定义列表 <code><dl> <dt></dt> <dd></dd> </dl></code> <h4>3.13.1 无序列表</h4> 1、type属性： disc 实心圆（默认） circle 空心圆 square 实心方块 例题： <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul type="square"> 水果 <li>苹果</li> <li>橘子</li> <li>梨子</li> </ul> </body> </html> </code></pre> 结果： <a href="http://img.e-com-net.com/image/info8/479d750cd3d840919ea6bae531cf8b2e.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/479d750cd3d840919ea6bae531cf8b2e.png" alt="web学习 HTML基础（很详细）_第18张图片" width="185" height="205" style="border:1px solid black;"></a> <h4>3.13.2 有序列表</h4> 1、type属性： 1 使用数字作为符号（默认） A/a 使用字母作为符号 I/i 使用罗马数字作为符号 例如： <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ol type="a"> 水果 <li>苹果</li> <li>橘子</li> <li>梨子</li> </ol> </body> </html> </code></pre> 结果： <a href="http://img.e-com-net.com/image/info8/6763c4b45b354874a6b949a660012bc0.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/6763c4b45b354874a6b949a660012bc0.png" alt="web学习 HTML基础（很详细）_第19张图片" width="191" height="179" style="border:1px solid black;"></a> <h4>3.13.3 定义列表</h4> 例题： <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <dl> 牡丹<br /> <dt>分类</dt> <dd>被子植物</dd> <dt>别名</dt> <dd>富贵花</dd> </dl> </body> </html> </code></pre> 结果： <a href="http://img.e-com-net.com/image/info8/116a77821745403997c6652658d43174.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/116a77821745403997c6652658d43174.png" alt="web学习 HTML基础（很详细）_第20张图片" width="184" height="201" style="border:1px solid black;"></a> <h3>3.14 表格 table</h3> <h4>3.14.1 绘制表格</h4> 1、表格的作用，整齐，清晰明了的展示数据。 2、表格的几个名词：行 row ，列 column ，单元格 cell 3、基本语法： <code><tr></tr></code> 是table row 的缩写，表格中的一行 <code><td></td></code>是table data cell 的缩写，单元格 <code><th></th></code> 是table header cell 的缩写，表头单元格，其内容自动居中加粗 table表格当中的行我们用tr标签来表示，行中的若干个单元格我们用td标签来表示，这就是一个完整的表结构。 4、属性 table标签的属性： border 表格边框（单位像素） align 水平对齐方式 align=“right” 表示右对齐 align=“left” 表示左对齐 align=“center” 表示居中 width 表格宽度(单位像素，也可以是百分比) height 表格高低（单位像素） bgcolor 表格背景颜色 bordercolor 边框颜色 cellspacing：单元格边框之间的距离 cellpadding：单元格中内容到单元格边框的距离 也可直接给内容居中<code><td align="center"></td></code> 例题： <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table border="3" width="1000px" height="150" bgcolor="#CFE8CC" align="center"> <tr align="center">  <td width="200px"></td>  <td width="200px">初级</td>  <td width="200px">中级</td>  <td width="200px">高级</td>  <td width="200px">专家</td>  </tr > <tr align="center">  <td>标准</td>  <td>怼得某人说不出话来</td>  <td>跟某人互怼不相上下</td>  <td>怼某人没话说</td>  <td>直接将某人怼到辞职</td>  </tr> <tr align="center"> <td>用户A</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr align="center"> <td>用户B</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr align="center"> <td>用户B</td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> </html> </code></pre> 结果： <a href="http://img.e-com-net.com/image/info8/1cf0bafd470245afb10329489b71eb23.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1cf0bafd470245afb10329489b71eb23.jpg" alt="web学习 HTML基础（很详细）_第21张图片" width="650" height="189" style="border:1px solid black;"></a> 5、快捷方式： <pre><code class="prism language-html"><table > tr*3>td*5  </table> </code></pre> 鼠标放在 tr<code>*</code>3>td<code>*</code>5 的后面，按 tab 键，会变成如下样式： <pre><code class="prism language-html"><table > <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr>  </table> </code></pre> <h4>3.14.2 合并单元格</h4> 1、跨列（合并列） <code><td colspan="2" align="center">成绩</td></code> 用的是 td 的 colspan 属性 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table border="1" cellspacing="0" align="center" width="200px" height="90px"> <tr > <td colspan="2" align="center">成绩</td>  </tr> <tr> <td>语文</td> <td>89</td> </tr> <tr> <td>数学</td> <td>89</td> </tr> </table> </body> </html> </code></pre> 结果： <a href="http://img.e-com-net.com/image/info8/680dfb12119e47a791282f6a8d4db895.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/680dfb12119e47a791282f6a8d4db895.jpg" alt="web学习 HTML基础（很详细）_第22张图片" width="565" height="303" style="border:1px solid black;"></a> 2、跨行（合并行） <code><td rowspan="2">小李</td></code> 用的是td 中的 rowspan 属性 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table border="1" cellspacing="0" align="center" width="200px" height="90px"> <tr> <td rowspan="2">小李</td> <td>语文</td> <td>87</td> </tr> <tr>  <td>数学</td> <td>99</td> </tr> </table> </body> </html> </code></pre> 结果： <a href="http://img.e-com-net.com/image/info8/329949baa7124084816aba2c3374142c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/329949baa7124084816aba2c3374142c.jpg" alt="web学习 HTML基础（很详细）_第23张图片" width="565" height="303" style="border:1px solid black;"></a> 3、综合练习 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格练习一</title> </head> <body> <table border="1" width="400" height="150" bgcolor="aquamarine"> <tr align="center"> <td >手机充值、IP卡</td> <td colspan="3">办公设备、文具、耗材</td>  </tr> <tr align="center"> <td rowspan="3" width="130">各种卡的总汇</td> <td>铅笔</td> <td>钢笔</td> <td>粉笔</td> </tr> <tr align="center">  <td>打印</td> <td>刻录</td> <td>墨盒</td> </tr> <tr align="center">  <td>笔记本</td> <td>钢笔</td> <td>墨水</td> </tr> </table> </body> </html> </code></pre> 结果： <a href="http://img.e-com-net.com/image/info8/ed86e7a987c14d21b24beefd352a0ce9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/ed86e7a987c14d21b24beefd352a0ce9.jpg" alt="web学习 HTML基础（很详细）_第24张图片" width="481" height="297" style="border:1px solid black;"></a> <h4>3.14.3 表头标签caption以及th、thead、tbody、tfoot等</h4> <code><caption></code> 表头标签,始终处于表格上方的正中间位置 <code><th></code> 标签，用来替代<code><td></code>包含的文字默认居中加粗 thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当你创建某个表格时，你也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。 thead、tfoot 以及 tbody 元素最好成套使用。 例题： <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table> <caption >年终报表</caption> <thead bgcolor="#7FC2E5"> <tr> <th width="300">月份</th> <th width="300">收入（RMB）</th> </tr> </thead> <tbody align="center" bgcolor="bisque"> <tr > <td >1月</td> <td>100</td> </tr> <tr> <td>2月</td> <td>100</td> </tr> <tr> <td>3月</td> <td>100</td> </tr> <tr> <td>4月</td> <td>100</td> </tr> <tr> <td>5月</td> <td>100</td> </tr> <tr> <td>6月</td> <td>100</td> </tr> </tbody > <tfoot align="center" bgcolor="cadetblue"> <tr> <td>平均月收入</td> <td>100</td> </tr> <tr> <td>总计</td> <td>600</td> </tr> </tfoot> </table> </body> </html> </code></pre> 结果： <a href="http://img.e-com-net.com/image/info8/6d78acdb921d411498794d177f9152c7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6d78acdb921d411498794d177f9152c7.jpg" alt="web学习 HTML基础（很详细）_第25张图片" width="650" height="257" style="border:1px solid black;"></a> 案例：个人简历的制作 提示：<code><col></code> 标签为表格中一个或多个列定义属性值。如需对全部列应用样式，<code><col></code> 标签很有用，这样就不需要对各个单元和各行重复应用样式了。 <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 个人简历空表</title> </head> <body> <table border="1" cellspacing="0" width="900" height="500"> <col width="120"/> <col width="120"/> <col width="120"/> <col width="120"/> <col width="120"/> <col width="120"/> <col width="200"/> <p> <caption> <font size="6" color="black">个人简历</font></caption> </p> <tr align="center"> <td><strong>姓名</strong></td> <td></td> <td><strong>性别</strong></td> <td></td> <td><strong>年龄</strong></td> <td></td> <td rowspan="5" align="center">照片</td> </tr> <tr align="center"> <td ><strong>学历</strong></td> <td></td> <td><strong>籍贯</strong></td> <td colspan="3"></td>   </tr> <tr align="center"> <td><strong>电话</strong></td> <td></td> <td><strong>政治面貌</strong></td> <td colspan="3"></td>   </tr> <tr align="center"> <td><strong>毕业院校</strong></td> <td colspan="5"></td>   </tr> <tr align="center"> <td><strong>求职意向</strong></td> <td colspan="5"></td>  </tr> <tr align="center" height="180"> <td><strong>工作经历</strong></td> <td colspan="6"></td>  </tr> <tr align="center" height="160"> <td><strong>自我介绍</strong></td> <td colspan="6"></td>  </tr> </table> </body> </html> </code></pre> 结果： <a href="http://img.e-com-net.com/image/info8/b92a3583bdb64958a92237d45db9d06c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/b92a3583bdb64958a92237d45db9d06c.jpg" alt="web学习 HTML基础（很详细）_第26张图片" width="650" height="425" style="border:1px solid black;"></a> 或者<code><colgroup span= 7 width="12.5%"></colgroup></code> <pre><code class="prism language-html"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <table border="1px" cellspacing="0"> <col width="100px"> <col width="100px"> <col width="100px"> <col width="100px"> <col width="100px"> <col width="100px"> <col width="160px"> <tr> <th colspan="7">个人简历</th> </tr> <tr> <td height="40px" align="center">姓名</td> <td></td> <td align="center">性别</td> <td></td> <td align="center">年龄</td> <td></td> <td rowspan="4" align="center">照片</td> </tr> <tr> <td height="40px" align="center">学历</td> <td></td> <td align="center">籍贯</td> <td colspan="3 "></td> </tr> <tr> <td height="40px" align="center">电话</td> <td></td> <td align="center">政治面貌</td> <td colspan="3"></td> </tr> <tr> <td height="40px" align="center">毕业院校</td> <td colspan="5 "></td> </tr> <tr> <td height="40px" align="center">求职意向</td> <td colspan="6 "></td> </tr> </table> </body> </html> </code></pre> 结果： <a href="http://img.e-com-net.com/image/info8/4fdf6dfd60964ed2ad5fd41adcc2cb48.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4fdf6dfd60964ed2ad5fd41adcc2cb48.jpg" alt="web学习 HTML基础（很详细）_第27张图片" width="650" height="237" style="border:1px solid black;"></a> <h3>3.15 表单标签（收集数据的标签）</h3> 作用：收集数据。例如：注册、登录等操作时需要收集用户填写的数据。 我们的网页大多说时候都是从服务器拿数据展示到客户端，但有时候我们也需要写数据提交给服务器，这就是我们今天要学习的表单。 模拟登陆： 需要一个文本输入框，输入账号，密码输入框输入密码，提交按钮，这些按钮都是被包裹在一个form标签里面的： <a href="http://img.e-com-net.com/image/info8/469d6f3a4a744d16a53b28bbb4fc9309.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/469d6f3a4a744d16a53b28bbb4fc9309.jpg" alt="web学习 HTML基础（很详细）_第28张图片" width="320" height="341" style="border:1px solid black;"></a> 通常在一个表单中有很多种的表单控件，有文本框密码框等等，这些控件都是input标签表示出来的，一个标签怎么能写出来这么多效果呢，主要是因为，它的type属性，不同的属性代表不同的效果。 <h4>3.15.1 单行文本框 text</h4> 1、用法： <code><input type=”text” name=”” value=”” size=”” maxlength=”” /></code> 2、属性 type 标签类型 name 标签名称（一般后台获取用户填写数据时使用） value 默认值 size 长度（建议不要使用） （对于 <code><input type="text"></code>和 <code><input type="password"></code>，size 属性定义的是可见的字符数。而对于其他类型，size 属性定义的是以像素为单位的输入字段宽度。） maxlength 最多填写多少个字符 placeholder 有默认文字，不是默认值 <h4>3.15.2 密码框 password</h4> 1、使用方法： <code><input type=”password” name=”” value=”” size=”” maxlength=”” /></code> 2、属性 type 标签类型 name 标签名称（一般后台获取用户填写数据时使用） value 默认值 size 长度 maxlength 最多填写多少个字符 例如： <pre><code class="prism language-html"> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>欢迎填写报考信息</title> </head > <body bgcolor="#BCD68D"> <form action="" > <p>欢迎填写报考信息</p> 账号：<input type="text" name="id" placeholder="请输入账号，可用身份证号" /><br /> 密码：<input type="password" name="password" placeholder="密码为六位数"/><br /> </body> </html> </code></pre> 得到： <a href="http://img.e-com-net.com/image/info8/e3dd0fcc514940a9860aca4af5065368.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e3dd0fcc514940a9860aca4af5065368.jpg" alt="web学习 HTML基础（很详细）_第29张图片" width="318" height="288" style="border:1px solid black;"></a> <h4>3.15.3 单选按钮 radio</h4> 1、用法： <code><input type="radio" name="gen" value="男" checked="checked" /> 男</code> <code><input type="radio" name="gen" value="女" /> 女</code> 2、属性 type 标签类型 name 标签名称 checked 设置为默认选中 name的两个作用： 1后台获取用户填写数据时使用，获取选中的按钮的value中的值； 2 相同name值得radio为一组，具有互斥的能力。 <h4>3.15.4 复选框 checkbox</h4> 1、用法：<code><input type=”checkbox” name=” ” value=” ”checked=” “ /> 文本</code> 2、属性： type 标签类型 name 标签名称 checked 设置为默认选中 name的两个作用： 1.后台获取用户填写数据时使用，获取选中的按钮的value中的值。 2 .相同name值得checkbox为一组。 例如： <pre><code class="prism language-html"> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>欢迎填写报考信息</title> </head > <body bgcolor="#BCD68D"> <form action="" > <p>欢迎填写报考信息</p> 账号：<input type="text" name="id" placeholder="请输入账号，可用身份证号" /><br /> 密码：<input type="password" name="password" placeholder="密码为六位数"/><br /> 性别：<input type="radio" name="gender" value="man" checked="checked"/>男 <input type="radio" name="gender" value="woman"/>女<br /> 特长：<input type="checkbox" name="speciality" value="sing"/>唱歌 <input type="checkbox" name="speciality" value="dance"/>跳舞 <input type="checkbox" name="speciality" value="piano"/>钢琴 <input type="checkbox" name="speciality" value="taekwondo"/>跆拳道 <input type="checkbox" name="speciality" value="other"/>其他 <br /> </body> </html> </code></pre> 结果： <a href="http://img.e-com-net.com/image/info8/0b52aee2673b46f88fd8ebae61d77038.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0b52aee2673b46f88fd8ebae61d77038.jpg" alt="web学习 HTML基础（很详细）_第30张图片" width="556" height="444" style="border:1px solid black;"></a> <h4>3.15.5 文件框</h4> <code><input type=”file” name=”” /></code> <h4>3.15.6 下拉列表框</h4> 1、说明：下拉列表框，后台根据select 的name 获得选中的option的value值 selected 属性：设置为默认选中 2、例如： <pre><code class="prism language-html"> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>欢迎填写报考信息</title> </head > <body bgcolor="#BCD68D"> <form action="" > 考试加分材料：<input type="file" name="file" value="浏览"/><br /> 考试地点：省份<select name="sf"> <option value="beijing">北京市</option> <option value="shanghai">上海</option> <option value="gansu">甘肃省</option> <option value="yunnan">云南省</option> <option value="xizang">西藏省</option> </select> 市/州:<select name="shi"> <option value="honghe">红河哈尼族彝族自治州</option> <option value="kunming">昆明市</option> </select> 县/区：<select name="xian"> <option value="pingbian">河口县</option> <option value="pingbian">屏边苗族自治县</option> <option value="pingbian">东川区</option> </select> </form> </body> </html> </code></pre> 结果： <a href="http://img.e-com-net.com/image/info8/95a3619b29884b3e834f1c8225213f77.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/95a3619b29884b3e834f1c8225213f77.jpg" alt="web学习 HTML基础（很详细）_第31张图片" width="620" height="213" style="border:1px solid black;"></a> <h4>3.15.7 提交按钮</h4> 程序： <pre><code class="prism language-html"> <input type="submit" name="" id="" value="提交" /> </code></pre> 结果： <a href="http://img.e-com-net.com/image/info8/2ae570bceb484370865ee0456e9537aa.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2ae570bceb484370865ee0456e9537aa.jpg" alt="web学习 HTML基础（很详细）_第32张图片" width="609" height="246" style="border:1px solid black;"></a> <h4>3.15.8 重置按钮</h4> 程序： <pre><code class="prism language-html"><input type="reset" name="" id="" value="重置" /> </code></pre> 结果： <a href="http://img.e-com-net.com/image/info8/2dbc0468cf8f4c0cb9fbffbcc4198b89.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2dbc0468cf8f4c0cb9fbffbcc4198b89.jpg" alt="web学习 HTML基础（很详细）_第33张图片" width="588" height="283" style="border:1px solid black;"></a> <h4>3.15.9 表单标签</h4> 1、说明：以上所有收集数据的标签都要放在<code><form></form></code> 标签中才能提交给后台代码。 2、属性： action 表单提交路径 method 表单提交方式，get和post 其中：（1）get：提交之后网页地址处会加入提交的信息 （2）post：提交之后网页地址处隐藏了提交的信息 例如： <pre><code><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>欢迎填写报考信息


						欢迎填写报考信息
		账号：

		密码：

			
		性别：男
			女

		特长：唱歌
			跳舞
			钢琴
			跆拳道
			其他 

		考试加分材料：

		考试地点：省份
		市/州:
		县/区：

结果：

3.15.10 图像标签

定义图像形式的提交按钮。
和标签功能相同，可以在页面中引入图片。不同的是，和 submit功能一样，具有提交表单的能力。

<input type="image" src="img/小屁孩gif.gif" id="" value="提交" />

结果：

4.body 标签（写在写在第一个body中的）

body标签包含着所有要展示到页面上的标签

alink=" " 设置页面上超链接的样式

background="img/小屁孩gif.gif" 设置页面背景图片

bgcolor="color" 设置页面背景颜色

vlink="red" 设置已被访问的链接颜色

link="red" 设置页面中的默认链接颜色