第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>
相关推荐
**第2章：HTML与CSS** HTML（HyperText Markup Language）是网页的基础，CSS（Cascading Style Sheets）则用于定义页面的布局和样式。 1. **HTML基本结构**：标签、属性、文档类型声明等，以及如何组织一个完整的...
总的来说，"HTML5+CSS3网站设计基础教程（第2版）"是一个全面且深入的学习资源，它将帮助初学者和进阶者提升网页设计技能，掌握现代网页开发的最新技术。通过实践教程中的源代码，学习者不仅可以深化理论理解，还能...
这份"HTML5与CSS3基础教程（第八版）源码"提供了丰富的实例和代码，帮助初学者深入理解这两种技术。 HTML5是超文本标记语言的最新版本，其核心在于增强网页的语义性和可访问性。以下是一些HTML5的关键知识点： 1. ...
HTML5和CSS3是现代网页开发的两大核心技术，它们共同为网页提供了丰富的表现力和强大的交互性。HTML5是超文本标记语言（HyperText Markup Language）的第五个版本，而CSS3则是层叠样式表（Cascading Style Sheets）...
《HTML+CSS+JavaScript网页制作案例教程（第2版）》是一本全面涵盖网页制作基础知识与实践技巧的教材。此教学大纲旨在引导学生系统学习网页设计的核心技术，通过理论讲解和实际案例，使学习者掌握网页开发的基本流程...
网页设计与开发是数字时代的重要技能之一，HTML（HyperText Markup Language）、CSS（Cascading Style Sheets）和JavaScript是构建动态、交互式网页的核心技术。本实例教程专注于这些关键技术的实际应用，通过课后...
本教程《网页设计与制作教程（HTML+CSS+JavaScript）第2版》由刘瑞新和张兵义主编，是一份全面的学习资源，旨在帮助初学者和进阶者掌握网页设计的核心技术。这个压缩包包含了完整的教材、电子教案、素材文件以及源...
《Head First HTML与CSS 第2版》是一本深入浅出的Web前端开发教材，适合初学者及有一定经验的开发者进一步巩固基础知识。这本书以其独特的“Head First”教学风格，通过丰富的图像、幽默的语言和互动的方式，使枯燥...
HTML5和CSS3是现代网页开发的两大核心技术，它们共同构建了丰富、动态且响应式的网页界面。HTML5是超文本标记语言的最新版本，它引入了许多新的元素、属性和API，旨在提升网页的结构化和语义化，以及增强其多媒体...
第2章 HTML5网页文档结构 第3章 HTML5网页中的文本和图像 第4章 用HTML5建立超链接 第5章 用HTML5创建表格 第6章 使用表单 第7章 CSS3概述 第8章 CSS3字体与段落属性 第9章 CSS3美化表格和表单样式 第10章 ...
在本压缩包文件“使用HTML语言和CSS开发商业站点第4章.zip”中，我们可以预见到将深入探讨如何使用HTML5和CSS3这两种强大的技术来构建专业的商业网站。这一章节可能涵盖了一系列关键知识点，旨在帮助开发者提升网页...
##### 第二章 初识HTML5 本章重点介绍HTML5的基础知识和技术特点，帮助学生掌握HTML5的基本结构及其在网页设计中的应用。学习目标包括： - **了解HTML5的新特性**：理解HTML5相对于传统HTML版本的改进之处。 - **...
本"网页制作范例HTML+CSS源码"提供了丰富的学习资源，尤其适合初学者进行实践操作，提升网页设计与开发能力。 HTML是用于创建网页内容的语言，它通过各种标签来定义网页结构，如用于定义头部信息，包含网页主体内容...
2. **布局模块**：CSS3的Flexbox和Grid布局系统为复杂的网页布局提供了强大的解决方案，无论屏幕尺寸如何变化，都能保持良好的响应性。 3. **过渡和动画**：CSS3的transition和animation特性使得元素状态变化时可以...
HTML+CSS+DIV 网页设计与布局 本教案旨在教授学生 HTML+CSS+DIV 网页设计与...通过本教案，学生将掌握 HTML+CSS+DIV 网页设计与布局的基本技术和概念，能够独立设计和开发一个基本的网页，具备了基础的网页开发能力。
总的来说，《网页设计与制作项目教程（HTML+CSS+JavaScript）》的源代码提供了丰富的实践素材，不仅涵盖了网页设计的基础知识，也涉及到了进阶技巧。通过研究这些实例，你将能够逐步提升自己的网页设计与制作能力，...
响应式 Web 开发项目教程（HTML5+CSS3+Bootstrap）第 2 版第 1 章 HTML5+CSS3 初体验课后练习 本资源涉及到的知识点包括 HTML5、CSS3、Bootstrap 等响应式 Web 开发技术。下面是对每个知识点的详细解释： 一、 ...
《网页设计与制作项目教程(HTML+CSS+JavaScript)》是一部综合性的教程，旨在帮助学习者深入理解和掌握网页设计的核心技术。本教程结合了HTML、CSS和JavaScript这三种关键技术，它们是构建现代网页的基石。 HTML...