标签：html
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：表示必须输入一定范围内数字值的文本框。
HTML的基本使用
标签：html
原文地址：http://blog.csdn.net/troy__/article/details/41792977
.png)
.png)
.png)
.png)
.png)
.png)
