开发过Android的同学都知道，Android应用程序中的界面是由一个个控件组合而成的，比如说按钮控件，图片控件，文本输入框控件等。HTML语言的标记就可以理解成控件的标记，一个标记指定了一个控件，但是标记并不是控件本身，仅仅是那个控件的标记。HTML文件中的标记由浏览器来解析，产生相应的界面元素（控件），最终生成网页上可见的那些内容。
标记可以有自己的属性和内容。标记的属性指定内容显示的方式，标记的内容在标记对中直接给出即可。
HTML页面就是由标记来构建的，通过标记的组合，就可编辑完成一个网页。所以通过标记创建网页是一件不太难的事情。
一 HTML界面的基本标记元素：<html>，<head>，<title>，<body>。使用这四种标记创建的一个基本HTML文档如下：
<html>
<head>
<title>HTML页面</title>
</head>
<body>
<b>Hello world!</b>
</body>
</html>在浏览器中打开之后显示的界面截图：
<html>标记是HTML文件的开头，不可缺少。
<head>标记是HTML页面的头标记，用于放置HTML文件的信息。比如定义的CSS样式代码可放置在<head>与</head>标记之间。
<title>是标题标记，用于定义网页的标题，如浏览器截图中红色下划线显示的内容，<title>标记放置在<head>标记中。
<body>标记是HTML页面的主体标记。页面中的所有内容都定义在<body>标记中。<body>标记还可以控制页面的一些特性，比如页面的背景图片和颜色等。
注：1）HTML的所有标记都以</标记名>结尾，而不仅仅是上述四个标签。例如<html>以</html>结尾。
2）如果浏览器对中文显示为乱码，一般是文本编码不正确。可以通过Windows记事本打开文件，另存为ANSI或者Unicode编码格式。或者使用Notepad++转换文件编码方式，然后保存。
二 HTML超文本标记语言的其他标记
HTML中的标记可以设计页面中的文字，图片，定义超链接等。
1）<br>换行标记
该标记并不是和</br>成对出现，该标记告诉浏览器在哪里换行。例如下面的代码：
<!--演示换行标记-->
<html>
<head>
<title>应用换行标记实现页面文字换行</title>
</head>
<body>
<b>
黄鹤楼送孟浩然之广陵
</b><br>
故人西辞黄鹤楼，烟花三月下扬州。<br>
孤帆远影碧空尽，唯见长江天际流。
</body>
</html>浏览器打开的效果截图：
2）<p>段落标记
段落标记在段前和段后各添加一个空行，而定义在段落标记中的内容不受该影响。
3）<h1>，<h2>， <h3>， <h4>， <h5>，<h6>六个标题标签
标题标签用于在HTML页面中实现不同层次的标题。从左到右依次表示第一级标题，第二级标题，...，第六级标题。级数越小，级别越高，字体越大。
展示<p>标签和<hx>标签使用的一段代码：
<!--演示段落标记和标题标记，目前这个是静态网页-->
<html>
<head>
<title>设置标题标记和段落标记</title>
</head>
<body>
<h1>java开发的3个方向</h1> <!--每一个标题标记就是一行，不需要换行-->
<h2>Java SE</h2>
<p>
主要用于桌面程序的开发。它是学习Java EE和Java ME的基础，也是本书的重点内容。
</p>
<h2>Java EE</h2> <!--相同的标题标记并列-->
<p> 主要用于网页程序的开发。随着互联网的发展，越来越多的企业使用Java语言来开发自己的官方网站，其中不乏世界500强企业。
</p>
<h2>Java ME</h2>
<p>
主要用于嵌入式系统程序的开发
</p>
</body>
</html>在浏览器中的效果截图：
4）<center>居中标记
HTML页面内容默认的布局方式从左到右。<center>标记内容为居中显示。<center>标记作用域标记区域内的每一段内容，每一个标记。如下面一段演示代码：
<!--演示居中标记-->
<html>
<head>
<title>设置标题标记</title>
</head>
<body>
<center>
<h1>java开发的3个方向</h1>
<h2>Java SE</h2>
<p>主要用于桌面程序的开发。它是学习Java EE和Java ME的基础，也是本书的重点内容。</p>
<h2>Java EE</h2>
<p>主要用于网页程序的开发。随着互联网的发展，越来越多的企业使用java语言来用Java语言来开发自己的官方网站，其中不乏世界500强企业。</p>
<h2>Java ME</h2>
<p>主要用于嵌入式系统程序的开发</p>
</center>
<body>
</html>
<!--在center标签中的每一个标签显示的内容都是居中显示。会作用域每一个行，每一个标记的内容-->在浏览器中打开文件显示内容如下：
5）文字列表标记
<ul>是无序列表标记，<ol>是有序列表标记。有序列表和无序列表的不同在于无序列表的每一个列表项前面添加一个点号，有序列表的列表项前面添加一个序号，序号从1开始。
每一个列表项用<li>标记，这标记不需要结尾，并且一个表项自动占据一行。
如下面无序列表标记代码：
<!--演示无序标记-->
<head>
<head>
<title>无需列表标记</title>
</head>
<body>
编程词典有以下几个品种<p>
<ul>
<li>Java编程词典 <!--每一个列表项用一个单标记<li>-->
<li>VB编程词典 <!--每一个表项自动占据一行，不需要<p>-->
<li>VC编程词典
<li>.net编程词典
<li>C#编程词典
</ul>
</body>
</head>无序列表运行结果截图：
有序列表标记代码：
<!--演示有序列表-->
<html>
<head>
<title>有序列表标记</title>
</head>
<body>
<center>
编程词典有以下几个品种<p>
<ol>
<li>Java编程词典
<li>VB编程词典
<li>VC编程词典
<li>.net编程词典
<li>C#编程词典
</ol>
</center>
</body>
</html>浏览器打开文件显示如下(<center>)：
（非<center版本>截图）：
6）<span>，<div>区域标记
怎么来理解标记？从控件的角度来看，么一个标记是一个页面的控件，是一个实体。从页面内容的创建来看，标记就是依照次序规定了页面显示的内容和每一部分内容的含义，并以此来构建网页。
<span>标记用来组合文档中的行内元素，对它引用样式时，它将会对划分的区域进行渲染。
<div>标签功能和<span>类似，但是<div>是组合块元素。
区域标记代码演示：
<!--演示区域标记：为-->
<html>
<head>
<title>区域标记</title>
</head>
<style>
#right {
float:right;
color:blue;
}
#center {
font-family:宋体;
font-size:24px;
color:red;
}
</style>
<body>
<a><span id="right">span效果</span></a><br> <!--组合行内元素-->
<div id="center"> <!--组合块内元素-->
<a>div效果1</a><br>
<a>div效果2</a>
</div>
</body>
</html>浏览器打开文件截图：
7）<table>表格标记
表格用来存储数据的。表格由标题，表头，行和单元格组成，每一个组成元素都对应于一个标记，有这些标记指定表格的内容和构成。
<table>表格标记，table的属性包括width，length，border（设置表格边框），align（设置表格对齐方式），bgcolor（设置表格的背景色）等。
<caption>标题标记，属性有align，valign等
<th>表头标记，属性有align，background，colspan，valign等。
<tr>表格行标记，属性有align，background等。
<td>单元格标记，属性有align，background，valign等。
表格使用小技巧：因为标记是可以嵌套的，所以灵活嵌套会实现很多不同的结构。表格也可以用来设计页面。在页面中创建一个表格，并设置没有边框，之后通过该表格将页面划分成几个区域，分别对几个区域进行设计。
表格标签演示代码如下：
<!--演示表格标记-->
<html>
<head>
<title>演示表格标记</title>
</head>
<body>
<table width="318" height="167" border="1" align="center">
<caption>学生考试成绩单</caption>
<tr>
<td align="center" valign="middle">姓名</td> <!--标记的属性需要制定，标记的内容写出来即可-->
<td align="center" valign="middle">语文</td>
<td align="center" valign="middle">数学</td>
<td align="center" valign="middle">英语</td>
</tr>
<tr>
<td align="center" valign="middle">张三一</td>
<td align="center" valign="middle">89</td>
<td align="center" valign="middle">92</td>
<td align="center" valign="middle">87</td>
</tr>
<tr>
<td align="center" valign="middle">李四</td>
<td align="center" valign="middle">93</td>
<td align="center" valign="middle">86</td>
<td align="center" valign="middle">80</td>
</tr>
<tr>
<td align="center" valign="middle">王五</td>
<td align="center" valign="middle">85</td>
<td align="center" valign="middle">86</td>
<td align="center" valign="middle">90</td>
</tr>
<tr>
<td align="center" valign="middle">西门吹雪</td>
<td align="center" valign="middle">100</td>
<td align="center" valign="middle">100</td>
<td align="center" valign="middle">100</td>
</tr>
</table>
</body>
</html>浏览器打开文件截图如下：
8）<form>表单标记
表单是用户与网页交换数据的重要手段，如下面截图，就是一个表单（虽然格式不是很美观），表单中有各种表单元素，比如文本输入框，单选框（radix），复选框（CheckBox）等。
使用表单标记的基本语法如下：
<form action="" method="get"|"post" name="" onSubmit="" target="" >
<!--添加表单元素-->
</form><form>标记个属性说明如下：
action：指定处理表单数据程序的URL地址。比如将更新后的密码从网页保存到服务器上，就需要指定保存密码的业务逻辑程序，URL就是这段程序在服务器上的地址。
method：指定数据传送到服务器的方式。get表示将输入的数据追加在action指定的地址后面，并传送到服务器。post表示会将输入的数据按照HTTP协议中post传输方式传送到服务器。
name：指定表单的名称，可自定义。
onSubmit：当用户点击提交按钮是触发的事件。
target：指定输入数据结果显示在哪个窗口中。
9）<input>表单输入标记
<input>标记不成对出现，即不需要</input>结束。表单中的账户输入框，密码输入框，复选框等都是一个<input>标记，具体的种类由<input>的type属性指定。比如type="radio"表示单选按钮，type="text"表示文本框。
type属性的值如下：
text（文本框），password（密码域）， file（文件域）， radio（单选按钮）， checkbox（复选按钮）， submit（提交按钮）， reset（重置按钮）， button（不同按钮）， hidden（隐藏域）， image（图片域）
<input>使用语法如下：
<input type="" name="" id="" disabled="disabled" checked="checked" width="digit"
height="digit" maxlength="digit" readonly="" size="digit" src="uri" usemap="uri"
alt="" value="checkbox">各属性值的含义：
type，name，id分别是输入字段的类别，输入字段的名称和输入字段的标识id。
disabled：表示输入字段不可用，显示为灰色。其值可以是disabled，也可以是空，即不指定
checked：当类型是radio或者checkbox时，表示输入字段是否处于选中状态。值可为空，也可是checked
width和height：当输入是图片时，指定宽和高。
size：指定输入字段的宽度。当type是text和password时，以文字个数为单位。其他类型则以像素为单位。
maxlength：当type是text和password时指定可输入文字个数，默认下没有限制。
readonly：输入字段是否为只读。属性值可以是readonly，也可以为空。
src：用于指定图片来源。
usemap：
alt：当图片无法显示时显示的文字。
value：指定按钮上显示的文字。当类型为radio和checkbox时，指定数据项选中时的值（输入字段默认数据值）。
演示<form和<input>的代码如下：
<!--演示表单标记-->
<html>
<head>
<title>演示表单标记</title>
</head>
<body>
<form action="" method="post" name="myform">
用 户 名:<input name="username" type="text" id="UserName4" maxlength="20"> <!--HTML不会在意这些空格-->
<br>
密 码:<input name="pwd1" type="password" id="PWD14" size="20" maxlength="20">
<br>
确认密码:<input name="pwd2" type="password" id="PWD25" size="20" maxlength="20">
<br>
性 别:<input name="sex" type="radio" class="noborder" value="男" checked>
男
<input name="sex" type="radio" class="noborder" value="女">
女
<br>
爱 好:<input name="like" type="checkbox" id="like" value="体育">
体育
<input name="like" type="checkbox" id="like" value="旅游">
旅游
<input name="like" type="checkbox" id="like" value="听音乐">
听音乐
<input name="like" type="checkbox" id="like" value="看书">
看书
<br>
E-mail:<input name="email" type="text" id="PWD224" size="50"><br>
<input name="Submit" type="submit" class="btn_grey" value="确认保存">
<input name="Reset" type="reset" class "btn_grey" id="Reset" value="重新填写">
<input type="image" name="imageField" src="images/btn_bg.jpb">
</form>
</body>
</html>浏览器中打开文本截图如下：
10）<select>下拉菜单标记与<option>
<select>在页面中创建下拉菜单。通过<option>标记添加菜单项。
<select>标记的属性如下：
name：下拉菜单的名称
size：指定列表框中显示的选项数量，超出该数量的选项通过拖动滚动条查看。
disabled：用于指定当前列表框不可用（灰色）
multiple：用于让多行列表框支持多选
演示<selection>的代码：
<html>
<head>
<title>演示下拉菜单标记</title>
<head>
<body>
下拉菜单：
<select name="select">
<option>数码相机区</option>
<option>摄影器材</option>
<option>MP3/MP4/MP5</option>
<option>U盘/移动硬盘</option>
</select>
多行列表框（不可多选）：
<select name="select2" size="2">
<option>数码相机区</option>
<option>摄影器材</option>
<option>MP3/MP4/MP5</option>
<option>U盘/移动硬盘</option>
</select>
多行列表框（可多选）：
<select name="select3" size="3" multiple="true"> <!--因为里面有了错误浏览器一般不会报错，但是会效果不同，同时开发工具的高亮显示就很重要-->
<option>数码相机区</option>
<option>摄影器材</option>
<option>MP3/MP4/MP5</option>
<option>U盘/移动硬盘</option>
</select>
</body>
</html>浏览器打开文件效果：
11)<textarea>多行文本标记
一般用于<form>表单中。多行文本标记用于输入多行文本。属性说明：
name：用于指定多行文本框的名称，档表单提交之后，在服务器端获取表单数据时引用。将表单标记和后台数据库联系起来。当表单很大，内容复杂时，必须要考虑数据库的问题。
cols：显示的列数（宽度）
rows：显示的行数（高度）
disabled：用于指定多行文本框不可用（变成灰色）
readonly：用于指定当前多行文本框为只读
wrap：用于指定多行文本中的文字是否自动换行。
<textarea>演示代码如下：
<!--演示多行文本标记-->
<html>
<head>
<title>演示多行文本标记</title>
</head>
<body>
<form name="forml" method="post" action="">
<!--设置文本框的属性-->
<!--这里面都是文本框中的内容，包括英文字符，空白符，就连注释都会被当做内容-->
<textarea name="content" cols="30" rows="4" wrap="hard">
人之初 性本善 性相近 习相远
苟不教 性乃迁 教之道 贵以专
昔孟母 择邻处 子不学 断机杼
人生若只如初见，何事秋风悲画扇。
用我三生烟火，换你一世迷离。
人生那么长，等你几年又何妨。
</textarea>
</form>
</body>
</html>浏览器中打开文件截图：
12)<a>超链接与<img>图片
超链接实现由一个页面跳转到另一个页面。<img>实现添加图片。
<img>的属性：
src：用于指定图片的来源
width和height：用于指定图片的高和宽
border：指定图片外边框的宽度，默认为0
alt：指定图片无法显示时显示的文字。
演示<a>和<img>的代码如下：
<!--演示超链接和图片-->
<html>
<head>
<title>演示超链接和图片</title>
</head>
<body>
<table width="10" height="10" border="1" align="center">
<tr>
<td width="10" height="20">
<img src="./images/btn_bg.jpg" width="80" height="40"></img>
</td>
<td width="10" height="20">
<img src="./images/btn_bg.jpg" width="80" height="40"></img>
</td>
</tr>
<tr>
<td height="5m" align="center" valign="middle">
<a href="./Hello.html">查看详情</a>
</td>
<td align="center" valign="middle">
<a href="./Hello.html">产看详情</a>
</td>
</tr>
<tr>
<td width="10" height="20">
<img src="./images/btn_bg.jpg" width="80" height="40"></img>
</td>
<td width="10" height="20">
<img src="./images/btn_bg.jpg" width="80" height="40"></img>
</td>
</tr>
<tr>
<td height="5" align="center" valign="middle">
<a href="./Hello.html">查看详情</a>
</td>
<td align="center" valign="middle">
<a href="./Hello.html">查看详情</a>
</td>
</tr>
</table>
</body>
</html>浏览器打开效果：
超链接显示的页面：
