HTML 基础及应用
来源：互联网 发布：sql2000导入数据库 编辑：程序博客网 时间：2024/05/16 06:15
HTML 是构造网页的通用语言，它以简单性、多样性著称。它是一种解析语言，不是编程语言。
看完了21互联的视频教程，留点笔记，以备查阅。
№1.框架
<html>
<head>
<title>这是网页的标题</title>
</head>
<body>
这是网页的主体区域
</body>
</html>
№2.标题文字
结构如下：
<hn 属性>标题文字</hn>
n是一个1-6的数字
举例：
<html>
<head>
<title>网页中的标题文字</title>
</head>
<body>
<h1 align="center">标题文字</h1>
<h2 align="center">标题文字</h2>
<h3 align="center">标题文字</h3>
<h4 align="center">标题文字</h4>
<h5 align="center">标题文字</h5>
<h6 align="center">标题文字</h6>
这是普通的网页文字
</body>
</html>
效果：
标题文字
标题文字
标题文字
标题文字
标题文字
标题文字
这是普通的网页文字
№3.段落 换行 空格
<p>段落标记
<br>换行标记
空格标记
举例：
<html>
<head>
<title>段落 换行 空格</title>
</head>
<body>
<h3 align="center">段 落</h3>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<!--还可以这样写：-->
<p>段落1
<p>段落2
<p>段落3
<h3 align="center">换行</h3>
<br>行1</br>
<br>行2</br>
<br>行3</br>
还可以这样写（注意行宽）：
<br>行1
<br>行2
<br>行3
</body>
</html>
效果：
段 落
段落1
段落2
段落3
还可以这样写
段落1
段落2
段落3
换行
行1
行2
行3
还可以这样写（注意行宽）：
行1
行2
行3
№4.标签中的属性和区域控制标签
“DIV”标签的应用
通用格式：
<标签名 属性1= "属性值" 属性2= "属性值" …… 属性N= "属性值">内容</标签名>
段落标签DIV:
<div align="">文本</div>
举例：
<html>
<head>
<title>这无标题文档</title>
</head>
<body>
<div align="center">文字1（居中，属性的引号也可省略，但不提倡）</div>
<div align="left">文字2（居左）</div>
<div align="right">文字3（居右）</div>
</body>
</html>
效果：
№5.在网页中加入水平线及其相关属性
格式：
<hr align="" size="' width="' color="" [noshade]>
noshade表示没有阴影
实例：
<html>
<head>
<title>这无标题文档</title>
</head>
<body>
<hr align="center" size="3" width="100" color="#0000CC" noshade>
<hr align="center" size="1" width="100" color="#000000" >
</body>
</html>
效果：
№6.HTML语言中的预排版标签及其应用
<pre>文字内容</pre>
实例：
<html>
<head>
<title>这无标题文档</title>
</head>
<body>
<pre>
<h3>这是标题</h3>
这是第一句 这是第二句
这是第三句 这是第四句
</pre>
</body>
</html>
效果：
这是标题
这是第一句 这是第二句
这是第三句 这是第四句
№7.文字标签"font"
<font size="" color="" face="">文字</font>
<b>文字加粗</b>
<i>文字斜体</i>
<u>文字加下划线</u>
<sup>加上标</sup>
<sub>加下标</sub>
实例：
<html>
<head>
<title>这无标题文档</title>
</head>
<body>
<div align="center">
<br><font size="10" color="#0066cc" face="方正硬笔行书繁体"><b>锄禾日当午，</b></font><br>
<font size="10" color="#fo0000" face="方正硬笔行书繁体"><i>汗滴禾下土。</i></font>
<br>
<font size="10" color="#ffff00" face="方正硬笔行书繁体"><u>谁知盘中餐，</u></font>
<br>
<font size="10" color="#ff00ff" face="方正硬笔行书繁体">粒粒皆辛苦。</font>
</div>
<br><font size="10" color="#0066cc" face="方正硬笔行书繁体"><b>13</b><sup>2</sup>=169</font><br>
<br><font size="10" color="#ff00ff" face="方正硬笔行书繁体"><b>A</b><sub>1</sub>=<b>A</b><sub>2</sub></font><br>
</body>
</html>
效果：
锄禾日当午，
汗滴禾下土。
谁知盘中餐，
粒粒皆辛苦。
132=169
A1=A2
№7.1相同标签套用的优先级问题
实例：
<html>
<head>
<title>这无标题文档</title>
</head>
<body>
<font size="10" color="#ff00ff" face="方正硬笔行书繁体">
欢迎来到
<font size="10" color="#0066cc" face="方正硬笔行书繁体">
<b>紫竹</b></font>
的网易博客</font>
</body>
</html>
效果：
欢迎来到 紫竹 的网易博客
№8.超链接标签
<A href="路径" name="热点名" target="打开方式">链接元素</a>
实例：
<html>
<head>
<title>无标题文档</title>
</head>
<body>
<A href="http://guaren.blog.163.com" target="_blank">紫竹林</a>
</body>
</html>
效果：
紫竹林
№9.链接热点（跳转）
<A href="路径#标记号">热点文本</A>
<A name="标记号">显示的热点文本</A>
实例：
<html>
<head>
<title>无标题文档</title>
</head>
<body>
<A href="#001">热点文字</a>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<A name="001">跳转到这个位置</A>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
<p>---------</p>
</body>
</html>
效果：
---------
---------
---------
---------
---------
---------
---------
---------
---------
---------
---------
---------
---------
---------
---------
---------
跳转到这个位置---------
---------
---------
---------
---------
---------
---------
---------
---------
---------
---------
---------
---------
---------
---------
---------
---------
№10.建立列表
无序列表格式：
<ul type="disc">
<li>项目</li>
</ul>
有序列表：
<ol type="1">
<li>项目</li>
</ol>
实例：
<html>
<head>
<title>无标题文档</title>
</head>
<body>
<ul type="disc">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
</ul>
<p>
<ul type="circle">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
</ul>
<p>
<ol type="A"> .
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
</ol>
<p>
<ol type="1">
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
<li>项目4</li>
</ol>
</body>
</html>
效果：
- 项目1
- 项目2
- 项目3
- 项目4
- 项目1
- 项目2
- 项目3
- 项目4
- .
- 项目1
- 项目2
- 项目3
- 项目4
- 项目1
- 项目2
- 项目3
- 项目4
№11.插入图片
<img src="图片路径" alt="悬停说明" width="宽度" height="高度" border="边框宽度" hspace="水平方向空白" vspace="垂直方向空白" align="对齐方式">
实例：
<img src="http://img.blog.163.com/photo/eqKji95ezDlD_CWfSJYZzg==/1138847755772120575.jpg" alt="紫竹" width="450" height="300" border="0" hspace="10" vspace="10" align="center">这是图片旁边的文字
效果： 
这是图片旁边的文字
№12.网页中的表格
结构：
<table height="" width="" cellspacing="" cellpadding="" border="" align=""><tr><td></td></tr></table>
实例：
<html>
<head>
<title>无标题文档</title>
</head>
<body>
<table height="100" width="500" cellspacing="5" cellpadding="2" border="1" align="center" bordercolor="#0033CC">
<tr>
<td bordercolor="#ff0000">单元格中的元素1</td>
<td bordercolor="#ff0000">单元格中的元素2</td>
<td bordercolor="#ff0000">单元格中的元素3</td>
<td bordercolor="#ff0000">单元格中的元素4</td>
</tr>
<tr>
<td bordercolor="#ff0000">单元格中的元素1</td>
<td bordercolor="#ff0000">单元格中的元素2</td>
<td bordercolor="#ff0000">单元格中的元素3</td>
<td bordercolor="#ff0000">单元格中的元素4</td>
</tr>
</table>
</body>
</html>
效果：
单元格中的元素1单元格中的元素2单元格中的元素3单元格中的元素4单元格中的元素1单元格中的元素2单元格中的元素3单元格中的元素4№13.制作学生成绩表
<html>
<head>
<title>无标题文档</title>
</head>
<body>
<table height="100" cellspacing="1" cellpadding="2" border="1" align="center" bordercolor="#0033CC">
<tr>
<td bordercolor="#ff0000" width="100" align="center"><font size="3" color="#ff00ff"><b>学号</b></font></td>
<td bordercolor="#ff0000" width="100" align="center"><font size="3" color="#ff00ff"><b>姓名</b></font></td>
<td bordercolor="#ff0000" width="60" align="center"><font size="3" color="#ff00ff"><b>成绩</b></font></td>
</tr>
<tr>
<td bordercolor="#ff0000">200410430</td>
<td bordercolor="#ff0000">张无忌</td>
<td bordercolor="#ff0000" align="center">85</td>
</tr>
<tr>
<td bordercolor="#ff0000">200410431</td>
<td bordercolor="#ff0000">杨 逍</td>
<td bordercolor="#ff0000" align="center">82</td>
</tr>
<tr>
<td bordercolor="#ff0000">200410432</td>
<td bordercolor="#ff0000">杨不悔</td>
<td bordercolor="#ff0000" align="center">90</td>
</tr>
<tr>
<td bordercolor="#ff0000">200410433</td>
<td bordercolor="#ff0000">赵 敏</td>
<td bordercolor="#ff0000" align="center">70</td>
</tr>
<tr>
<td bordercolor="#ff0000">200410434</td>
<td bordercolor="#ff0000">小 昭</td>
<td bordercolor="#ff0000" align="center">66</td>
</tr>
</table>
</body>
</html>
效果：
学号姓名成绩200410430张无忌85200410431杨 逍82200410432杨不悔90200410433赵 敏70200410434小 昭66№14.细线表格
<html>
<head>
<title>无标题文档</title>
</head>
<body>
<table height="" cellspacing="0" cellpadding="0" border="1" align="center" bordercolor="#ff0000">
<tr>
<td bordercolor="#ff0000" width="100" align="center"><font size="3" color="#ff00ff"><b>学号</b></font></td>
<td bordercolor="#ff0000" width="100" align="center"><font size="3" color="#ff00ff"><b>姓名</b></font></td>
<td bordercolor="#ff0000" width="60" align="center"><font size="3" color="#ff00ff"><b>成绩</b></font></td>
</tr>
<tr>
<td bordercolor="#ff0000">200410430</td>
<td bordercolor="#ff0000">张无忌</td>
<td bordercolor="#ff0000" align="center">85</td>
</tr>
<tr>
<td bordercolor="#ff0000">200410431</td>
<td bordercolor="#ff0000">杨 逍</td>
<td bordercolor="#ff0000" align="center">82</td>
</tr>
<tr>
<td bordercolor="#ff0000">200410432</td>
<td bordercolor="#ff0000">杨不悔</td>
<td bordercolor="#ff0000" align="center">90</td>
</tr>
<tr>
<td bordercolor="#ff0000">200410433</td>
<td bordercolor="#ff0000">赵 敏</td>
<td bordercolor="#ff0000" align="center">70</td>
</tr>
<tr>
<td bordercolor="#ff0000">200410434</td>
<td bordercolor="#ff0000">小 昭</td>
<td bordercolor="#ff0000" align="center">66</td>
</tr>
</table>
</body>
</html>
效果：
学号姓名成绩200410430张无忌85200410431杨 逍82200410432杨不悔90200410433赵 敏70200410434小 昭66№15.表格中元素的位置
<html>
<head>
<title>无标题文档</title>
</head>
<body>
<table height="400" width="600" border="1">
<tr>
<td align="left" valign="bottom">元素1</td>
<td align="right" valign="top">元素2</td>
</tr>
<tr>
<td align="center" width="380" height="350">
<a href="http://guaren.blog.163.com" target="_blank"><img src="http://img.blog.163.com/photo/eqKji95ezDlD_CWfSJYZzg==/1138847755772120575.jpg" width="140" height="140"></img></a>
</td>
<td align="center" valign="bottom">
<img src="http://img.blog.163.com/photo/eqKji95ezDlD_CWfSJYZzg==/1138847755772120575.jpg" width="140" height="140"></img>
</td>
</tr>
</table>
</body>
</html>
效果：
元素1元素2 №16.设置表格的宽度和高度（可以按照像素值和百分比来设定）
№17.跨行与跨列表格
<p>colspan跨多列标记
<p>rowspan跨多行标记
实例:
<html>
<head>
<title>无标题文档</title>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td height="63" rowspan="2"> </td>
<td aheight="35"> </td>
</tr>
<tr>
<td height="44"> </td>
</tr>
</table>
<p> </p>
<table width="100%" height="94" border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
</body>
</html>
效果：
№18.HTML表单
☆PS：本部分代码被网易过滤，无法显示执行的效果，所以采用截图方式。
结构：
<form name="" action="" method="">
<input type="" name="" value="">
</form>
实例：
<html>
<head>
<title>无标题文档</title>
</head>
<body>
<form name="" action="" method="">
<input type="" name="username" value="">
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重设">
</form>
</body>
</html>
效果：
№18-1.HTML表单中的复选框
结构：
<form name="" action="" method="">
<input type="checkbox" name="" value="">
</form>
实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<form name="form1" action="get" method="form.asp">
爱好：<P>
<input type="checkbox" name="01" value="足球">足球
<input type="checkbox" name="02" value="篮球">篮球
<input type="checkbox" name="03" value="网球">网球
<input type="checkbox" name="02" value="武术">武术
<input type="checkbox" name="03" value="其它">其它
<input type="submit" name="" value="提交">
</form>
</body>
</html>
效果：
№18-2.HTML表单中的多行文本框
结构：
<form name="" action="" method="">
<textarea name="" cols="" rows=""></textarea>
</form>
实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<form name="form1" action="post" method="form.asp">
<textarea name="01" cols="50" rows="10">请填写您的信息</textarea>
<input type="submit" value="提交">
</form>
</body>
</html>
效果：
№19.HTML文件中头文件信息及其在搜索引擎中的应用
19-1.HTML文件中meta属性
meta的属性有两种：name和http-equiv。
name属性主要用于描述网页，以便于搜索引擎机器人查找、分类。
这其中最重要的是description（站点在搜索引擎上的描述）和keywords（分类关键词）。
http-equiv属性主要是针对网页本身一些设置。
实例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<!--http-equiv属性-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><!--设置页面语言-->
<meta http-equiv="Refresh" content="n;url=#"><!--设置刷新网页的时间n秒-->
<meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00 GMT"><!--设置页面过期时间-->
<meta http-equiv="Pragma" content="no-cache"><!--设置页面不从缓存读取-->
<title>网易</title>
<base target="_blank" />
<!--name属性-->
<meta name="Keywords" content="网易,新闻，体育，娱乐，女性，旅游，文化，论坛，短信，数码，汽车，手机，财经，科技" /><!--向搜索引擎说明你网页的关键词-->
<meta name="Description" content="网易,新闻，体育，娱乐，女性，旅游，文化，论坛，短信，数码，汽车，手机，财经，科技,专业报道门户网站" /><!--告诉搜索引擎你的站点的主要内容-->
<meta name="robots" content="index, follow" /><!--此处content参数有多种。设为all时文件将被检索，且页面上的链接可以被查询；设为none时文件将不被检索，且页面上的链接不可以被查询；设为index时文件将被检索；设为follow时页面上的链接可以被查询；设为noindex时文件将不被检索，但页面上的链接可以被查询；设为nofollow时文件将不被检索，但页面上的链接可以被查询-->
<meta name="googlebot" content="index, follow" />
</head>
- html 基础及应用
- HTML 基础及应用
- HTML基础标签应用
- HTML及CSS基础
- 多媒体技术基础及应用
- DMZ基础及应用
- 运筹学基础及应用
- 数据库基础及应用
- 多媒体技术基础及应用
- 数组基础及应用
- html 基础及小问题
- HTML基础及常用标签
- Log4j基础应用及扩展
- JBoss入门及基础应用
- Google电子地图基础及应用
- Linux基础及应用教程
- 音频基础及测试应用
- 数字集成电路基础入门及应用
- 奇怪的BETWEEN
- 财富杂志公布全球500强 35中国公司上榜
- asp.net常见错误
- delphi 内存清理的好方法
- 树立竞争观念及培养竞争观念的方法
- HTML 基础及应用
- 改造DNS服务器-Windows系统泛域名解析设置
- 对天乙社区bbscs8实现的详细分析十二
- 对天乙社区bbscs8实现的详细分析十三
- Linear Pachinko
- MS XML 文档创建
- 很酷的视频：在Eclipse里面实时结对编程
- 对天乙社区bbscs8实现的详细分析十四
- 二个星期以来的心烦
