黑马程序员技术交流社区

标题: 【上海校区】【同步教程】JavaWeb前端-day01（Html） [打印本页]

作者: shjava 时间: 2017-9-15 17:41
标题: 【上海校区】【同步教程】JavaWeb前端-day01（Html）
本帖最后由 shjava 于 2017-9-17 15:18 编辑

【同步教程】- HTML

第一章 HTML

u 了解网页的形成

u 了解常用浏览器

u 了解Web标准

u HTML概述

u 标签

本章主要对HTML语言的标签进行详细讲解。

1.1 网页的形成

我们在Chrome浏览器的地址栏中输入sh.itcast.cn会看到如图1-1所示的网页。

图1-1 网页的形成过程

我们在打开的这个网页上点击鼠标右键---检查如图1-2，会看到如图1-3所示的代码。

图1-2 网页的形成过程

图1-3 网页的形成过程

通过图1-1,1-2,1-3我们可以得出以下结论：网页是通过浏览器解析代码来产生的。如图1-4所示：

图1-4 网页的形成

1.2 常见浏览器简介

浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互的一种软件。世界上比较出名的五大浏览器分别是：IE浏览器，火狐浏览器，Chrome（谷歌浏览器），苹果浏览器和欧朋浏览器。如图1-5所示：

图1-5 常见浏览器

1.3 Web标准

Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。主要包括结构、表现、和行为三个方面。

1.3.1 W3C简介

W3C是万维网联盟（World Wide Web Consortium）的英文简称。万维网联盟创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。

1.3.2 Web标准

由于网页主要由结构（Structure）、表现（Presentation）和行为（Behavior）三部分组成所以对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer ManufacturersAssociation）的ECMAScript标准。

1、结构标准语言编辑

结构标准语言主要是指HTML语言，它主要负责从语义的角度搭建页面结构。如图1-7所示：

图1-7 结构语言

2、表现标准语言编辑

表现标准语言主要是指层叠样式表（外语缩写：CSS）。它负责从审美的角度美化页面。如图1-8所

示：

图1-8 CSS样式

3、行为标准编辑

行为标准语言主要是指JavaScript。它主要通过提供用户与网页动态的交互来提升用户体验。JavaScript代码如图1-9所示：

图1-9 JavaScript代码

1.4 HTML概述

1.4.1 什么是HTML

HTML是英文Hyper Text Markup Language英文缩写，翻译成中文即“超文本标记语言”。超文本指

的是一种可以包含图片、链接、甚至音乐、程序等非文字元素的文件类型。

1.4.2 HTML语言的特点

HTML语言有如下特点：

1. HTML文件不需要编译，直接使用浏览器执行即可。

2. HTML文件的扩展名是 *.html。

3. 标签名都是预先定义好的，我们只需要了解其功能即可。

4. 标签名不区分大小写，通常都是小写。

1.5 创建一个HTML文件

由以上HTML语言的特点，我们知道HTML文件就是一个由标签组成，以.html为扩展名的文件。下面我们将创建一个简单的HTML文件。

第一步：在电脑桌面上点击鼠标右键创建一个名为demo的txt文件。

第二步：在demo.txt文件中编写如【文件1-1】所示代码。

【文件1-1】创建html文件

[HTML] 纯文本查看 复制代码

有人说，我很强壮

有人说，我很strong强壮strong

有人说，我很<strong>强壮</strong>

第三步：将这个txt文件的文件名由demo.txt改为demo.html。

第四步：用浏览器打开demo.html文件，效果如图1-10所示：

图1-10 创建一个HTML文件

1.6 HTML骨架

一个完整的HTML文档必须包含3个部分：文档声明、文档头部和文档主体。如【文件1-2】所示：

【文件1-2】HTML骨架

[HTML] 纯文本查看 复制代码

<!DOCTYPE html> <!--文档头声明-->

<html>   <!--页面中最大的一个标签，也称之为根标签-->

<head>   <!--头部标签，通常里面放置一些配置信息-->

      <meta charset="UTF-8"/>   <!--定义了字符集，不写会乱码（UTF-8：国际通用字符集）-->

      <title></title> <!--定义了页面的标题-->

  </head>

  <body>  <!--页面的主体标签，绝大部分代码都是写在这里面的-->

  </body>

 </html>

1.6.1 文档声明

如【文件1-2】中的<!DOCTYPEhtml>部分就是文档声明，<!DOCTYPE>声明不是一个 HTML 标签，

它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。

拓展：常见文档声明

1.HTML5的文档声明

html5的文档声明如【文件1-2】所示：

【文件1-2】html5的文档声明

[HTML] 纯文本查看 复制代码

1. <!DOCTYPE html>

2.HTML5之前的文档声明

在HTML5之前，文档声明一般有三种类型：严格型（strict），过渡型（transitional），框架（frameset）。这三种文档声明的具体书写方式如下：

【文件1-3】严格型

[HTML] 纯文本查看 复制代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

【文件1-4】过渡型（transitional）

[HTML] 纯文本查看 复制代码

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"

      "http://www.w3.org/TR/html4/loose.dtd">

【文件1-5】框架（frameset）

[HTML] 纯文本查看 复制代码

<!DOCTYPE HTMLPUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

     "http://www.w3.org/TR/html4/frameset.dtd">

注意：

文档声明必须首行、顶格，对大小写不敏感。

1.6.2 文档头部<head>

文档头部<head>标签内部的信息描述了文档的一些基本的属性和信息（可以呈现的是title和icon）。<head>标签内能书写如下标签：

1.文档标题-title

文档标题是写在<title></title>标签内部的内容。如【文件1-6】所示：

【文件1-6】文档标题-title

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

    <html lang="en">

   <head>

    <title>我是HTML文档标题</title>

     <metacharset="UTF-8">

   </head>

文档标题的作用：

【a】定义浏览器工具栏中的标题；

【b】提供页面被添加到收藏夹时显示的标题；

【c】显示在搜索引擎结果中的页面标题；

注意：

在所有的HTML文档中。<title>都是必须的。

2.meta标签

meta标签的写法如【文件1-7】所示：

【文件1-7】meta标签的写法

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>我是HTML文档标题</title>

     <linkrel="stylesheet" href="../css/home.css">

 </head>

meta标签的作用：

【a】.字符编码，文档的编码一定要与文件本身的编码保持一致，否则会出现乱码，推荐使用UTF-8编码

【b】SEO常用到的关键词keywords和描述description

【c】作者、版权

【d】定时跳转(让网页多少秒刷新，或跳转到其他网页)

【e】期限(指定网页在缓存中的过期时间)

【f】缓存

【g】cookie

【h】viewport:视口，移动端常用

3.link标签

link标签的写法如【文件 1-8】所示：

【文件1-8】link标签

[HTML] 纯文本查看 复制代码

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

     <title>我是HTML文档标题</title>

     <link rel="stylesheet"href="../css/home.css">

 </head>

link标签的作用：

【a】引入图标：

[HTML] 纯文本查看 复制代码

<link rel="shortcut icon" href="ico.ico"/>

【b】引入外部CSS样式表：

[HTML] 纯文本查看 复制代码

  <link rel="stylesheet" type="text/css"href="mystyle.css" />

4.style标签和script标签

style标签的作用是引入外部的CSS样式表，或者直接在style标签内部书写CSS样式。

script标签的作用是引入外部的javascript脚本文件或者是直接在script标签内部书写javascript脚本。

1.6.3 文档主体<body>

在主体<body>标签内部书写的内容才是真正在页面上显示的内容。

1.7 HTML标签分类

HTML语言是一种标签语言，根据标签是否成对出现可将HTML标签分为双标签和单标签。

1.7.1 双标签

双标签是有开始标签和结束标签组成的标签，如<body></body>。

1.7.2 单标签

单标签只有一个标签，以“/”结尾。如<br/>,<hr/>。

1.8 注释标签

注释，是对代码进行解释说明的文字，方便开发人员快速地读懂代码，是不会在页面上显示出来的。

HTML中的注释格式如下：。

1.9 标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标记，HTML提供了6个等级的标题，即<h1>、

<h2>、<h3>、<h4>、<h5>和<h6>，应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。如图1-11所示：

图1-11 标题标签

1.10 段落标签

在网页中要把文字有条理地显示出来，离不开段落标记，就如同我们平常写文章一样，整个网页也可以分为若干个段落。段落标签的形式是：<p></p>。浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）如图1-12所示：

图1-12 段落标签

1.11 字体标签

字体标签是<font></font>。通过在font标签中添加一些属性，可以把标签包围的内容加上字号，颜色，

粗细等样式。用法如【文件1-3】所示：

【文件1-3】字体标签

[HTML] 纯文本查看 复制代码

<font size="7"color="red" face="微软雅黑">我爱你</font>

字体标签的常用属性如表格【表格1-1】所示

【表格1-1】font标签的常用属性

color	颜色	#000黑色 #fff白色 red红色 green绿色
size	大小	最小1，最大7，默认3
face	字体	只能显示本地已存在的字体

字体标签的用法及显示效果如图1-13所示：

[attach]186274[/attach]

图1-13 字体标签的用法

1.12 标签属性

使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。标签属性的写法需要注意以下几点：

1.标签可以拥有多个属性；

2.标签属性必须写在开始标签中；

3.标签属性必须写在标签名后面；

4.多个标签属性在书写时不分先后顺序；

5.标签名与属性，属性和属性之间均以空格分开；

具体写法如图1-13所示：

图1-13 标签属性

注意：

1. 属性和起始标签之间有一个空格，属性与属性之间也要有空格。

2. 无论是单双引号都要在英文状态下输入。

1.13 图像标签

在HTML中，图像标签是用<img>定义的。<img>标签是一个单标签，意思是说关于<img>标签的操作

都是使用标签属性来完成的。<img>标签的常用属性如【表格1-2】所示

【表格1-2】 img标签常用属性及其作用

src	图片的路径地址	必写属性，否则看不到图片
width	宽度	如果只设置其中一项，那么图片会等比例缩放
height	高度	如果只设置其中一项，那么图片会等比例缩放
title	提示文本	鼠标悬停在图片上方会出现的文字信息 file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image028.jpg
alt	替换文本	图片加载失败的时候才会出现的文字信息 file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image030.jpg
border	边框	只能定义边框的粗细

代码示例如【文件1-9】所示：

【文件1-9】img标签代码示例

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html lang="en">

 <head>

    <metacharset="UTF-8">

     <title>图像标签</title>

 </head>

 <body>

     <img src="../images/lyf19.jpg"width="497" height="768" title="女神1号"

     alt="这里曾经是刘亦菲1号"border="1">

 </body>

 </html>

1.14 常用对比（字体效果）标签

常用的字体效果标签如【表格1-3】所示：

【表格1-3】常用字体效果标签

加粗	<strong></strong>	<b></b>
倾斜	<em></em>	<i></i>
下划线	<ins></ins>	<u></u>
删除线	<del></del>	<s></s>
注意：红色部分带有强调语气的作用，针对搜索引擎而言。

使用示例及效果如图1-14所示：

图1-14 常用字体效果标签

1.15 特殊字符

HTML中有些字符如“<”（大于号）和“>”（小于号）本身就是HTML标签的组成部分，如果直

接在HTML文件中书写“<”或“>”会被当成HTML标签解析，而无法正常显示我们想要看到的大于号或者小于号。此时，我们就需要使用到HTML的特殊字符来表示。常用的特殊字符如【表格1-4】所示：

【表格1-4】常用特殊字符

	空格符
<	小于号	<
>	大于号	>
©	版权符	©
注意：大于号和小于号很特殊，想以文本形式出现在页面中，必须用特殊字符替代！

代码示例及效果如图1-15所示：

图1-15 特殊字符

1.16 列表

在一些网页中，我们常常需要将一些数据整齐地排列，如图1-16所示。这时，我们就需要用到相关的

列表标签了。

图1-16 列表标签

列表标签可分为无序列表和有序列表。

1.16.1 无序列表

无序列表及没有序号的列表，列表中的每一项前面会显示一些符号。无序列表的代码格式如【文件1-10】

所示：

【文件1-10】无序列表

[HTML] 纯文本查看 复制代码

<ul>

  <li>内容一</li>

  <li>内容二</li>

</ul>

列表前的符号是通过type属性来操作的，常用的type属性如【表格1-5】所示：

type="circle"	空心圆
type="disc"	默认值，实心黑色圆
type="square"	实心黑色正方形
注意：写在ul身上是所有li改变，写在li身上是单个改变

代码及效果如图1-17所示：

图1-17 无序列表

1.16.2 有序列表

有序列表即列表前有序号的列表。列表中的每一项前会有序号标识，代码格式如【文件1-11】所示：

【文件1-11】有序列表

[HTML] 纯文本查看 复制代码

<ol>

  <li>内容一</li>

 <li>内容二</li>

</ol>

有序列表前的序号也是通过type属性来操作的，不同的序号需要添加不同的type属性。常用的type

属性如【表格1-6】所示：

【表格1-6】有序列表

type="1"	默认值，1、2、3...
type="a"	小写的英文字母，a、b、c...
type="A"	大写的英文字母，A、B、C...
type="i"	小写的罗马数字，i、ii、iii...
type="I"	大写的罗马数字，I、II、III...
注意：写在ol身上是所有li改变，写在li身上是单个改变

有序列表的写法及效果如图1-18所示：

图1-18 有序列表

1.17 超链接

超链接也叫超级链接或链接。页面中必不可少的一个标签，互联网正是因为有了超链接而变得丰富多

彩，我们可以通过超链跳转页面、跳转图片等相应的操作。

超链接在HTML中是通过<a></a>标签来完成的，<a></a>标签的写法如【文件1-12】所示：

【文件1-12】超链接

[HTML] 纯文本查看 复制代码

<a href="跳转的路径地址">链接</a>

超链接标签的常用属性有href和target，如表格【1-7所示】

【表格1-7】超链接标签的常用属性

href	跳转的路径地址	必写属性
target	打开方式	_blank 在新窗口中打开被链接文档。 _self 默认。在相同的框架中打开被链接文档。 _parent 在父框架集中打开被链接文档。 _top 在整个窗口中打开被链接文档。 framename 在指定的框架中打开被链接文档。

超链接代码实现及效果如图1-19所示：

图1-19 超链接

1.17.1 外部链接

外部链接是通过超链接跳转到一个外部的链接地址，这个外部的地址前必须添加http://如【文件1-13】

所示：

【文件1-13】外部链接

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html lang="en">

<head>

    <metacharset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <a href="http://www.baidu.com">百度</a>

 </body>

 </html>

1.17.2 空链接

如果我们希望这是一个链接，但是用户单击之后又不需要跳转，那么这种称之为空链接，也叫做假链接。空链接的写法有三种，如【文件1-14】所示：

【文件1-14】空链接

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

  <htmllang="en">

  <head>

      <meta charset="UTF-8">

      <title>Title</title>

  </head>

  <body>

      <a href="#">空链接</a>

     <a href="javascript:;">空链接</a>

     <a href="javascript:void(0);">空链接</a>

 </body>

 </html>

1.17.3 锚点链接

HTML中的链接，正确的说法应该称作"锚点"，它命名锚点链接（也叫书签链接）常常用于那些内容庞大繁琐的网页，通过点击命名锚点，不仅让我们能指向文档，还能指向页面里的特定段落，更能当作"精准链接"的便利工具，让链接对象接近焦点。便于浏览者查看网页内容。类似于我们阅读书籍时的目录页码或章回提示。在需要指定到页面的特定部分时，标记锚点是最佳的方法。

锚点标签的写法：

1. 首先定义一个锚点a标签，定义一个name的名字，这个操作也称之为抛锚。

2. 创建点击跳转的链接a标签，href写上#锚点名实现一个绑定的操作。

3. 有的时候可能空标签有兼容性问题，可以手动敲一个空格进去就可以解决。

如【文件1-15】所示：

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

 <htmllang="en">

  <head>

      <meta charset="UTF-8">

     <title>Title</title>

  </head>

  <body>

     设置锚点：        <aname="a"> </a>

     设置点击跳跃：<a href="#a">位置</a>

 </body>

 </html>

锚点标签的实际应用如【文件1-16】所示：

【文件1-16】锚点标签的实际应用

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

 <html>

  <head>

     <meta charset="UTF-8">

     <title></title>

  </head>

  <body>

 <h1>CSS禅意花园</h1>

  <hr />

来源：百度 发表时间：2013-12-24

 <hr />

 <ahref="#gybs">关于本书</a>

<ahref="#bjtj">编辑推荐</a>

 <ahref="#nrjj">内容简介</a>

 <ahref="#mttj">媒体推荐</a>

 <a name="gybs"></a>

<h2>关于本书</h2>

 <imgsrc="img/cyhy.jpg" />

 <p>作者：（美）莫里，译者：陈黎夫等，于2007年人民邮电出版社出版，全书剖析"cSS禅意花园"收录的6件设计作品，这些作品围绕一个主要的设计概念展开，如文字的使用等。本书适合网站设计人员和网站设计爱好者阅读，更是专业网站设计师必读的经典著作。</p>

 <aname="bjtj"></a>

 <h2>编辑推荐</h2>

 <p>★Web视觉艺术设计的王者之书!</p>

<p>★作者是世界著名的网站设计师，书中的范例来自网站设计领域最著名的网站——CSSZen Garden（CSS禅意花园）。 CSS禅意花园现在已发展到包含将近150件设计作品的规模，这些作品来自世界各地，树立了使用CSS设计高质量网站的标准。本书将引领读者探索"CSS禅意花园"中最激动人心的36件设计作品。</p>

 <p>[跟书名一样美的书，和书的内容一样出色的译者]</p>

<p>书的排版和样式挺独特，打开看以后真得非常赏心悦目，色彩、字体、版式都让人很舒服。</p>

 <p>让我很佩服的是这位译者，不是简单的翻译，而是把作者很多遗漏的内容、过时的信息都补充了，这种务求完美的责任心值得大大地赞一下。——网友</p>

 <aname="nrjj"></a>

 <h2>内容简介</h2>

 <p>全书分为两个主要部分。第1章为第一部分，讨论网站"CSS禅意花园"及其最基本的主题，包含正确的标记结构和灵活性规划等。第二部分包括6章，占据了本书的大部分篇幅。每章剖析"cSS禅意花园"收录的6件设计作品，这些作品围绕一个主要的设计概念展开，如文字的使用等。通过探索36件设计作品面临的挑战和解决的问题，读者将洞悉主要的Web设计原则以及它们运用的CSS布局技巧，理解CSS设计的精髓，恰当地处理图形和字体来创建界面优美、性能优良且具有强大生命力的网站。</p>

 <p>本书原版书自出版以来持续畅销，受到众多网站设计师的推崇。本书适合网站设计人员和网站设计爱好者阅读，更是专业网站设计师必读的经典著作。</p>

 <aname="mttj"></a>

 <h2>媒体推荐</h2>

<p>本书是我读过的同类图书里唯一带有设计理念的CSS书籍，它在内容上侧重于趋于完美的理念设计web页面．然后告诉你如何应用CSS来布局。作者向我们传达了"设计理念"为主，"技术"为辅的网页设计思路。书中有很多难以描述的巧妙设计思路，使得设计效果富有生命力，这种生命力不是用技术来实现的，而是完整的由作者的脑海中传达给读者，告诉读者他思考的设计理念。比如我看了第二章的设计方面，作者点缀贝壳，因为贝壳藏身海底，设计者在贝壳上点缀了些海洋锈迹，这个效果看起来相当舒服，富有层次感。真是让我受益匪浅。</p>

<p>就我个人感觉来说，这本书绝对是web设计领域的经典之作。妙就妙在不是教你如何设计，而是引导你的设计理念，没有理念，再高的技术做出来的东西也不过如此。一个人的能力是多方面的，技术只不过是其中的一环；绚丽的效果并不代表一切，就好像能做漂亮衣服的裁缝不一定会选衣服和搭配服饰。在设计领域内，设计理念永远走在技术前面。</p>

 <p>——中国最大IT技术社区CSDN网站 首席网页设计师武悦</p>

 </body>

 </html>

1.18 表格

table控件主要用于在web页面上创建表格，在早期的前端开发中，我们通过使用表格来进行布局，对页面进行布局和划分，也就是将页面分为一块一块的地方，每一块显示相应的内容。

1.18.1 简单的表格

一个简单的表格首先由一个<table>标签定义一个表格区域，表格中的每一行由<tr>定义，行中的每一

单元格由标签<td>来定义。简单表格的编写如【文件1-17】所示：

【文件1-17】简单的表格

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

 <html>

  <head>

      <meta charset="UTF-8">

     <title></title>

  </head>

  <body>

      <table border="1"width="200" height="150">

           <tr>

              <td>刘德华 </td>

              <td>男</td>

              <td>18</td>

          </tr>

         <tr>

             <td>张学友 </td>

             <td>男</td>

             <td>28</td>

          </tr>

         <tr>

              <td>黎明 </td>

             <td>男</td>

              <td>38</td>

         </tr>

         <tr>

             <td>郭富城 </td>

             <td>男</td>

              <td>48</td>

         </tr>

      </table>

 </body>

 </html>

1.18.2 带有首行标题的表格

如果希望某一个单元格是一个标题，可以把单元格标签td改写成th，标题自带加粗和居中的页面显示：效果。如【文件1-18】所示：

【文件1-18】带有首行标题的表格

[HTML] 纯文本查看 复制代码

1.  <!DOCTYPE html>

2.  <html>

3.  <head>

4.      <meta charset="UTF-8">

5.      <title></title>

6.  </head>

7.  <body>

8.      <table border="1"width="200" height="150">

9.           <tr>

10.              <th>姓名</th>

11.              <th>性别</th>

12.              <th>年龄</th>

13.          </tr>

14.         <tr>

15.             <td>刘德华 </td>

16.             <td>男</td>

17.             <td>18</td>

18.         </tr>

19.         <tr>

20.             <td>张学友 </td>

21.             <td>男</td>

22.             <td>28</td>

23.         </tr>

24.         <tr>

25.             <td>黎明 </td>

26.             <td>男</td>

27.             <td>38</td>

28.         </tr>

29.         <tr>

30.             <td>郭富城 </td>

31.             <td>男</td>

32.             <td>48</td>

33.         </tr>

34.     </table>

35. </body>

36. </html>

1.18.3 表格中常用的属性

如果一个表格不加任何属性修饰，如【文件1-19】所示：

【文件1-19】不添加任何属性的表格

[HTML] 纯文本查看 复制代码

1.  <!DOCTYPE html>

2.  <html>

3.  <head>

4.      <meta charset="UTF-8">

5.      <title></title>

6.  </head>

7.  <body>

8.       <table>

9.           <tr>

10.              <td>刘德华 </td>

11.              <td>男</td>

12.              <td>18</td>

13.          </tr>

14.          <tr>

15.              <td>张学友 </td>

16.              <td>男</td>

17.              <td>28</td>

18.          </tr>

19.          <tr>

20.              <td>黎明 </td>

21.              <td>男</td>

22.              <td>38</td>

23.          </tr>

24.          <tr>

25.              <td>郭富城 </td>

26.              <td>男</td>

27.              <td>48</td>

28.          </tr>

29.      </table>

30. </body>

31. </html>

这个表格的效果如图1-20所示：

图1-20

如果想让表格显示边框，表格中的文字表现出一些效果。我们需要对表格添加一些属性，常用的属性如【表格1-8】所示：

【表格1-8】表格的常用属性：

border	边框
cellspacing	单元格与单元格之间的距离
cellpadding	单元格与内容之间的距离
align	水平对齐方式 left左边 center中间 right右边
bgcolor	背景颜色
rowspan	跨行
colspan	跨列
width	宽度
height	高度

这些属性的用法如图1-21所示：

file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image046.jpg

图1-21 表格常用属性的用法

1.18.4 合并单元格

我们在使用table做表格时，有时会遇到需要跨行或者跨列的表格。这时就需要将单元格进行合并。

合并单元格主要使用到两个属性：rowspan，colspan。

rowspan是跨行合并，如图1-22所示：

图1-22 跨行合并

colspan是跨列合并，如图1-23所示：

图1-23跨列合并

编写一个有合并单元格的表格的思路：

第一步：首先做一个完整的表格

第二步：然后再去研究跨行或者跨列的单元格即可。

第三步：在需要使用跨行或者跨列的单元格上使用colspan属性或者rowspan

第四步：手动删除被合并掉的单元格

代码示例如【文件1-20】

【文件1-20】合并单元格

[HTML] 纯文本查看 复制代码

1.  <!DOCTYPE html>

2.  <html lang="en">

3.  <head>

4.      <meta charset="UTF-8">

5.      <title>我是HTML文档标题</title>

6.      <link rel="stylesheet"href="../css/home.css">

7.  </head>

8.  <body>

9.  <table border="1"cellpadding="0" cellspacing="0" width="300"height="300">

10.     <tr>

11.         <td colspan="3"></td>

12.         <td></td>

13.     </tr>

14.     <tr>

15.         <td rowspan="2"></td>

16.         <td></td>

17.         <td></td>

18.         <td></td>

19.     </tr>

20.     <tr>

21.         <td></td>

22.         <td></td>

23.         <td></td>

24.     </tr>

25. </table>

26. </body>

27. </html>

1.19 框架标签

frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。<frameset>标签，是多个窗口页面整合在一起的一个集合（框架集）。每一个页面（框架）都是单独文档，需要使用子标签<frame>来确定页面的位置。<frameset>通过列和行来确定整体布局，使用cols确定列数，使用rows确定行数。多个<frameset>可以嵌套使用。

首先我们需要使用<frameset><frameset>标签定义框架的范围。然后使用<frame>代表一个框架。如果只是在<frameset>标签中添加<frame>标签，那么我们是不知道这2个框架是上下划分还是左右划分的，所以我们需要使用<framseset>标签的rows、cols属性将框架设置为上下划分或者左右划分。

1.19.1 简单的网站布局

常见的网站后台管理系统布局由头部，左侧导航栏和右侧主体区域组成。如图1-24所示：

图1-24 常见网站后台管理页面布局

1.19.2 制作步骤1.整体布局

通过分析图1-24所示的布局，我们需要将整个页面分为上下两个部分。我们可通过如【文件1-21】所示的代码实现：

【文件1-21】整体布局index.html

[HTML] 纯文本查看 复制代码

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <meta charset="UTF-8">

5. <title></title>

6. </head>

7. <frameset rows="20%,*" noresize>

8. 

9. </frameset>

10. </html>

2. 将下面的一部分进行左右划分
然后我们需要将下面一个frame进行左右划分，但是我们只学过将<frameset>进行划分，所以我们需要将下面一个frame转换为<frameset>标签，然后再对下面的<frameset>标签进行左右划分。如【文件1-22】所示：
【文件1-22】布局index.html

[HTML] 纯文本查看 复制代码

1. <!DOCTYPE html>

2. <html>

3. <head>

4. <meta charset="UTF-8">

5. <title></title>

6. </head>

7. <frameset rows="20%,*" noresize>

8. <frame/>

9. <frameset cols="20%,*">

10. <frame/>

11. <frame/>

12. </frameset>

13. </frameset>

14. </html>

3.在每一个frame中填充内容

通过上面两步，布局已见雏形。下面我们就需要使用html文件来填充frame了。代码实现如下：

【文件1-23】index.html

[HTML] 纯文本查看 复制代码

1.  <!DOCTYPE html>

2.  <html>

3.      <head>

4.          <meta charset="UTF-8">

5.          <title></title>

6.      </head>

7.      <frameset rows="20%,*"noresize>

8.          <frame src="top.html" />

9.          <frameset cols="20%,*">

10.             <frame src="left.html" />

11.             <frame src="right.html"/>

12.         </frameset>

13.     </frameset>

14. </html>

在index.html所在目录分别创建top.html,left.html和right.html。

【文件1-24】top.html

[HTML] 纯文本查看 复制代码

1.  <!DOCTYPE html>

2.  <html>

3.      <head>

4.          <meta charset="UTF-8">

5.          <title></title>

6.      </head>

7.      <body>

8.          <h1>top</h1>

9.      </body>

10. </html>

【文件1-25】left.html

[HTML] 纯文本查看 复制代码

1.  <!DOCTYPE html>

2.  <html>

3.      <head>

4.          <meta charset="UTF-8">

5.          <title></title>

6.      </head>

7.      <body>

8.          <h1>left</h1>

9.          <a href="../07 案例一.html">案例一</a>

10.     </body>

11. </html>

【文件1-26】right.html

[HTML] 纯文本查看 复制代码

1.  <!DOCTYPE html>

2.  <html>

3.      <head>

4.          <meta charset="UTF-8">

5.          <title></title>

6.      </head>

7.      <body>

8.          <h1>right</h1>

9.      </body>

10. </html>

4.指定左侧超链接的跳转目标区域

我们希望单击左边<frame>里面的链接的时候，右边的<frame>会切换内容，于是乎我们可以给右边的这个<frame>添加一个name属性，给他取个名字。接着通过左边<frame>里面的<a>标签的target属性值指向这个<frame>标签的name的属性值。仔细看下面代码加粗有底色的部分！

【文件1-27】index.html

[HTML] 纯文本查看 复制代码

1.  <!DOCTYPE html>

2.  <html>

3.      <head>

4.          <meta charset="UTF-8">

5.          <title></title>

6.      </head>

7.      <frameset rows="20%,*"noresize>

8.          <frame src="top.html"/>

9.          <frameset cols="20%,*">

10.             <frame src="left.html"/>

11.              <framesrc="right.html" name="right" />

12.         </frameset>

13.     </frameset>

14. </html>

【文件1-28】left.html

[HTML] 纯文本查看 复制代码

1.  <!DOCTYPE html>

2.  <html>

3.      <head>

4.          <meta charset="UTF-8">

5.          <title></title>

6.      </head>

7.      <body>

8.          <h1>left</h1>

9.           <a href="../07 案例一.html"target="right">案例一</a>

10.     </body>

11. </html>

1.20 表单

表单是我们日常上网经常接触的一类页面。比如，第一次使用淘宝时需要注册一个账号，下单时需要

登录，付款时需要填写订单信息等等，这些都是表单。在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息三个部分组成的。因为提示信息通常是在用户与浏览器交互时，由JavaScript语言生成的，将会在javascript的相关章节进行说明。本章将主要针对表单域和表单元素进行详细讲解。

1.20.1 表单域

所谓表单域就是放置表单的区域。表单域是由<form>标签构成，如【文件1-29】所示：

【文件1-29】表单域

[HTML] 纯文本查看 复制代码

1.  <form action="该表单提交的地址"method="get/post" name="该表单名称"></form>

<form>标签中的常用属性：

1.action属性：action属性中填写的是这个表单提交的地址。

2.method：method属性中填写的是提交这个表单的（浏览器向服务器的）请求方式。常用的请求方式

有get和post。

get请求：form表单get请求的请求参数会拼接在地址栏中，请求参数长度有限制，不安全。

post请求：form表单的post请求中请求的参数是在http的请求体中，对请求参数长度没限制，安全。

3.name：name属性是给这个表单取个名字，是可选的。

表单域只是提供了一个放置表单的区域，这个区域中需要添加一些表单元素（控件）才能构成一个完整的表单。常见的表单元素有：文本框，密码框，单选按钮，多选按钮（复选框），下拉框，文本框，隐藏域，文件上传控件等组成。

1.20.2 文本框

文本框是最常用的表单控件，它的写法如【文件1-29】所示：

【文件1-29】文本框

[HTML] 纯文本查看 复制代码

1.  用户名：<inputtype="text"name="username" value="请输入用户名..."/>

文本框常用属性如【表格1-9】所示：

【表格1-9】文本框常用属性

属性名	固定值	作用
type（必需）	text	指定这个input是一个普通文本框
name（必需）	无	浏览器根据name属性将这个标签中输入的内容提交到服务器
value	无	value值如果给定值文本框中就显示这个值，如果不给就不显示

注意：

文本框的特点：

1.只能输入单行文本；

2.输入什么显示什么；

1.20.3 密码框

密码框是用来输入密码的，在密码框中输入的内容页面上会以“……”的形式显示出来。目的是为了

不让其他人看到正在输入的密码信息，起到保护作用。密码框的写法如【文件1-30】所示：

【文件1-30】密码框

[HTML] 纯文本查看 复制代码

1.  密码：<inputtype="password"name="password"/>

页面显示如图1-25所示：

图1-25 密码框

1.20.4 单选框

单选框又叫单选按钮，它是实现单选功能的按钮。单选按钮的写法如【文件1-31】所示：

【文件1-31】单选框

[HTML] 纯文本查看 复制代码

1.  性别：<inputtype="radio"name="sex" value="man">男

2.         <input type="radio" name="sex"checked="checked" value="female">女

页面效果如图1-26所示：

图1-26 单选按钮

注意：

单选框想实现单选的功能，必须指定一个相同的name值；

如果想默认选中其中一项，添加checked="checked"即可；

为了方便数据的提交，加上value的值；

1.20.5 复选框

复选框又叫多选按钮是实现多选功能的按钮。单选按钮的写法如【1-32】所示：

【文件1-32】复选框

[HTML] 纯文本查看 复制代码

1.  爱好：<inputtype="checkbox"name="hobby" value="音乐">音乐

2.        <input type="checkbox" name="hobby"value="书法">书法

3.        <input type="checkbox" name="hobby"value="武术">武术

页面效果如图1-27所示：

1-27 复选框

注意：

复选框想实现多选的功能，必须指定一个相同的name值；

如果希望默认选中，同样添加checked="checked"即可；

为了方便数据的提交，加上value的值；

1.20.6 文件上传按钮

文件上传按钮是一个提供文件上传功能的表单控件，写法如【文件1-33】所示：

[HTML] 纯文本查看 复制代码

1.  简历：<inputtype="file"name="upload"/>

页面上的效果如图1-28所示：

图1-28 文件上传按钮

注意：

文件上传按钮必须指定type=“file”；

1.20.7 隐藏域

隐藏域的作用是定义隐藏字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它

们的值也可以由JavaScript进行修改写法如【文件1-34】所示：

[HTML] 纯文本查看 复制代码

1.     <!--隐藏域-->

2.      <input type="hidden" name="id"value="12345">

1.20.8 下拉框

下拉框的作用是提供一列信息供用户选择的表单控件，常用于国籍，省市区地址等固定的信息。写法

如【文件1-35】所示：

[HTML] 纯文本查看 复制代码

1.  国籍：<selectname="country"style="width: 150px">

2.              <option value="中国"selected="selected">中国</option>

3.              <option value="英国">英国</option>

4.              <option value="美国">美国</option>

5.       </select>

页面效果如图1-29所示：

图1-29 下拉框

注意：

如果想默认选中一项，添加属性selected="selected"；

name必须加在select身上，每个option都要写一个value；

1.20.9 文本域

文本域是一个能输入多行文本的表单控件。写法如【文件1-36】所示：

【文件1-36】文本域

[HTML] 纯文本查看 复制代码

1.  备注：<textarea name="content"cols="40" rows="20"></textarea>

页面效果如图1-30所示：

图1-30 文本域

注意：

cols定义宽度，rows定义高度；

1.20.10 提交按钮

提交按钮的作用是将表单中输入的内容提交给服务器。写法如【文件1-37】所示：

【文件1-37】提交按钮

[HTML] 纯文本查看 复制代码

1.  <input type="submit"value="提交">

页面效果如图1-31所示：

图1-31提交按钮

注意：

提交按钮上显示的“提交”是通过value属性给赋值的。

1.20.11 重置按钮

重置按钮的作用是将表单控件中输入的内容清空。写法如【文件1-38】所示：

【文件1-38】重置按钮

[HTML] 纯文本查看 复制代码

1.  <input type="reset"value="重置按钮"/>

上面的所有表单元素构成了如【文件1-39】所示的一个普通的注册页面：

【文件1-39】注册页面

[HTML] 纯文本查看 复制代码

1.  <!DOCTYPE html>

2.  <htmllang="en">

3.  <head>

4.      <meta charset="UTF-8">

5.      <title>Title</title>

6.  </head>

7.  <body>

8.      <form action="#">

9.          姓名：<input type="text" name="username"><br><br>

10.         密码：<input type="password"name="password"><br><br>

11.         性别：<input type="radio" name="sex"value="man">男

12.                 <input type="radio"value="female" name="sex" checked="checked">女<br><br>

13.         爱好：<input type="checkbox" name="hobby"value="音乐">音乐

14.              <inputtype="checkbox" name="hobby" value="书法">书法 

15.               <inputtype="checkbox" name="hobby" value="武术">武术<br><br>

16.  

17.         简历：<input type="file"name="upload"/><br><br>

18.         <!--隐藏域-->

19.         <input type="hidden"name="id" value="12345">

20.  

21.         国籍：<select name="country" style="width:150px">

22.                 <option value="中国"selected="selected">中国</option>

23.                 <option value="英国">英国</option>

24.                 <option value="美国">美国</option>

25.             </select><br><br>

26.         备注：<textarea rows="5" cols="20"name="desc" ></textarea><br><br>

27.         <input type="submit"value="提交"> 

28.         <input type="reset" value="重置">

29.     </form>

30. </body>

31. </html>

1.21 本章小结

本章主要就html的基本标签进行了详细讲解，通过本章的学习我们应当掌握html的常用标签并能够编写一个简单的注册表单。

13.png (240.59 KB, 下载次数: 20)

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2