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 | 张无忌 | 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">杨 逍</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 | 张无忌 | 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 |
![]() |
![]() |
№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="" act
<input type="" name=""
value="">
</form>
实例:
<html>
<head>
<title>无标题文档</title>
</head>
<body>
<form
name="" act
<input type="" name="username"
value="">
<input type="submit" name="" value="提交">
<input
type="reset" name=""
value="重设">
</form>
</body>
</html>
效果:
№18-1.HTML表单中的复选框
结构:
<form name="" act
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" act
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 基础及应用 - Guaren - Guarens Blog](http://img.blog.163.com/photo/ZY6uuB56t_o-k0BhVIb5UQ==/1461136604105564002.jpg)
№18-2.HTML表单中的多行文本框
结构:
<form name="" act
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" act
<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>