《静态网页基本操作》课件.pptxVIP

《静态网页基本操作》PPT课件

静态网页概述静态网页开发工具HTML基础CSS基础JavaScript基础静态网页制作实例目录

01静态网页概述

0102静态网页的定义静态网页的内容不会因用户的操作而改变，每个用户访问时都会看到相同的内容。静态网页是指内容在创建时即已确定，并且在网页服务器上预先存储的网页。

静态网页的特点加载速度快由于静态网页的内容已经预先存储，不需要进行复杂的计算或查询数据库，因此加载速度较快。易于维护静态网页的内容是固定的，不需要进行后端编程或数据库操作，因此维护起来相对简单。有哪些信誉好的足球投注网站引擎友好静态网页的内容和结构可以被有哪些信誉好的足球投注网站引擎轻松地抓取和索引，有利于提高网站的SEO排名。

动态网页的内容会根据用户的操作或输入实时生成，而静态网页的内容是预先确定的。动态网页通常需要后端编程和数据库支持，而静态网页则不需要。动态网页可以根据用户的个性化需求展示不同的内容，而静态网页的内容对所有用户都是相同的。静态网页与动态网页的区别

02静态网页开发工具

Windows系统自带的文本编辑器，可以用来编写HTML代码。记事本一款流行的文本编辑器，支持自定义插件和主题，提高编写效率。SublimeTextHTML编辑器

AdobeDreamweaver一款专业的网页开发工具，支持CSS样式编辑和网页布局设计。SublimeText通过安装插件可以支持CSS样式编辑。VisualStudioCode一款轻量级的代码编辑器，支持多种编程语言，包括CSS。CSS编辑器

123支持JavaScript的语法高亮、智能提示和调试功能。VisualStudioCode一款流行的Java集成开发环境，也支持JavaScript开发。Eclipse一款专业的JavaScript开发工具，提供丰富的代码提示和自动完成功能。WebStormJavaScript编辑器

一款免费开源的FTP客户端，支持多种操作系统，具有速度快、易用性强的特点。FileZillaWinSCPFlashFXP一款Windows平台的FTP客户端，支持文件传输和文本编辑功能。一款功能强大的FTP客户端，支持FTP和SFTP协议，具有自动捕获剪贴板、批量上传下载等功能。030201FTP工具

03HTML基础

HTML文档类型声明`!DOCTYPEhtml`用于定义文档类型和版本，告诉浏览器这是一个HTML5文档。文档头部`!DOCTYPEhtmlhtmlhead.../head/html`中的`head`标签内包含了文档的元信息，如文档的标题、字符集、样式表、脚本等。文档主体`head`标签外的部分是文档的主体，包含了网页的所有内容，如文字、图片、超链接、表格、列表等。HTML元素整个HTML文档是一个根元素，其他所有元素都是这个根元素的子元素。HTML文档结构

块级元素通常会独占一行，如`div`,`p`,`h1`,`h2`,`h3`,`h4`,`h5`,`h6`,`ul行内元素不会独占一行，多个行内元素可以放在同一行内，如`span`,`a`,`img`,`button`等。HTML元素行内元素块级元素

只有一个标签的HTML元素，如`br/`,`hr/`。单标签有开始标签和结束标签的HTML元素，如`p`,`div`,`span`,`a`等。双标签只有一个标签的HTML元素，如`img/`,`br/`,`hr/`。自闭合标签HTML标签

标准属性如`class`,`id`,`style`,`title`等。事件属性如`onclick`,`onload`,`onmouseover`等，用于响应用户的操作或网页加载时的行为。HTML属性

04CSS基础

元素选择器类选择器ID选择器属性选择器CSS选择据HTML元素选择要应用样式的元素，例如p、h1等。通过在HTML元素的class属性中指定类名来选择元素，例如.myClass。通过在HTML元素的id属性中指定ID来选择元素，例如#myID。根据元素的属性来选择元素，例如input[type=text]选择所有类型为文本的输入框。

CSS样式规则直接在HTML元素中使用style属性来定义样式规则。在HTML文档的head部分使用style标签来定义样式规则。通过link标签引入外部CSS文件来定义样式规则。使用@import规则导入外部CSS文件。内联样式内部样式表外部样式表导入样式表

010204CSS盒模型内容（Content）：元素的实际内容，包括文本、图片等。填充（Padding）：内容与边框之间的空间。边框（Border）：围绕内容和内边距的线。外边距（Margin）：元