HTML一些基础使用规范

语义化

1. 代码简介，意思明确

2. 维护性强，维护成本低

3. W3C的标准基本都是往语义化靠近

   本质上都是div
   当前页面的头部区域 一般存放logo 
   <header></header>
   <!-- 导航，链接区 -->
   <nav></nav>
   <!-- 侧边栏-->
   <aside></aside>
   <!-- 页面主体部分-->
   <article></article>
   <!-- 页面的底部-->
   <footer></footer>
   

列表

	列表
	无序列表
		1.ul可以省略  
		2.li是块状元素
		3.默认前面是实心小圆圈
		4.type指定当前的符号，在UL和LI里面都可以指定-->
	<ul  type="circle">
		<li>苹果</li>
		<li>橘子</li>
		<li>香蕉</li>
	</ul>
	有序列表
		1.ol也可以省略，li必须要加type是序号的属性 
		2.同上
	<ol type="i">
		<li >苹果</li>
		<li >橘子</li>
		<li >香蕉</li>
	</ol>
	
    定义列表
		1.dl也可以省略
		2.dt和dd是成对出现的
		3.dt和dd内容是用户自定义
		4.dt，dd块状元素
	<dl>
		<dt>所属学院</dt>	
		<dd>计算机学院</dd>
		<dt>所属专业</dt>
		<dd>软件工程</dd>
		<dt>所属班级</dt>
		<dd>计20</dd>
	</dl>

域

<form>
	<!-- 区域标签 -->
	<fieldset>
		<!-- 区域标题 -->
		<legend>用户信息</legend>
		<!-- 区域主体 -->
		<p>
			<!-- span行内元素 -->
			<!-- 鼠标点击选择表单元素 -->
			<label for="username">姓名:</label>
			<input type="text" name="name" id="username"/></p>
		<p>密码:<input type="password" name="password"/></p>
		<p>地址:<input type="text" name="name"/></p>
	</fieldset>
	
	<fieldset>
		<!-- 区域标题 -->
		<legend>教育信息</legend>
		<!-- 区域主体 -->
		<p>小学:<input type="text" name="na<strong></strong>me"/></p>
		<p>初中:<input type="password" name="password"/></p>
		<p>高中:<input type="text" name="name"/></p>
	</fieldset>			
</form>

框架

	<!-- 
	老式框架 不使用
	<frameset>
		<frame />
		<frame />
		<frame />
	</frameset> 
	-->
	<!-- 
		1.可以放置不同的网页 
		2.指定框架中的页面使用src属性
		3.指定name属性,以便于a标签可以打开指定name属性的框架位置
		4.高度和宽度 width height
		5.设置滚动条 scrolling 设置框架的边框 frameborder
	-->
	<iframe src="" name="right" width="100%"  height="100%" scrolling="no" frameborder="0"></iframe>

表格

	1.容器 table ,不允许省略,需要指定边框
	2.表格的行使用tr
	3.表格的单元格td(隐藏了列的概念)
	4.如果每行中的单元格不一样，以最大数量的单元格来定义表格
	 5.行决定了单元格的高度，列决定了单元格的宽度
	 6.列和并 留下第一个单元格，去掉后面所有，在格子中写属性colspan指定几个格子合并
	 7.行合并 留下第一行的第一个单元格 ，去掉后面其他行的单元格，
	 在格子中加rowspan指定几个格子合并的数量
	 8.不能拐弯合并-->
	
	表格的样式
	(子类重写父类)
		1.表格的高度和宽度,要决定表格的高度和宽度可以通过定义每一行的高度
	以及第一行的每一个单元格的宽度来决定 
		2.表格的背景颜色 bgcolor 
			a.使用英文标记颜色
			b.使用rgb表示颜色 rgb(,,)
			c.使用16进制表示颜色 #FF0000
		3.表格的背景图片	background 表格和单元格才能有背景图片
    	4.表格的边框大小 border 边框颜色 bordercolor
	    5.对齐属性 左右对齐<strong> align(left center right) 上下对齐 valign (top middle bottom)
		6.表格的间距 单元格间距cellspacing 内容的间距 cellpadding对table设置
	
	<table border="10" bordercolor="red" cellspacing="5" cellpadding="5">
		<tr height="50px" >
			<td colspan="2" width="200px"  align="right" valign="bottom">
				苹果
			 </td>
			<td width="100px">橘子</td>
		</<strong></strong>tr>
		<tr height="50px">
			<td rowspan="2">篮球</td>
			<td>足球</td>
			<td>羽毛球</td>
		</tr>
		<tr height="50px" >
			<td colspan="2">洗衣机,电冰箱洗衣机洗衣机,电冰箱洗衣机</td>
		</tr>
	</table>

表单

	表单容器 
		1.一般表单元素要写在form中
		2.表单元素要加name属性，name属性主要是用于收集数据的
		3.action代表表单提交的位置
		4.method代表表单提交的方式 get,post(会隐藏表单提交的数据)
		5.target代表表单提交之后的页面打开的位置

	表单元素共有特性
		1.只读 readonly只能设置文本输入的表单元素 只读最后数据会提交
		2.禁用 disabled不允许输入表单元素而且不提交数据，所有的表单元素都可以设置

	 
	<form action="html2.html" method="get" target="">
		<!-- 文本框 -->
		<!-- 
			1.input type指定text 如果不指定默认也是text
			2.maxlength代表最多可以填的字符数量
			3.size代表文本框的长度
			4.value指定文本框的默认值
			5.默认提示信息placeholder （html5 新增）
		-->
		<p><input  type="text" name="user" maxlength="10" size="15"  
		placeholder="---请输入用户名---" value="小王" disabled="disabled<strong></strong>"/> </p>
		
		<!-- 密码框 -->
		<!-- 
			1.input type指定password
			2.密码框同text
		 -->
		<p><input type="password" placeholder="---请输入密码---" name="password"/></p>
	
		<!-- 单选框 -->
		<!-- 
			1.input type指定radio
			2.单选按钮选项一般要2个以上
			3.单选按钮必须要让选项设置同一个name属性(重点)
			4.单选按钮通过checked属性指定默认值
			5.value用于表单提交的数据
		 -->
		 <p><input type="radio" name="sex" value="男" checked="checked" disabled="disabled"/>男
		 <input type="radio" value="女" name="sex"/>女</p>
		 <p><input type="radio" value="已婚" name="marry"/>已婚
		 <input type="radio" name="marry" value="未婚" checked="checked"/>未婚</p>
		 
		 <!-- 多选框-->
		 <!-- 
			1.input type指定checkbox
			2.选项一般也是多个，有可能是单个
			3.多选按钮要通过name设置一组多选
			4.默认选中使用checked属性
			5.value用于表单提交的数据
		 -->
		 <p>
			<input type="checkbox" name="hoby"/> 篮球
			<input type="checkbox" name="hoby" checked="checked"/> 足球
			<input type="checkbox" name="hoby"/> 唱歌
		</p>
		<p>
			<input type="checkbox" name="likeeat"/> 水果
			<input type="checkbox" name="likeeat"/> 零食
			<input type="checkbox" name="likeeat" checked="checked"/> 米饭
		 </p>
		 
		 <!-- 按钮 -->
		 <!-- 
			1.按钮分为三种 input  普通按钮button 提交按钮submit 重置按钮reset
				image图片按钮
			2.value指定的是按钮的文字提示信息
		 -->
		 <p>
			<input type="button" value="请点我"/> 
			<!-- 用于收集表单数据提交 -->
			<input type="submit" value="提交"/> 
			<!-- 用于重置表单数据到默认值，不是清空 -->
			<input type="reset" value="重置">
			<!-- 图片按钮具有表单提交功能 -->
			<input type="image" src="image/tv01.jpg">
		 </p>
		 
		 <!-- email-->
		 <p>
			 <input type="email" />
		 </p>
		 <!-- URL-->
		 <p>
			 <input type="url" />
		 </p>
		 <!-- 文件选择框 -->
		 <!-- 
			1.input type是file
		 -->
		 <p>
		 <input type="file" name="file"/>
		 </p>
		 
		 <!-- 下拉框 -->
		 <!-- 
			1.select代表下拉框，一般配合选项标签option
			2.选中默认值selected属性
			3.下拉框的值使用的是option的value属性，如果没有设置value会使用标签中的内容(重点)
			4.size代表下拉框的高度，默认0
		 -->
		 <p><select name="flu" size="0" readonly="readonly"> 
			 <option value="1">苹果</option>
			 <option selected="selected" value="2">橘子</option>
			 <option value="3">香蕉</option>
		 </select>
		 </p>
		 
		 <!-- 文本区域 -->
		 <!-- 
			1.textarea文本区域
			2.cols指定列 rows指定行
			3.文本区的值是标签中的内容
			4.maxlength指定文本区中放置的字符数量
		 -->
		 <p>
		 <textarea name="content" cols="100" rows="8" value="xx" maxlength="10">测试</textarea>
		 </p>		 
	</form>