静态网页制作教程(入门级)课件.pptxVIP

静态网页制作教程(入门级)课件

目录静态网页概述HTML基础CSS基础图片和链接表格和表单布局和定位实战案例

01静态网页概述

0102静态网页的定义静态网页的内容在生成后无法在服务器端进行修改，只能在本地通过编辑器进行修改，然后重新上传到服务器。静态网页是指内容固定不变的网页，由HTML、CSS和JavaScript等静态文件组成，不涉及服务器端动态生成内容。

由于静态网页的内容固定不变，不需要进行服务器端动态处理，因此加载速度较快。加载速度快易于维护SEO友好静态网页的代码结构简单，易于理解和修改，适合个人和小型网站进行维护。搜索引擎对静态网页的抓取和索引更加友好，有利于网站的SEO优化。030201静态网页的特点

动态网页是指内容可以动态变化的网页，需要服务器端进行数据处理和生成内容。动态网页可以根据用户输入、数据库数据等因素动态展示不同内容，而静态网页的内容是固定的。动态网页需要后端编程语言（如PHP、Python等）的支持，而静态网页只需要HTML、CSS和JavaScript等前端技术。静态网页与动态网页的区别

02HTML基础

HTML：超文本标记语言，用于创建网页的标准标记语言。HTML由一系列的元素和标签组成，用于描述网页的结构和内容。HTML文档是由HTML元素组成的，这些元素可以包含其他元素，文本，超链接等。HTML简介

每个HTML标签都有特定的含义和用途，例如p标签表示段落，h1标签表示一级标题等。标签通常成对出现，如p和/p，表示一个段落的开始和结束。HTML标签是由尖括号()包围的关键词，例如html、body、p等。HTML标签

HTML元素HTML元素是由一个开始标签、内容和结束标签组成的。例如，pHelloWorld/p是一个段落元素，其中p是开始标签，HelloWorld是内容，World是结束标签。有些元素只有一个标签，如img用于插入图片。

HTML属性是定义元素特性的名称和值的对。例如，imgsrc=image.jpg中的src属性指定了图片的来源。常见的属性包括src（指定资源路径）、href（指定链接地址）、class（指定类名）等。HTML属性

03CSS基础

CSS全称：层叠样式表（CascadingStyleSheets）CSS是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等衍生技术）文档的呈现。CSS描述了如何在屏幕、纸张或其他媒介上渲染元素。CSS是Web标准中的一部分，是一种分离内容与表现的方式SS简介

CSS选择器根据HTML元素选择样式，如p、div等。以点开头，后跟类名，如.myClass。以井号开头，后跟ID名，如#myID。根据元素的属性选择样式，如[type=text]。元素选择器类选择器ID选择器属性选择器

样式规则由两部分组成：选择器（selector）和声明块（declarationblock）。声明块由大括号包围，包含一个或多个声明，每个声明由属性和值组成。属性和值之间用冒号分隔，多个声明之间用分号分隔。CSS样式规则

CSS盒模型是CSS布局的基础，每个HTML元素都可以看作是一个盒子。盒模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）四部分组成。通过设置盒模型的各个属性，可以控制元素的大小、位置和边距等。CSS盒模型

04图片和链接

总结词描述图片标签的基本属性和用法详细描述图片标签用于在网页中插入图片，它具有src、alt、width和height等常用属性。src属性指定图片的来源，alt属性用于描述图片内容，width和height属性用于设置图片的尺寸。图片标签img

总结词描述链接标签的基本属性和用法详细描述链接标签用于创建超链接，它具有href属性，用于指定链接的目标地址。通过设置target属性，可以控制链接的打开方式（如在新窗口中打开链接）。链接标签a

相对路径和绝对路径总结词解释相对路径和绝对路径的概念和用法详细描述相对路径是相对于当前网页文件的路径，而绝对路径是完整的网址，包括协议、域名和文件路径。在网页制作中，根据需要选择使用相对路径或绝对路径来引用资源。

05表格和表单

用于创建用户输入表单，收集用户信息。使用`form`标签来创建表单，表单中包含各种输入元素，如文本框、下拉框、单选框等。表单提交后，数据会发送到服务器进行处理。表单标签form详细描述总结词

示例```htmlformaction=/submit_formmethod=post表单标签form

labelfor=name姓名：/labellabelfor=email邮箱：/label表单标签form

/form```表单标签for