1、HTML+CSS+JavaScript网页设计目 录CONTENTS第一章 网页设计综述第二章 HTML语言第三章 CSS第四章 JavaScript第五章 网页设计综合案例第二章 HTML语言02第二章 HTML语言HTML指的是超文本标签语言（HyperText Markup Language，简称HTML）是一种用于创建网页（Web页面）的标签式语言，HTML使用标签来描述网页，可以用于构建Web站点中的网页，网页中包含了HTML标签及文本内容。HTML被用来对网页的内容（文字、图片等）进行结构化处理，由浏览器来解释执行。第二章 HTML语言2.1 HTML基本语法2.2 HTML文档基
2、本结构2.3 HTML文档头部相关标签2.4 段落与文本格式化2.5 列表2.6 超链接目 录2.7 图像与多媒体2.8 表单2.9 表格2.10 框架2.11 HTML 5结构元素第二章 HTML语言2.7 图像与多媒体要构建一个丰富多彩的网站，网页中仅有文字和超链接是远远不够的，图像、音频、视频、Flash动画等多媒体资源可以丰富一个网站的内容，能够吸引更多的访问者。2.7.1 图像标签用来在网页文件中插入图像，通过设置该标签的相关属性，可以设置所插入图像的显示大小、替换文字等。标签的基本语法格式为：标签的属性比较多，使用起来有很大的灵活性，但在网页设计当中，这些属性用的较多的是src、w
3、idth、height和alt，其他的属性所实现的效果通常使用样式表来进行控制。几个常用属性是：第二章 HTML语言1. src属性：设定要显示图像的URL地址。2. width属性：设置图像在浏览器中显示的宽度（像素单位）。 3. height属性：设置图像在浏览器中显示的高度（像素单位）4. alt属性：当图片在浏览器中无法显示的时候，替代显示的文字信息。5. border属性：设置图像周围的边框。标签还有align、hspace、vspace等图像对齐方式和间距有关的属性，在实际的网页设计过程中，很少使用这几个属性进行图片和文字的混排，通常使用样式表来控制图文混排的效果。所以这几个属性就
4、不做详细介绍了。第二章 HTML语言2.7.2 图像映射图像映射是指带有可点击区域的一幅图像，要完成图像映射要用到三种标签： 标签、标签和标签。1. 标签与标签用于定于图像中的映射区域，标签永远嵌套在 标签内部，用于定义图像的具体映射区域。（1）标签的基本语法格式为： 标签的name属性所定义的名字，将被标签的usemap属性引用。第二章 HTML语言（2）标签的基本语法格式为： shape属性的取值用于确定映射区域的形状，映射区域的坐标由coords属性来具体指定。如果shape=rect，则映射区域为矩形区域，coords属性的值为x1,y1,x2,y2，用于定义矩形区域的左上角和右下角坐
5、标。如果shape=circle，则映射区域为圆形，coords属性的值为x,y,radius，用于定义圆形区域圆心的坐标和半径。如果shape=poly，则映射区域为多边形，coords的值为x1,y1,x2,y2,xn,yn，用于定义多边形各个顶点的坐标，如果最后一个坐标和第一个不一致，浏览器会自动添加最后坐标，以实现图形的封闭。第二章 HTML语言2.7.3 音频和视频在网页中，适当的插入音频和视频，可以让一个网页呈现出丰富多彩的展示效果，以吸引更多的用户来访问我们的网站。使用HTML 5的和标签，不需要第三方插件就能播放音频和视频，并且用同一的API接口控制，可以很方便的把所需的音频和
6、视频插入到网页当中。 1. 音频标签标签用于定义网页中的声音，如音乐或音频流等，元素支持MP3、Wav、Ogg等三种常用的格式。该标签的基本语法格式为： 第二章 HTML语言 标签的几个属性作用如下：（1）autoplay：如果出现该属性，则音频就绪后马上自动播放。若没有该属性，音频就绪后需手动播放音频。（2）controls：音频控件属性，若出现该属性，则向用户显示控件（静音/播放/暂停音量）。若没有该属性，则控件是不显示的。具体要播放的音频，需要使用嵌套在标签中的标签来定义媒体资源。可以提供两个音频文件供浏览器根据浏览器本身对音频文件类型或编解码器的支持进行选择。该标签主要有以下几个常用的
7、属性：第二章 HTML语言（1）src：表示音频文件的URL地址。（2）type：表示要播放媒体资源的MIME类型，常用音频类型有audio/ogg、audio/mpeg等格式。 （3）loop：表示音频循环播放。若没有该属性，音频播放结束后就暂停，若有该属性，音频播放结束后循环开始播放该音频。（4）preload：确定当页面加载时，规定音频是否加载以及如何加载。该属性的取值为：none|auto|metadata，分别对应不加载、自动加载以及元数据。第二章 HTML语言2.视频标签标签用于定义网页中的视频，如电影片段或视频流。支持MP4、Ogg、Webm等常用的视频格式。标签与标签相类似的属
8、性有：autoplay、loop、muted、preload等。特有的属性有：（1）width：定义视频的显示宽度。（2）height：定义视频的显示高度。（3）poster：该属性可以指定在视频开始播放之前，首先显示出来的一副图片。标签的控件按钮很简单，如果想要有更加复杂的控件按钮，则需结合后面学习的Javascript来实现。第二章 HTML语言2.7.4 插入Flash文件、是HTML5新增加的用于音频和视频的标签，有效地代替了部分Flash的功能。如果要在网页文件中插入一个Flash文件，可以使用标签来实现：也可以通过width、height等属性来指定该Flash播放时的宽度和高度。
9、第二章 HTML语言2.8 表单在使用浏览器访问网站过程当中，一般都会遇到在线注册、登录等相关的网页，例如我们经常使用的百度搜索引擎，就有一个可以输入要检索信息的输入框。要设计出这种类型的网页都需要用到HTML语言中的表单相关标签，与后面要学习的JavaScript相结合，可以设计出内容自动补齐、输入格式检查等动态效果的网页。表单是动态网页中的重要组成部分，是用户与网站之间进行交互的接口，用于收集用户信息，或者向用户展示所需要的数据。表单标签是HTML语言中较为复杂的内容，利用表单标签可以在网页中设计出文本框、单选按钮、复选按钮、下拉列表框等表单元素，实现丰富友好的用户界面。 2.8.1 表单
10、标签 标签用于定义一个表单，其他的表单元素都在和标签之间。表单的基本语法为：第二章 HTML语言 足球 1. 一个表单中的文本框、按钮等其他表单元素都要放在和标签之间。2. name属性：用于设置表单的名称，使用JavaScript代码对表单元素进行控制时，可以通过该属性设定的值找到指定的表单。3. action属性：设定表单提交时，之间表单元素的数据信息提交到的URL地址。例如指定一个在网站服务器端的应用程序，对提交的表单数据进行处理。4. method属性：该属性取值为post|get。用于设定表单中的数据如何打包发送给action所指定的URL地址。5. enctype属性：设定表单中的
11、数据使用何种编码方式进行编码。第二章 HTML语言2.8.2 信息输入标签表单的作用通常是收集访问网页用户的相关信息，或者向用户显示所查询的信息，很多信息的输入或者输出都要用到标签，这个标签也是所有表单元素中最复杂的一个，标签是个单标签，其基本语法格式为： type属性用于设定该标签的类型，该属性的取值为text|password|radio|checkbox|file，分别表示文本框、密码框、单选框、复选框、文件选择框等表单元素。id属性用于给该标签设定一个id值，通过id值找到该对象，以对其进行样式设置或者使用JavaScript来操作该对象。value 属性用于规定输入表单元素的初始值。
12、name属性用于给表单元素定义一个名字。该属性通常用于与服务器端的应用获取客户端表单所输入的数据。第二章 HTML语言1.文本框将标签的type属性设置为“text”，可以实现一个单行的文本框。在该文本框中可以输入、编辑任意类型的数据，但只能是单行显示。2. 密码框将标签的type属性设置为“password”，可以实现一个单行的密码输入框。密码输入框只是无法看到所输入的信息，其他的功能和文本框类似。3. 提交按钮在设计表单的时候，通常需要有一个按钮，当用户点击这个按钮时，会把表单中的相关表单元素所填写的数据提交给网站的后台应用进行处理。将标签的type属性设置为“submit”，即可将设计一
13、个默认的提交按钮。第二章 HTML语言4. 重置按钮 将标签的type属性设置为“reset”，可以得到一个重置按钮，重置按钮可以将一个表单中所有表单元素的值恢复成默认状态。5. 单选按钮 将标签的type属性设置为“radio”，即可得到一个单选按钮。单选按钮是指在一组选项中只能选择一项的情况。要实现这种效果，同一组单选按钮的name属性的值必须相同。 注意：单选按钮有一个checked属性，当该属性的值被设置为“checked”的时候，对应的单选按钮会被设置为选中状态。第二章 HTML语言6. 复选框 将标签的type属性设置为“checkbox”，即可得到一个复选按钮，复选按钮通常用于可
14、以有多种选项的情况。 复选框也有一个checked属性，当该属性的值被设置为“checked”的时候，会被设置为选中状态。7. 隐藏输入框 将标签的type属性设置为“hidden”，可以在表单中插入一个隐藏的输入框。这个输入框对浏览网页的用户来说是不可见的。但是这个输入框中的内容会随着表单其他信息一起提交到服务器端。这种类型的输入框通常用于设置一些客户端和服务器端交互信息8. 文件选择框 将标签的type属性设置为“file”，可以得到一个文件选择框，在浏览器中会显示一个“浏览”按钮，用于选择要提交到服务器端的文件，以及一个显示所选择文件名的文本输入框。第二章 HTML语言2.8.3 HTM
15、L 5新增的表单输入类型1. email类型 email类型的input元素是一种用来输入邮箱地址的文本框。在该文本框中输入的内容必须符合邮件地址格式，否则表单将无法提交。注意：对于所有的新增表单元素，我们都可以通过设置placeholder属性来定义提示信息2. url类型 将标签的type属性设置为“url”，该文本框所输入的内容须符合url地址格式，否则表单将无法提交。3. number类型 将标签的type属性设置为“number”，可以得到一个包含数值的输入框，可以使用min和max属性来限制可以输入的数据范围。4. range类型 range类型的input元素，用于定义滑动条方式
16、显示的数值输入域。除了可以使用min和max属性来定义数据输入范围之外，还可以通过step属性来定义鼠标每次拖动的数值变化幅度。5. date类型和time类型date类型的input元素，可以定义一个供用户选择年、月、日信息的日期信息输入框。第二章 HTML语言2.8.4 下拉列表标签标签用于设计实现下拉菜单，其中的每个表项使用标签来定义。下拉列表的基本语法格式为： 菜单选项一 菜单选项二 菜单选项三 菜单选项四 菜单选项五 第二章 HTML语言标签的size属性取值为数值，用于设定下拉菜单中可见的菜单项。标签的multiple属性，如果被设定为“multiple”，则表示该下拉菜单可以同时
17、选中多个菜单项。注意：要选中多个菜单项，需要按住键盘上的额“Ctrl”键后，再用鼠标去点击相应的菜单项。标签的value属性，用于向网站服务器端传递具体被选中的菜单项对应的值。第二章 HTML语言2.8.5 多行文本输入标签在收集用户相关信息或者反馈意见的网页中，如果用户需要输入的信息较多，此时单行文本框就不能满足用户的需求，需要使用标签来设计一个多行文本输入框来输入较多的文字信息。标签的基本语法格式为：初始化文字信息rows属性：定义多行文本区内最大可见行数cols：定义多行文本区的最大宽度。wrap属性：用于设定多行文本区域中文字的换行效果，取值为wrap|virtual|physical
18、|off，这几种取值方式会影响到多行文本表单元素传递给服务器端的文字换行效果。第二章 HTML语言2.8.6域和域标题 当表单中的内容较多时，需要将不同的内容分组显示，可以使用标签将表单内容打包在一组成为单独显示的域，然后再使用标签来定义域标题。这两个标签的基本语法为：域标题 标签没有属性。如果要设置一个标签的宽度，需要使用样式表的width属性来实现。 标签必须放在标签中，标签的align属性，用于设置域标题的对齐方式。第二章 HTML语言2.9 表格在网页设计中，表格发挥着重要的作用，在层叠样式表（CSS）出现之前，要设计一个简洁、排版规则的网页，通常使用表格来实现。除了使用表格进行网页布
19、局之外，通常还使用表格标签按照行、列等比较规则的方式显示表格化的数据。2.9.1表格标签在HTML中，表格主要由、和这三个标签来定义。其中标签来定义表格的整体，表格中的每一行由标签来定义，每行又可以被分割成若干个单元格，每个单元格由标签来定义。单元格中可以包含文本、图片、列表、段落、表单、超链接和多媒体等其他的HTML元素。第二章 HTML语言一个基本的表格的语法格式如下： 第1行第1列 第1行第2列 第2行第1列 第2行第2列 第3行第1列 第3行第2列 第二章 HTML语言标签的属性比较复杂，常用的属性主要有以下几个：1. border：以像素为单位定义的表格边框宽度。2. bgcolor
20、：定义表格的背景颜色。 3.background属性：定义表格的背景图像。4. align：定义表格的对其方式，取值为：“left|center|right”，分别表示左对齐、居中和右对齐。 5. height：以像素为单位定义表格的高度。6. weight：以像素为单位定义表格的宽度。7. cellpadding：以像素为单位定义单元格边缘与单元格内容之间的空白大小。8. cellspacing：以像素为单位定义单元格之间的空白大小。9. rules：定义表格内部边框的显示方式。取值为：“none|rows|cols|all”,分别表示不显示边框、只显示行边框、只显示列边框、显示行列边框。将
21、rules属性设置为“all”和未设置rules属性的表格，在显示效果上差别还是比较大的。第二章 HTML语言cellspacing:30cellpadding:20第二章 HTML语言2.9.2 行标签标签嵌套在标签之中，每一对标签会定义表格的一行。标签常用的属性有：1. align属性：设置行内容的水平对齐方式，取值为“left|center|right”，分别表示当前行的水平对齐方式为左对齐、居中和右对齐，默认为左对齐。2. valign属性：设置行内容的垂直对齐方式，取值为“top|middle|bottom”，分别表示当前行的垂直对齐方式为靠上对齐、居中和靠下对齐，默认为垂直居中。3
22、. bgcolor属性：设置当前行的背景颜色。第二章 HTML语言2.9.3 单元格标签标签嵌套在标签中定义单元格，每一对标签都会定义一个单元格。标签也有align、valign、bgcolor、width、height等属性，这些属性的含义和作用和标签、标签的相应属性相同，在此不再赘述。标签有两个比较特殊的属性和分别用于实现单元格的跨行和跨列效果。1. rowspan属性：设置单元格跨越的行数。2. colspan属性：设置单元格跨越的列数。第二章 HTML语言2.10 框架框架是一种页面布局技术，可以将浏览器窗口分割成不同区域的，在不同的区域中显示不同的HTML文件。但是定义框架的标签在不
23、同的浏览器之间兼容性不好，所以在网页布局设计中，使用框架技术的网站越来越少，通常使用DIV和样式表相结合的方式来设计兼容性和灵活性兼备的网页布局。 2.10.1 框架集标签框架集是指在一个网页文件中定义包括框架个数、框架尺寸以及框架中要载入的网页文件等信息的框架结构信息。其基本的语法格式为： 第二章 HTML语言 标签的属性主要有以下几个：1.frameborder：定义框架集是否显示边框，取值为“0|1”，“0”表示不显示框架边框，“1”表示显示框架边框。2.framespacing：定义框架之间边框的宽度。3.bordercolor：定义边框的颜色4.rows：定义框架水平分割的方式，可以
24、采用百分比或者指定的像素。5.cols：定义框架垂直分割的方式，可以采用百分比或者指定的像素。6.border：以像素为单位定义框架边框的宽度第二章 HTML语言2.10.2 框架定义标签定义的框架只能作为框架集的子元素出现，不能单独出现在其他的HTML标签之中。框架集的常用属性是name，用于定义一个框架的名称，使用该属性，可以将框架名称作为超链接的跳转目标，即将标签的target属性设置为框架的name属性值，则点击该超链接，就会在制定名称的框架中打开该超链接。第二章 HTML语言2.10.3 浮动框架 标签用于在浏览器窗口中定义一个浮动的窗口，以显示独立于当前网页的内容。该标签的主要属性
25、有：1.src：定义浮动框架窗口所显示的URL资源地址2.name：定义浮动框架的名称。 如果标签的target属性设定为该属性的值，则标签定义的超链接被单击时，会在该浮动框架中打开超链接所指定的内容。3.width：定义浮动框架的宽度4.height：定义浮动框架的高度5.scrolling：定义浮动框架滚动条出现的方式。第二章 HTML语言在开发设计网页时，经常会遇到包含头部、侧边栏和底部这样的布局，网页的布局如下图所示：第二章 HTML语言使用标签来划分不同的网页区域，通过class属性对不同的区域进行了命名，但是这些class属性的取值是随意的，是没有语义的，搜索引擎不能够识别这些随意
26、定义的内容。 第二章 HTML语言2.11 HTML 5结构元素为了使HTML文档结构更加清晰，HTML 5新增了、等标签，用于定义页眉、页脚、内容区块等与文档结构相关的结构元素，这些元素的语义更加明确。：用于定义文档的页眉，通常用来存放文档内容的介绍和展示信息，以及一个页面或者内容区块的标题。：定义导航链接的部分。：定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分， 通常包含了一组内容及其标题。：定义独立的内容。例如论坛帖子、报纸文章、博客条目以及用户评论等。：定义页面主区域内容之外的内容，如页面的侧边栏。第二章 HTML语言：标签规定独立的流内容，如图像、图表、照片、代码等。标签中的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。：定义 标签的标题。：定义文档或节的页脚。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等。在一个网页中，这些新的语义标签元素位置如下图所示：
