本帖最后由 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-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编码 <meta charset="utf-8"/> 【b】SEO常用到的关键词keywords和描述description <meta name="description" content="FreeWeb tutorials on HTML, CSS, JavaScript" /> <meta name="keywords" content="HTML,CSS, XML" /> 【c】作者、版权 <meta name="author"content="littlematch"> <meta name="copyright"content=""> 【d】定时跳转(让网页多少秒刷新，或跳转到其他网页) <meta http-equiv="refresh"content="5"> <meta http-equiv="refresh"content="5;url=http://www.baidu.com"> 【e】期限(指定网页在缓存中的过期时间) <meta http-equiv="Expires"Content="0"> <meta http-equiv="Expires"Content="Sat Nov 28 2015 21:19:15 GMT+0800"> 【f】缓存 <meta http-equiv="Pragma"Content="No-cach">(禁止缓存，访问者无法脱机浏览) 【g】cookie <meta http-equiv="Set-Cookie"Content="cookievalue=xxx; expires=Sat Nov 28 2015 21:19:15 GMT+0800;path=/"> 【h】viewport:视口，移动端常用 <meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0, user-scalable=no" /> 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绿色 | | | | | | |
字体标签的用法及显示效果如图1-13所示：
图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 | | | | | | | | | | 鼠标悬停在图片上方会出现的文字信息 file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image028.jpg | | | 图片加载失败的时候才会出现的文字信息 file:///C:/Users/yst/AppData/Local/Temp/msohtmlclip1/01/clip_image030.jpg | | | |
代码示例如【文件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】常用字体效果标签 | 加粗 | | | | | | | | | | | | 注意：红色部分带有强调语气的作用，针对搜索引擎而言。 |
使用示例及效果如图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" | | | | | | 注意：写在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" | | | | | | | | | | 注意：写在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 | | | | | _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-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 | | | | | | | 水平对齐方式 left左边 center中间 right右边 | | | | | | | | | | |
这些属性的用法如图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>
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>
然后我们需要将下面一个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】文本框常用属性 | 属性名 | | | | | | | | 浏览器根据name属性将这个标签中输入的内容提交到服务器 | | | 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的常用标签并能够编写一个简单的注册表单。
| 
收藏
淘帖
踩
