《网页设计与制作》全套PPT课件.pptx

;;;HTML5;HTML5;HTML5;;CSS3;;JavaScript;;;;网站设计的基本步骤;;站点定位;;设置栏目;;界面设计;;网站实现;;测试维护;;思维导图;思维导图;思维导图;;;;;开发工具;开发工具;开发工具;;Emmet;Emmet;Emmet;Emmet;Emmet;Emmet;Emmet;;;;;色彩的基本知识;色彩的基本知识;色彩的基本知识;;网页色彩搭配原则;网页色彩搭配原则;;网页中颜色的表示方式;;;;;布局方式;布局方式;;媒体查询;;;;;什么是网站;;网站结构;;URL;URL;;;;;HTML基本语法;HTML基本语法;HTML基本语法;;html基本结构;文档声明;head标签;head标签;body标签;;HTML注释;;;;;标题段落标签;标题段落标签;标题段落标签;;html基本结构;html基本结构;;HTML注释;;;;;超链接a标签;href属性;href属性;target属性;;列表标签;建立有序列表;建立无序列表;建立自定义列表;;表格标签;表格标签;表格标签;表格标题标签;表格列colgroup和col;表格结构标签thead、tbody、tfoot;合并单元格;单元格间距;;;;;样式文本标签;样式文本标签;样式文本标签;样式文本标签;;;;;img标签语法;img标签语法;;图片的插入;图片的插入;;图片超链接;;图片映射;;;;;音频元素;音频元素;;视频元素;图片的插入;;source元素;;;;;表单标签;;表单域;text;password;radio;checkbox;checkbox;file;hidden;email;url;number;range;color;date pickers;search;多行文本框;下拉选择框;下拉选择框;;表单按钮;;表单分组;;datalist标签;optgroup标签;;;;;进度条;;浮动框架;;计量条;;输出框;;;;;div标签;;span标签;;details标签;;;;;语义标签;语义标签;语义标签;;;;;什么是CSS;;CSS引入;CSS引入;;CSS特性;CSS特性;;优先级;;;;;CSS基本语法规则;CSS基本语法规则;;CSS引入;;布局常用属性;布局常用属性;布局常用属性;布局常用属性;布局常用属性;布局常用属性;布局常用属性;布局常用属性;;层叠优先级;层叠优先级;;层叠优先级;层叠优先级;;标准流中的margin;标准流中的margin;;;;;背景属性;背景属性;背景属性;背景属性;背景属性;背景属性;背景属性;背景属性;背景属性;背景属性;背景属性;背景属性;背景属性;;;;;边框属性;边框属性;边框属性;边框属性;边框属性;边框属性;边框属性;;;;;交集选择器;;派生选择器;后代选择器;子元素选择器;兄弟选择器;邻??选择器;;属性选择器;属性选择器;;列表样式;list-style-type;list-style-image;list-style-position;;;;;伪类选择器;:first-child和:last-child;:nth-child(n);状态伪类;;伪元素选择器;伪元素选择器;;结构性伪类选择器;结构性伪类选择器;结构性伪类选择器;结构性伪类选择器;结构性伪类选择器;;;;;变形transform;translate(x,y);rotate(angle);scale();skew();;过渡transition;过渡transition;过渡transition;过渡transition;过渡transition;;动画animation;动画animation;动画animation; ; ;;;;;文本属性;文本属性; ; ;;;;;;;;表格相关属性;表格相关属性;;; ;;;;;JavaScript简介;JavaScript简介; ;;基本语法规范;;基本数据类型;; ;;转为数字类型;; ;; ;;运算符;运算符;运算符;运算符;运算符;运算符;;;;; ; ; ; ;; ; ;;函数表达式;函数表达式;; ;;流程控制;流程控制;流程控制;流程控制;流程控制;流程控制;流程控制;流程控制;;;任务描述;知识准备;2.DOM节点的类型 在DOM中有许多不同的节点，HTML元素通过元素节点来表示，属性通过属性节点来表示，文档通过文档节点来表示，文本通过文本节点来表示，注释通过注释节点来表示。 1）文档节点 JavaScript通过Document类型表示文档节点，在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面。由于document对象是window对象的一个属性，因此可以作为全局对象来访问，