Web前端实用技术示例教程 廖雪花 著 大中专 文轩网

部分 初级篇·············································································································1 1.1 一个简单的HTML5页面代码是什么样子的？·······················································.2 1.2 ＜html＞、＜body＞、＜head＞标签真的可以省略吗？··················································.2 1.3 如何安装与使用Sublime Text? ·················································································.4 1.3.1 安装步骤·········································································································.4 1.3.2 使用·················································································································.5 1.4 什么是tableless design页面布局？········································································.11 1.4.1 table布局······································································································.11 1.4.2 DIV+CSS 布局······························································································.13 1.5 什么是行内元素与块级元素？···············································································.14 1.6 什么是元素套框结构？···························································································.19 1.7 如何选择正确的列表标签？···················································································.22 1.7.1 无序列表·······································································································.22 1.7.2 有序列表·······································································································.23 1.7.3 定义列表·······································································································.24 1.8 什么是文档流？·······································································································.25 1.9 什么是相对定位？如何相对定位？········································································.26 1.10 什么是绝对定位？如何绝对定位？······································································.28 1.11 如何让文本水平居中？·························································································.30 1.12 如何让文本垂直居中？·························································································.31 1.13 如何让元素显示在其他元素之上？······································································.33 1.14 如何制作一面照片墙？·························································································.35 1.15 input有多少种？····································································································.37 1.15.1 传统的10个输入控件··············································································.37 1.15.2 新增的13个输入控件··············································································.39 1.16 如何组合使用＜select＞和＜option＞标签？······························································.43 1.17 为什么＜datalist＞标签灵活又方便？······································································.45 1.18 颜色有哪几种标识方式？·····················································································.47 1.18.1 英文单词表示颜色····················································································.47 1.18.2 十六进制表示颜色····················································································.48 1.18.3 RGB表示颜色··························································································.49 1.18.4 HSL表示颜色···························································································.50 1.19 CSS的光标功能有哪些？·····················································································.51 1.19.1 新的内建光标···························································································.51 1.19.2 not-allowed光标·······················································································.51 1.19.3 none隐藏光标···························································································.52 1.20 如何使用多媒体标签？·························································································.52 1.20.1 ＜embed＞标签····························································································.52 1.20.2 ＜video＞标签······························································································.53 1.20.3 ＜audio＞标签······························································································.54 1.21 CSS属性在JavaScript中如何使用？···································································.54 1.21.1 读写行内样式···························································································.54 1.21.2 使用style对象··························································································.55 1.21.3 编辑样式···································································································.58 1.21.4 读取媒体查询···························································································.58 1.21.5 使用CSS 事件··························································································.59 1.22 JavaScript定位DOM元素的几种方式·································································.61 1.22.1 显示信息交互···························································································.61 1.22.2 控制台监控·······························································································.63 1.23 Document对象如何查找定位元素？····································································.64 1.23.1 getElementById( )定位··············································································.64 1.23.2 getElementsByClassName( )定位······························································.64 1.23.3 getElementsByTagName( )定位·································································.65 1.23.4 querySelector( )定位··················································································.67 1.24 JavaScript如何操纵DOM元素节点？·································································.67 1.24.1 节点创建 API ····························································································68 1.24.2 页面修改API····························································································.69 1.24.3 节点查询API····························································································.70 1.25 JavaScript如何操纵DOM元素属性？·································································.72 1.26 JavaScript数组的创建方式有哪些？····································································.74 1.26.1 字面量表示法···························································································.74 1.26.2 使用Array( )构造函数··············································································.74 1.26.3 使用Array(n)构造函数·············································································.74 1.27 JavaScript数组函数如何使用？············································································.75 1.27.1 pop( )和push( )···························································································.75 1.27.2 shift( )和unshift( ) ······················································································.75 1.27.3 join( ) ··········································································································76 1.27.4 sort( ) ··········································································································76 1.27.5 reverse( ) ·····································································································76 1.27.6 splice( ) ·······································································································77 1.27.7 slice( ) ·········································································································77 1.27.8 concat( ) ······································································································78 1.27.9 indexOf( )和lastIndex( )·············································································.78 1.27.10 every( )和some( ) ·····················································································.78 1.27.11 fill( ) ··········································································································79 1.27.12 filter( )·······································································································79 1.27.13 find( )和findindex( )·················································································.79 1.27.14 map( )········································································································80 1.27.15 toString( )··································································································80 1.28 JavaScript 的Date对象如何使用？········································································.80 1.28.1 定义Date对象···························································································.80 1.28.2 获取Date对象的各个时间元素·······························································.80 1.29 JavaScript的Math对象如何使用？······································································.82 1.29.1 Math.random( ) ···························································································82 1.29.2 Math.abs( ) ··································································································83 1.29.3 Math.max( )和Math.min( )········································································.83 1.29.4 取整函数···································································································.83 1.29.5 Math.sqrt( ) ·································································································84 1.29.6 对数、指数、幂函数················································································.84 1.29.7 其他Math函数·························································································.84 第二部分 进阶篇···········································································································85 2.1 如何使用background-clip属性设置半透明边框？················································.86 2.2 如何实现多重边框的效果？···················································································.87 2.2.1 box-shadow·····································································································87 2.2.2 outline·············································································································87 2.3 如何改变背景图的定位？·······················································································.88 2.4 如何设置边框内圆角效果？···················································································.89 2.5 如何设置多样式背景？···························································································.92 2.5.1 生成条纹背景·······························································································.92 2.5.2 修改背景大小·······························································································.93 2.5.3 生成垂直条纹·······························································································.94 2.5.4 生成斜向条纹·······························································································.94 2.5.5 实现更多角度的渐变条纹············································································.95 2.5.6 使用一种颜色实现同色系条纹····································································.96 2.6 如何设置CSS渐变效果？······················································································.97 2.6.1 设置网格图案·······························································································.97 2.6.2 设置波点图案·······························································································.97 2.6.3 设置棋盘图案·······························································································.98 2.7 如何实现背景的随机效果？··················································································100 2.8 如何设置装饰性的图片边框？··············································································102 2.9 如何设置灵活的椭圆？··························································································103 2.9.1 设置自适应椭圆··························································································104 2.9.2 设置自适应半椭圆·······················································································105 2.9.3 设置四分之一椭圆·······················································································106 2.10 什么是伪类？········································································································107 2.10.1 :hover 伪类·······························································································107 2.10.2 :nth-child(n)伪类······················································································107 2.10.3 :nth-of-type(n)伪类···················································································108 2.11 什么是伪元素？····································································································108 2.11.1 ::first-line伪元素······················································································109 2.11.2 ::first-letter伪元素····················································································109 2.11.3 ::before和::after伪元素···········································································109 2.12 如何根据子元素的数量来设置样式？································································.110 2.13 如何将矩形框修改为平行四边形框？································································.113 2.14 如何将图片裁剪成菱形？···················································································.115 2.15 如何实现文本的连字符断行？···········································································.118 2.16 如何插入换行？···································································································.118 2.17 如何实现文本行条纹背景？················································································121 2.18 如何调整Tab的宽度？························································································122 2.19 如何扩大区域范围？····························································································123 2.20 如何设置CSS元素宽度自适应内部元素？························································124 2.21 如何精确控制表格列宽？····················································································127 2.22 如何设置连字的字形？························································································129 2.23 什么是图标字体？································································································130 2.24 如何对＆字符进行美化？·····················································································132 2.25 如何自定义文本下画线？····················································································133 2.26 如何实现多种文字效果？····················································································135 2.26.1 凸起效果··································································································135 2.26.2 描边效果··································································································136 2.26.3 发光效果··································································································137 2.26.4 3D效果····································································································138 2.27 什么是JavaScript的顺序结构？··········································································139 2.28 什么是JavaScript的分支结构？··········································································139 2.28.1 if语句·······································································································139 2.28.2 if…else语句·····························································································140 2.28.3 多重if…else语句····················································································140 2.28.4 嵌套if…else语句····················································································141 2.28.5 switch case语句·······················································································141 2.29 什么是Java Script的循环结构？·········································································142 2.29.1 for循环·····································································································143 2.29.2 while循环································································································143 2.29.3 do…while循环·························································································143 2.29.4 for…in循环······························································································144 2.29.5 break和continue······················································································144 2.30 什么是定时器？····································································································145 2.30.1 setTimeout (Expression , DelayTime ) ·····················································.145 2.30.2 setInterval ( Expression,DelayTime ) ·······················································.145 2.30.3 clearTimeout (对象) ··················································································146 2.30.4 clearInteval (对象) ····················································································146 2.31 canvas绘图技术有哪些？····················································································147 2.31.1 ＜canvas＞标签的基本绘图步骤································································147 2.31.2 canvas 绘图中的基本方法·······································································148 2.31.3 线型相关属性··························································································148 2.31.4 运用canvas绘图······················································································149 2.32 canvas图像技术有哪些？····················································································153 2.32.1 drawImage ( )····························································································153 2.32.2 getImageData ( )和putImageData ( ) ·························································156 第三部分 不错篇·········································································································157 3.1 如何实现环形文字效果？······················································································158 3.2 如何实现切角效果？······························································································159 3.2.1 CSS渐变方式······························································································159 3.2.2 CSS裁剪路径方式······················································································161 3.3 如何实现梯形标签页的效果？··············································································161 3.4 如何实现简单饼图效果？······················································································162 3.4.1 transform·······································································································163 3.4.2 SVG··············································································································167 3.5 如何添加多样式背景投影？··················································································170 3.5.1 背景的单侧投影··························································································170 3.5.2 背景的邻边投影··························································································171 3.5.3 背景的双侧投影··························································································171 3.6 如何给不规则图形设置阴影？··············································································172 3.7 如何给图片添加染色效果？··················································································173 3.7.1 滤镜（filter）·······························································································173 3.7.2 混合模式······································································································174 3.8 如何实现毛玻璃效果？··························································································175 3.9 如何实现模拟折角效果？······················································································179 3.9.1 45°折角········································································································179 3.9.2 其他角度折角······························································································180 3.10 如何实现自定义复选框？····················································································183 3.10.1 自定义复选框··························································································183 3.10.2 开关按钮··································································································185 3.11 如何实现轮播图？································································································186 3.12 如何设置背景的遮罩效果？················································································190 3.12.1 伪元素······································································································190 3.12.2 box-shadow·······························································································191 3.12.3 backdrop ···································································································191 3.13 如何实现背景的弱化？························································································192 3.14 什么是固定定位？································································································194 3.15 如何设置背景图集（一图多用）？·····································································195 3.16 如何实现页面滚动提示？····················································································197 3.17 如何利用CSS实现图片对比？···········································································199 3.18 如何实现背景覆盖和内容定宽？·········································································202 3.19 如何实现元素垂直居中？····················································································204 3.20 如何设置页面页脚？····························································································206 3.21 如何实现动画的缓动效果？················································································209 3.21.1 实现弹跳动画的缓动效果·······································································209 3.21.2 实现弹性过渡效果···················································································210 3.22 如何设置图片逐帧显示？····················································································212 3.23 如何设置文字的闪烁效果？················································································214 3.23.1 CSS 动画实现··························································································214 3.23.2 普通的闪烁效果·······················································································215 3.24 如何实现文本内容逐个显示？············································································216 3.25 如何实现平滑的动画效果？················································································217 3.26 如何实现沿环形路径平移的动画效果？·····························································219 3.27 什么是CSS变量？·······························································································222 3.27.1 CSS 中声明一个变量···············································································222 3.27.2 使用JavaScript操作CSS变量·······························································223 3.28 如何编辑展示后的页面？····················································································225 3.29 如何利用CSS Grid实现响应式布局？·······························································226 第四部分 框架篇·········································································································231 4.1 ES6框架··················································································································232 4.1.1 ECMAScript是什么？它与JavaScript有什么关系？·······························232 4.1.2 ES6中的let、const关键字有什么区别，如何使用它们？······················232 4.1.3 ES6用什么更简单的方法处理字符串？····················································234 4.1.4 Set和Map是什么？有什么作用？····························································236 4.1.5 ES6对Object类型做了哪些升级优化？···················································241 4.1.6 ES6对函数有哪些扩展？···········································································243 4.1.7 解构赋值的规则是什么？有哪些用途？····················································246 4.1.8 数组如何扩展？··························································································248 4.1.9 什么是Number？························································································252 4.1.10 JavaScript中如何声明一个 “类”？··························································254 4.1.11 如何优雅地处理异步操作？·····································································257 4.1.12 ES6中的Proxy有什么作用？··································································263 4.1.13 什么是JavaScript Generator？···································································266 4.2 Bootstrap框架·········································································································270 4.2.1 Bootstrap是什么？为什么使用它？···························································270 4.2.2 如何开始使用Bootstrap?·············································································271 4.2.3 如何运用Bootstrap进行自适应？······························································273 4.2.4 如何使用Bootstrap的组件？······································································276 4.2.5 如何使用Bootstrap工具类？······································································289 4.3 React 框架··············································································································292 4.3.1 为什么要使用React？·················································································292 4.3.2 什么是JSX语法？······················································································293 4.3.3 如何创建React项目？················································································294 4.3.4 React如何渲染元素?···················································································296 4.3.5 什么是React组件？如何定义一个组件?···················································297 4.3.6 如何给React组件添加样式？····································································299 4.3.7 state与props有何区别？············································································301 4.3.8 React生命周期有哪些？·············································································302 4.3.9 React元素的事件处理有何不同？·····························································305 4.3.10 React条件渲染如何实现？·······································································307 4.3.11 key的作用是什么？··················································································309 4.3.12 受控组件与非受控组件有何区别？·························································310