网页设计与制作教程思维导图模板_ProcessOn思维导图、流程图

第一章网页制作的基础知识

1.1认识网页和网站

1.1.1 网页、网站

网页和网站的区别：网页是由HTML编写，通过WWW网传输，被浏览器编译后供用户获取信息的页面文件，集合了文本、图片、声音、动画、数字电影和超级链接等各种网页元素，如果说WWW是internet上的大型图书馆，那图书馆的每一本书就是一个web站点，网页就是书中的某一页。

1.1.2 静态网页和动态网页

1.1.2.1 静态网页

（1）静态网页是指客户端的浏览器发送URL请求给WWW服务器，服务器查找需要的超文本文件并不加处理地直接下载到客户端，运行在客户端的页面事先做好并存放在服务器中的网页

1.1.2.2 动态网页

(2):动态网页分为客户端动态网页和服务端动态网页，客户端动态网页不需要与服务器交互，而服务端动态网页需要与客户端共同参与。

1.2 网页的基本构成元素

1.2.1 文本

体积小，网络传输速度快，可使用户更方便地浏览和下载文本信息。

1.2.2 图片和动画

图片比文本更加生动和直观，可以传递一些文本不能表达的信息。具有强烈的视觉冲击力。

1.2.3 超链接

从一个网页指向另一个目的端的链接，可以在当前页面中跳转，也可以在页面外跳转。

1.2.4 音频视频

音频文件使网页效果多样化，常见的有mid和mp3。

1.2.5 交互表单

网页中的表单通常用来接收用户在浏览器端的输入，后将这些信息发送到用户设置的目标端。

1.2.6 其他常见元素

包括悬停按钮、javaScript与ActiveX等各种特效。可以点缀网页，也可以使网页更加活泼。

1.3 页面布局结构

1.3.1 网页页面布局

1. 国字型: 其上方为网站标题和广告条，用于放置导航和工具栏，下方为站点信息。 2. 厂字型： 上方为标题和广告条，中间左侧较窄的一栏放超链接一类的功能，右侧为正文，下面为站点信息。 3. 海报型： 主要突出需要表达的重点，通常最上方为通栏的标题和导航条，下文是正文部分。 4. Flash型： 常用于显示宣传网站首页，以精美大幅图像为主题，设计方式多为Flash动画。

1.3.2 网页色彩搭配

网页安全色：指在不同硬件环境、不同操作系统、不同浏览器中都能够正常显示的颜色集合。网页安全色是红色、绿色、和蓝色。

1.4 web前端技术简介

1.4.1 初识Web前端

Web前端即指平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等都是在浏览页面。

1.4.2 Web前端开发的三大核心技术

1. HTML 主要用于定义页面结构。HTML是制作网页的标准语言。 2. CSS 语言 主要用于页面样式。CSS是一种用来表现HTML或XML等文件样式的计算机语言。 3. JavaScript语言 常用于添加各式各样的动态功能。JavaScript是一种属于网络的脚本语言，已经被广泛地用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。

1.4.3 前端开发工具

浏览器

网页编辑器

切图软件

1.5 HTML语法基础

1.5.1 HTML概述

HTML是Hyper Text Markup Language的缩写，即超文本标记语言，是一种用来制作超文本文档的简单标记语言。

1.5.2 HTML基本结构

1.5.2.1 HTML文档标签<html>...</html>

1.5.2.2 HTML文档头标签<head>...</head>

1.5.2.3 文档编码

1.5.2.4 HTML文档主体标签<body>...</body>

1.6 创建HTML文档

1.7 网页头部标签

1.7.1 <title>标签

<tidle>标签是页面标题标签。这个标签只能应用于<head>与</head>之间。<title>标签位于<bead>与</head>中，用于标示文档标题

1.7.2 <meta>标签

1.7.3 <link>标签

1.7.4 <script>标签

1.8 HTML文档注释和特殊符号

注释

(注释格式)

特殊符号

第二章网页制作的排版方法

2.1 文字与段落排版

2.1.1 段落标签

第一段         第二段         第三段          ————————————————                             版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                         原文链接：https://blog.csdn.net/2401_85025850/article/details/142257580

2.1.2 标题标签

<h1>一级标题</h1>         <h2 align="center">二级标题</h2>         <h3 align="left">三级标题</h3>         <h4 align="right">四级标题</h4>         <h5>五级标题</h5>         <h6>六级标题</h6> ————————————————                             版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                         原文链接：https://blog.csdn.net/2401_85025850/article/details/142257580

2.1.3 换行标签

爱国明志             敢为人先

2.1.4 水平线标签

<hr color="#ffc0cb"/>         <hr size="20px" color="#ccccff"/> ————————————————                             版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                         原文链接：https://blog.csdn.net/2401_85025850/article/details/142257580

2.1.5 预格式化标签

2.1.6 缩排标签

2.2 超链接

2.1.1 超链接简介

超链接的定义

超链接的分类

路径

2.2.2 超链接的应用

锚点标签<a>···</a >

指向其他页面的超链接

指向书签的超链接

指向下载文件的超链接

指向电子邮件的超链接

2.4 列表

2.4.1 无序列表

2.4.1.1 在<ul>后指定符号的样式

2.4.1.2 在<li>后指定符号的样式

2.4.2 有序列表

有序列表是一个有特定顺序的列表项的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记。使用<ol>标签可以建立有序列表，表项的标签仍为，格式: <oltpe-”符子类型”> <iitype=”符号类型1”>表项1 <li tpe=”符号类型2”>表项2 </ol> 在浏览器中显示时，有序列表整个表项与上下段文本之间各有一行空白:列表项目向右缩进并左对齐;各表项前带顺序号。 有序的符号标识包括阿拉伯数字、小写英文字母、大写英文字母、小写罗马字母和大写罗马字母。<ol>标签的type属性用来定义一个有序列表的符号样式，在<ol>后指定符号的样式，可设定直到</ol>的表项加重记号。格式: <oltype = " 1” > 序号为数字 <oltype= " A”>序号为大写英文字母 <oltype = " a” >序号为小写英文字母 <oltype =" 」”>序号为大写罗马字母 <oltype = " ¡” >序号为小写罗马字母 在<li>后指定符号的样式，可设定该表项前的加重几号。在格式上只需把上面的ol改我li。 ————————————————                             版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                         原文链接：https://blog.csdn.net/2401_85025850/article/details/142257580

2.4.3 定义列表

定义列表又称为释义列表或字典列表，定义列表不是带有前导字符的列项目，而是一实物以及与其相关的解释。当创建一个定义列表时，主要用到3个HTML 标签:<dl>标<dt>和<dd>标签。可以使用 d创建自定义列表，使用dt和 dd 定义列表中具体的数据瑜一般情况下使用dt定义列表的二级列表项，也可以认为是dd的一个概要信息，使用dd来定义最底层的列表项。 格式： <dl>             <dt>第一个标题项</dt>             <dd>对第一个标题的解释文字</dd>             <dt>第二个标题项</dt>             <dd>对第二个标题的解释文字</dd>         </dl> ————————————————                             版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                         原文链接：https://blog.csdn.net/2401_85025850/article/details/142257580

第三章表格布局与表单交互

3.1 表格概述

3.1.1 表格的结构

表格是由行和列组成的二维表，而每行又由一个或多或少个单元格组成，用于放置数据或其他内容。表格中的单元格是行与列的交叉部分，是组成表格的最基本单元。单元格的内容是数据，也称数据单元格。数据单元格可以包含文本、图片、列表、段落、表单、水平线或表格等元素。表格中的内容按照相应的行或列进行分类和显示。 ————————————————                             版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                         原文链接：https://blog.csdn.net/2401_85025850/article/details/142374031

3.1.2 表格的基本语法

3.3 表格嵌套

子主题

3.4 表单

3.4.1 表单标记

3.4.2 定义域和域标题

3.4.3 表单信息输入

3.4.3.1 单行文本输入框

3.4.3.2 密码输入框

3.4.3.3 复选框

3.4.3.4 单选按钮

3.4.3.5 图像按钮

3.4.3.6 提交按钮

3.4.3.7 重置按钮

1)页面的字体变得更漂亮，更容易编排。 (2)可以轻松控制页面的布局。 (3)可以在大多数浏览器上使用。 (4)以前一些必须通过图像转换才能实现的功能，现在只要用CSS就可以轻松实现 页面下载更快。 (5)可以使用一个CSS文件控制整个网站的显示风格。只要修改该 CSS 文件中相应的行，就可以改变整个网站上页面的显示样式。 CSS 可以称得上 Web 设计领域的一个突破，具有以下优势。 1.表现和内容分离 CSS 通过定义 HTML,标记如何显示控制网页的格式，使得页面内容和表现分离，简化了网页格式设计，也使得对网页格式的修改更方便。 2.增强了网页的表现力 CSS样式属性提供了比 HTML更多的格式设计功能。例如，可以通过 CSS 样式去掉网页中超链接的下划线，甚至可以为文字添加阴影效果等。 3.使整个网站显示风格趋于统一 将 CSS 样式定义到样式表文件中,然后在多个网页中同时应用样式表文件中的样式，就可以确保多个网页具有一致的格式，并且可以随时更新样式表文件实现自动更新多个网页的格式功能，从而大大从而大大降低网站的开发与维护的成本。 ————————————————                             版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                         原文链接：https://blog.csdn.net/2401_85025850/article/details/142583650

第四章CSS样式基础

4.1CSS概述

4.1.1CSS的基本概念

CSS全称为“Cascading Style Sheet”，中文解释为“层叠样式表”，它是以 HTML 为基础，设置网页的外观显示样式，如字体、颜色、背景的控制及整体的布局等，还可以针对不同的浏览器设置不同的样式。在网页设计时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其他效果实现更加精确的控制。只要对相应的代码做一些简单的修改，可以改变同一-页面的不同部分效果，也可以改变同一个网站中不同网页的外观和格式。

4.1.2传统HTML的缺点

1.维护困难 为了修改某个特殊标记的格式，需要花费很多的时间，尤其对于整个网站而言，后期修改ɒ計懾导维护的成本很高， 2.标记不足 HTMI自身的标记并不丰富，很多标记都是为网页内容服务的，而关于美工的标记，例如文字间距、段落缩进等，这些HTML 中都很难找到。 3.网页过“胖” 由于对各种风格样式没有统一进行控制，用HTML编写的页面往往是体积过大，占用了很多宝贵的带宽 4.定位困难 在整体页面布局时，HTML对于各个模块的位置调整很困难。 ————————————————                             版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                         原文链接：https://blog.csdn.net/2401_85025850/article/details/142583650

4.1.3CSS的特点和优势

4.1.4CSS的编写规则

4.2CSS语法基础

4.2.1CSS基本语法

4.2.2CSS选择器类型

4.2.3CSS选择器声明

1.集体声明 集体声明代码如下: h3 , h4, h5,pl color:red;font-size:18px;! class1,a{                              font-family: fangsong;                     } 2全局声明 给所有的选择器设定样式，用“ * ” 代码：*{                                    font-family:Georgia, 'Times New Roman', Times, serif;                     }

4.3CSS引入方式

CSS按其位置可以分4种： 内联样式表（Inline Style Sheet） 内部样式表（ Interal Style Sheet） 链接外部样式表（Link External Style Shee） 导人外部样式表（ImportE-ternal Style Sheet） ————————————————                             版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                         原文链接：https://blog.csdn.net/2401_85025850/article/details/142583650

4.4CSS的属性单位

4.4.1长度、百分比单位

百分比单位是一种常用的相对性类型，通常的参考依据为font-size属性，百分百值总是相对于另一个值。下面的语句将margin属性的值设置为font-size的200%： p{margin:200%;} 需要注意的是，不管使用哪种单位，在设置的时候数值与单位之间不需要加空格。 常用长度单位 ————————————————                             版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                         原文链接：https://blog.csdn.net/2401_85025850/article/details/142583650

4.4.2色彩单位

4.5CSS继承与层叠

4.6 元素类型

1.块级元素(display:block) display 属性设置为 block 将显示块级元素，块级元素的宽度为 100%，而且后面隐藏附带有换行符，使块级元素始终占据一行，如<div>常常被称为块级元素，这意味着这些元素显示为一块内容，标题、段落、列表、表格、分区 div 和 body 等元素都是块级元素。 2、行级元素(display:inline) 行级元素也称内联元素，displey属性设置为inline将显示行级元素，元素前后没有符，行级元素没有高度和宽度，因此也就没有固定的形状，显示时只占据其内容的大小接、图像、范围(span)、表单元素等都是行级元素。 3.列表项元素(display:list-item) list-iem 属性值表示列表项目，其实质上也是块状显示，是一种特殊的块状类型,了缩进和项目符号。 4.隐藏元素(display:none) none 属性值表示隐藏并取消盒模型，所包含的内容不会被浏览器解析和显示。通过display 设置为none，该元素及其所有内容就不再显示，也不占用文档中的空间。综合案例:开平碉楼申遗大事记 以开平碉楼的申遗大事记为例子，参照给定的 HTML代码、CSS 设置和图片资源，利HBuilder 设计Web 网页。 要求: (1)标题设置为 h2、“微软雅黑”、居中显示; (2)小标题设置为“黑体”，字体颜色设置为“#8B4513”，段落背景颜色为“#D3BI7" 行高为 200%; (3)正文其他所有的字体设置为“微软雅黑”、18p、首行缩进2字符: (4)使用外部样式表链接到 HГML 文档中。 ————————————————                             版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                         原文链接：https://blog.csdn.net/2401_85025850/article/details/142583650

第五章  CSS 盒模型

5.1盒模型的定义

Web 页面上大部分的元素（特别是块状元素）都可以看作是一个盒子，W3C组织建议把所有网页上的对象都放在一个盒子（ box ）中，设计者可以通过创建定义来控制这个盒子的各种属性，这些对象包括段落、列表、标题、图片及层。 盒子的结构可以看作一个矩形框，包括边框（ border )、外边距（ margin )、内边距( padding )，以及元素内容（ content )，元素会在指定的高度和宽度范围内在页面上显示出来。它们之间的关系，

5.2CSS元素的高度和宽度

盒模型的宽度 盒模型的宽度＝左外边距（ margin - left )+左边框（ border - left )＋左内边距( padding - left )＋内容宽度（ width )＋右内边距（ padding - right )＋右边框（ border - right )+右外边距（ margin - right )。width:60px;

盒模型的高度 盒模型的高度＝上外边距（ margin - top )＋上边框（ border - top )＋上内边距（ padding - top )＋内容高度（ height )＋下内边距（ padding - bottom )＋下边框（ border - bottom )＋下外边距（ margin - bottom )。 height:30px;

5.3边距设置和边框设置

外边距设置 外边距是指元素与元素之间的距离，外边距设置属性，可分别设置 margin - top 、 margin - right 、 margin - bottom 、 margin - left ，也可以用margin属性一次性设置所以外边距。

1．上外边距 margin - top : length I percent I auto 2.右外边距 margin - right : length I percent I auto 3.下外边距 margin - bottom : length I percent I auto 4.左外边距 margin - left : length I percent I auto 5.外边距 margin: length I percent I auto ————————————————                             版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                         原文链接：https://blog.csdn.net/2401_85025850/article/details/142820332

5.3.2外边距的合并

1.行级元素外边距合并 行级元素的盒子相遇，盒子与盒子之间的距离等于两个盒子外边距地总和。 2.块级元素外边距合并 块级元素的盒子相遇，盒子与盒子之间的距离等于两盒子中外边距地较大者。

5.3.3内边距设置

元素的内边距用来控制边框和内容区之间的空白距离，并非实体，用 padding 属性表示，类似于 HTML 中表格单元格的填充属性。内边距（ padding ）和外边距（ margin ）很相似，都是透明不可见的，只是内边距和外边距之间还有边框。从语法和用法上来说，内边距的属性与外边距的属性也是类似的，既可以使用复合属性，也可以使用单边属性， padding 属性接受 length 值或 percent 值，区别于外边距，内边距不可以使用负值。 padding: 30px;

5.3.4边框设置

1.上边框 border-top:10px #ff0000 solid; 2.右边框 border-right:medium #00ff00 dotted; 3.左边框 border-left:thick #0000ff double; 4.下边框 border-bottom:thin #000000 dashed;

5.边框样式

6.边框宽度在 CSS 中，宽度是通过 border - width 属性来设置边框粗细的。 与 border - style 属性相同， border - width 也是一个复合属性。设置边框宽度时，可以直接输入 length 确定长度值，如5px或2cm，但不可以为负值；或者选择系统预设属性值。

7.边框颜色 在 CSS 中，边框颜色是通过 border - color 属性来设置的，该属性可以使用任何类型的颜色值，包括用颜色命名的值、十六进制参数或 RGB 值。但是如果对象的 border - style 设置为 none 或者 border - width 设置为0，本属性将失去作用。

5.3.5新增边框属性

1.圆角边框 border-radius: 20px;

2. 阴影 box-shadow: -20px 10px 30px #ffff00;

3.图片绘制边框

5.4CSS元素的定位

5.4.1static定位

static 是 HTML 元素的默认值，不受 top 、 right 、 bottom 和 left 属性影响，元素出现在正常的文档流中。 静态定位  /*static静态定位*/                 position:static;

5.4.2relative定位

relative 不脱离文档流的布局，需要参照父元素的四条边（不是浏览器），设置自身的 top 、 right 、 bottom 和 left 属性的参数，从盒子中独立出来浮在上面。相对定位只改变自身的位置，在文档流原先的位置留出空白区域。定位的起始位置为此元素原先在文档流的位置。 相对定位 position:relative;                 top:30px;                 left:40px;

5.4.3absolute定位

absolute定位 absolute 脱离原来文档流的布局，浮在其他盒子上面，独立出来。子盒子原来位置的空间由后面的盒子填充。绝对定位的起始位置为最近已定位的父盒子，如果父盒子没有定位，那么子盒子的起始位置为浏览器，并随着滚动条的移动而改变位置 绝对定位         /*static绝对定位*/                 position:absolute;                 top:30px;                 left:40px;

5.4.4fixed定位

fixed类似于absolute，但在固定定位中，盒子的位置不会随着滚动条的移动而改变位置。相对于浏览器的窗口是固定不变的。 固定定位                 /*fixed固定定位*/                 position:fixed;                 bottom:30px;                 right:40px;

5.5CSS元素的浮动

5.5.1盒子的浮动添加

一般情况下，页面中的块状元素在水平方向上宽度会自动延伸，直到父元素的边界;而在垂直方向上会按照元素在页面中出现的先后次序依次排列，即所说的标准流排列任何元素都可以浮动，浮动元素会变成一个块状元素，元素的水平浮动就是通过其oat属性的设置，使元素向其父元素的左侧或右侧靠拢，间接设置一个元素的文本环绕方式，从而改变原来的竖直排列方式。此时元素的宽度不再延伸，大小将由其内容的宽度而定。  style="float: right;" /left /nome ————————————————                             版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                         原文链接：https://blog.csdn.net/2401_85025850/article/details/142820332

5.5.2盒子的浮动清除

盒子的浮动清除 素浮动后，下面的元素内容会自动上移，结果就会受到上面浮动元素的影响，如果想 要清除这种影响，需要使用clear 属性完成。由于浮动元素可以清除，是相对定位属性的优势，因而浮动属性成为控制分栏布局的最好工具。 lef 清除左边浮动元素，即不允许左边有浮动对象;night清除右边浮动元素，即不允许右边有浮动对象;Bot同时清除左右两边的浮动元素，即不允许左右两边有浮动对象;默认值 none。  style="clear: both;" left /right /nome ————————————————                             版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                         原文链接：https://blog.csdn.net/2401_85025850/article/details/142820332

第六章元素应用CSSS

6.1 使用CSS设置字体样式

6.1.1 字体类型

font-family: fangsong;

6.1.2 字体大小

px（绝对位） pt（绝对单位） em（相对单位） %（相对单位） font-size: 20%;

6.1.3.字体粗细

font-weight：bold / number / normal / lighter / 100-900; font-weight: 500;

6.1.4.字体倾斜

normal（正常）默认值 italic（斜体） oblique（倾斜体） font-style: italic;

6.2 使用CSS设置文本样式

6.2.1 文本水平对齐方式

left（左对齐） center（居中） justify（两端对齐） h1{ text-align: center; }

6.2.2 行高

行高 p{ line-height: 250%; }

6.2.3 文本的修饰

文本的修饰 下划线 text-decoration: underline; 上划线 text-decoration: overline; 贯穿性 text-decoration: line-through;

6.2.4 段落首行缩进

段落首行缩进 .first{ text-indent: 2em; }

6.2.5 首字下沉

首字下沉 .second::first-letter{ float: left; font-size: 2em; font-weight: 900; }

6.2.6 字符间距

字符间距 .first{ letter-spacing: 2em; }

6.2.7 文本的截断

文本的截断 width: 300px; height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

6.2.8 文本的颜色

文本的颜色 color：red；（规定颜色值为颜色名称的颜色） color：#000000；（规定颜色值为十六进制值的颜色） color：rgb（0,0,255）；（规定颜色值为rgb代码的颜色） color：rgb（0%，0%，80%）；（规定颜色值为rgb百分比的颜色） h1{ /*6.2.1文本水平对齐方式*/ text-align: center; /*文本颜色*/ color: #ff0000; }

6.2.9 文本的背景颜色

文本的背景颜色 color（用于指定颜色） transparent（表示透明的意思） background-color: #ff0000;

6.3 使用CSS设置图像样式

6.3.1 设置图像边框

设置图像边框 img{ /* 顺序上右下左*/ /*颜色*/ border-color: #ff0000 #0000ff #000000 #00ff00; /*宽度*/ border-width: 5px 10px 15px 20px; /*样式*/ border-style: solid dashed dotted double; ————————————————                             版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                         原文链接：https://blog.csdn.net/2401_85025850/article/details/142917262

6.3.2 图像缩放

图像缩放 #img2{ width: 400px; height: 300px; } #img3{ width: 50%; height: 50%; } <body> <img src="img/1.png" id="img1"/> <img src="img/1.png" id="img2"/> <img src="img/1.png" id="img3"/> </body> ————————————————                             版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                         原文链接：https://blog.csdn.net/2401_85025850/article/details/142917262

6.3.3 设置背景图像

设置背景图像 background-image：url（url） / nome url（表示要插入背景图像的路径） nome（表示不加载图像） body{ background-image: url(img/2.jfif);

6.3.4 设置背景重复

设置背景重复 background-repeat：repeat（表示背景图像在垂直和垂直方向平铺是默认值） repeat-x（表示背景图像在水平方向平铺） repeat-y（表示背景图像在垂直方式平铺） no-repeat （表示背景图像不平铺） /*不重复*/ background-repeat: no-repeat; ————————————————                             版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。                         原文链接：https://blog.csdn.net/2401_85025850/article/details/142917262

6.3.5 背景图像定位

使用关键字进行背景定位 background-position: center bottom;

使用长度进行背景定位 background-position: 100px 50px;

使用百分比进行背景定位 background-position:30% 50%;

6.4 使用CSS设置表单样式

6.4.1 使用CSS修饰常用的表单元素

第七章利用CSS和多媒体美化界面

7.1CSS链接的美化

7.1.1 文字链接的美化

利用伪类选择器，按照“a:link（未访问）-->a:visited（鼠标点击的一刹那）-->a:hover（鼠标悬停在超链接上）-->a:active（被访问后）”的顺序，设置不同的链接访问状态效果，为文本超链接添加复杂而多样的样式

7.1.2 按钮链接的美化

为了让链接外观看起来像按钮特效，给超链接加上不同的边框阴影和相同的背景颜色就能实现

7.1.3 背景链接的美化

为链接设置不同的背景颜色和背景图片，实现背景链接

7.2CSS列表的美化

7.2.1 列表项类型

（list-style-type) 此属性用来设置列表项的标记类型（实心圆，实心方块，英文字母等）

7.2.2 列表项图像

（list-style-image

7.2.3 列表项位置

（list-style-position）

7.2.4 复合列表样式

list-style

7.2.5 利用背景图像实现列表项标记

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> li{ background: url(img/list4.jpg) no-repeat; padding-left: 30px; padding-bottom: 10px; list-style-type: none; } </style> </head> <body> <h3>快递公司</h3> <ol> <li>邮政快递</li> <li>顺丰快递</li> <li>京东快递</li> <li>圆通快递</li> <li>百世汇通</li> <li>中通快递</li> <li>申通快递</li> </ol> </body> </html>

7.3CSS表格的美化

7.3.1 border-collapse

border-collapse设置单元格边框合并 默认值，单元格边框不合并

7.3.2 border-spacing

设置单元格边框的间距

7.3.3 caption-side

设置表格标题的位置 该属性设置或检索表格标题在表格的哪一边 默认标题在表格上方

7.3.4 empty-cells

对空单元格的处理方式 该属性设置或检索当表格的单元格无内容时，是否显示该单元格的边框 只有当表格边框独立时（即border-collapse属性等于separate）此属性才起作用 默认空单元格有边框和背景

7.4多媒体的添加与美化

7.4.1 <embed>标签的使用

利用<embed>标签可以在网页中插入各种类型的多媒体文件，但是在使用<embed>标签之前，需要安装相应的插件，否则多媒体文件不能正常播放  <h1>阳春三月</h1> <embed src="media/阳春三月.swf"></embed> <h1>第五空间</h1> <embed src="media/第五空间.mp4"></embed> <h1>听!是谁在唱歌</h1> <embed src="media/听!是谁在唱歌.mp3"></embed>

7.4.2 <bgsound>标签的使用

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>示例7.16</title> </head> <body> <center> <h2>童话镇——背景音乐</h2> /*<bgsound src="media/童话镇.mp3" loop="-1"></bgsound>*/ <embed src="media/童话镇.mp3"></embed> </center> </body> </html> <bgsound>标签是设置网页背景音乐的元素，但是现在<bgsound>标签已淘汰，所有还是使用<embed>标签设置背景音乐。

7.4.3 HTML5新增的多媒体标签

<audio>标签（音频） 使用controls属性添加播放控件，包含播放、暂停和音量调节按钮等  <h1>audio标签铃铛</h1> <audio src="media/铃铛.wav" controls="controls"></audio>

<video>标签（视频）   <h1>video标签第五空间</h1> <video src="media/第五空间.mp4" controls="controls"></video>

第八章利用CSS制作导航菜单

8.1 水平顶部导航栏

8.1.1 简单水平导航栏的设计与实现

<nav>标签用于标记导航栏，以便后续与网站的其他内容整合，所以常用<nav>标签在页面上创建导航栏菜单区域 在<nav>的首尾标签之间使用无序列表<ul>标签配合列表标签<li>创建菜单选项

列表样式的设计 使用list-style-type属性去掉默认标记，为了使列表元素能够在同一行显示，为<li>列表选项定义浮动效果  <style> /* 8.1.1.2 列表样式的设计 */ li{ float:left; } ul{ list-style-type: none; } </style>

超链接样式的设计 去掉下划线样式，设置超链接之间的间距，要先把超链接设为块级元素，才能设置超链接的宽度          a{ text-decoration: none; display: block; width:100px; padding:10px; text-align: center; }

鼠标事件 设置超链接未被访问和访问后的样式并设置鼠标悬停在超链接上和活动链接（鼠标点击的一刹那）的样式     /* 8.1.1.4 鼠标事件 */ a:link,a:visited{ background-color: #ff0000; color: #ffffff; } a:hover,a:active{ background-color: #ffffff; color: #ff0000; }

8.1.2 下拉子菜单导航栏的设计与实现

导航栏的创建 在nav的首尾标签之间，使用div标签创建菜单范围，结合无序列表ul和有序列表ol标签，配合列表选项li创建菜单选项，其中选项内容使用超链接的形式，超链接地址设置为空链接

列表样式的设计 去掉列表标记，设置选项在同一行显示  ul,ol{ list-style-type: none; margin: 0px; padding: 0px; } ul li{ float: left; } ul li ol li{ float:none; }

二级菜单的隐藏和显示设计 设置二级菜单隐藏，当鼠标悬停在一级菜单上时二级菜单显示   /* 8.1.2.3 二级菜单的隐藏和显示设计 */ ul li ol{ display: none;/* 二级菜单设为隐藏 */ } ul li:hover ol{ display: block;/* 鼠标悬停在一级菜单上时二级菜单显示 */ }

DIV样式的设计 设置一级菜单之间的宽度   /* 8.1.2.4 DIV样式的设计 */ a{ text-decoration: none; display: block; width:100px; text-align: center; padding:10px; }

超链接样式的设计 设置一级菜单和二级菜单的背景颜色和文字颜色   ul li a{ background-color: #ff0000; color:#eeeeee; } ul li ol li a{ background-color:#eeeeee; color: #ff0000; }

鼠标事件 鼠标悬停和点击一级标题的时候设置下边框，鼠标悬停和点击二级标题的时候设置背景颜色和文字颜色 /* 8.1.2.6 鼠标事件 */ ul li a:hover,ul li a:active{ border-bottom: #aaccff solid 5px; } ul li ol li a:hover,ul li ol li a:active{ border-bottom: none; background-color: #af0000; color:#eeeeee; }

8.2 纵向侧边导航栏

8.2.1 简单纵向导航栏的设计与实现

导航栏的创建 普通的纵向导航栏同样可以使用超链接和列表元素来实现，只需要将文字链接设置成块级元素，不过，纵向导航栏不需要设置列表选项的浮动属性

DIV样式的设计 对导航栏所处的div样式进行设置，设置宽度、背景颜色和文字的颜色和对齐方式

列表样式的设计 去掉列表标签的默认实心圆点样式，并给超链接设置文字对齐方式和去掉下划线和设置超链接的宽度

超链接样式的设计 设置超链接未被访问和访问后的背景颜色和文字颜色，设置鼠标悬停在超链接上和鼠标点击超链接的时候的背景颜色和文字颜色

8.2.2 出式子菜单导航栏的设计与实现

导航栏的创建

DIV样式的设计 对div和文字设置css样式

二级菜单的隐藏和显示设计 给二级菜单设置隐藏效果，当鼠标悬停在一级菜单的时候给二级菜单设置显示效果二级菜单的定位： 为了二级菜单能在从属的一级菜单正右方显示，需要设置二级菜单的绝对定位和一级菜单的相对定位

列表样式的设计 去掉列表项的实心圆点样式，并设置外边距和内边距

超链接样式的设计 给超链接设置宽高并去掉下划线，设置文字对齐方式和背景颜色和文字颜色

8.3 底部固定导航栏

8.3.1 导航栏的创建

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>底部导航栏的制作</title> </head> <body> <nav> <div class="fix-footer"> <ul> <li><a href="#">首页</a></li> <li><a href="#">前端</a></li> <li><a href="#">后台</a></li> <li><a href="#">移动应用</a></li> </ul> </div> </nav> </body> </html>

8.3.2 列表设计的样式

8.3.3 菜单固定底部的设计

/* 8.3.3 菜单固定底部的设计 */ .fix-footer{ position: fixed; bottom: 0%; }

8.3.4 超链接样式的设计

/* 8.3.4 超链接样式的设计 */ a{ display: block; width: 80px; padding: 10px; text-align: center; text-decoration: none; }

8.3.5 鼠标事件

/* 8.3.5 鼠标事件 */ a:link,a:visited{ background-color: #0000ff; color: #ffff00; } a:hover,a:active{ background-color:#ffff00 ; color: #0000ff; }

第九章 DIV+CSS布局

9.1 DIV+CSS概述

9.1.1 认识DIV

div标签属于块级元素，中间可以放置任何内容，包括其他的div标签，div相当于一个简单的容器

9.1.2 DIV的宽度设置

宽高属性 宽度：width 高度：height 单位：px（像素）和百分比（占父元素的百分比）

div标签内直接设置宽高 <div style="width:200px; height:200px">

div使用选择器设置宽高

div高度的百分比设置问题 如果div的宽度设置了百分比，则相对父元素相应改变宽度

9.2 DIV+CSS的应用

9.2.1 DIV元素的布局技巧

设置div的左右外边距设为自动，就能使盒子居中     /* 9.2.1 DIV元素的布局技巧盒子设置为居中*/ #d3{ width: 300px; height: 100px; border: #00aaff solid 3px; margin-left: auto; margin-right: auto;//左右外边距设置为自动 }

9.2.2 DIV元素的宽度自适应

DIV元素的宽度自适应 宽度自适应是指两个并排的DIV，其中左边的div为固定宽度，右边div则根据浏览器的宽度自行调整    /* 9.2.2 DIV元素的宽度自适应 */ *{ margin: 0; padding: 0; } #all{ height:200px; border: #ff0000 solid 3px; } #left{ width:200px; height:100px; border: #aaff00 solid 3px; float: left; } #right{ height:200px; border: #00ffaa solid 3px; margin-left: 200px; }      HTML代码： <div id="all"> <div id="left">左侧盒子固定宽度</div> <div id="right">右侧盒子自适应宽度</div> </div>

9.2.3 DIV内容的居中

垂直居中用行高设置，设置行高和div的高度一致    /* 9.2.3 DIV内容的居中 */ #d4{ width: 300px; height: 100px; border: #00aaff solid 3px; text-align: center;/*水平居中 */ line-height: 100px;/* 垂直居中(设置行高和盒子高度一致) */ }

9.2.4 DIV元素的嵌套

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>DIV元素的嵌套</title> <style> .all{ width:700px; height:700px; border:2px solid red; margin: 0px auto; } .top{ width:700px; height:100px; background-color: lightcyan; } .main{ width:700px; height:520px; } .main .left{ width:180px; height:500px; background-color: yellow; float:left; margin: 10px; } .main .right{ width:480px; height:500px; background-color: lightgreen; float: left; margin: 10px; } .footer{ width:700px; height:80px; background-color: lightgray; } </style> </head> <body> <div class="all"> <div class="top"></div> <div class="main"> <div class="left"></div> <div class="right"></div> </div> <div class="footer"></div> </div> </body> </html>

9.3 DIV+CSS发典型布局

9.3.1 左中右布局

左中右布局 左边导航菜单，中间主要内容，右边表单或链接   <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 10px auto; padding: 0px auto; font-size: large; } .all{ background-color: red; width:700px; height:500px; } .left,.main,.right{ text-align: center; height:480px; line-height: 480px; float: left; } .left{ background-color: antiquewhite; width:150px; } .main{ background-color: lightcyan; width:400px; } .right{ background-color: antiquewhite; width:150px; } </style> </head> <body> <div class="all"> <div class="left">导航菜单</div> <div class="main">视觉集中区域，主要内容</div> <div class="right">表单或链接</div> </div> </body> </html>

9.3.2 上中下布局

上中下布局 上面导航栏，中间主要内容，下面版权信息   <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0px auto; padding: 0px auto; font-size: large; } .all{ background-color: red; text-align: center; width:700px; height:500px; } .top{ background-color: antiquewhite; width:680px; height:80px; line-height: 80px; } .main{ background-color: lightcyan; width:680px; height:340px; line-height: 340px; } .footer{ background-color: antiquewhite; width:680px; height: 80px; line-height: 80px; } </style> </head> <body> <div class="all"> <div class="top">导航或者横幅广告</div> <div class="main">视觉集中区域，主要内容</div> <div class="footer">版权信息</div> </div> </body> </html>

9.3.3 混合布局

混合布局 上中下布局和左中右布局混合起来      <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0px auto; padding: 0px auto; width:100%; height: 100%; } .all{ border: 2px dashed red; width:95%; height:100%; } .top{ background-color: pink; width:100%; height:15%; } .main{ width:100%; height:75%; } .left{ background-color: yellow; width:20%; float: left; } .center{ background-color: lightcyan; width:60%; float: left; } .right{ background-color: yellow; } .footer{ background-color: pink; width:100%; height:10%; } </style> </head> <body> <div class="all"> <div class="top"></div> <div class="main"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div> <div class="footer"></div> </div> </body> </html>

第十章 Javascript的应用

10.1 JavaScript概述

10.1.1 JavaScript简介

JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，能够与HTML、Java语言一起在web页面中与web客户交互，它无须经过先将数据传给服务器端、在传回来的过程，而直接可以由客户端的应用程序处理，从而可以开发客户端的应用程序等。JavaScript是通过嵌入或调入在标准的HTML语言中实现的，弥补了HTML语言的缺陷，通常具有以下几个特点： 10.1.1.1简单性 JavaScript是一种脚本语言，采用小程序段的方式实现编程。 10.1.1.2 动态性 JavaScript是动态的，可以直接响应用户和客户的输入，无序经过web服务程序，通过事动来响应用户的请求 10.1.1.3 跨平台性 JavaScript依赖浏览器，与操作环境无关，只要能运行浏览器的计算机、支持JavaScript的浏览器就可以正确执行 10.1.1.4 安全性 JavaScript是一种安全性语言，不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，可有效的防止数据的丢失 10.1.1.5 基于对象的语言 JavaScript是一种基于对象的语言，同时可以看作是一种面向对象的语言。这意味着它能将特定功能封装在对象中

10.1.2 JavaScript入门案例

JavaScript程序不能独立运行，必须依赖HTML文件，通常将JavaScript放置在script标记内 语法： <script type="text/javascript"> //(JavaScript代码） <script> script是成对标记，type属性说明脚本的类型，属性值"text/javascript"意思是使用JavaScript编写的程序

10.1.3 JavaScript放置的位置

JavaScript代码一般放置在页面的head或body部分，当页面载入时，会自动执行body部分的JavaScript，而位于head部分的JavaScript只有被显式调用时才会被执行  10.1.3.1 head标记中的脚本 JavaScript自定义函数必须以function关键字开始，然后给自定义函数命名，函数名称后面一定要有括号，括号里可以有参数，也可以无参数    body标记中的脚本 script标记放在主体body标记中，JavaScript代码可以定义成函数形式，在主体body标记中调用或通过事件触发 外部js文件中的脚本 js中的代码：function message(){ alert("调用外部js文件中的函数！"); } html代码  <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/demo.js"> document.write("这条语句没有执行，被忽略掉了") //因为指定了外部路径，执行的是外部路径所指的代码，script内的代码不会执行 </script> </head> <body> <form> <input name="btn1" type="button" onclick="message()" value="调用外部js文件的JavaScript的函数"/> </form> </body> </html>

10.2 JavaScript语法

10.2.1 语法基础

10.2.1 语法基础 10.2.1.1 区分大小写 在JavaScript语言中，对大小写是敏感的 10.2.1.2 变量不区分类型 JavaScript中变量声明，采用其弱类型，即变量在使用前无须进行变量数据类型声明，而由解释器在运行时检查其数据类型 10.2.1.3 每行代码结尾可以省略分号 在JavaScript中，每条语句结尾不是必须加分号的，但是如果多个语句写在一行中，那么语句之间必须加上分号 10.2.1.4 注释与C、C++、Java等语言相同 //单行注释 /* 多行注释 */

10.2.2 标识符和常用变量

10.2.2.1 标识符 标识符就是用来表示变量，函数的名字 10.2.2.2 变量声明 var可应用于JavaScript中任何类型的变量声明 10.2.2.3 变量类型 变量类型一共有6种，Number数值型，String字符型，Object对象，Boolean布尔型，Null，Undefined

10.2.3 运算符与表达式

10.2.3.1 算术运算符和表达式 算数运算符负责算数运算 加减乘除，%取模，++递增，--递减 10.2.3.2 关系运算符和表达式 关系运算符用于比较运算符两端的表达式的值，确定二者的关系，根据运算符结果返回一个布尔值 10.2.3.3 逻辑运算符和表达式 用来执行逻辑运算 10.2.3.4 赋值运算符和表达式 赋值运算符的作用是将右操作数的值赋给左操作数 10.2.3.5 条件运算符和表达式 三元运算符：语法：变量=表达式1？表达式2：表达式3 如果表达式1的结果为真，则将表达式2的值赋给变量，否则将表达式3的值赋给变量 10.2.3.6 逗号运算符和表达式 运算规则是先计算第一个表达式的值，在计算第二个表达式的值，以此类推

10.2.4 程序设计

10.2.4.1 条件分支语句 if...else语句： if（条件）{         //条件为真执行的语句 } else{         //条件为假执行的语句 } switch分支语句可以根据一个变量或表达式的不同取值采取不同的处理方法 switch（表达式）{         case 1：执行语句1；break；         case 2：执行语句2；break；         case 3：执行语句3；break；         default：默认执行语句； } 关键字break会使代码跳出switch语句，如果case语句一条都不匹配，就会执行default语句 10.2.4.2 循环语句 for(变量=开始值；变量<=结束值；变量=变量+步进值） { /*循环体语句*/ } while语句：如果条件成立，则一直循环，直到条件不成立 while（条件） { /*循环体语句*/ } do...while语句先执行循环体一次，在判断条件是否成立，如果条件成立，则一直循环，直到条件不成立 do { /*循环体语句*/ } while(条件）；

10.2.5 函数

10.2.5.1 定义函数 function函数名（） {         /*函数代码*/ } 10.2.5.2 函数返回值 需要返回某个值的函数必须使用return 10.2.5.3 函数调用 通过函数名加上括号中的参数就能调用

10.3 JavaScript对象

10.3.1 对象基础

10.3.1.1 概述 JavaScript"面向对象编程”的意思是就是把JavaScript能涉及到的范围划分成大大小小的对象，所有的编程都以对象为出发点，基于对象，小到一个变量，大到网页文档、窗口甚至屏幕，都是对象。 在JavaScript里面创建一个新的空对象，例如： var o =new object(); JavaScript的对象可分为本地对象和内置对象、Browser对象和HTML DOM对象 （1）本地对象 对象名称说明 ArrayArray对象用于在单个的变量中存储多个值 Boolean代表两个值true和false Date用于处理日期和时间 Math执行数学任务 Number原始数值的封装对象 String出于处理文本（字符串） RegExp表示正则表达式 Global全局属性和函数可用于所有内建的JavaScript对象 （2）Browser对象 Browser Objects也可被称作BOM，是用来与浏览器窗体网页产生互动的对象。 （3）HTML DOM对象 HTML DOM对象定义了用于HTML的一系列标准对象，以及访问和处理HTML文档的标准方法。 10.3.1.2 属性 属性是对象的特性值的表述 10.3.1.3 方法 方法指对象可以执行的行为

10.3.2 常用对象

10.3.2.1 window对象 通过window对象移动或调整浏览器窗口的大小，有四种方法： 1.moveBy（x,y)从当前位置水平移动窗体X个像素，垂直移动窗体Y个像素 2.moveTo:移动窗体左上角到相对于屏幕左上角的（x，y）点 3.resizeBy：相对窗体当前的大小，宽度调整W个像素，高度调整H个像素 4.resizeTo:把窗体宽度调整为w个像素，把高度调整为h个像素 移动窗口

10.4 JavaScript事件

10.4.1 事件及事件处理

页中的每个元素都可以产生某些触发JavaScript函数的事件。 事件处理的过程可以这样表示：发生事件——>启动事件处理程序——>事件处理程序做出反应

10.4.2 常用事件

常用事件主要包括一般页面事件、鼠标事件、键盘事件等

10.4.3 事件应用举例