HTML基础
1、什么是html?
hypertext markup language(超文本标记语言)。
是一种用来设计网页的标记语言，以这样标记语言编写的文件
必须以.html或者.htm为后缀。html文件会被浏览器解释执行，生成
相应的界面。
2、html文件的基本结构
<html>
<head>
<title>标题</title>
<meta http-equiv="refresh" content="1">
<meta http-equiv="content-type"
content="text/html;charset=utf-8">
<!-- 注释的内容 -->
<!--引入一个样式文件-->
<link rel="stylesheet" type="text/css" href="style.css">
<!--引入脚本-->
<script src="myjs.js">
</script>
</head>
<body>
<!--链接-->
<a href="地址">链接的描述</a>
<!--表格-->
<table>
<!--表单-->
<form>
<!--列表-->
<ul>,<ol>
<!--框架-->
<frameset>,<iframe>
</body>
</html>
注意:
<meta>标记不要这样写:
<meta></meta>
<meta/>
<meta>标记经常用来生成一些模拟的消息头。
比如：
refresh: 刷新, 浏览器会在指定的时间间隔刷页面。
content-type: 告诉浏览器返回的数据类型及编码。
3、html的版本
html发布了第一个版本 90年
4.0 97年
5.0 08年
4、主要的浏览器
ie 微软
firefox mozila
chrome google
opera 挪威
safari 苹果
5、重要的标记
1)链接
a,基本使用
<a href="链接所指向的地址" target="打开的窗口"
title="提示信息">链接的描述</a>
target属性值:
_self:缺省值，在当前窗口打开。
_blank: 在新的窗口中打开。
b,使用图片作为链接
<a href=""><img src="save.jpg"/></a>
c,发送邮件
<a href="mailto:eric@126.com?subject='hello'">给我发邮件</a>
d,锚点
在同个页面内部进行跳转
step1 定义一个锚点
<a name="top">小龙女是一个....</a>
step2 跳转到锚点
<a href="#top">小龙女</a>
e, 使用图片区域作为链接(热点)
step1 先定义热点
<map name="Map">
<area shape="rect" coords="407,20,560,77" href="qy.html">
<area shape="rect" coords="580,22,734,76" href="gr.html">
</map>
step2 使用热点
<img src="index04.jpg"
width="772" height="357" border="0" usemap="#Map">
f,链接的伪样式(css时会讲)
2)表格
a,表格的基本使用
<table border="" width="" cellpadding="" cellspacing="">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
border属性：表格的边框的宽度。
width属性： 表格的宽度，百分比或者绝对值。
cellpadding属性：单元格的内容与单元格之间的空隙。
cellspacing属性：单元格与单元格之间的空隙。
b,表格的对齐
align属性：水平对齐。left(缺省)/right/center
valgin属性：垂直对齐。top/bottom/middle
c,不规则表格
colspan属性：合并水平方向的单元格。
rowspan属性: 合并垂直方向的单元格。
d,表格可以嵌套
单元格的内容又是一个表格。
e,表格的完整的定义
<table>
<caption>主题</caption>
<thead>表头</thead>
<tfoot>表脚</tfoot>
<tbody>表体</tbody>
</table>
<caption>: 可以出现0次或者1次。
<thead>,<tfoot>:可以出现0次或者1次,习惯上<tfoot>写在
<thead>之后。
<tbody>:可以出现1次或者多次。
3)表单
<form action="服务器端的一个程序的地址"
method="提交方式(get/post)">
<!--input标记-->
<!--非input标记-->
</form>
a,input标记
文本输入框： <input type="text" name="username" value="缺省值"/>
提交按钮: <input type="submit" value="确认"/>
密码输入框:<input type="password" name="pwd"/>
单选:<input type="radio" name="gender" value="m"/>
多选:<input type="checkbox" name="interest" value="fishing"/>
重置按钮:<input type="reset" value="重置"/>
普通按钮:<input type="button" value="点我吧"/>
上传文件:<input type="file" name="file1"/>
隐藏域:<input type="hidden" name="userId" value="123"/>
b,非input标记
下拉列表:
<select name="city" multiple="multiple">
<option value="bj">北京</option>
<option value="wh">武汉</option>
<option value="nj">南京</option>
</select>
多行文本输入框：
<textarea name="desc" cols="5" rows="20"></textarea>
4)列表
a,无序列表
<ul>
<li>item1</li>
<li>item2</li>
</ul>
b,有序列表
<ol>
<li>item1</li>
<li>item2</li>
</ol>
c,列表可以嵌套
<ul>
<li>item1</li>
<ul>
<li>item1_1</li>
<li>item1_2</li>
</ul>
<li>item2</li>
</ul>
5)划分窗口的标记
a,<frameset>
作用是，将一个大的窗口划分成多个子窗口。该标记不能够
放在body里。
<frameset rows="20%,*">
<frame src="top.html"/>
<frame src="bottom.html"/>
</frameset>
<frameset rows="20%,*">
<frame src="top.html"/>
<frameset cols="30%,*">
<frame src="left.html"/>
<frame src="main.html"/>
</frameset>
</frameset>
b,<iframe>
作用是，在当前窗口当中，嵌入一个子窗口。
<iframe src="some.html" width="" height="">
</iframe>
