html+ol+从+开始？html
一、html制作个人简历网页代码
以下是我用html的相关知识制作的个人简历网页，话不多说先看看最终效果：
如上所示项目一共分为5个部分，分别对应导航栏的5个内容。其中项目技能用的是echarts里的柱状图，作品展示用的是bootstrap里的轮播图，除此之外就是html的基础内容。下面我们展示一下项目的代码部分：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>我的个人简历</title>
<link rel="stylesheet" href="lib/css/color.css">
<link rel="stylesheet" href="">
<script src=""></script>
<script src=""></script>
<script src=""></script>
</head>
<body>
<div class="jumbotron text-center" style="margin-bottom:0" id="grad1">
<img src="lib/pic/1.jpg" width="80px" height="80px"/>
<h3>黄智奇</h3>
<p style="font-size: 15px;">2018年升入陕西国防工业职业技术学院，<br/>学习软件编程，对编程有浓厚的兴趣，
在老师的指导，<br/>和自己的课下练习，渐渐对编程有了更深入的了解。<br/>在课余时间，
我喜欢唱歌、跑步和打乒乓球。<br/>喜好结交志同道合的朋友，一起分享学习的生活的经验。<br/>
有良好的团队意识，学习时认真负责。</p>
</div>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--<a class="navbar-brand" href="#">专业技能</a>-->
</div>
<div id="relation">
<table class="table table-striped">
<tbody>
<tr align="center">
<td><a href="#email"><button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-envelope"></span>
</button></a></td>
<td><a href="#email"><button type="button" class="btn btn-primary btn-lg">
<span class=" glyphicon glyphicon-earphone"></span>
</button></a></td>
<td><a href="" target="_blank"><button type="button" class="btn btn-primary btn-lg">
<span class=" glyphicon glyphicon-user"></span>
</button></a></td>
</tr>
</tbody>
</table>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav nav-pills nav-justified">
<li><a href="#main">专业技能</a></li>
<li><a href="#project">项目经验</a></li>
<li><a href="#myCarousel">作品展示</a></li>
<li><a href="#education">教育经历</a></li>
<li><a href="#relation">联系方式</a></li>
</ul>
</div>
</div>
</nav>
<!--为ECharts准备一个具备大小（宽高）的Dom-->
<div id="main" style="width:
50%;height:400px;left: 25%;"></div>
<script type="text/javascript">
//基于准备好的dom，初始化echarts实例
var myChart= echarts.init(document.getElementById('main'));
//指定图表的配置项和数据
var option={
title:{
text:'专业技能平均分'
},
tooltip:{},
legend:{
data:['分数'],
},
xAxis:{
data: ["Java语言","mysql数据库","Javascript语言","web开发","ssm框架","springboot框架"],axisLabel:{
// inside: true,隐藏x轴内容
//改变x轴字体颜色
// textStyle:{
// color:'#8B4500'
//}
},
},
yAxis:{},
series: [{
name:'分数',
type:'bar',
//改变图表颜色
color:['#8EE5EE'],
data: [85, 95, 82, 90, 80, 80]
}],
};
//使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
<ul class="list-unstyled" align="center">
<li>Java基础:<br/>
我入门时首先学的就是Java基础，然后再到Java高级开发，<br/>
在学习过程中老师细致的教学为我们打下了牢固的java基础。</li>
<li>mysql数据库:<br/>
mysql数据库是我们大一第二学期开的课，配合Java高级开发一起学习的科目，<br/>
因为自己本身就喜欢数据库的一些东西，所有mysql数据库也有良好的基础。</li>
<li>Javascript语言：<br/>
在学JavaScript之前我有良好的html5和css基础，所学习JavaScript时也是十分顺利的掌握了课本里的内容。</li>
<li>web开发:<br/>
web开发是我最喜爱的科目之一，servlet的学习给我启发深刻。</li>
<li>ssm框架:<br/>
ssm框架相比springboot而言是比较繁琐的，但是在学习和理解起来却比springboot更容易让人掌握。</li>
<li>springboot框架:<br/>
springboot框架入门起来十分迅速，在基础的使用起来也是十分方便，但查看源码时，没有ssm容易让人理解。</li>
</ul>
<div class="container" align="center">
<div class="row">
<div class="col-sm-4">
<h3 class="text-info" id="project">项目名称</h3>
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#car">新能源汽车项目</a></li>
<li><a href="#city">咕泡商城项目</a></li>
<li><a href="#bug">爬虫项目</a></li>
</ul>
<hr class="hidden-sm hidden-md hidden-lg">
</div>
<div class="col-sm-8" align="left">
<h3 class="text-info">项目内容</h3>
<h2 id="car">新能源汽车</h2>
<h5>企业saas工坊</h5>
<p>新能源汽车项目是我们掌握smm框架知识后第一个实战项目，该项目由工坊老师指导下，前后端都由我们个人独立完成的项目。
该项目用到了，html5+css3，mysql数据库，spring，mybatis，springmvc框架，ajax，JavaScript，web，bootstrap，echarts，sweetalert
等技术。项目从开始到完成我们用了2个月的时间。该项目的主要是写一个汽车app社交平台，包括用户登录注册，用户上传车辆信息，统计用户车辆，分析故障车辆原因，
以及导航、朋友圈等功能一体的汽车平台。该项目用户的使用方法如下：<p>1.新用户进行登录注册。</p>
<p>2.登录成功后新用户可以进行修改密码、昵称、头像等个人信息。</p>
<p>3.新用户上传自己车辆信息，并绑定账号。</p>
<p>4.新用户可以上传自己车辆故障，系统自动查询车辆故障原因以及维修方案。</p>
<p>5.用户可以添加车友，在车友圈发布求助信息等。</p>
<p>6.用户还可以进行地图导航，以及查询公交车，出租车，飞机等交通工具的时间和行程。</p>
<p>通过完成这个项目，让我获得了很大的进步。不论是前端知识还是后端知识，在该项目上
都得到了充分的展示。让我也一下子吸收了很多的知识与技能，为后面的项目打下了坚实的基础。</p>
</p>
<br>
<h2 id="city">咕泡商城</h2>
<h5>企业saas工坊</h5>
<p>咕泡商城项目是我们学完springboot之后的实战项目，该项目由工坊老师指导下，前后端都由我们个人独立完成的项目。
该项目用到了，html5+css3,mysql数据库,springboot框架,maven,web,javascript,jquery,ajax,echarts,bootstrap等技术。
项目从开始到完成我们用了10天的时间。该项目主要是写一个网上商城电商购物平台，包括用户登录注册，用户绑定信息，上传头像、昵称等个人信息，
用户主要可以在该平台上面购买各种商品，每种商品都做好了分类管理，用户点击分类名称或者准确搜索都能显示出自己想要的商品。用户点击商品就可以
链接到商品详情页面，不论是购物还是浏览商品都非常的方便。该项目用户的使用方法：<p>1.新用户进行登录注册。</p>
<p>2.登录成功后新用户可以进行修改密码、昵称、头像等个人信息。</p>
<p> 3.用户自由购买和浏览商品信息。</p>
该项目让我们体验了springboot的配置强大之处，没有繁琐的多余配置文件，所有配置都由一个配置文件解决，简化了我们smm框架配置的痛苦。</p>
<br>
<h2 id="bug">爬虫</h2>
<h5>企业saas工坊</h5>
<p>爬虫项目是我们最近才做完的项目。该项目与以往项目不同，该项目是由工坊老师指导下，我们首次前后端分离合作的项目。一个团体3个人，分别做前端展示数据，后端爬取数据和数据清洗。
我在这个项目中做的是后端爬取数据。我用到了，httpclient，jsoup，webmagic，springboot，maven，mysql等技术。该项目主要是爬去51job网站上面的工作岗位，
我们主要爬取了与我们软件相关的工作岗位，共爬取了2万条数据处理并展示。该项目执行步骤如下：<p>1.后端爬取数据并存到数据库。</p>
<p>2.中间清洗数据，将数据改变为前端人员需要的格式。</p>
<p>3.前端人员根据需求展示数据。</p>
该项目让我们体会到了团队合作和团队分工明确的重要性，每个人做好属于自己的一份任务，环环相扣才能保质保量的完成项目。</p>
</div></div>
</div>
<div id="myCarousel" class="carousel slide" style="border: solid; border-color: cornflowerblue;">
<!--轮播（Carousel）指标-->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!--轮播（Carousel）项目-->
<div class="carousel-inner" align="center">
<div class="item active">
<img src="C:\Users\1\Desktop\gpsc.png" style="width: 80%;height: 800px; border: solid 5px; border-color: lightslategray;" alt="First slide">
</div>
<div class="item">
<img src="C:\Users\1\Desktop\pc1.png" style="width: 80%;height: 800px; border: solid 5px; border-color: lightslategray;" alt="Second slide">
</div>
<div class="item">
<img src="C:\Users\1\Desktop\xny.png" style="width: 80%;height: 800px; border: solid 5px; border-color: lightslategray;" alt="Second slide">
</div>
<div class="item">
<img src="C:\Users\1\Desktop\pc2.png" style="width: 80%;height: 800px; border: solid 5px; border-color: darkgray;" alt="Third slide">
</div>
</div>
<!--轮播（Carousel）导航-->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a></div>
<div style="width: 100%; height: 220px;">
<table class="table">
<caption style="text-align: center;"><h3 id="education" style="color: black;">教育经历</h3></caption>
<tbody style="text-align: center;">
<tr>
<td>2006.9.-2012.7</td>
<td>就读于xx小学</td>
</tr>
<tr>
<td>2012.9-2015.7</td>
<td>就读于xx初中</td>
</tr>
<tr>
<td>2015.9-2018.7</td>
<td>就读于xx高级中学</td>
</tr>
<tr>
<td>2018.9-至今</td>
<td>就读于陕西国防工业职业技术学院</td>
</tr>
</tbody></table></div>
<div class="jumbotron text-center" style="margin-bottom:0">
<p id="email" align="left">
邮箱:3136484707@qq.com
电话号码：11111111111
个人博客:;
</div>
</body></html>
二、html***标签***属性
详解HTML
标签和属性
在HTML中，通常标签都是由开始标签和结束标签组成的，开始标签用“<标签名>”表示，结束标签用“</标签名>”表示。
元素指的是包含标签在内的整体，除去标签的部分叫做内容。
属性要在开始标签中指定，用来表示该标签的性质和特性。通常都是以“属性名=”值””的形式来表示，用空格隔开后，还可以指定多个属性。指定多个属性时不用区分顺序
颜色的指定方法
用HTML指定颜色有两种方法
1、用16进制数值来指定：在#号的后面，把RGB的各个选项用十六进制的数值来表示，数值保持两位数。
2、指定颜色的名称：可以对基本的16色用名称来指定其颜色
指定文件的位置
在对某部分设置链接的时候，需要指定链接端HTML文件的位置；同样，如果想在该处显示图像也需要指定图像的位置。在HTML中，这个位置用URL来表示，有以下两种表示方法：
1、绝对URL：绝对URL就是用Web浏览器查看网页时，地址栏中显示的以http://开头的路径
2、相对URL：相对URL是在同一站点内进行设置，类似于在同一磁盘上管理文件的形式。这种方法是以当前文件的位置为基准。使用相对URL时，如果要指定的文件在当前文件的下级，就从目录名开始一直写到要指定的文件名，中间用“/”符号隔开。如果在当前文件的上级，每上一级就加一个“../”符号
2、基本内容
显示HTML的版本
<!DOCTYPE~>
HTML的版本表明HTML文件是按照哪个版本进行编写的（标明该HTML文件遵循的DTD文件），不同的版本和种类都有固定的书写格式，要按照固定的格式输入文件开头，然后在文件开头处写明版本，按照这种版本的规定格式进行编写
必须使用的标签
<html>~</html>
<head>~</head>
<title>~</title>
<body>~</body>
HTML文件的开头写有<!DOCTYPE~>的部分，代表HTML的版本，其后是必须存在的四种标签
首先，<!DOCTYPE~>后面的整个都要用html标签(<html>~</html>)括起来，其中要按照head标签(<head>~</head)和body标签的顺序(<body>~</body>)的顺序进行排列。
在head标签中填写与该文件相关的信息，body标签中填写世纪要在浏览器上显示的内容。另外，在head标签中，只能有一个代表文件标题的title标签
设置页面的文字颜色
<body text=”颜色指定”>~</body>
设置页面的背景颜色
<body bgcolor=”颜色指定”>~</body>
设置页面的背景图像
<body background=”图像的URL”>~</body>
按照目的设定范围
<div>~</div>
<span>~</span>
插入注释
<!—注释语句-->
3、设置文件信息
添加标题
<title>~</title>
title标签用来给HTML文件添加标题
这个标签一定要位于<head>~</head>圈定的范围内。在这里指定的标题除了可以在通常的浏览器窗口的标题栏中显示以外，还可以作为加入收藏夹时的标题
显示文件编码
<meta http-equiv="Content-Type" content="text/html; charset=文字编码"/>
meta标签的charset属性表示该HTML文件是用什么文字编码编写的
注意，该标签一定要位于<head>~</head>范围内
添加关键字、内容介绍及作者姓名
<meta name="keywords" content="关键字1，关键字2，…"/>
<meta name="description" content="内容介绍"/>
<meta name="author" content="作者姓名"/>
这些信息都不会在画面上显示出来，但是搜索引擎在收集信息时要用到
注意，该标签一定要位于<head>~</head>范围内
设置样式表和脚本语言的种类
<meta http-equiv="Content-Style-Type" content="样式表的种类"/>
<meta http-equiv="Content-Script-Type" content="脚本的种类"/>
在HTML文件内可以设置样式表和脚本的默认语言
注意，该标签一定要位于<head>~</head>范围内
设置进入网页
<link rel=”关系” href=”URL”>
<link rev=”关系” href=”URL”>
rel：在本页看到的，与URL标明的网页之间的关系
rev：在URL标明的网页中看到的，与本页之间的关系
link标签表示的是该文件和与其相关的其他文件之间的关系
注意，该标签一定要位于<head>~</head>范围内
设置标准URL
<base href=”绝对URL”>
<base href=”绝对URL” target=”目标名”>
base标签用来设置将该页中使用的相对URL的标准指向成绝对URL，指定了这个标签之后，在该页指定的相对URL就会全部认定为已在这里指定的绝对URL。如果不进行这项设置，就以当前页的位置为标准，如果指定了Target属性，就可以指定打开链接地址网页的默认框架和窗口
注意，该标签一定要位于<head>~</head>范围内
设置自动倒入网页功能
<meta http-equiv="refresh" content="秒数"/>
<meta http-equiv="refresh" content="秒数"；URL=要移动到的URL/>
在经过数秒后，自动开始导入网页。如果指定了要移动到的URL，就会导入URL指定的网页。如果没有指定，就会再次导入相同的页
注意，该标签一定要位于<head>~</head>范围内
4、设置文本类型
设置各级标题
<h1>~<h1>
…
设置段落
<p>~</p>
p标签表示的是该部分为一个段落
设置联系地址
<address>~</address>
address标签表示的内容是该网页制作者的联系地址和有关网页内容的咨询地址等信息
设置强调内容
<em>~</em>
<strong>~</strong>
这两个标签所圈内容表示该部分是强调的内容
设置较短的引用文字
<q>~</q>
<q cite=”引用页的URL”>~</q>
q标签代表的意思是该部分为较短的引用文，在引用段落的某一部分的时候使用，如果使用cite属性，还能够把引用页的URL显示出来
设置较长的引用文章
<blockquote>~</blockquote>
<blockquote cite=”引用页的URL”>~</blockquote>
设置文字内容的出处
<cite>~</cite>
设置缩略语
<abbr title=”字符串”>~</abbr>
<acronym title=”字符串”>~</acronym>
title：不处于省略状态下的词汇（字符串）
设置添加的内容
<ins cite=”URL” datetime=”添加日期时间”>~</ins>
设置需要删除的内容
<de cite=”URL” datetime=”删除日期时间”>~</del>
突出显示段落中的术语
<dfn>~</dfn>
表示与程序关联的文本
<kbd>~</kbd>：输入文本
<samp>~</samp>：输出样本
<code>~</code>：源代码
<var>~</var>：变量
显示特殊符号
<：<
>：>
"：”
&：&
5、设置显示方式
设置文字的换行
<br>
添加了br标签之后，文本就会再该处换行。即使在HTML代码中已经换行了，在浏览器上显示的时候却反映不出来，因此如果想在浏览器上换行的话，就要使用br标签
添加不同横线效果
<hr>
<hr size=”粗细” width=”长度” align=”对齐方式” noshade>
加入了hr标签后，就可以在其标注的地方显示横线
设置文本格式
<b>~</b>：黑体字
<i>~</i>：斜体字
<tt>~</tt>：等大字体
<sup>~</sup>：上标
<sub>~</sub>：下标
<u>~</u>：下划线
<s>~</s>：删除线
设置空格和换行
<pre>~</pre>
<pre>标签可以保留文字在源代码中的格式，使得页面中显示的内容和源代中的格式完全一致
设置居中效果
<center>~</center>
center标签用于将指定范围内的内容设置为居中
设置行对齐方式
<h1 align=”行对齐方式”>~<h1>
<p align=”行对齐方式”>~<p>
<div align=”行对齐方式”>~<div>
使用align属性可以设置标题、段落以及指定范围内的行对齐方式
设置文字颜色
<font color=”设置颜色”>~</font>
设置字体类型
<font>字体名”>~</font>
设置字体字号
<font size=”字号”>~</font>
相对改变字体大小
<big>~</big>：增大
<small>~</small>：减小
<font size=”+n”>：增大n号
<font size=”-n”>：减小n号
设置字号的基本大小
<basefont size=”字号”>
size：1~7
6、设置链接相关的属性
链接到其他页面
<a href=”链接目标URL”>~</a>
a标签的href属性能把指定的范围链接到其他页面上，链接部分的词语要设置得让人看到这个部分就能联想到链接网页上的具体内容
另外，在链接图像的时候，一定要插入替代的文字（alt=”~”）使用户能够很明确的了解到链接的目标
链接到当前页的特定位置
<a href=”#位置名”>~</a>：指定链接文件（从什么位置开始链接）
<a name=”位置名”>~</a>：指定链接的地址（要链接的位置）
如果一页上的内容非常多，可以在一个网页中给特定的位置命名，然后再链接到该位置（跳转）。在给链接对象位置命名的时候要使用name属性。然后，在链接的时候，要用href属性在链接地址名称的前面加上#号
设置链接到其他页面的特定位置
<a href=”URL#位置名”>~</a>：指定链接源（从什么位置开始链接）
<a name=”位置名”>~</a>：指定链接的地址（要链接的位置）
在链接到其他网页上的时候，可以先给那一页上特定的位置命名，然后链接到该位置。在给链接对象位置命名的时候要使用name属性。然后，在链接的时候，要用href属性设置成”URL+#+位置名”这样一种格式
设置链接文字的颜色
<body link=”指定颜色” vlink=”指定颜色” alink=”指定颜色”>~<body>
link：还没有看见的链接部分的文字颜色
vlink：已经看见的链接部分的文字颜色
alink：鼠标单击链接部分的文字颜色
body标签用于设置网页整体链接部分的文字颜色
在新窗口中打开链接网页
<a href=” URL” target=”窗口名”>~</a>
利用target属性可以设置打开链接窗口的方式
通过设置链接来启动邮箱
<a href=”mailto：邮箱地址”>~</a>
7、制作不同类型的列表
为列表添加不同类型的标记
<ul><li>列表项目1</li><><li>列表项目2</li>…<ul>
ul标签的作用是将列表（条款形式）加上圆点或方括号的标记。列表的整体要在<ul>~</ul>标签范围内，在这之间的各个项目要在<li>~</li>标签之内
更改列表标记
<ul type=”标记种类”>~</ul>
<li type=”标记种类”>~</li>
标记的种类包括disc、cicle和square
制作带序号的列表
<ol><li>列表项目1</li><><li>列表项目2</li>…<ol>
改变序号的样式
<ol type=”序号样式”>~</ol>
<li type=”序号样式”>~</li>
改变序号的顺序
<ol start=”开始序号”>~</ol>
<li value=”开始序号”>~</li>
制作包含专用语和解释的列表
<dl><dt>专用语<dt><dd>对其解释</dd>…<dl>
8、设置表格
表格的基本形式
<table border=”边框的粗度”>~</table>：整个表格
<tr>~</tr>：单独一行
<th>~</th>：单元格：标题用
<td>~</td>：单元格：数据用
表格的整体要圈在<table>~</table>之间显示，表格当中某一个单元格用<th>~</th>表示或者<td>~</td>表示。每个单元格都在表的单独以行，放置在<tr>~</tr>中。也就是说，table标签的内容是由tr标签构成的。各个tr标签的内容是由表示单元格的th或者td标签构成的。th标签代表这个单元格的内容是标题。td标签代表这个单元格的内容是数据
为表格添加标题
<caption>~</caption>
<caption align=”对齐方式”>~</caption>
caption标签用来给表格添加标题
该标签一定要放在table标签的紧后面。标题的显示位置（即对齐方式）可以指定在表格的上部，或者表格的下部
指定表格的大小
<table width=”宽度”>~</table>
宽度：针对像素或者窗口的百分比
指定单元格大小
<th width=”宽度” height=”高度”>~</th>
<td width=”宽度” height=”高度”>~</td>
合并单元格
<th rowspan=”垂直方向的合并数”>~</th>
<th colspan=”水平方向的合并数”>~</th>
<td rowspan=”垂直方向的合并数”>~</td>
<td colspan=”水平方向的合并数”>~</td>
垂直方向的合并数：从当前单元格开始向下合并的单元格数
水平方向的合并数：从当前单元格开始向右合并的单元格数
设置单元格之间的距离
<table cellspacing=”单元格的距离”>~</table>
设置单元格边框与内容之间的距离
<table cellpadding=”单元格边框与内容之间的距离”>~</table>
设置单元格中的行对齐方式和列对齐方式
align属性用于设置单元格内的行对齐方式，valign属性用来设置单元格内的列对齐方式
禁止在单元格内换行
<th nowrap>~</th>
<td nowrap>~</td>
设置表格和单元格的背景颜色
bgcolor属性用于指定表格和单元格中的背景颜色
设置表格和单元格的背景图像
background属性用于指定表格和单元格中的背景图像
设置表格外框的宽度
<table border=”外框的宽度”>~</table>
设置表格外框的显示形式
<table frame=”外框的显示形式”>~</table>
设置表格内补边框线的显示形式
<table rules=”内部边框线的显示形式”>~</table>
定义表格中的横行
<thead>~</thead>：表头部分
<tbody>~</tbody>：表体部分
<tfoot>~</tfoot>：表底部分
thead标签、tbody标签和tfoot标签都是用来定义表格的横行（tr标签）的
这样组合之后，就可以针对该组合的整体来应用属性和样式表。
使用这些标签的时候，一定要以thead标签、tfoot标签和tbody标签的顺序进行排列。在一个表格里，只能放置一个thead标签和一个tfoot标签，而tbody标签可以根据需要放置多个
利用纵列设置表格属性和样式表
<col span=”纵列数”>
<col span=”纵列数” width=”宽度”>
col标签不仅可以用来改变表格的纵列结构，还可以用来根据纵列，来综合指定宽和行对齐方式等属性以及样式表
该标签放置的位置要在caption标签的紧后面（如果没有caption标签，就放在table标签的开始标签的紧后面），以及thead标签和tr标签的前面
设置表格居中
<table align=”center”>~</table>
将表格嵌入到文本中
<table align=”对齐方式”>~</table>
位置：left,right
将table标签的align属性指定为left或者right后，就可以将表格以居左或居右的方式嵌入到文字中间
如果想要解除嵌入状态，可以使用<br>标签的clear属性
解除表格的嵌套
<br clear=”解除表格那一侧的嵌套”>
left：解除左侧表格的嵌套
right：解除右侧表格的嵌套
all：解除两侧表格的嵌套
设置表格与嵌套文字之间的距离
<table vspace=”垂直距离” hspace=”水平距离”>~</table>
垂直距离：表格的上下框与文字间的距离
水平距离：表格的左右框与文字间的距离
9、设置图像与多媒体
插入图像
<img src=”URL” width=”宽度” hignt=”高度” alt=”替代文字”>
使用img标签，可以把图像插入到HTML文件中
图像的格式一般可以使用GIF格式、JPEG格式和PNG格式
不管图像实际的大小如何，都会按照在这里所指定的宽度和高度来显示
alt属性是在不能显示图像的情况下，指定替代图像所使用的文字
设置图像的边框
<img src=”URL” alt=”替代文字” border=”边框的粗度”>
设置图像与文字的垂直位置关系
<img src=”URL” alt=”替代文字” align=”对齐方式”>
在同一行中，如果有图像和文字，那么就可以用align属性来设置图像和文字的垂直位置关系
制作图像热区
<img src=”URL” alt=”替代文字” usemap=”#map名”>
<map name=”map名”>~</map>
<area shape=”形状” cords=”坐标” href=”URL” alt=”替代文字”>
在map标签中，用来设置实际单击的区域和链接地址的是area标签
在area标签中，一定要指定表示链接地址的替代文字，之后要用image标签的usemap属性指定定义后的image map的名称（名称前面要加#），这样图像就可以作为image map产生相应的效果
将图像嵌套在文本中
<img src=”URL” alt=”替代文字” align=”对齐方式”>
位置：left,right
解除图像的嵌套
<br clear=”解除哪一侧图像的嵌套”>
设置图像与周围文字之间的距离
<img src=”URL” alt=”替代文字” vspace=”垂直距离” hspace=”水平距离”>
放置Java小程序
<applet code=”类文件名” width=”宽度” height=”高度”>~</applet>
<param name=”参数名” value=”参数值”>
applet标签是嵌入Java小程序时要使用的标签
如果使用param标签，在执行java小程序时，需事先指定一些必要值。这时，param标签要位于<applet>~</applet>范围的最开始部分
10、制作不同类型的表单
制作填写表单
<form action=”URL” method=”发送形式” enctype=”MIME类型” target=”窗口名称”>~</form>
URL：用来处理发送后表格的程序的URL
发送形式：get,post
MIME类型：以post方式发送内容时的MIME类型
窗口名称：先是发送结果的窗口或框架名
form标签表示在表单中填写的内容是可以发送的
制作发送按钮
<input type=”submit” value=”标签” name=”名称”>
标签：在按钮上显示的文字
名称：按钮的名称
将input标签的type属性设置为submit，再根据form标签的设置，可以制作发送填写在表单中数据的按钮
制作重置按钮
<input type=”reset” value=”标签”>
制作通用按钮
<input type=”button” name=”名称” value=”标签”>
通用按钮通常与JavaScript等脚本语言组合使用
利用图像来制作发送按钮
<input type=”image” src=”URL” name=”名称” alt=”替代文字” align=”对齐方式”>
通常，发送按钮都使用input type=”submit”代码，不过图像也可以作为发送按钮，具有发送功能。这时，图像被单击的位置将和表单的内容一起被发送
制作不同功能的发送按钮
<button type=”类型” name=”名称” value=”发送值”>~</button>
类型：submit,reset,button
button标签是用来制作按钮专用的
通过指定type属性值，就可以产生具有不同功能的按钮，包括发送按钮、重置按钮和通用按钮。另外，在<button>~</button>中放置相应的内容，可以作为按钮的标签显示出来。在需要进行其他处理并设置多个发送按钮的情况下，根据name属性和value属性所显示的值，接受方就可以分辨出单击的是哪一个发送按钮
制作单行文本框
<input type=”text” name=”名称” value=”默认文字” size=”宽度” maxlength=”字符的最大输入数量”>
制作多行文本框
<textarea name=”名称” rows=”行数” cols=”宽度”>~</textarea>
制作输入密码的文本框
<input type=”password” name=”名称” value=”默认文字” size=”宽度” maxlength=”字符的最大输入数量”>
插入隐藏域
<input type=”hidden” name=”名称” value=”发送值”>
制作单选按钮
<input type=”radio” name=”名称” value=”发送文字”>
<input type=”radio” name=”名称” value=”发送文字” checked>
将input标签的type属性设置为radio，可以用来制作单选按钮。单选按钮是多个选项当中只能选择其一的按钮。作为公共项目的选项而使用的单选按钮，要把它们都指定为同一名称。另外，发送数据的时候，为了识别所选的是哪一项，要用value属性来指定相应的值
制作复选框
<input type=”checkbox” name=”名称” value=”发送文字”>
<input type=” checkbox” name=”名称” value=”发送文字” checked>
将input标签的type属性设置为checkbox，可以用来制作复选框。复选框可以在多个选项当中进行多项选择。作为公共项目的选项而使用的复选框，要把它们都指定为同一名称。另外，发送数据的时候，为了识别所选的是哪一项，要用value属性来指定相应的值
制作菜单
<select name=”名称”>~</select>：菜单整体
<option value=”发送值”>~</option>：菜单项
<option selected>~</option>：菜单项
select标签用来制作菜单
菜单的整体要在<select>~</select>范围之内显示，然后按需要的数量在其中放置表示选项的<option>~</option>。<option>~</option>范围之内要写上实际菜单要显示的选项的名称。另外，如果省略了value属性，在这里记录的文字本身就会作为所选值发送
组合菜单选项
<optgroup lable=”组合名称”>~</optgroup>：制作组合菜单
<option lable=”次选项”>~</option>：组合内的选项
组合名称：第一级显示的组合标题
次选项：对应组合名称下面的在第二级显示出来的选项
制作的菜单选项可以利用<select>~</select>标签组合起来
制作下拉列表
<select size=”行数” name=”名称” multiple>~</select>：下拉列表框
<option value=”发送值”>~</option>：菜单项
<option selected>~</option>：菜单项
在用于制作菜单的select标签中指定了size属性后，就可以显示下拉列表框
添加选择文件的功能
<input type=”file” name=”名称”accept=”MIME”类型>
将input标签的type属性设置为file，可以自动做成能够选择发送表单数据的文件按钮和文本框
综合利用菜单选项
<fieldset>~</fieldset>：组合
<legend align=”对齐方式”>~</legend>：组合的标题
field标签用来把填写在表单中需要包含的输入内容和选项组合起来
在<fieldset>~</fieldset>的最开始部分放置legend标签，并且给该组合加上标题
将标签文字与项目一体化
<label for=”参照ID”>~</lable>
参照ID：添加了标签的对象的id属性值
lable标签的作用是在输入项和选项及其标签文字之间建立起明确的关联，并使其一体化
11、利用框架布局网页
设置框架整体结构
<frameset rows=”高度”>~</frameset>
<frameset cols=”宽度”>~</frameset>
<frame src=”URL” name=”框架名称”>
高度：在垂直方向上分布的多个框架的高度，按从上到下的顺序依次用逗号隔开来指定
宽度：在水平方向上分布的多个框架的宽度，按从左到右的顺序依次用逗号隔开来指定
URL：作为框架内容显示的HTML文件的URL
框架名称：在指定链接等显示目标的时候使用的名称
使用框架功能可以把窗口横竖切割开，然后在不同的块区域中显示其他的HTML文件。在指定了框架的文件中，原来body标签所在的位置，要放置frameset标签，这主要是由于在框架页面中不能使用body标签
在<frameset>~</frameset>的范围中要按照顺序填入分割后框架内要填写的内容。如果不需要再分割，就用frame标签指定要导入的HTML文件，如果还要继续分割的话，就需要放置frameset标签（作为嵌套放置在里面，并且指定盖框架如何分割）
设置框架的显示方法
<frame scrolling=”滚动控制” noresize>
<frame marginwidth=”左右缩进” marginheight=”上下缩进”>
设置是否显示边框
<frame frameborder=”显示指定框架的边框”>
frameborder属性用来设置分割开相邻框架的边框是否显示
去除分割框架的边框
<frameset frameborder=”0” framespacing=”0” border=”0”>
在不支持框架的环境中显示所需内容
<noframes>~</noframes>
这个标签要在<frameset>~</frameset>范围的最开始或者最后处放置一个。在<noframes>~</noframes>范围内要首先放置body标签，并在其中填写所要显示的内容。
指定链接目标在哪一个框架内显示
<a href=”URL” target=”框架名”>~</a>
如果对框架内的文件中指定的链接不进行设置的话，就会在原来的相同框架中显示链接目标，如果想使这个链接目标在其他框架中显示的话，就需要指定target属性值，用想要显示（frame标签）的那个框架的name属性来指定框架名称
插入内嵌框架
<iframe src=”内容的URL” name=”框架名”>~</iframe>
iframe标签不仅可以放置分割窗口形式的框架，还可以在窗口中放置独立显示的内嵌框架。在框架内还可以显示src属性所指定的内容
如果浏览器不支持这种框架，要在<iframe>~</iframe>之间指定要显示的内容
12、关于脚本
在HTML中插入脚本
<script type=”MME类型”>~</script>
<script type=”MME类型” language=”语言名称” src=”URL”>~</script>
在HTML文件中编写脚本的时候要用到script标签，脚本语言要写在这个标签的范围内
这时，在不支持这个标签的浏览器上会在画面上显示出脚本的部分，为了避免这种现象，通常把脚本整体作为HTML的注释。这个标签可以放在<head>~</head>和<body>~</body>范围内的任意位置上
在不能执行脚本的环境中添加所需的内容
<noscript>~</noscript>
在脚本不能运行的时候，可以使用noscript标签来指定替代显示的内容
这个标签要放置在<body>~</body>的范围内
三、html语言的原理是什么
HTML是由Web的发明者Tim Berners-Lee和同事Daniel W.Connolly于1990年创立的一种标记式语言，它是通用标记语言SGML的简化。用它的语法规则建立的文档可以运行在不同操作系统平台上。因此，HTML文档属于纯文本文件（它能用任意的文本编写器书写）。现在有很多网迷称HTML为程序语言，把写HTML文档理解为编程，这显然是走进了一个误区。其实，要想学习HTML，一钵（记事本）一甑（浏览器）足矣。
在了解了HTML的定义后，接下来我们便来学习此语言。由于篇幅有限，本文不可能把HTML语言的属性一一讲解。笔者只是选了一些比较重要而又广泛使用的标签进行分析。看完这篇文章后，你就会对HTML的工作原理有一个初步的认识。
一、HTML语言基础
用HTML语言编写的文档就称为HTML文档。我们平时上网所见到的就是HTML文档在浏览器中显示的结果。控制HTML文档外观的是HTML标签，浏览器可以将标签解释成具体的内容，如超级链接、标题、段落、列表等。
要学会编写HTML文档，就要掌握各种HTML标签。关于HTML标签，有五点非常重要:
1.标签始终以尖括号相围（小于号/大于号）——如<head>或<i>、</i>。
2.多数标签都成对出现，并且围在作用材料的两侧。它们的工作方式就和电灯开关一样:第一个标签启动操作，第二个标签把它关闭。（当然，也有一些例外。例如，标签创建段落，但并没有“关闭开关”。段落创建完后，不能再把后面的部分恢复为创建之前的状态。）
3.第二个标签——“关闭开关”总是以前斜杠开始。例如，启动粗体时使用<b>，表达完你的强烈感情后再用</b>恢复到一般文本。
4.前一个标签打开，后一个标签关闭。标签都是嵌入的。所以如果你写下了这样一段 HTML文本:
<head>
那么它是无效的。正确的顺序应该是<head></head>。
5.许多标签都有可选的属性，这些属性使用只修改标签的行为。例如，使用<p>标签的 ALIGN属性，你可以更改缺省的段落对齐方式（左对齐）。比如，<p align=CENTER>就可以使它后面的段落居中。
◎HTML语言可以在任何文本编辑器中编写，如Word、记事本等，然后保存为.html语言，最后在浏览器中浏览。
下面，就让我们开始动手用记事本来写网页。
在“开始”→“程序”→“附件”中打开记事本。
1.先输入几个符号试验一下，然后将记事本另存为.html文件。
2.再看看，文本保存的格式是不是和原来不一样了？！很容易认出来。
3.打开这个新文件，看看出来的是什么？
一个基本的HTML页面包括以下基本标签:
<html>
<head>
<title>页面标题</title>
</head>
<body>
页面内容
</body>
</html>
是不是很简单？在这里，HTML标签用来表示你做的页面是HTML文档；HEAD标签用来描述HTML页的内容。在<head>与</head>之间可以插入其它标签，其中最重要的就是TITLE标签，在<title>与</title>之间的内容就将出现在浏览器的标题栏中。
Body标签用来表示页面的主体。在<body>与</body>之间可以设置页面的背景颜色、背景图像、文字色彩、页面边距等。BODY标签的基本用法如下:
<body
background=url设置页面的背景图片
bgcolor=color设置页面的背景颜色（颜色值为英文和十六进制代码，代码表见文章末）
text=color设置页面文本的颜色
leftmargin=n设置整个页面的左边距。当n=0时，页面的边缘便紧贴左边缘
下面让我们先来试验一下。
注:以下例图是将Internet Explorer浏览器（以下简称IE浏览器）和记事本同时并排打开，调整窗口大小后的对比效果。需要注意，每当在记事本中做改动后，都要保存一次，同时在用IE浏览器浏览时也要刷新一下。
在WORD中设置文字大小是很容易的，不过那是拜其强大的所见即所得功能所赐，上不了台面的。来利用HTML语言标签设置一下文字效果吧，你一定会很有成就感！
HTML语言可以用标签对文档字符进行字体设置，包括标题、字体、字号、字符颜色等。
1.H标题标签
一个页面当然要有一个醒目的标题，这样别人才能方便迅速地了解你页面的内容，并根据标题的级别来了解内容的重要程度。HTML可以定义六级标题:H1、H2、H3、H4、H5、H6。与其它标签一样，它们也是成对使用的。格式为<Hn>……</Hn>，n可以是1至6的整数。例如:
2.设置文字大小
除了对标题的文字大小进行设置以外，HTML语言还可以利用FONT标签对文档内的文字的大小进行设置。FONT标签包括三种属性:size属性，color属性，face属性。size属性用来确定字号的大小，其有效数字范围在-7（最小）和+7之间。如果不设置，系统的默认值为3。其设置格式为<font size=n>……</font>。例如:
3.设置文字颜色
FONT的color属性可以用来设置文字的颜色。这里所介绍的颜色设置与前面介绍的text=color不同。text=color是设置整个页面的文字颜色，而这里所介绍的是设置特定文字的颜色，这样可以使你的页面更加丰富多彩。其设置格式为<font color=?>……</font>。例如:
4.设置版面
你不想页面中的文字总是从左边开始吧？要想在页面中进行分行和段落设置，必须通过HTML语言进行版面设计。
分段标签<p>……</p>表示一段文字的开始和结束，单独一个<p>标签表示一个空行。
换行标签<br>……</br>表示浏览器执行一个换行动作，它与<p>标签不同的是，它并不改变段落位置。
居中标签<center>……</center>可以将文本居中显示。例如:
三、列表的设置
列表标签在文档制作中有重要作用，同样主页制作也少不了列表标签。HTML规定了多种列表标签，可以设置无序列表、有序列表、自定义列表和目录列表。我们下面可以看看实际效果。
1.无序列表包括UL标签和LI标签。UL标签创造一个标有圆点的列表，LI标签放在每个圆点列表前，并加上一个圆点。例如:
2.有序列表包括OL标签和LI标签，OL标签用来创建一个标有数字的列表，LI标签放在每个数字列表项之前，并加上一个序列数字。例如:
3.自定义列表包括DL、DT、DD等标签，在这里限于篇幅不多解释。简单地说，自定义列表就是解释词语。例如:
4.目录列表则包括DIR、LI元素，举例如下:
大家都知道，超链接是互联网的一大特点，用鼠标轻轻一点，就可以转到其它网页，这是多么神奇啊。超链接正是HTML语言的优势，它是通过A标签实现的，其属性是href。
href属性的用法:当A标签中包含href属性时，A标签的起始标记和结束标记之间的文字就成为超文本，也就是说，用鼠标点击这个超文本文字，你就可以进入另外一个网址或者自动打开默认电子邮件程序。另外，你也一定注意到，许多时候当我们把鼠标光标放到页面某个位置时，旁边就会出现一个小小的黄色文字说明，不要把这种技巧想像得太神秘，其实并不难。让我们一起试试看:
怎么样，HTML语言并不神秘吧！
四、建立超链接
做主页，难免要在页面中加入表格，那就需要用到以下这些基本标签:
TABLE标签:说明一个表格的开始和结束
BORDER标签:为表格加边框
TR标签:用以定义表格行数
TH标签:用以定义表头
TD标签:用以定义表格内容
COLSPAN标签:可以实现跨几列显示
ROWSPAN标签:可以实现跨几行显示
这些标签的用法都可以在下例中看到:
够神奇吧，只需要加几个符号，表格就出来了。当然，这个表格还是很简单的，不过我们可以用其他标签来修饰、美化它。限于篇幅，这里就不再赘述。
五、在页面中制表
用MARQUEE标签可以让你的主页动起来。该标签有许多属性，以下列举其中几种:
1.direction属性:决定文本的滚动方向，分为向左left和向右right，默认状态向左。
<marquee direction=left>从右向左滚动</marquee>
<marquee direction=right>从左向右滚动</marquee>
2.behavior属性:指定文本的滚动方式，分为三种:
Scroll:从一端消失后，在另一端出现并继续滚动。
<marquee behavior=scroll>一圈一圈地滚动</marquee>
Slide:从一端滚动，接触到另一端后停止
<marquee behaviro=slide>只滚动一次就停止</marquee>
Alternate:从一端滚动到另一端后，反向滚动。
<marquee behavior=alternate>来回滚动</marquee>
六、页面中的滚动文本
我们上面看到的都是HTML语言的一些基本使用方法，这些常用的语法可以帮助你看懂别人网页的源代码，同时也方便你对自己的主页作些小的修改。以后当你上网冲浪时看到漂亮的页面，可以通过查看这个页面的源代码来分析其采用了什么技术，也许你一时看不懂，但看到那些由HTML基础语言编写的代码，你一定不会觉得陌生了。
注:查看网页源代码方法:用鼠标左键点击IE浏览器中的“查看”栏，再在下拉菜单中点击“源文件”，这时这个网页的所有源代码即可让你一览无余。