目录
HTML
超文本标记语言(Hypertext Markup Language,HTML)。HTML是用于描述超文本中内容的显示方式，在Internet上常见的网页制作标注性语言。通过浏览器的翻译，将网页中内容呈现给用户。
创建第一个HTML文件
编写HTML文件可以通过两种方式，一种是手工编写HTML代码，另一种是借助一些开发软件，如Adobe公司的Dreamweaver或者微软公司的Expression Web这样的网页制作软件。在Windows操作系统中，最简单的文本编辑软件就是记事本。
下面介绍应用记事本编写第一个HTML文件。HTML文件的创建方法非常简单，具体步骤如下。
（1）新建记事本；
（2）在记事本中编写代码并保存；
（3）编写完成，文件后缀改为“.htm”或者".html"；
（4）双击运行html文件。
运行效果：
HTML文档结构
HTML文档由4个主要标记组成，这4个标记主要有<html>、<head>、<title>、<body>。
1.<html>标记
<html>标记是HTML文件的开头。所有HTML文件都是以<html>标记开头，以</html>标记结束。HTML页面的所有标记都要放置在<html>与</html>标记中，<html>标记没有实质性的功能，但却是HTML文件不可缺少的内容。
2.<head>标记
<head>标记是HTML文件的头标记，作用是放置HTML文件的信息，如定义CSS样式代码可放置在<head>于</head>标记之中。
3.<title>标记
<title>标记为标题标记。可将网页的标题定义在<title>与</title>标记之中。
4.<body>标记
<body>是HTML页面的主体标记。页面中的所有内容都定义在<body>标记中。<body>标记也是成对使用的，以<body>标记开头，</body>标记结束。<body>标记本身也具有控制页面的一些特性，如控制页面的背景图片和颜色等。
HTML文本标记
HTML中提供了很多标记，可以用来设计页面中的文字、图片，定义超链接等。这些标记的使用可以使页面更加生动。
1.换行标记 <br>
要让网页中的文字实现换行，在HTML问减重输入换行符（Enter 键）是没有用的，如果要让页面中的文字实现换行，就必须用一个标记告诉浏览器在那里要实现换行操作。换行标记为"<br>"，与之前的标记不同，该标记是一个单独标记，不是成对出现。
换行标记测试:
<html>
<head>
<title>应用换行标记实现页面文字换行</title>
</head>
<body>
<b>黄鹤楼送孟浩然值广陵</b><br>
故人西辞黄鹤楼，<br>
烟花三月下扬州。<br>
孤帆远影碧空尽，<br>
唯见长江天际流。<br>
</body>
</html>运行效果:
2.段落标记 <p></p>
HTML中的段落标记也是一个很重要的标记，段落标记以<p>标记开头，以</p>标记结束。段落标记在段前和段后个添加一个空行，而定义在段落标记中的内容不受该标记的影响。
3.标题标记 <h1>至<h6>
在HTML页面中创建不同级别的标题，可以使用HTML语言中的标题标记。在HTML中，设定了6个标题标记，分别为<h1>之<h6>，其中<h1>代表1级标题，以此类推，<h6>代表6级标题。数字越小，级别越高，文字的字体越大。
标题标记和段落标记测试:
<html>
<head>
<title>设置标题标记、段落标记</title>
</head>
<body>
<h1>Java开发的三个方向</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></center>
HTML页面中的内容有一定的布局方式，默认的布局方式是从左到右一次排序。如果要想让页面中的内容在页面的居中位置显示，可以使用HTML中的<center>标记。居中标记以<center>开头，以</center>标记结尾。标记之中的内容为居中显示。随页面大小变化而变化，保持居中。
居中标记测试:
<html>
<head>
<title>设置标题居中</title>
</head>
<body>
<center>
<h1>Java开发的三个方向</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>
</center>
</body>
</html>运行效果:
5.文字列表标记
HTML语言提供了文字列表标记，文字列表标记可以将文字以列表的形式依次排列。分为无序的列表和有序的列表。
(1)无序列表 <ul> <li> </ul>
无序列表是在每个列表项的前面添加一个圆点符号。通过符号<ul>可以创建一组无序列表，其中每一个列表项以<li>表示。
无序列表测试:
<html>
<head>
<title>无序列表标记</title>
</head>
<body>
<h1>编程词典有一下几个品种</h1>
<p>
<ul>
<li>Java编程词典
<li>VB编程词典
<li>VC编程词典
<li>.net编程词典
<li>C#变成词典
</ul>
</p>
</body>
</html>运行效果:
(2)有序列表 <ol> <li> </ol>
有序列表和无序列表的区别是，使用有序列表标记可以将列表项进行排号。有序列表的标记为<ol>，每一个列表项前使用<li>。有序列表中项目项是有一定顺序的。
有序列表测试:
<html>
<head>
<title>有序列表标记</title>
</head>
<body>
<h1>编程词典有一下几个品种</h1>
<p>
<ol>
<li>Java编程词典
<li>VB编程词典
<li>VC编程词典
<li>.net编程词典
<li>C#变成词典
</ol>
</p>
</body>
</html>运行效果:
6.区域标记 <span> <div>
<span>标签是用来组合文档中的行内元素，它本身是没有固定的格式的，对它应用样式时，它将会对划好的区域进行渲染。
<div>标签与<span>标签类似，但两者的区别是:<span>标签时行内元素，而<div>则是块元素，<div>的作用范围比<span>更大。
区域标记测试:
<html>
<head>
<title>区域标记测试</title>
</head>
<body>
<div style="color:#0000FF">
<h3>这是一个在 div 元素中的标题。</h3>
<p>这是一个在 div 元素中的文本。</p>
</div>
<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>
</body>
</html>运行效果:
表格标记
表格是网页中十分重要的组成元素。表格用来存储数据。表格包含标题、表头、行和单元格。在HTML中，表格标记使用符号<table>表示。定义表格只使用<table>是不够的，还需要定义表格的行、列、标题等内容。在HTML页面中定义表格，需要以下几个标记。
1.表格标记<table>
<table>,,,</table>标记表示整个表格。<table>标记中有很多属性，例如，width属性用来设置表格的宽度，border属性用来设置表格的边框，align属性用来设置表格的对齐方式，bgcolor属性用来设置表格的背景色等。
2.标题标记<caption>
标题标记以<caption>开头，以</caption>结束。标题标记也有一些属性，例如，align、valign等。
3.表头标记<th>（文字加粗）
表头标记以<th>开头，以</th>结束，也可以通过align、background、colspan、valign等属性来设置表头。
4.表格行标记<tr>
表格行标记以<tr>开头，以</tr>结束，一组<tr>标记表示表格中的一行。<tr>标记要嵌套在<table>标记中使用，也具有align、background等属性。
5.单元格标记<td>
单元格标记<td>又称为列标记，一个<tr>标记中可以嵌套若干个<td>标记。该标记也具有align、background、valign等属性。
表格标记测试:
<html>
<head>
</head>
<body>
<table border = "1">
<caption>学生考试成绩单</caption>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
<tr>
<td>张三</td>
<td>88</td>
<td>89</td>
<td>87</td>
</tr>
<tr>
<td>李四</td>
<td>98</td>
<td>98</td>
<td>98</td>
</tr>
</table>
</body>
</html>运行结果:
表单标记
在登陆页面中，网站会提供给用户用户名文本框与密码文本框以提供访客输入信息。这里的用户名文本框与密码文本框就属于HTML中的表单元素。表单在HTML页面中起着非常重要的作用，是用户与网页交互信息的重要手段。
1.<form>...</form>表单标记
表单标记以<form>标记开头，以</form>标记结尾。在表单标记中，可以定义处理表单数据程序的URL地址等信息。<form>标记的基本语法如下:
<form action = "url" method = "get"|"post" name = "name" onSubmit = "" target = "">
</form><form>标记的各属性说明如下。
1.action 属性:用来指定处理表单数据程序的URL地址。
2.method 属性:用来指定数据传送到服务器的方法。该属性有两种属性值，分别为get与post。常用post，post是默认传送方式。get属性值表示将输入的数据追加在action指定的地址后面，并传送到服务器。当属性值为post时，会将输入的数据按照HTTP协议中post传输方式传送到服务器。
3.name 属性:指定表单的名称，该属性值程序员可以自定义。
4.onSubmit 属性:onSubmit 属性用于指定当用户单击提交按钮时触发的事件。
5.target 属性: target 属性指定输入数据结果显示在哪个窗口中，该属性的属性值可以设置为"_blank"、"_self"、"_parent"、"_top"。其中"_blank"表示在新窗口中打开目标文件，"_self"表示在同一个窗口打开，这项一般不用设置，"_parent"表示在上一级窗口中打开。一般使用框架页时经常使用，"_top"表示在浏览器的整个窗口中打开，忽略任何框架。
下面的例子为创建表单，设置表单名称为 form，当用户提交表单时，提交至 action.html页面进行处理，代码如下:
<form id = "form1" name = "form" method = "post" action = "action.html" target = "_blank">
</form>2. <input>表单输入标记
表单输入标记是使用最频繁的表单标记，通过这个标记可以向页面中添加单行文本、多行文本、按钮等。<input>标记的语法格式如下:
<input type = "image" disabled = "disabled" checked = "checked" width = "digit" heigth = "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。 |
| width | 用于指定输入字段的宽度，用于 type 属性值为 image 的情况下。 |
| height | 用于指定输入字段的高度，用于 type 属性值为 image 的情况下。 |
| maxlength | 用于指定输入字段可输入文字的个数，用于type属性值为 text 和 password 的情况下，默认没有字数限制。 |
| readonly | 用于指定输入字段是否为只读。其属性值可以为空值，也可以指定为 readonly。 |
| size | 用于指定输入字段的宽度，当 type 属性为 text 和 password 时，以文字个数为单位，当 type 属性为其他值时，以像素为单位。 |
| src | 用于指定图片的来源，只有当 type 的属性为 image 时有效。 |
| usemap | 为图片设置热点地图，只有当 type 属性为 image 时有效。属性值为 URI，URI 格式为 "#+<map>标记的 name 属性值"。例如，<map>标记的 name 属性值为 Map，该 URI 为 #Map。 |
| alt | 用于指定当图片无法显示时显示的文字，只有当 type 属性为 image 时有效。 |
| name | 用于指定输入字段的名称。 |
| value | 用于指定输入字段默认数据值，当 type 属性为 checkbox 和 radio 时，不可省略此属性，为其他值时，可以省略。当 type 属性为 button、reset 和 submit 时，指定的是按钮上的显示文字；当 type 属性为 checkbox 和 radio 时，指定的是数据项选定时的值。 |
type 属性是<input>标记中非常重要的内容，决定了输入数据的类型。该属性值的可选项如下:
| 可选值 | 描述 | 可选值 | 描述 |
|---|---|---|---|
| text | 文本框 | submit | 提交按钮 |
| password | 密码域 | reset | 重置按钮 |
| file | 文件域 | button | 普通按钮 |
| radio | 单选按钮 | hidden | 隐藏域 |
| checkbox | 复选按钮 | image | 图像域 |
表单标记、表单输入标记测试:
<html>
<head>
</head>
<body>
<form action="07.html">
用户名: <input type = "text" name = "username"><br>
密码: <input type = "password" name = "password"><br>
性别: <input type = "radio" name = "sex" value="男">男
<input type = "radio" name = "sex" value="女">女<br>
密码: <input type = "checkbox" name = "like" value="体育">体育
<input type = "checkbox" name = "like" value="音乐">音乐
<input type = "checkbox" name = "like" value="看书">看书<br>
<input type="submit" value="提交">
<input type="reset" value="重新填写">
</form>
</body>
</html>运行效果:
当点击提交按钮时，将跳转至action属性指定URL地址的页面。
3.<select>...</select>下拉菜单标记
<select>标记可以在页面中创建下拉列表，此时的下拉列表是一个空的列表，要使用<option>标签向列表中添加内容。<select>标记的语法格式如下:
<select name="name" size="digit" multiple="multiple" disabled="disabled">
</select><select>标记的属性:
| 属性 | 描述 |
|---|---|
| name | 用于指定列表框名称。 |
| size | 用于指定列表框中现实的选项数量，超出该数量的选项可以通过拖动滚动条查看。 |
| disabled | 用于指定当前列表框不可使用(变成灰色)。 |
| multiple | 用于让多行列表框支持多选。 |
下拉菜单标记测试:
<html>
<head>
</head>
<body>
<form>
下拉列表框:<select>
<option>数码相机区</option>
<option>摄影器材</option>
<option>MP4</option>
<option>U盘</option>
</select>
多行列表框(不可多选)<select size="2">
<option>数码相机区</option>
<option>摄影器材</option>
<option>MP4</option>
<option>U盘</option>
</select>
多行列表框(可多选)<select size="3" multiple>
<option>数码相机区</option>
<option>摄影器材</option>
<option>MP4</option>
<option>U盘</option>
</select>
</form>
</body>
</html>运行效果:
4.<textarea>多行文本标记
<textarea>为多行文本标记，与单行文本相比，多行文本可以输入更多的内容。通常情况下，<textarea>标记出现在<form>标记的标记内容中。<textarea>标记的语法格式如下:
<textarea cols="digit" rows="digit" name="name" disabled="disabled" readonly="readonly" wrap="value">默认值</textarea><textarea>标记的属性:
| 属性 | 描述 |
|---|---|
| name | 用于指定多行文本框的名称，当表单提交后，在服务器端获取表单数据时应用。 |
| cols | 用于指定多行文本框显示的列数（宽度）。 |
| rows | 用于指定多行文本框显示的行数（高度）。 |
| disabled | 用于指定当前多行文本框不可使用（变成灰色）。 |
| readonly | 用于指定当前多行文本框为只读。 |
| wrap | 用于设置多行文本中的文字是否自动换行。 |
多行文本标记测试:
<html>
<head>
</head>
<body>
<form>
<textarea cols="30" row="10" warp="hard"></textarea>
</form>
</body>
</html>运行效果:
超链接与图片标记
1.超链接标记<a>
超链接标记是页面中非常重要的元素，在网站中实现从一个页面跳转到另一个页面，这个功能就是通过超链接标记完成。超链接标记的语法非常简单。语法如下:
<a href=""></a>属性href用来设定连接到哪个页面。
2.图像标记
在页面中添加图片时通过<img>标记来实现的。<img>标记的语法格式如下:
<img src="url" width="value" height="value" border="value" alt="提示文字">这里的url时以当前项目的WebContent目录作为默认的根目录，例如，WebContent文件夹下有一个子文件夹images，其中有一个显示成功的图片，该图片访问路径就是:"images/success.jpg"。
<img>标记的常用属性:
| 属性 | 描述 |
|---|---|
| src | 用于指定图片的来源。 |
| width | 用于指定图片的宽度。 |
| height | 用于指定图片的高度。 |
| border | 用于指定图片外边框的宽度，默认值为0。 |
| alt | 用于指定当图片无法显示时显示的文字。 |
超链接与图片标记测试:
<html>
<head>
</head>
<body>
<a href="https://www.baidu.com/">跳转到百度页面</a>
<img src="C:\Users\xie\Desktop\百度.png">
</body>
</html>运行效果:
扫一扫
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
