<span style="color: rgb(102, 102, 102); font-family: 'microsoft yahei'; font-size: 14px; line-height: 24px; text-indent: 28px;">由于有些零散的代码夹杂其中，所以用代码块编辑。</span>
</pre><pre name="code" class="html">马士兵_HTM_学习笔记_尚学堂_个人整理
一、文字的布局
<p>…</p>
分段落现实
<div>…</div> <span>…</span>
分块显示
<ul>…</ul>
<li type=“disc circle square”>…
符号列表
<ol>…</ol>
<li>…
数字列表
<br> 换行
<nobr>…</nobr> 不换行
<pre></pre>保留原有格式
<marquee></marquee>跑马灯效果
<blockquote></blockquote>黑体引用
<dl><dt><dd>
二、对齐—align
<h1 align=“”>
<div align=“”>
<table align=“”>
<hr align=“”>
……
取值:left right center top middle bottom
<center>……</center>
对齐到中间
三、图片
<img src=“” align=“” alt=“” border=“”>
Src 图片路径，一般使用相对路径
Alt 图片无法显示时显示的文字
Border 边框的厚度
Align = left right
top middle bottom（图文混排时用于和图片的对齐）
四、表格—重点掌握
<table width（%或像素值）=“” align=“” border=“”>
<tr>
<th width=“” align=“”>…</th>
<th>…</th（表头（可选））>…
</tr>
<tr>
<td(单元格) width=“” align=“” valign（top/middle/bottom）=“”>…</td>
<td rowspan(跨行)=“” colspan(跨列)=“” bgcolor=“”>…</td>
……
</tr>
</table>
table的属性：
bgcolor
border
bordercolorlight
bordercolordark
cellspacing
cellpadding
width
height
五、表单—重点掌握
1.作用
收集用户信息
数据库查询
收发email
……
用户不仅仅是信息的被动接受者，还可以通过表单成为信息的主动发出者
2.表单基础--<form>
<form>……</form>
<form>的属性
Method (get post) 数据提交方式
Get 发送较少数据（256byte），显示在url中，url/userinfo?username=张三&password=hehe
Post数据长度无限制，不会显示在url中
Action
Form中数据交给服务器端哪个程序进行处理
Eg.
<form method=“post” action=“user.jsp>……</form>
3.位于表单中的输入标签
位于<form>之中，接收用户输入
格式：<input type=“” name=“”>
type:
text radio checkbox password hidden select submit reset button textarea image
name:
提交到服务器端的变量的名字
<input type=text name="username" size="30" maxlength="10">
文本框 text
<input type=“text” name=“” value=“” maxlength=“” size=“”>
maxlength – 最大字符长度
size – 文本框宽度（字符）
密码区域—特殊的单行文本输入框 password
<input type=“password” name=“” value=“” size=“” maxlength=“”>
单选按钮
<input type=“radio” name=“” value="" checked>
典型用法 : 同一名字，不同的值
错误的用法 : 不同的名字
复选框
<input type=“checkbox” name=“” value=“” checked>
典型的用法 : 同一name，不同的value
隐藏域
<input type=“hidden” name=“” value=“”>
不显示在网页中
通常用作向下一个页面传输已知信息或表单的附加信息
select
列表框
<select name=“” size=“” multiple>
<option value=“” selected>…</option>
<option value=“”>…</option>
……
</select>
Multiple 表示多重列表框，可以多选
Selected 被选中
多行多列文本框
<textarea rows=“” cols=“” wrap=“”>…</textarea>
Rows: 行数
Cols: 列数
Wrap:
Off : 不换行
Soft: 自动换行，并且如果行末有英文单词，会将整个单词移到下一行
Hard: 自动换行，但会截断行末的单词
button
<input type=button name=“” value=“”>
按下该按钮没有反映
<input type=submit name=“” value=“”>
按下该按钮，该form中所有的输入信息将被提交到服务器
<input type=reset name=“” value=“”>
按下该按钮，该form中所有的输入部分将被重置
<input type=“image” src=“”>
点击图片提交
六、框架
<frameset rows=“row1,row2…” cols=“col1,col2…”>
<frame name=“” src=“” noresize>
<frame name=“” src=“” scrolling=“”>
……
</frameset>
嵌套
<frameset cols=“20%,*”>
<frame name=“left” src=“a.htm”>
<frameset rows=“40%,*”>
<frame name=“righttop” src=“b.htm”>
<frame name=“rightbottom” src=“c.htm”>
</frameset>
</frameset>
PS:注意不要有body
七、链接、表单与框架
<a href=“” target=“”>…</a>
<form action=“” target=“”>…</form>
Target:
Frame name
_blank 新窗口
_self 本窗口
_parent 父窗口（本窗口的上一级窗口）
_top 浏览器窗口