HTML(HyperText Mark-up Language)是一种表示页面内容及样式的语言,它是事实上的web展示标准,被所有浏览器支持,也是它让你的页面可移植的出现在不同的系统和平台之上。
HTML结构
如下一段最简单的HTML代码:
<html>
<head>
<title>HTML页面</title>
</head>
<body>
<b>
应用记事本编写HTML代码
</b>
</body>
</html>
展示效果为:
需要首先注意的是,html使用标签来告诉浏览器页面展现的样式以及自身的一些信息,大多数标签是成对出现的。下面详细介绍各类标签的作用。
- <html>:所有的HTML文件都是以<html>标记开头,以</html>结束。HTML的所有标记内容都要放置在<html>和</html>中间。<html>标记没有实质的内容,但是不可缺少。
- <head>:<head>是HTML文件的头标记。主要是放置一些HTML全局的一些信息。如定义CSS样式可以放置在<head>与</head>标记中。注:CSS主要用来定义html中的全局范围的样式,否则需要在html中每一处都引入详细的样式,css的作用有点类似于函数的作用,目的是样式复用。
- <title>:<title>标记为标题标记。可将网页的标题定义在<title>与</title>标记中。
- <body>:<body>是HTML页面的主体标记,页面的中的所有具体内容都定义在该标记中,<body>标记本身也具有控制页面的一些特性,如控制页面的背景图片和颜色等。
HTML常用标记
- <p>:段落标记以<p>标记开头,以</p>标记结束。段落标记在段前和段后各添加一个空行,而定义在段落标记中的内容,不受该标记的影响。
- <h1>-<h6>:如果需要不同级别的标题,则要使用该标题标记。在HTML标记中,设定了6个标题标记,分别为<h1>至<h6>,数字越小,级别越高,文字的字体就越大。
上面两个标记的示例:
<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语言来开发自己的官方网站 </p>
<h2>Java ME</h2>
<p>主要用于嵌入式系统程序的开发</p>
</body>
</html>
显示效果为:
- <br>与<br/>:有些标记会将内容自动换行,如<p>和<h1>-<h6>,而有些标记则不会,所以当你需要更加精细的换行控制的时候,可以使用<br>或者<br/>,注意这个标记可以单独使用。html标准建议所有标签都应该有结尾,所以使用<br/>是更好的选择。(因为大部分标签是成对出现的,所以使用<br>这种标签总让人想去找对应的<br/>,而换行标签成对使用是没有意义的,所以html建议都结尾标签)
- <center>与</center>:html默认的布局方式是从左到右依次排序。如果想让页面中的内容在页面的居中位置显示,可以使用html中的<center>标记。<center>标记以<center>标记开头,以</center>标记结尾。标记中的内容为居中显示。
上面两个标记的示例:
<html>
<head>
</head>
<body>
<center>
<H1>正在测试居中</H1>
我要测试换行</br>已换行
</center>
</body>
</html>
效果如下:
- <li>与<ul>、<ol>:html提供了文字列表标记,文字列表标记可以将文字以列表的形式依次排列,主要分为无序列表<ul>和有序列表<ol>两种。而每一个列表项以<li>表示。
如:
<html>
<head>
<title>html中的列表标记</title>
</head>
<body>
一年有以下几季
<p>
<ul>
<li>春</li>
<li>夏</li>
<li>秋
<li>冬
</ul>
<p>
<p>
<ol>
<li>春</li>
<li>夏</li>
<li>秋
<li>冬
</ol>
</p>
</body>
</html>
展示效果为:
表格标记
表格是非常重要的数据展现形式。表格包括标题、表头、行和单元格。使用表格要掌握下面几个标记。
- 表格标记<table>:<table>...</table>标记表示整个表格。<table>标记中有很多属性,例如width属性用来设置表格的宽度,border属性用来设置用来设置表格的边框,align属性用来设置表格的对齐方式,bgcolor属性用来设置表格的背景色。
- 标题标记<caption>:标题标记以<caption>开头,以</caption>结束,标题标记也有一些属性,例如align、valign。
- 表头标记<th>:表头标记以<td>开头,以</td>结束,也可以使用align、valign、background、colspan等属性设置表头。
- 表格行标记<tr>:表格行标记以<tr>开头,以</tr>结束,一组<tr>标记表示表格中的一行。<tr>标记要嵌套在<table>标记中使用,该标记也具有align、background等属性。
- 单元格标记<td>:一个单元格标记<td>中可以嵌套多个<td>标记。该标记也具有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>
</table>
</body>
</html>
HTML表单标记
前面介绍的都是静态的显示,而表单是一种用户与网页交互的重要手段。
<form>...</form>表单标记
表单标记以<form>标记开头,以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。<form>标记的基本语法如下:
<form action="url" method="get"|"post" name="name" onSubmit="" target="">
</form>
<form>标记的各属性说明如下:
- action属性:该属性用来指定处理表单数据程序的URL地址。
- method属性:该属性用来指定数据传送到服务器的方式。它有两种属性值,分别为get与post。get属性值表示将输入的数据追加在action指定的地址后面,并传到服务器。当属性值为post时,会将输入的数据按照HTTP协议中的post传输方式传送到服务器。
- name属性:该属性指定表单的名称,其值程序员可以自定义。
- onSubmit属性:该属性用于指定当用户单击提交按钮时触发的事件。
- target属性:该属性指定输入数据结果显示在哪个窗口中,其属性值可以设置为_blank、_self、_parent和_top。其中,_blank表示在新窗口中打开目标文件;_self表示在同一窗口中打开,一般不使用该项;_parent表示在上一级窗口中打开,一般使用框架页时经常使用;_top表示在浏览器的整个窗口中打开,忽略任何框架。
下面例子为创建表单,设置表单名称为form,当用户提交表单时,提交至action.html页面进行处理。
<form id="form1" name="form" method="post" action="www.baidu.com" target="_blank">
</form>
<input>表单输入标记
表单输入标记是使用最频繁的表单标记,通过这个标记可以向页面中添加单行文本、多行文本、按钮等。<input>标记的语法格式如下:
<input type="image" disabled="disabled" checked="checked" width="digit" height="digit" maxlength="digit" readonly="" size="digit" src="uri" usemap="uri" alt="" name="checkbox" value="checkbox">
<input>标记的语法格式如下:
属性 | 描述 |
type | 用于指定添加的是哪种类型的输入字段,共有10个可选值 |
disabled | 用于指定输入字段不可用,即字段变成灰色。其属性值可以为空值,也可以指定为disabled |
checked | 用于指定输入字段是否处于被选中状态,用于type属性值为radio好checkbox的情况下。其属性值可以为空值,也可以指定为checked |
maxlength | 用于指定输入字段可输入文字的个数,用于type属性值为text和password的情况下,默认没有字数限制 |
readonly | 用于指定输入字段是否为只读。其属性值可以为空值,也可以指定为readonly |
size | 用于指定输入字段的宽度,当type属性为text和password时,以文字个数为单位,当type属性为其他值时,以像素为单位 |
name | 用于指定输入字段的名称 |
value | 用于指定输入字段默认的数据值,当type属性为checkbox和radio时,不可忽略此属性;为其他值时,可以省略。当type属性为button、reset和submit时,指定的是按钮上的显示文字;该type属性为checkbox和radio时,指定的是数据项选定的值 |
src | 用于指定图片的来源,只有当type属性为image时有效 |
width | 用于指定输入字段的宽度,用于type属性值为image的情况下 |
height | 用于指定输入字段的高度,用于type属性值为image的情况下 |
usermap | 为图片设置热点地图,只有当type属性为image时有效。属性值为URI,URI格式为"#+<map>标记的name属性值"。例如,<map>标记的name属性值为Map,该URI为#Map |
alt | 用于指定当图片无法显示时显示的文字,只有当type属性为image时有效 |
type属性的属性值:
可选值 | 描述 | 可选值 | 描述 |
text | 文本框 | submit | 提交按钮 |
password | 密码框 | reset | 重置按钮 |
file | 文件域 | button | 普通按钮 |
radio | 单选按钮 | hidden | 隐藏域 |
checkbox | 复选框 | image | 图像域 |
<select>...</select>下拉列表框标记
<select>标记可以在页面中创建下拉列表框,此时的下拉列表框是一个空的列表,要使用<option>标记向列表中添加内容。<select>标记的语法格式如下:
<select name="name" size="digit" multiple="multiple" disabled="disabled">
<select>
属性解释如下表:
属性 | 描述 |
name | 用于指定列表框的名称 |
size | 用于指定列表框中显示的选项数量,超出该数量的选项可以通过拖动滚动条查看 |
disabled | 用于指定当前列表框不可使用(变成灰色) |
multiple | 用于让多行列表框支持多选 |
示例如下:
<body>
下拉列表框:
<select name="select">
<option>数码相机区</option>
<option>摄影器材</option>
<option>MP3/MP4/MP5</option>
<option>U盘/移动硬盘</option>
</select>
多行列表框(不可多选):
<select name="select" size="2">
<option>数码相机区</option>
<option>摄影器材</option>
<option>MP3/MP4/MP5</option>
<option>U盘/移动硬盘</option>
</select>
多行列表框(可多选):
<select name="select" size="3" multiple>
<option>数码相机区</option>
<option>摄影器材</option>
<option>MP3/MP4/MP5</option>
<option>U盘/移动硬盘</option>
</select>
</body>
效果如下:
<textarea>多行文本标记
<textarea>为多行文本标记,与单行文本相比,多行文本可以输入更多的内容。通常情况下,<textarea>标记出现在<form>或<table>标记的标记内容中。<textarea>标记的语法格式如下:
<textarea cols="digit" rows="digit" name="name" disabled="disabled" readonly="readonly" wrap="value">默认值</textarea>
<textarea>标记的属性如下:
属性 | 描述 |
name | 用于指定多行文本框的名称,当表单提交后,在服务器端获取表单数据时应用 |
cols | 用于指定多行文本框显示的列数(宽度) |
rows | 用于指定多行文本框显示的行数(高度) |
disabled | 用于指定当行文本框不可使用(变成灰色) |
readonly | 用于指定当前多行文本框为只读 |
wrap | 用于设置多行文本中的文字是否自动换行,可选值如下表所示 |
warp属性的可选值:
可选值 | 描述 |
hard | 默认值,表示自动换行,如果文字超过cols属性所指的列数就自动换行,并且提交到服务器时换行符同时被提交 |
soft | 表示自动换行,如果文字超过cols属性所指定的列数就自动换行,但提交到服务器时换行符不被提交 |
off | 表示不自动换行,如果想让文字换行,只能按下Enter键强制执行 |
示例:
在页面中创建表单对象,并在表单中添加一个多行文本框,文本框的名称为content,6行30列,文字换行方式为hard。关键代码如下:
<form name="form2" method="post" action="">
<textarea name="content" cols="30" rows="5" wrap="hard"></textarea>
</form>
效果如下:
超链接与图片标记
超链接标记
超链接标记是页面中非常重要的元素,在网站中实现从一个页面跳转到另一个页面,这个功能就是通过超链接标记来完成的。其语法如下:
<a href=""></a>
属性href用来设定链接到哪个页面中。
图片标记
在页面中添加的图片是通过<img>标记来实现的。<img>标记的语法格式如下:
<img src="uri" width="value" height="value" border="value" alt="提示文字">
<img>标记的属性如下表所示。
属性 | 描述 |
src | 用于指定图片的来源 |
width | 用于指定图片的宽度 |
height | 用于指定图片的高度 |
border | 用于指定图片外边框的宽度,默认值为0 |
alt | 用于指定当图片无法显示时显示的文字 |
使用示例:
<body>
<table width="409" height="250" border="1" align="center">
<tr>
<td width="199" height="208">
<img src="q.ico"/>
</td>
</tr>
<tr>
<td height="35" align="center" valign="middle"><a href="message.html">查看详情</a>
</td>
</tr>
</table>
</body>
HTML5的一些新增内容
新增的元素
- <section>:<section>表示页面中的一个区域,例如章节、页眉、页脚或页面中的其他部分。可以与h1、h2、h3、h4等元素结合起来使用,标示文档结构。类似于在HTML4中使用<div>标记在页面中定义一个区域。
<section>
<h2>section标记的使用</h2>
<p>完成百分比:100%</p>
<input type="button" value="请单击"/>
</section>
- <article>:<article>元素表示页面中一块与上下文不相关的独立内容,例如博客中的一篇文章、一段用户评论等。除了内容部分,一个<section>元素通常有自己的标题、脚注等内容。
- <header>:<header>元素表示页面中一个内容区域或整个页面的标题。
- <footer>:<footer>元素表示页面中一个内容区域或整个页面的脚注。例如日期、作者信息。
例:
<article>
<header>
<h1>苹果美容</h1>
</header>
<p>
苹果大仙
</p>
<footer>
<p>2011-9-27</p>
</footer>
</article>
- <aside>:aside元素用来表示当前页面或文章的附属信息部分。可以包含于当前页面或主要内容相关的引用、侧边栏、广告、导航条等信息。
<aside>
<nav>
<h2>侧栏</h2>
<ul>
<li>
<a href="#">明日图书</a>2011-9-27
</li>
<li>
<a href="#">明日软件</a>2011-9-27
</li>
<li>
<a href="#">编程词典</a>2011-9-27
</li>
</ul>
</nav>
</aside>
新增的input元素类型
- email:将input元素的类型设置为email,表示文本框必须输入Email地址。
- url:url表示必须输入URL地址。
- number:number表示必须输入数值的文本框。
- range:表示必须输入一定范围内数字值的文本框。