[原创] HTML 基础及应用 转帖 From http://guaren.blog.163.com/blog/static/53987788200861104652497/

时间：2022-10-29 00:38:59

[原创] HTML 基础及应用 


程序设计
2008-07-11 00:46:52 阅读59 评论0    字号：大中小 订阅




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>换行标记
&nbsp;空格标记


举例：
<html>
<head>
<title>段落 换行
空格</title>
</head>
<body>
<h3
align="center">段&nbsp;&nbsp;&nbsp;&nbsp;落</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>


效果：


文字1（居中，属性的引号也可省略，但不提倡）

文字2（居左）

文字3（居右）

№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. 项目1

  2. 项目2

  3. 项目3

  4. 项目4



  1. 项目1

  2. 项目2

  3. 项目3

  4. 项目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">这是图片旁边的文字


效果： [原创] HTML 基础及应用 转帖 From http://guaren.blog.163.com/blog/static/53987788200861104652497/这是图片旁边的文字


№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">杨&nbsp;&nbsp;&nbsp;逍</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">赵&nbsp;&nbsp;&nbsp;敏</td>
<td
bordercolor="#ff0000"
align="center">70</td>
</tr>
<tr>
<td
bordercolor="#ff0000">200410434</td>
<td
bordercolor="#ff0000">小&nbsp;&nbsp;&nbsp;昭</td>
<td
bordercolor="#ff0000"
align="center">66</td>
</tr>
</table>
</body>
</html>


效果：



























学号 姓名 成绩
200410430 张无忌 85
200410431 杨    逍 82
200410432 杨不悔 90
200410433 赵    敏 70
200410434 小    昭 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">杨&nbsp;&nbsp;&nbsp;逍</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">赵&nbsp;&nbsp;&nbsp;敏</td>
<td
bordercolor="#ff0000"
align="center">70</td>
</tr>
<tr>
<td
bordercolor="#ff0000">200410434</td>
<td
bordercolor="#ff0000">小&nbsp;&nbsp;&nbsp;昭</td>
<td
bordercolor="#ff0000"
align="center">66</td>
</tr>
</table>
</body>
</html>


效果：



























学号 姓名 成绩
200410430 张无忌 85
200410431 杨    逍 82
200410432 杨不悔 90
200410433 赵    敏 70
200410434 小    昭 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
[原创] HTML 基础及应用 转帖 From http://guaren.blog.163.com/blog/static/53987788200861104652497/ [原创] HTML 基础及应用 转帖 From http://guaren.blog.163.com/blog/static/53987788200861104652497/


№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">&nbsp;</td>
<td
aheight="35">&nbsp;</td>
</tr>
<tr>
<td
height="44">&nbsp;</td>
</tr>
</table>
<p>&nbsp;</p>
<table
width="100%" height="94" border="1" cellspacing="0"
cellpadding="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td
colspan="2">&nbsp;</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>


效果：


[原创] HTML 基础及应用 转帖 From http://guaren.blog.163.com/blog/static/53987788200861104652497/


№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>


效果：

[原创] HTML 基础及应用 转帖 From http://guaren.blog.163.com/blog/static/53987788200861104652497/

№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>
效果：


[原创] HTML 基础及应用 转帖 From http://guaren.blog.163.com/blog/static/53987788200861104652497/


№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>

标签：

相关文章