JAVA Web 04 HTML

HTML

排版标签

<!-- 水平线标签 -->
		<hr align="center" width="300" color="blue" size="4"/>

文字标签

<!-- size 字体大小1-7 face字体 -->
		<font size="5" color="blue" face="arial black">文字标签</font>

格式化标签

		<h2>文本标签</h2>
		<b>加粗</b>
		<strong>加粗</strong>
		<em>斜体</em>
		<sub>上标标签</sub>
		<sup>下标标签</sup>
		<del>删除线</del>

列表

<!-- 无序列表 -->
		<!-- ul type属性 circle 空心圆 disc 实心圆（默认） square方块 -->
		<ul type="square">
			<li></li>
		</ul>
		<!-- 有序列表 -->
		<!-- type 属性  数字,大小写字母，罗马数字等-->
		<ol type="i">
			<li></li>
		</ol>

图片标签

<!-- src 地址 width宽度 heigh高度 
		alt图片不显示时显示内容 align 对其方式 
		title 鼠标悬停文字-->
		<img src="img/kekeluo.jpg" width="400" height="800" 
		title="一只kkl" align="middle" alt="chichi">

链接标签

<!-- 链接标签-->
		<!-- target属性
			_blank在新窗口中打来
			_self 自身窗口打开 默认
			parent 在父窗口中打开
			_top在顶级窗口打开		 
		 -->		
		<a href="first.html" target="_blank">  aa</a>

实现一个锚链接
跳向本页面或者其他页面的指定位置

<!-- 锚链接：指向页面中的指定位置 -->
		name做标记
		<a name="top">top </a>
		<a href="#top">end</a>
		<!-- 跳向其他页面中的指定位置-->
		<a href="first.html#middle"></a>

表格标签

<!-- table 定义一个表格 tr 定义一个行 
		td定义列 th定义列标题加粗居中显示 -->
		<!-- 属性
		table
		 weigh 宽 heigth 高度
		 align:整个表格的位置
		 bgcolor: 背景颜色 每个都有
		 -->
		<table border="1" cellspacing="" cellpadding="">
			<!-- tr属性 -->
			<!-- alignv内容水平对齐方式 -->
			<!-- valign 垂直对其方式 -->
			<tr>
				<th>姓名</th>
				<th>年龄</th>
			</tr>
			<tr>
				<td>chichi</td>
				<td>18</td>
			</tr>
			<tr>
				<td>chichi</td>
				<td>18</td>
			</tr>
		</table>

列合并colspan，行合并rowspan
多列成一列，多行成一行
所占住的块，不能再有其他tr

			<tr><th colspan="3">课程表</th></tr>
			<tr>
				<td rowspan="3">周一</td>
				<td>数学</td>
				<td>数学</td>
			</tr>
			<tr>
				<td >数学</td>
				<td >数学</td>
			</tr>
			<tr>
				<td >数学</td>
				<td >数学</td>
			</tr>
			<tr>

表单form

想要提交给服务器的都要加上name属性
get方式进行 表单提交时 action中不能附加参数

type值


输入型不需要设置value属性（value是设置默认值的），单复选框的value的属性为要提交的数据，按钮的value为描述信息；
按钮无name属性，不需要发给服务器
hidden隐藏不显示，但数据能发个服务器，不让用户看到

单复选
单选复选默认选中checked 单选复选框name要相同，才会被判断为一组

<!-- 单选 name属性要相同，否则会变成多选-->
					<td><input type="radio" name="dx"  value="男" />男</td>
					<td><input type="radio" name="dx"  value="女" checked="checked" />女</td>
					<td><input type="checkbox" name="hobby" value="唱">唱
					<input type="checkbox" name="hobby" value="跳">跳
					<input type="checkbox" name="hobby" value="rapper" checked="checked">rapper</td>

文件提交
提交图片或文件时 enctype:multipart/form-data``

<!-- 文件提交时 要先设置表达enctype为文件提交模式 -->
					<!-- image 提交的是固定的图片，并不是选择的 -->
					<td>提交照片<input type="file" name="photo"/></td>

时间
时间日期 采用datetime-local ，不用datetime
日期date 时间time

						<input type="datetime-local" name="" id="" value="" />

range

					<td>分数<input type="range" min="1",max="10" name="level"></td>

下拉列表Select

<!-- 下拉列表 
						multiple 使用shift可多选
						-->
						<select name="city" multiple="multiple">
							<option value="上海">上海</option>
							<option value="上海" selected="selected">上海</option>
							<option value="上海">上海</option>
							<option value="上海">上海</option>
						</select>

按钮

<!-- 按钮 button-->
					<!-- input 提供按钮 -->
					<input type="reset" name="" id="" value="重置" />
					<input type="submit" name="" id="" value="提交" />
					<!-- <input type="image" src="img/kekeluo.jpg" name="photo" id="" value="" /> -->
					<button type="button">普通按钮</button>
					<button type="input">提交</button>
					<button type="reset">重置</button>

补充属性：
input: readonly 只读 不能输入，通过value设置默认值
按钮 ：disabled 按钮禁用

框架标签framset，frame

一个窗口显示多个页面
target属性的_parent,_top也有作用，按照分割会分父子frame
属性：
frameset： frameborder 框架边框 0无1有（默认有）
frame : noresize 界面不能调整大小(默认调整)

<!-- 1. 先删除body -->
	<!-- rows 上下分行 cols左右分行 -->
	<frameset rows="20%,*">
		<frame src="top.html" name="topFrame"/>
		<frameset cols="200,*">
			<frame src="menu.html" name="leftFrame">
			<frame src="bottom.html" name="rightFrame">
		</frameset>
	</frameset>

通过a标签及 target 可向指定frame中加载页面，frame要做标记（加name）
无target会加载到自身frame中

<a href="add.html" target="rightFrame"> 添加</a>
		<a href="remove.html" target="rightFrame"> 删除</a>

其他标签

&reg &trade

meta

<!-- 定义网页元信息 -->
		<!-- 编码 -->
		<meta charset="utf-8">
		<!-- 搜索关键词 -->
		<meta name="keywords" content="JAVA,PHP,MYSQL" />
		<!-- 网页描述 -->
		<meta name="description" content="JAVA,PHP,MYSQL" />
		<!-- 自动刷新，可设置时间（单位 秒）可达成多少秒后跳转到 -->
		<meta http-equiv="refresh" content="3;url=http://www.baidu.com"/>