第2章 HTML 与 CSS 网页开发基础
第2章 HTML与CSS网页开发基础
通过阅读本章, 您可以:
- 掌握 HTML 文档的基本结构
- 运用 HTML 的各种常用标记
- 了解 HTML5 新增的部分内容
- 使用 CSS 样式表 控制页面的形式
- 了解 CSS 3 的新特征
2.1 HTML 标记语言
2.1.1 创建第一个HTML文件
<html>
<head>
<title>HTML页面</title>
</head>
<body>
<b>
使用记事本编写HTML代码
</b>
</body>
</html>2.1.2 HTML文档结构
1. <html>标记
2. <head>标记
3. <title>标记
4. <body>标记
2.1.3 HTML常用笔记
1. 换行标记<br>
[例2.1] 创建HTML页面, 实现在页面中输出一首古诗.
<html>
<head>
<title>应用换行标记实现页面文字换行</title>
</head>
<body>
<b>
黄鹤楼送孟浩然之广陵
</b><br>
故人西辞黄鹤楼，烟花三月下扬州。<br>
孤帆远影碧空尽，唯见长江天际流
</body>
</html>2. 段落标记<p></p>
3. 标题标记<h1>至<h6>, 数字越小, 文字的字体越大.
[例2.2] 在HTML页面中定义文字, 并通过标题标记和段落标记设置页面布局.
<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></center>
[例2.3] 使用 居中标记 对页面中的内容进行居中处理
<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>
<center>
<p>主要用于网页程序的开发。随着互联网的发展，越来越 多的企业使用Java语言来开发自己的官方网站，其中不乏世界500强企业。</p>
</center>
<h2>Java ME</h2>
<center>
<p>主要用于嵌入式系统程序的开发。</p>
</center>
</body>
</html>5. 文字列表标记
无序列表<ul><li>...</ul>
[例2.4] 使用无序列表对页面中的文字进行显示
<html>
<head>
<title>无序列表标记</title>
</head>
<body>
编程词典有以下几个品种
<p>
<ul>
<li>Java编程词典
<li>VB编程词典
<li>VC编程词典
<li>.net编程词典
<li>C#编程词典
</ul>
</body>
</html>有序列表<ol><li>...</ol>
[例2.5] 使用有序列表对页面中的文字进行显示
<html>
<head>
<title>有序列表标记</title>
</head>
<body>
编程词典有以下几个品种
<p>
<ol>
<li>Java编程词典
<li>VB编程词典
<li>VC编程词典
<li>.net编程词典
<li>C#编程词典
</ol>
</body>
</html>2.1.4 表格标记<table>
表格标记<table>
标题标记<caption>
表头标记<th>
表格行标记<tr>
单元格标记<td>
[例2.6] 在页面中定义学生成绩表
<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>说明: 表格不仅可以用于显示数据, 在实际开发中, 还常常用来设计页面布局. 在页面中创建一个
表格, 并设置没有边框, 之后通过该表格将页面划分为几个区域, 之后分别对几个区域进行设计,
这是一种非常方便的设计页面的方式.
2.1.5 HTML 表单标记
1. <form>...</form>表单标记
action属性: 该属性用来指定处理表单数据程序的URL地址.
method属性: 该属性用来指定数据被传送到服务器的方式.
name属性: 该属性指定表单的名称.
onSubmit属性: 该属性指定目标文件被打开在哪个窗口中.
target属性=[_blank|_self|_parent|_top]
[例2.7] 定义表单元素.
<form id="form1" name="form" method="post" action="action.html" target="_blank">
2. <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="checkboxvalue">
[例2.8] 首先应用<form>标记添加一个表单,...
<html>
<head>
<title><input>标记的典型应用</title>
</head>
<body><form action="" method="post" name="myform">
<table width="694" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/01.gif" width="694" height="168"></td>
</tr>
</table>
<table width="694" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="103" height="231" valign="top"><img src="images/02.gif" width="35"></td>
<td width="547" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="17%" height="29" align="center">用 户 名：</td>
<td colspan="2"><input name="username" type="text" id="UserName4" maxlength="20"></td>
</tr>
<tr>
<td height="28" align="center">密 码：</td>
<td height="28" colspan="2"><input name="pwd1" type="password" id="PWD14" size="20" maxlength="20"></td>
</tr>
<tr>
<td height="28" align="center">确认密码：</td>
<td height="28" colspan="2"><input name="pwd2" type="password" id="PWD25" size="20" maxlength="20"></td>
</tr>
<tr>
<td height="28" align="center">性 别：</td>
<td colspan="2"><input name="sex" type="radio" class="noborder" value="男" checked>
男
<input name="sex" type="radio" class="noborder" value="女">
女</td>
</tr>
<tr>
<td height="28" align="center">爱 好：</td>
<td colspan="2" class="word_grey"><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="看书">
看书</td>
</tr>
<tr>
<td height="28" align="center" style="padding-left:10px">E-mail：</td>
<td colspan="2" class="word_grey"><input name="email" type="text" id="PWD224" size="50"> </td>
</tr>
<tr>
<td height="34"> </td>
<td width="30%" class="word_grey"><input name="Submit" type="submit" class="btn_grey" value="确定保存">
<input name="Reset" type="reset" class="btn_grey" id="Reset" value="重新填写"></td>
<td width="53%" class="word_grey"><input type="image" name="imageField" src="images/btn_bg.jpg"></td>
</tr>
</table></td>
<td width="44" valign="top"><img src="images/04.gif" width="44"></td>
</tr>
</table>
</form>
</body>
</html>3. <select>...</select>下拉列表框标记
<select name="name" size="digit" multiple="multiple" disabled="disabled">
[例2.9] 在页面中应用<select>标记和<option>标记添加下拉列表框和多行下拉列表框.
<html>
<head></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="select2" size="3" multiple>
<option>数码相机</option>
<option>摄影器材</option>
<option>MP3/MP4/MP5</option>
<option>U盘/移动硬盘</option>
</select>
</body>
</html>4. <textarea>多行文本标记
<textarea cols="digit" rows="digit" name="name" disabled="disabled" readonly="readonly" wrap="value">文本</textarea>
[例2.10] 在页面中创建表单对象, 并在表单中添加一个多行文本框, 文本框的名称为content, 6行30列,
文字换行方式为hard.
<html> <head></head> <body> <form name="form1" method="post" action=""> <textarea name="content" cols="30" rows="5" wrap="hard"></textarea> </form> </body> </html>
2.1.6 超链接与图片标记
1. 超链接标记<a href=""></a>
2. 图片标记<img src="uri" width="value" height="value" border="value" alt="hint">
[例2.11] 在页面中添加表格, 在表格中插入图片和超链接.
<table width="409" height="523" border="1" align="center">
<tr>
<td width="199" height="208">
<img src="images/ASP.NET.jpg" />
</td>
<td width="194">
<img src="images/C#.jpg"/>
</td>
</tr>
<tr>
<td height="35" align="center" valign="middle"><a href="message.html">查看详情</a></td>
<td align="center" valign="middle"><a href="message.html">查看详情</a></td>
</tr>
<tr>
<td height="227"><img src="images/Java .jpg"/></td>
<td><img src="images/VB.jpg"/></td>
</tr>
<tr>
<td height="35" align="center" valign="middle"><a href="message.html">查看详情</a></td>
<td align="center" valign="middle"><a href="message.html">查看详情</a></td>
</tr>
</table>2.2 HTML5 新增内容
2.2.1 新增的元素
<section>元素
[例2.12] 应用<section>标记在页面中定义一个区域.
<section>
<h2>section 标记的使用</h2>
<p>完成百分比: 100%</p>
<input type="button" value="请单击"/>
</section><article>元素
[例2.13] 应用<article>元素在页面中定义一个区域.
<header>元素
<footer>元素
<aside>元素
<article> <header> <h1>苹果美容</h1> </header> <p>苹果素有"水果之王"的美称. 它含有丰富的维生素C,能让皮肤细嫩, 柔滑和白皙. 苹果面膜的做法很简单, 将苹果去皮去核切块后放入搅拌机中搅成泥状, 干性皮肤的美眉在苹果泥中加入新鲜的牛奶或蜂蜜, 油性皮肤的美眉 则可以加入少量蛋清, 搅拌均匀后涂在脸上, 敷10~15分钟后洗净, 你会发现肤色有明显变化哦. </p> <footer> <p>2014-10-11</p> </footer> </article>
[例2.14] 应用<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>2.2.2 新增的input元素类型
email: input元素的类型设置为email, 表示文本框必须输入Email地址.
url: 表示必须输入URL地址.
number: 表示必须输入数值的文本框.
range: 表示必须输入一定范围内数字值的文本框.
2.3 CSS样式表
2.3.1 CSS 规则
选择符, 又称选择器
属性
属性值
2.3.2 CSS 选择器
1. 标记选择器
[例2.15] 定义 a 标记选择器, 在该标记选择器中定义超链接的字体与颜色.
<style>
a{
font-size:9px;
color:#F93
}
</style>2. 类别选择器
[例2.16] 使用类别选择器控制页面中字体的样式.
<!--以下为定义的CSS样式-->
<style>
.one{ <!--定义类名为one的类别选择器-->
font-family:宋体; <!--设置字体-->
font-size:24px; <!--设置字体大小-->
color:red; <!--设置字体颜色-->
}
.two{
font-family:宋体;
font-size:16px;
color:red;
}
.three{
font-family:宋体;
font-size:12px;
color:red;
}
</style>
</head>
<body>
<h2 class="one"> 应用了选择器one </h2><!--定义样式后页面会自动加载样式-->
<p> 正文内容1 </p>
<h2 class="two">应用了选择器two</h2>
<p>正文内容2 </p>
<h2 class="three">应用了选择器three </h2>
<p>正文内容3 </p>
</body>可以同时应用多个类别选择器, 例如 <h2 class="size color">...</h2>
3. id选择器
[例2.17] 使用 id选择器 控制页面中字体的样式.
<style> //定义 id选择器
#first{
font-size:18px
}
#second{
font-size:24px
}
#three{
font-size:36px
}
</style>
<body>
<p id="first"> ID 选择器 </p>
<p id="second"> ID 选择器 </p>
<p id="three"> ID 选择器 </p>
</body>2.3.3 在页面中包含 CSS
1. 行内样式
[例2.18] 通过行内定义样式的形式, 实现控制页面文字的颜色和大小.
<table width="200" border="1" align="center"> <!--在页面中定义表格--> <tr> <td><p style="color:#F00; font-size:36px;">行内样式一</p></td><!--在页面文字中定义CSS样式--> </tr> <tr> <td><p style="color:#F00; font-size:24px;">行内样式二</p></td> </tr> <tr> <td><p style="color:#F00; font-size:18px;">行内样式三</p></td> </tr> <tr> <td><p style="color:#F00; font-size:14px;">行内样式四</p></td> </tr> </table>
2. 内嵌式
3. 链接式
<link rel='stylesheet' href='path' type='text/css'>
[例2.19] 通过链接式样式表的形式在页面中引入CSS样式.
<title>通过链接形式引入CSS样式</title>
<link href="css.css"/> <!--页面引入CSS样式表-->
</head>
<body>
<h2>页面文字一</h2> <!--在页面中添加文字-->
<p>页面文字二</p>
</body>2.4 CSS 3 的新特征
2.4.1 模块与模块化结构
basic box model 定义各种与盒子相关的样式
Line 直线
List 列表
Text 文字
Color 颜色
Font 字体
Background and border 定义各种与背景和边框相关的样式
Paged Media 定义各种页眉, 页脚, 页数等页面元素数据的样式
Writing Modes 定义页面中文本数据的布局方式
2.4.2 一个简单的CSS 3实例
[例2.20] 在CSS 2中使用 DIV 层对页面中的文字添加彩色边框.
<title>使用CSS2对页面中的文字添加彩色边框</title>
<style>
#boarder {
margin:3px;
width:180px;
padding-left:14px;
border-width:5px;
border-color:blue;
border-style:solid;
height:104px;
}
</style>
</head>
<body>
<div id="boarder"> 文字一<br>
文字二<br>
文字三<br>
文字四<br>
文字五<br>
</div>
</body>[例2.21] 在CSS 3中使用border-radius属性对页面中的文字添加边框
<style>
#boarder {
border:solid 5px blue;
border-radius:20px;
-moz-border-radius:20px;
padding:20px;
width:180px;
}
</style>
</head>
<body>
<div id="boarder"> 文字一<br>
文字二<br>
文字三<br>
文字四<br>
文字五<br>
</div>
</body>2.5 小结
本章介绍了网页设计中不可缺少的内容, 即HTML标记与CSS样式. HTML是构成网页的灵魂.
对于制作一般的网页, 尤其是静态网页来说, HTML完全可以胜任, 但如果要制作漂亮的网页, CSS是不可缺少的.
本章除了对HTML与CSS样式表的基础内容进行讲解外, 还对2010年较受关注的HTML5与CSS3 进行了简单的介绍,
以此来带领广大读者进入Web学习之旅.
2.6 实践与练习
1. 创建HTML页面, 实现在页面中使用删除线样式标注商品特价.
<html> <head> <title>使用删除线样式标注商品特价</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <img src="bike.jpg" width="200" height="165"><br> <span style="text-decoration:line-through">原价：796（元）</span> <span>现价：399（元）</span> </body> </html>
2. 创建HTML页面, 在其中添加表格, 实现在浏览网站信息时鼠标经过表格的某个单元格, 会显示相关的信息.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table width="98%" height="114" border="0" cellpadding="0" cellspacing="1" bgcolor="#666666">
<tr>
<td bgcolor="#FFFFFF" title="单元格1">单元格1</td>
<td bgcolor="#FFFFFF" title="单元格2">单元格2</td>
<td bgcolor="#FFFFFF" title="单元格3">单元格3</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" title="单元格4">单元格4</td>
<td bgcolor="#FFFFFF" title="单元格5">单元格5</td>
<td bgcolor="#FFFFFF" title="单元格6">单元格6</td>
</tr>
<tr>
<td bgcolor="#FFFFFF" title="单元格7">单元格7</td>
<td bgcolor="#FFFFFF" title="单元格8">单元格8</td>
<td bgcolor="#FFFFFF" title="单元格9">单元格9</td>
</tr>
</table>
</body>
</html>3. 创建HTML页面, 并在其中添加超链接, 实现当鼠标经过超链接时, 鼠标指针变为不同的形状.
<html> <head> <title>改变鼠标的形状</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <a href="#" style="cursor:url(note.ico);">将鼠标移动到我上，鼠标指针将变形</a> </body> </html>