HTML笔记(第二部分)

<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 浏览器窗口