html的文档结构主要是有3部分组成的：
标记于html文件的最前面，用来表示html文件的开始，的标记是放在html的最后面，用来表示html文件的结束，两个标记必须一起使用 和构成html文件的头部部分，在此标记对之间可以使用和等标记对，这些标记都是描述html文档相关信息的标记对，标记对之间的内容不会在浏览器中的内容部分出现，两个标记必须同时使用 和是html文档的主体部分，在此标记可以包括、等众多的标记，他们所定义的文本、图片等会在浏览器的内容部分显示出来，两个标记必须一起使用。html的文档结构实例
<html> <head> <title>html的结构</title> </head> <body> <body> <h1>这是内容部分</h1> </body> </body> </html>meta标记是html语言的head部分的一个辅助性标记，它位于head和title标记之间，它提供给用户不可见的信息。meta标记是用来搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie，可以用来鉴别作者，设置页面格式，标注内容提要和一些关键字，还可以设置页面的自动刷新以及等级等
在头部的中，有另一组标签，在这个标签对中的文字会出现在浏览器视窗最上方的蓝色部分里，作为网页的主题
浏览器不像word，不认识enter键或者空格键，所以有了分隔标记
强制断行标记 强制分段标记 空格 “& nbsp;” 例1：<br>的使用 <html> <head> <title>分隔标记1</title> </head> <body> <body> 我要换行了<br> 我换行了 </body> </body> </html> 例2：<p>的使用 <html> <head> <title>分隔标记2</title> </head> <body> <body> 我要换行了<p> 我换行了</p> </body> </body> </html> 例3：空格的使用 <html> <head> <title>分隔标记3</title> </head> <body> <body> 我要空格了 我空格了 </body> </body> </html>文字的置左、置右、置中
在分段标记
上加一些简单的属性设定，就可以让其文字置左、置右、置中
<html> <head> <title>排版标记</title> </head> <body> <p align="left"> 我置左 </p> <p align="center"> 我置中 </p> <p align="right"> 我置右 </p> </body> </html> 说明：align是分段标记的属性之一，这个属性将来会常常在不同标记中出现，他的功能就是专门在设定“水平对齐的位置”，其常见的属性值有三个“align="left"”置左，“align=""center”置中，“align="right"”置右置中标记
<html> <head> <title>置中标记</title> </head> <body> <center>我置中了</center> </body> </html> 说明:这是一个经常用到的标记，除了文字外，还有图片，表格等等一些其他的标记，任何可以显示在网页中的东西他都可以置中保持原始数
<html> <head> <title保持原始数据格式标记</title> </head> <body> <pre> 我 想 在 哪 就 在 哪 </pre> </body> </html> 说明：利用“<pre>”标记可以将排版和格式后的内容原封不动的呈现出来标题标记
<h1> 内容 </h1> 说明：标题的大小一共有6中，也就是从<h1>到<h6>,<h1>最大，<h6>最小。使用该标记时字体会变成粗体，并自成一行设置字体标记
<font size="2" color="blue" face="楷书">内容</font>字体变化标记
<b>加粗</b> <i>斜体</i> <u>底线</u> <em>强调</em> <s>删除线</s> <sup>上标</sup> <sub>下标</sub> <strong>加强</strong> <strike>删除线</strike> <blink>闪烁：ie没有效果<blink> <kbd>用粗体等宽字体显示文字</kbd> <var>用较小的固定宽度显示字体</var> <dfn>用于名词解释，斜体显示</dfn> <smap>用于字母序列等宽</smap> <address>模拟信封上的字体</address> <big>比默认字号大一号</big> <small>比默认字号小一号</small> <code>以等宽字体显示计算机程序代码</code>无序列表
<html> <head> <title>无序列表</title> </head> <body> <ul> <li>第一行 <li>第二行 <li>第三行 </ul> </body> </html> 说明：其中<ul>就是无序列表，没增加一列内容，就需要加一个<li>; 可以为 <ul>添加属性type="disk"(实心点)，type="square"(小正方形)type="circle"(空心点)有序列表
<html> <head> <title>有序列表</title> </head> <body> <ol> <li>姓名：jock <li>生日：1989/4/9 <li>星座：天蝎座 </ol> </body> </html> 说明：其中<ol>就是无序列表，没增加一列内容，就需要加一个<li>; 可以为 <ol>添加属性type="1"(数字)，type="A"(大写字母)，type="a"(小写字母)，type="I"(大写罗马)，type="i"(小写罗马) <ol start="8">指定8为序列开始的数目自定义列表
<html> <head> <title>有序列表</title> </head> <body> <dt>咖啡</dt> <dd>黑色热饮</dd> <dt>牛奶</dt> <dd>白色冷饮</dd> </body> </html>连接到其他文档
<html> <head> <title>连接到其他文档</title> </head> <body> <a href="文件名.html" target="_blank">点击跳转</a> </body> </html> target="_self"在自身窗口打开 这里需要注意的就是文件的路径，这里我用的是相对路径 绝对路径：是指从根目录到文件的完整路径。 相对路径：是指相对于当前文件的文件位置。网页的内部链接
<html> <head> <title>网页的内部链接</title> </head> <body> <a href="#demo">查看demo</a> <h2> --------------------多来几行--------------------- </h2> <a name="demo"> <h2> demo </h2> </a> </body> </html>网页的外部链接
<html> <head> <title>网页的外部链接</title> </head> <body> <a href="http://www.baidu.com">百度</a> </body> </html>表格结构
<table>用来在html页面上创建表格</table> <th>代表列名一般放在第一行</th> <tr>代表格的一行</tr> <td>定义表格的一列</td> 在默认情况下，表格是没有边框的，如果想要出现边框，就是用border属性 colspan是横向合并，rowspan是纵向合并（部分标签必须用opera浏览器测试）
写法：
标签的type分为：
text-文本框 button-按钮 submit-提交 reset-重置 password-密码 checkbox-多选 radio-单选 file-上传文件 date-选取年、月、日 month-选取月、年 week-选取周、年 time-选取时间 datetime-选取时间、日、月、年（UTC时间） datetime-local-选取时间、日、月、年（本地时间）邮箱输入框
<input type="email" name="user_email"/>数字输入框
<input type="number" name="points" min="1" max="10"/>数字范围输入框（进度条）
<input type="range" name="points" min="1" max="10"/>颜色选择框
<input type="color" name="colortext"/>select标签
<select> <option value="change" selected/>请选择 <option value="A"/>苹果 <option value="B"/>香蕉 <option value="C"/>橘子 <option value="D"/>西瓜 </select>TEXTAREA便签
<TEXTAREA ROWS="5" COLS="30"></TEXTAREA>表单的用途
表单在网页上是用来给访问者填写信息的，从而获得用户信息，使用网页进行交互的功能，一般是将表单设计在一个html页面中，当用户填写信息后做提交操作，于是表单的内容就会从客户端的浏览器上发送给服务器，经过服务器上的jsp或者ASP或者Cgi等处理后，再将用户所需的信息传送给客户端的浏览器上，这样网页就具有了交互性
表单构成
<form></form>标记是用来创建一个表单，在标记之间一切都属于表单里的内容 <form>标记具有action，mentod，target属性，action属性是处理程序的程序名称，mentod属性是用来定义处理程序的从表单中获取信息的方法，通常有两种，分别是get和post，target属性用来制定目标窗口表单的工作原理
1、访问者填写表单，并提交给web服务器处理 2、在web服务器上的后台处理程序对提交后的数据进行处理 3、后台处理程序处理完成后，会重新生成一个新的html页面发给客户端表单中的各种组件
1、文本框 <html> <head> <title>表单中的文本框</title> </head> <body> <form> 姓名：<input name="username" type="text" size="20" maxlength="5" value="请输入姓名" </form> </body> </html> name="uesrname" 文本框的名称 type="text" 确定文本框的形态 siza="20" 文本框的宽度 maxlength="5" 可输入的最大长度 value="请输入姓名" 预设值 2、密码框 <html> <head> <title>表单中的密码框</title> </head> <body> <form> 密码：<input name="username" type="password" size="20" maxlength="5" value="请输入密码" </form> </body> </html> name="username" 密码框的名称 type="text" 该属性是确定密码框的形态 size="20" 密码框的宽度 maxlength="5" 可输入的最大长度 value="请输入密码" 预设值 3、单选按钮 <html> <head> <title>表单中的单选按钮</title> </head> <body> <form> 男<input name="sex" type="radio" value="boy"/> 女<input name="sex" type="radio" value="girl" checked/> </form> </body> </html> name="sex" 单选按钮的名称 value="boy" 单选按钮的值 type="radio" 该属性是确定单选按钮的形态 checked 设置选中 4、复选框 <html> <head> <title>表单中的复选框</title> </head> <body> <form> 爱好： <input name="storp" type="checkbox" value="movie" checked/>电影 <input name="storp" type="checkbox" value="book" /> 看书 </form> </body> </html> name="storp" 复选框的名称 type="checkbox" 该属性是确定复选框的形态 value="movie" 复选框的值 checked 设置选中 5、下拉列表 <html> <head> <title>表单中的下拉列表</title> </head> <body> <form> 请选择你最喜欢的种族： <select name="mx" multiple size="1"> <option value="qxz" selected/>请选择 <option value="sz"/>兽族 <option value="rz"/>人族 <option value="wlz"/>亡灵族 <option value="jlz"/>精灵族 </select> </form> </body> </html> name="mx" 复选框的名称 multiple 设置多选 size="1" 列显示几个选项 value="qxz" 复选框的值 selected 设置选中 6、文本域 <HTML> <HEAD> <TITLE> 文本域 </TITLE> </HEAD> <BODY> <form> 意见： <TEXTAREA NAME="yijian" ROWS="3" COLS="20" wrap="off"></TEXTAREA> </form> </BODY> </HTML> NAME="yijian" 名称 ROWS="3" 行数 COLS="20" 列数 wrap="off" 该属性有三种取值 off(输入文字不自动换行) virtual(输入文字自动换行，在用户没有自动按下回车，向后台发送时，视为没有换行) physical(输入文字自动换行，向后台发送时，视为有换行) 7、文件域 <HTML> <HEAD> <TITLE> 文件域 </TITLE> </HEAD> <BODY> <form> <input name="file" type="file"> </form> </BODY> </HTML> 8、图片域 <HTML> <HEAD> <TITLE> 图片域 </TITLE> </HEAD> <BODY> <form> <input name="pt" type="image" src="F:\图片\刀刀\刀刀狗1.jpg" width="300" height="400" border="1"> </form> </BODY> </HTML> 9、普通按钮 <HTML> <HEAD> <TITLE> 按钮 </TITLE> </HEAD> <BODY> <form> <input name="anniu" type="button" value="send"> </form> </BODY> </HTML> 10、提交按钮 <HTML> <HEAD> <TITLE> 提交按钮 </TITLE> </HEAD> <BODY> <form> <INPUT name="anniu" TYPE="submit" value="提交"> </form> </BODY> </HTML> 11、重置按钮 <HTML> <HEAD> <TITLE> 重置按钮</TITLE> </HEAD> <BODY> <form> <INPUT name="anniu" TYPE="reset" value="重置" > </form> </BODY> </HTML> 12、隐藏域 <HTML> <HEAD> <TITLE> 隐藏域 </TITLE> </HEAD> <BODY> <form> <INPUT TYPE="hidden" NAME="H1" value="love"> </form> </BODY> </HTML>