Web前端技术全套教学课件.pptx

Web前端技术概述;学习导图;;前端技术发展历程;起源阶段(1990-1994);第一次浏览器之争(1995-1999);第一次浏览器之争(1995-1999);动态页面的崛起(2000-2004);第二次浏览器之争(2004-2013);HTML5技术的兴起和快速发展 (2008-至今);;前端学习路线;;前端开发工具;前端开发工具;前端开发工具;前端开发工具;;Web前端岗位的出现;Web前端工程师;前端市场需求与就业;前端市场需求与就业;HTML语言基础;学习导图;;2.1.1HTML概述;2.1.2 HTML元素;2.1.2 HTML元素;2.1.2 HTML元素;2.1.3 HTML文档的基本结构;2.1.4 HTML中颜色的表示;;2.2.1标题元素;2.2.2元信息元素;2.2.2元信息元素;;2.3页面主体元素;;2.4文字与段落元素;2.4文字与段落元素;2.4文字与段落元素;段落元素使用p标签，换行元素使用br标签，水平线元素通过hr标签;预格式化元素pre，保留HTML文档中的Enter键和空格键，使浏览器不解析pre中定义的文本。;;2.5列表与表格元素;默认情况下，有序列表是以阿拉伯数字作为列表项的前导符，使用属性type可以改变有序列表的前导符，可分别取1、A、a、I、i等取值。还可以设置start属性，定义有序列表前导符的起始项。;表格由table元素定义，每个表格均有若干行（tr标签定义），每行被分割为若干单元格（td标签定义），表格表头使用th标签定义。;;2.6图片与多媒体元素;;2.7超链接元素;根据链接目标内容的不同，可以将链接分为以下几种类型：;脚本链接：指的是使用JavaScript脚本作为链接的目标。 a href=javascript:alert(您好，欢迎访问我的站点)欢迎访问/a;;2.8表单元素;当用户要在表单中键入字母、数字等内容时，就会用到文本域。文本域通过input type=text标签来设定。;input type=radio标签定义了单选框选项;提交按钮：input type=submit 重置按钮：input type=reset 普通按钮：input type=button 图像按钮：input type=image name=btnImage src=images/btnImg.jpg width=60 height=30;文件域file，用于将本地文件上传到服务器端，使用文件域上传文件到服务器，需要在form中修改表单的编码，即设置form enctype=multipart/form-data input type=file name=photo;select,option标签定义下拉列表;文本域元素textarea，支持输入多行文本，常用于备注、留言。 textarea name=note rows=10 cols=30备注信息/textarea;fieldset元素用于分组，legend元素为每个分组定义标题;CSS层叠样式表基础;学习导图;;3.1.1CSS概述;3.1.2 CSS基本语法;3.1.3 在页面中使用CSS;在页面中使用CSS;;3.2.1元素选择器;2.2.2类选择器;3.2.3 ID选择器;3.2.4后代选择器;3.2.5 子元素选择器;3.2.6 相邻兄弟元素选择器;3.2.7 兄弟元素选择器;3.2.8 复合选择器;3.2.9 属性选择器;3.2.8复合选择器;3.2.9属性选择器;3.2.10 伪类选择器;3.2.10伪类选择器;3.2.11伪元素选择器;;3.3.1字体属性;3.3.2文本属性;;3.3.3颜色和背景属性;3.3.3 颜色和背景属性;3.3.3颜色和背景属性;3.3.3颜色和背景属性;3.3.4列表属性;3.3.4列表属性;3.3.5表格属性;3.3.5表格属性;;3.4.1盒子组成;盒子的宽度=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界;3.4.2盒子边框属性;3.4.2盒子边框属性;3.4.3盒子内边距属性;3.4.3盒子内边距属性;3.4.4盒子外边距属性;;3.5.1 标准文档流;3.5.2元素在标准流中的定位;3.5.2元素在标准流中的定位;3.5.2元素在标准流中的定位;3.5.2元素在标准流中的定位;3.5.2元素在标准流中的定位;3.5.3 元素的定位属性;3.5.3元素的定位属性;3.5.3元素的定位属性;3.5.4元素的浮动属性;3.5.4元素的浮动属性;3.5.4元素的浮动属性;3.5.4元素的浮动属性;3.5.5元素的显示属性;3.5.5元素的显示属性;3.5.5元素的显示属性;3.5.5元素的显示属性;3.5.6元素的可见性属性;3.5.7元素的溢出处理属性;CSS