Html入门基础

suesunny

浏览: 6099 次

最近访客更多访客>>

wj_zcy_hfh

chris6668chris

NTdiary

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Html

html(hypertext markup language:超文本标记语言）:

是一种用来设计网页的标记语言,以.html或者.htm为后缀的文件,幵且由浏览器解释执行,生成相应的界面。

1 html文件的基本结构

<!--根标记叫html -->
<html>
	<head>
		<!--head描述页面的数据-->
		<title>标题</title>
		<!--http-equiv属性  :设置消息头 content属性：设置消息头的值。-->
		<meta http-equiv="content-type" content="text/html ; charset=utf-8">
		<!--refresh :刷新,content :刷新的频率每间隔一段时间重新加载页面-->
		<meta http-equiv="refresh" content="3">
		<!--引入css样式文件-->
		<link rel="stylesheet" type="text/css" href="style.css">
		<!--引入js脚本-->
		<script type="text/javascript" src="../demo.js"></script>
		<!--自定义页面样式-->
		<style type="text/css">
		</style>			
		<script type="text/javascript">
		</script>
	</head>
	<body>
		<!--body存放页面显示的内容-->
	</body>
</html>

2 html重要的标记

2.1 链接

<a href= "#" target="# " title="#" >链接</a>
<!--
	href属性:指定链接的地址
	target属性:指定在哪个窗口打开链接，值可以指定为：
		_slef:在当前窗口中打开（缺省）
		_blank:新窗口中打开
		title:提示信息
-->

2.1.1 使用图片作为链接

<a href="">
	<img src="#" width="" height="#" border="0"/>
</a>
<!--
	src:对于img标签,src指定图片的地址
	wdith:宽度
	height:高度
	border:边框(0表示没有边框）
-->

2.1.2 锚点(实现在同一个页面内部跳转)

        <a name="top">首页</a>
	<a href="#top">跳转到首页</a>

2.1.3 热点(将图片的某区域作为链接)

step1：先使用 map 标记划分图片区域
		<map name="Map">
			<area shape="rect" coords="407,20,560,77" href="a.html">
			<area shape="rect" coords="580,22,734,76" href="b.html">
		</map>
	<!--
		shape="rect"表示矩形
		coords="407,20,560,77"表示矩形在图片的相对位置
		407: 表示矩形左上角距离图片左上角的横坐标
		20: 表示矩形左上角距离图片左上角的纵坐标
		560: 表示矩形右下角距离图片左上角的横坐标
		77: 表示矩形右下角距离图片左上角的纵坐标
	-->
step2：使用 map
		<img src="index04.jpg" width="772" height="357" border="0" usemap="#Map">
	<!--
		usemap="#Map"表示使用名字为"Map"的图片
	-->

2.2 规则表格

<table border="" width="" cellpadding="" cellspacing="">
	<tr align="">
		<td align=""></td>
		<td></td>
	</tr>
</table>
<!--
	border:边框的宽度，单位是像素（缺省值是 0）
	idth:表格的宽度,可以用百比分(表示该表格占父标记的宽度)，也可以是绝对值
	cellpadding:单元格内容不单元格乊间的空隙
	cellspacing:单元格不单元格乊间的空隙
	align:水平对齐，值有"center","right","left"		
-->

2.2.1 不规则表格
    1) colspan：跨列合幵单元格
    2) rowspan：跨行合幵单元格
    3) valign：垂直对齐，值有"top"、"middle"、"bottom"

<table  border="1" width="60%" cellpadding="0" cellspacing="0">
	<tr>
		<td>1</td>
		<td colspan="2">2</td>
	</tr>
	<tr>
		<td rowspan="2" align="center" valign="top">4</td>
		<td>5</td>
		<td>6</td>
	</tr>
	<tr>
		<td>8</td>
		<td>9</td>
	</tr>
</table>

2.2.2 表格的完整的结构

<table>
	<caption>表格的标题</caption>
	<thead></thead>
	<tfoot></tfoot>
	<tbody></tbody>
</table>
<!--
	thead、tfoot：这两个标记可以不出现，如果出现，只能出现一次
	tbody：可以出现多次，至少也要出现一次
	caption：只能出现一次或者不出现
-->

<table  border="1" width="40%" cellpadding="0" cellspacing="0">
	<caption>员工信息</caption>
	<thead> 
		<tr>
			<td>员工姓名</td>
			<td>工资</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>sdd</td>
			<td>20000</td>
		</tr>
		<tr>
			<td>zbs</td>
			<td>80000</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<td>lg</td>
			<td>20000</td>
		</tr>
		<tr>
			<td>csb</td>
			<td>80000</td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td>工资合计</td>
			<td>200000</td>
		</tr>
	</tfoot>
</table>

注：表格可以嵌套。

2.3 表单

<form action="" method="" enctype="">
</form>
<!--
	action:属性:表单提交后由哪一个程序来处理
	method:属性:表单提交方式
	enctype:属性:设置表单的MIME编码 
-->

2.3.1 表单标记
1) 文本输入框

<input type="text" name="" value=""/>
<!--
	type 属性：input标记的具体类型，type内容可以不写，默认是文本框
	name 属性：标记的名称，用于生成请求参数，如果没有命名，则浏览器不会该数据发送给服务器 
	value 属性：缺省值
-->

2) 密码输入框

<input type="password" name="" />

3) 单选

<input type="radio" name="" value="" checked="checked" />
<!--
	单选按钮应是互斥的，只能选择其中一个
	同一组单选按钮，name 必须相同
	value 属性：发送给服务器端的值
	checked 属性：就一个值"checked",表示缺省被选上
-->

4) 多选

<input type="checkbox" name="" value="" checked="" />

5) 文件上传

<input type="file" name=""/>

注: 此时form需要设置属性enctype='multipart/form-data';

6) 提交按钮

<input type="submit" value="Confirm" />
<!--
	value 属性：按钮上面的文字
	当点击提交按钮时，浏览器默认情况下，会将表单中的数据发送给服务器
-->

7) 重置按钮

<input type="reset" value="reset"/>
<!--
	当点击提交按钮时，浏览器会将输入的数据清空
-->

8) 隐藏域

<input type="hidden" name="" value=""/>
<!--
	不会在界面上显示出来，一般用于向服务器传送数据。
	name属性：设置参数名
	value属性：设置参数值
-->

9) 普通按钮

<input type="button" value=""/>
<!--
	value 属性：按钮上面的文字，点击该按钮，浏览器什么都不做，需要编程实现功能
-->

10）下拉列表

<select name="" multiple="">
	<option value=""></option>
</select>
<!--
	value 属性：是提交给服务器的值
	multiple 属性：就一个值"multipart"设置该属性值以后，下拉列表变成了一个多选框
-->

11）多行文本输入框

<textarea name="" cols="" rows=""></textarea>

2.4 无序列表

<ul>
	<li></li>
</ul

2.4.1 有序列表

<ol>
	<li></li>
</ol>

2.5 窗口 (frameset & frame)

<frameset rows="20%,*">
	<frame name="topFrame" src="top.html"/>
	<frameset cols="30%,*">
		<frame name="leftFrame" src="left.html"/>
		<frame name="mainFrame" src="main.html"/>
	</frameset>
</frameset>
<!--
	frameset: 标记不能够与body标记同时出现
	rows属性: 将窗口划分成几行
	cols属性: 将窗口划分成几列
	frame: 标记定义子窗口,其中,src指定加载的页面
-->

<html>
	<head></head>
	<frameset rows="20%,*">
		<frame name="topFrame"  src="top.html"/>
		<frameset cols="30%,*">
			<frame  name="leftFrame" src="left.html"/>
			<frame  name="mainFrame" src="main.html"/>
		</frameset>
	</frameset>
</html>

2.6 Iframe 在当前窗口当中嵌入一个子窗口

<iframe src="" width="" height=""></iframe>
<!--
	src属性：指定加载的页面
	iframe：标记可以用在body标记里
-->

<html>
	<head></head>
	<body style="font-size :30px ;font-style :italic;">
		hi，this is a iframe demo.<br/>
		<iframe src="html01.html" width="300" height="300"></iframe>
	</body>
</html>

分享到：