HTML5 布局之路2025|PDF|Epub|mobi|kindle电子书版本百度云盘下载

HTML5 布局之路PDF格式电子书版下载

注意：本站所有压缩包均有解压码： 点击下载压缩包解压工具

第1章 旅途之前1

1.1讲解方法与旅途指南1

1.1.1和其他技术书籍相比，本书到底有何不同1

1.1.2书籍概览1

1.1.3推荐学习流程3

1.1.4旅途指南3

1.2 HTML5学习的前期准备3

1.3认识HTML54

1.3.1 HTML5是做什么的4

1.3.2 HTML5的由来4

1.3.3 HTML5的基本组成4

1.3.4专业化角度认识HTML54

1.3.5容易混淆的概念5

1.4了解HTML5行业前景与基本概念6

1.4.1一些行业词汇6

1.4.2 HTML5的行业并非一劳永逸6

1.4.3近几年来HTML5行业的变化7

1.4.4到底是什么决定着薪资7

1.4.5是谁决定你的去留8

1.5 HTML与CSS的学法8

1.5.1方法1整体到局部，骨架到血肉8

1.5.2方法2类比8

1.5.3方法3记忆很重要8

1.5.4方法4聚沙成塔9

1.5.5方法5循序渐进9

1.5.6方法6知识的迁移9

1.5.7方法7生活辅助学习9

1.5.8方法8实践出真知10

1.6开发工程师与Photoshop10

1.6.1图片切图10

1.6.2认识软件10

1.7切图与Photoshop相关用法11

1.7.1切图的基本流程11

1.7.2打开文件11

1.7.3找到切图目标12

1.7.4整理好要处理的图层14

1.7.5新建文件存储目标图像15

1.7.6在新文件中调整图像位置17

1.7.7修改画布大小18

1.7.8将图片按照最佳格式类型进行存储19

1.7.9图片大小处理与压缩23

1.8使用Photoshop获取图层信息24

1.8.1获取颜色24

1.8.2文字内容与特点26

1.8.3撤销26

1.8.4圆角大小的测量26

1.8.5阴影的测量28

1.8.6将文字处理成图像29

1.8.7 Photoshop快捷键总结29

1.9代码编辑器29

1.9.1 Sublime Text29

1.9.2其他代码编辑器31

1.10浏览器调试32

1.10.1为何要进行浏览器调试32

1.10.2浏览器调试的基本要求32

1.10.3浏览器调试方法33

第2章 HTML5入门34

2.1网站开发流程34

2.1.1网站开发流程图34

2.1.2网站需求调查阶段34

2.1.3网站技术分析阶段36

2.1.4网站页面策划阶段36

2.1.5网站设计开发阶段36

2.1.6网站测试改进阶段37

2.1.7前端工程师负责的部分37

2.2第一个HTML文件37

2.2.1创建基本的网站文件夹37

2.2.2创建第一个HTML文件38

2.2.3 HTML标签的书写规则39

2.2.4 HTML书写规则的问题区40

2.3基本的HTML结构42

2.3.1一个HTML文件的基本组成42

2.3.2文档声明42

2.3.3 title标题43

2.3.4 meta元信息43

2.3.5 HTML文件的内容区46

2.3.6 HTML注释46

2.3.7网站开发常用标签47

2.3.8基本HTML结构的问题区50

第3章 整体布局（上）——标签尺寸处理53

3.1整体布局与整体布局中使用的标签53

3.1.1整体布局53

3.1.2 div元素54

3.2什么是CSS55

3.2.1没有CSS时代的网页55

3.2.2什么是CSS57

3.3 CSS引入方式57

3.3.1行内书写——最简单的样式操作方法57

3.3.2内部书写——简化样式操作59

3.3.3外部引入——控制多页面样式60

3.3.4 CSS三种常见引入方式比较63

3.3.5外部引入CSS的扩展知识65

3.3.6 CSS引入方式的问题区66

3.4 CSS选择器68

3.4.1生活中的“选择器”——找人68

3.4.2 CSS选择器的基本语法69

3.4.3 CSS基本选择器69

3.4.4样式冲突的问题72

3.4.5生活中的“优先级”——谁是老大74

3.4.6 CSS选择器优先级74

3.4.7行内的style属性77

3.4.8选择器的使用原则77

3.4.9 CSS选择器的问题区78

3.5 CSS编码规范78

3.5.1 CSS注释78

3.5.2书写风格79

3.5.3关于类名命名80

3.5.4样式书写顺序80

3.5.5 CSS编码规范的问题区81

3.6 CSS样式重置83

3.6.1什么是样式重置83

3.6.2为何需要样式重置84

3.6.3样式重置文件85

3.7盒模型86

3.7.1生活中的“盒模型”——鱼缸86

3.7.2盒模型基本知识86

3.7.3盒模型——width与height属性87

3.7.4盒模型——margin属性88

3.7.5盒模型——padding属性90

3.7.6盒模型——border属性91

3.7.7盒模型的问题区94

第4章 整体布局（下）——浮动布局103

4.1浮动103

4.1.1为何要浮动103

4.1.2生活中的“浮动”——水槽103

4.1.3浮动——float属性103

4.1.4浮动特效分析104

4.1.5浮动的问题区112

4.2浮动的影响113

4.2.1文档流113

4.2.2浮动元素对父级元素高度的影响113

4.2.3浮动元素对兄弟级元素布局的影响116

4.3清除浮动117

4.3.1浮动——clear属性117

4.3.2清除浮动的不同类型118

4.3.3为兄弟元素设置clear样式118

4.3.4空标签清除浮动120

4.3.5 br标签清除浮动120

4.3.6父元素浮动121

4.3.7父元素设置overflow：hidden或auto122

4.3.8利用after伪元素清除浮动122

4.3.9 after伪元素清除浮动的实际用法124

4.4关于“清除浮动”的问题区125

4.4.1 clear：both的兼容问题125

4.4.2为父级设置高度是不是清除浮动的方法125

4.4.3浮动元素与非浮动元素处于同一行时会出现的问题125

4.4.4清除浮动方法的选择126

4.5较为复杂的浮动布局126

4.5.1功能需求126

4.5.2需求分析127

第5章 模块布局（上）——选择标签131

5.1为何要选择标签131

5.2开发时可以选用的标签以及功能131

5.2.1 h1～h6标题类标签131

5.2.2 hr分隔线132

5.2.3 p与br段落与换行132

5.2.4无序列表与有序列表132

5.2.5自定义列表133

5.2.6行内标签133

5.2.7代码范例的显示效果图134

5.3标签选择时的影响因素135

5.4标签的默认显示样式135

5.4.1显示属性display135

5.4.2根据标签默认display属性划分类别136

5.4.3显示样式影响的标签选用137

5.4.4 display的问题区138

5.5标签的合理嵌套139

5.5.1标签嵌套基本规则139

5.5.2错误嵌套时的表现情况139

5.6 SEO搜索引擎优化——标签语义性144

5.6.1为何要谈SEO144

5.6.2 SEO是什么147

5.6.3搜索爬虫工作原理147

5.6.4爬虫抓取的是什么147

5.6.5什么样的网站才能够被快速收录148

5.6.6针对SEO，前端开发要注意什么149

5.6.7 SEO中表示强调的标签150

5.6.8关于SEO的问题区150

5.7嵌套层数与深度152

5.8标签选择实战（1）——确定标签152

5.8.1功能需求152

5.8.2提出实现方案153

5.8.3标签选择思路分析154

5.8.4实现方案的对比分析155

5.9样式的可控性155

5.9.1原有选择器对样式的控制问题155

5.9.2加强版选择器——后代选择器156

5.9.3加强版选择器——子代选择器157

5.9.4加强版选择器——群组选择器158

5.9.5加强版选择器优先级算法159

5.9.6关于样式可控性的问题区160

5.10标签选择实战（2）——样式控制162

5.10.1方案1——使用ul无序列表162

5.10.2方案2——使用dl自定义列表163

5.10.3当前最优方案164

第6章 模块布局（下）——可用性与扩展性167

6.1 a标签167

6.1.1超链接167

6.1.2超链接的属性167

6.1.3锚链接168

6.1.4超链接的基本样式170

6.1.5关于a标签的问题区171

6.2光标样式173

6.2.1光标效果173

6.2.2 cursor相关属性173

6.2.3关于cursor：hand175

6.2.4关于自定义光标样式的支持程度175

6.3标签选择实战（3）——添加链接175

6.3.1为实例添加a标签175

6.3.2调整可触区176

6.3.3当前方案的具体代码177

6.3.4方案结束了吗178

6.4 img标签的选用180

6.4.1 img标签基本语法180

6.4.2数据图与背景图181

6.4.3 img问题的规避181

6.4.4 img中alt与title的区别183

6.4.5 href与src的区别185

6.5后台维护对前端的影响185

6.5.1图像加载对页面布局的影响185

6.5.2文字超出造成的页面混乱186

6.6网页中哪里需控制高度或超出隐藏188

6.6.1不同页面的不同需求188

6.6.2关于高度设定的基本结论191

6.6.3何时考虑超出隐藏191

6.6.4关于“高度控制与超出隐藏”的问题区191

6.7内容的超出处理——overflow192

6.7.1基本语法与功能192

6.7.2实现文本超出隐藏192

6.7.3实现文本超出显示为省略号193

6.7.4关于overflow的问题区195

6.8代码扩展性——关于margin负值195

6.8.1前后台数据整合方式195

6.8.2比数据条数少一个的虚线如何实现197

6.8.3特殊情况的类名设置详析198

6.8.4扩展性曾经的救世主——margin负值199

6.8.5 margin负值的问题区202

6.9标签选择实战（4）——完成开发204

6.9.1考虑超出和margin负值204

6.9.2完整版代码204

6.9.3总结206

第7章 文本等细节类样式处理208

7.1背景类样式208

7.1.1背景颜色——background-color属性208

7.1.2背景图片——background-image属性209

7.1.3背景重复——background-repeat属性210

7.1.4背景定位——background-position属性211

7.1.5背景关联——background-attachment属性211

7.1.6复合写法——background属性213

7.1.7背景类样式的相关问题213

7.2透明背景214

7.2.1 opacity与filter214

7.2.2 rgba控制216

7.2.3 transparent217

7.2.4透明背景的问题区217

7.3背景图合并217

7.3.1什么是背景图合并217

7.3.2为何进行背景图合并217

7.3.3背景图合并的核心技术与操作方法218

7.3.4 CSS Sprite219

7.3.5背景图合并的问题区220

7.4段落样式221

7.4.1 line-height221

7.4.2 text-decoration222

7.4.3 text-indent222

7.4.4 text-align224

7.4.5 vertical-align225

7.4.6 word-spacing与letter-spacing227

7.4.7 word-wrap与word-break229

7.4.8段落样式的问题区231

7.5字体类样式231

7.5.1 color231

7.5.2 font-family232

7.5.3 font-size233

7.5.4 font-style233

7.5.5 font-weight234

7.5.6 font复合样式234

7.5.7网络字体236

7.5.8字体类样式的问题区238

第8章 特殊布局情况——定位布局240

8.1定位属性240

8.1.1为何要使用定位240

8.1.2生活中的“定位”——便携贴240

8.1.3定位——position属性240

8.1.4定位对文档流的影响241

8.2绝对定位的位置控制244

8.2.1设置绝对定位的元素的基本特点244

8.2.2定位——left等属性246

8.3层级覆盖关系249

8.3.1定位——z-index属性249

8.3.2多级别的层叠关系比较251

8.4固定定位253

第9章 特殊布局情况——界限控制与伪元素的妙用255

9.1未设置固定宽高元素的界限控制255

9.1.1何处需要考虑界限控制255

9.1.2最小高度255

9.1.3最小宽度257

9.1.4最大宽度与最大高度260

9.2伪元素260

9.2.1什么是伪元素260

9.2.2伪元素的种类260

9.2.3伪元素的书写格式261

9.2.4 after与before伪元素261

9.2.5让伪元素按照块元素特性渲染262

9.2.6伪元素实现背景图263

9.2.7伪元素的问题区263

第10章 表格264

10.1 table布局的兴衰264

10.1.1表格的发展历史264

10.1.2表格的应用264

10.2 table各类元素以及用法265

10.2.1基本标签265

10.2.2表格的嵌套规则265

10.2.3行列合并控制265

10.2.4关于表格元素的问题区267

10.3基本数据表的开发与制作268

10.3.1基本数据表的功能需求268

10.3.2基本数据表的实现思路269

10.3.3基本数据表的需求分析269

10.3.4基本数据表的实现270

10.4 table元素的属性271

10.4.1 table的常见属性271

10.4.2 width与height——宽度与高度272

10.4.3 border——表格边框设置273

10.4.4 cellspacing与cellpadding——空白区设置274

10.5表格特有的CSS属性275

10.5.1合并单元格之间的边框——border-collapse275

10.5.2边框之间的空隙——border-spacing276

10.5.3空白单元格——empty-cells276

10.6表格属性与样式选用原则277

第11章 表单278

11.1认识表单278

11.1.1表单的作用——实现对话278

11.1.2向服务端发送数据的场景示例278

11.1.3表单的基本结构279

11.1.4各类表单元素通用属性280

11.2表单常用元素280

11.2.1 form280

11.2.2 input282

11.2.3 label286

11.2.4 select、option与optgroup287

11.2.5 textarea290

11.2.6 button290

11.2.7 fieldset与legend元素291

11.2.8表单元素的问题区291

11.3表单嵌套规则292

11.4表单元素的特殊状态属性292

11.5属性选择器294

11.5.1属性选择器的应用场景294

11.5.2基本的属性选择器294

11.5.3模糊类属性选择器294

11.6表单元素的实际应用296

11.6.1去掉表单元素外部的聚焦线296

11.6.2 textarea的尺寸控制297

11.6.3自定义样式的表单元素297

第12章 停下来回头看路301

12.1从○开始301

12.1.1 ○是什么301

12.1.2最常见的答案301

12.1.3让结果变得更优秀301

12.2网状复习法303

12.2.1网状复习法的特点303

12.2.2网状复习法的实现方式303

12.2.3网状复习法的简单案例304

12.2.4网状复习HTML与CSS304

12.3归纳整理法306

12.3.1归纳整理法的特点306

12.3.2归纳整理法的实现方式306

12.3.3归纳整理复习HTML与CSS306

12.4 hack技术310

12.4.1什么是hack技术310

12.4.2常用IE hack311

12.4.3 IE条件注释311

12.5实现网页开发之后要考虑的东西312

12.6 PC端浏览器的兼容问题312

第13章HTML5新标签与CSS3基础313

13.1 HTML5新增元素313

13.1.1新增结构元素及含义313

13.1.2使用HTML5新结构元素完成页面搭建314

13.1.3 HTML5新元素的问题区316

13.2浏览器内核317

13.2.1浏览器主要内核317

13.2.2常见浏览器内核前缀318

13.2.3浏览器内核的问题区319

13.3 CSS3选择器319

13.3.1 CSS2.0选择器回顾319

13.3.2 CSS3选择器——通用兄弟选择器319

13.3.3 CSS3选择器——伪类选择器320

13.3.4 CSS3选择器的问题区324

13.4 CSS3圆角边框325

13.4.1圆角边框——border-radius325

13.4.2圆角边框效果实例329

13.4.3 CSS3圆角带来的变革330

13.4.4 CSS3圆角边框的问题区333

13.5 CSS3文本阴影333

13.5.1文本阴影——text-shadow333

13.5.2文本阴影效果实例335

13.5.3文本阴影的问题区337

13.6 CSS3盒阴影337

13.6.1盒阴影——box-shadow337

13.6.2盒阴影的效果实例338

13.6.3关于盒阴影的问题区342

13.7 CSS3背景新属性342

13.7.1背景尺寸——background-size342

13.7.2背景切割——background-clip344

13.7.3背景原点——background-origin345

13.7.4背景切割与背景原点的区别345

13.8渐变背景347

13.8.1什么是渐变347

13.8.2渐变的种类347

13.8.3如何书写CSS3渐变347

13.9新元素和CSS3基础属性为网站带来了什么350

第14章 转战移动端（上）——百分比与rem352

14.1移动端发展352

14.1.1智能手机热潮352

14.1.2针对移动端的探索352

14.1.3分辨率初变354

14.1.4多分辨率的处理354

14.1.5移动端的未来355

14.1.6移动端发展总结＆开发移动端的基本流程355

14.2设备调试方法356

14.2.1设备调试方法的种类356

14.2.2调试的基本原则：多台真机测试357

14.3视口——view po rt357

14.3.1视口以及常见数值357

14.3.2调整视口大小——命令类357

14.3.3 viewport元标签以及属性358

14.3.4视口调整的各种命令358

14.3.5对待视口的基本原则359

14.4当盒模型与行高遇到百分比359

14.4.1盒模型单位如何选择359

14.4.2 margin和padding使用百分比作为单位359

14.4.3 height使用百分比作为单位363

14.4.4 border使用百分比作为单位364

14.4.5 line-height使用百分比作为单位365

14.5 CSS3新增度量单位366

14.5.1新度量单位366

14.5.2 rem与em366

14.5.3 vw与vh367

14.6字体处理不容小觑367

14.6.1美工图设计的基准字体367

14.6.2移动端网络字体使用更加频繁368

14.7盒阴影的妙用368

14.8背景图的处理368

14.9使用JS配合rem让页面适应各个分辨率368

14.9.1 Step1查看设计图，确定需要兼容的分辨率368

14.9.2 Step2调整视口369

14.9.3 Step3确定设计图的最小字体369

14.9.4 Step4按照设计图的像素进行开发369

14.9.5 Step5使用百分比和rem替换px371

14.9.6 Step6使用JS控制基准字体373

第15章 转战移动端（下）——响应式＆移动端的探索376

15.1响应式布局376

15.1.1理解响应式布局376

15.1.2响应式布局的优劣势376

15.1.3响应式布局的核心技术377

15.2媒体查询377

15.2.1什么是媒体查询377

15.2.2媒体查询书写方法377

15.2.3常见媒体类型378

15.2.4关于媒体的特性378

15.3让移动端开发变得更好——关于高清屏幕379

15.3.1高清分辨率379

15.3.2此前移动端开发存在的一些不足379

15.3.3按照高清分辨率解读的“想法”379

15.3.4 flexible.js的用法380

15.3.5 flexible框架使用的注意事项381

15.4让移动端开发变得更快——固定像素的实现方法381

15.4.1 MetaHandler.js381

15.4.2框架当前还存在的问题382

15.5移动端兼容383

15.5.1 CSS3媒体查询兼容问题383

15.5.2 HTML与CSS的基本兼容问题384

15.5.3默认样式处理385

第16章 CSS3变形与动画387

16.1 CSS3二维变形387

16.1.1二维变形基本语法387

16.1.2具体变形方式语法详析387

16.1.3变形顺序对最终结果是否会造成影响390

16.2 CSS3三维变形391

16.2.1如何触发三维变形391

16.2.2 Z轴的位置392

16.2.3三维变形的变形属性393

16.2.4视角394

16.2.5旋转带来的问题394

16.2.6关于三维变形的应用394

16.2.7关于变形的问题区395

16.3 CSS3过渡395

16.3.1过渡的基本属性395

16.3.2过渡的合写方法transition396

16.3.3多属性过渡时，各个属性的书写方法396

16.3.4过渡得以实现的必备要素397

16.3.5关于过渡的问题区398

16.4 CSS3动画399

16.4.1帧与关键帧399

16.4.2 CSS3动画的基本语法399

16.4.3 animation动画的基本属性400

16.4.4动画命令的合写方法animation401

16.4.5动画与过渡的比较401

第17章 各章节自评习题集402

17.1习题集01403

17.1.1习题内容403

17.1.2习题答案404

17.2习题集02404

17.2.1习题内容404

17.2.2习题答案406

17.3习题集03407

17.3.1习题内容407

17.3.2习题答案410

17.4习题集04411

17.4.1习题内容411

17.4.2习题答案412

17.5习题集05417

17.5.1习题内容417

17.5.2习题答案418

17.6习题集06419

17.6.1习题内容420

17.6.2习题答案421

17.7习题集07422

17.7.1习题内容422

17.7.2习题答案424

17.8习题集08425

17.8.1习题内容426

17.8.2习题答案428

17.9习题集09431

17.9.1习题内容431

17.9.2习题答案432

17.10习题集10432

17.10.1习题内容432

17.10.2习题答案433

17.11习题集11434

17.11.1习题内容434

17.11.2习题答案435

17.12习题集12436

17.12.1习题内容436

17.12.2习题答案437

17.13习题集13438

17.13.1习题内容438

17.13.2习题答案439

17.14习题集14439

17.14.1习题内容439

17.14.2习题答案441

第18章 各章节代码实战444

18.1代码检错——［第2、3章］444

18.1.1实战题目444

18.1.2实战答案445

18.2为元素设置盒模型样式——［第3章］446

18.2.1实战题目446

18.2.2实战答案446

18.3使用浮动实现网页布局——［第4章］447

18.3.1实战题目447

18.3.2实战答案449

18.4合理选择标签——［第5、6章］455

18.4.1实战题目455

18.4.2实战答案456

18.5文本样式处理——［第7章］458

18.5.1实战题目458

18.5.2实战答案459

18.6定位布局——［第8章］460

18.6.1实战题目460

18.6.2实战答案461

18.7伪元素的应用——［第9章］462

18.7.1实战题目462

18.7.2实战答案463

18.8课程表与表格简历制作——［第10章］465

18.8.1实战题目465

18.8.2实战答案466

18.9 CSS3阴影特效——［第13章］471

18.9.1实战题目471

18.9.2实战答案472

18.10响应式布局——［第15章］474

18.10.1实战题目474

18.10.2实战答案476

18.11二维三维特效动画——［第16章］477

18.11.1实战题目477

18.11.2实战答案479

第19章 网页案例实战491

19.1 PC端网页开发实战491

19.1.1功能需求491

19.1.2整体测绘491

19.1.3实现整体布局494

19.1.4实现头部模块（含LOGO与微信）部分496

19.1.5实现导航模块部分497

19.1.6实现内容左侧最新文章部分498

19.1.7实现内容右侧广告区部分502

19.1.8实现tab区域标题部分504

19.1.9实现tab区域内容部分505

19.1.10实现底部（版权）区域部分507

19.1.11实现大图部分508

19.1.12考虑超出隐藏以及光标移入状态510

19.1.13考虑临界值513

19.1.14代码优化513

19.2移动端网页开发实战514

19.2.1功能需求514

19.2.2整体测绘514

19.2.3实现整体布局517

19.2.4添加JS控制，实现多分辨率自适应518

19.2.5实现热门与推荐部分519

19.2.6实现具体文章模块部分522

19.2.7实现顶部区域524

19.2.8实现底部版权部分527

19.2.9代码优化527

第20章 附录528

20.1 HTML5发展史528

20.1.1萌芽528

20.1.2第一次浏览器大战528

20.1.3第二次浏览器大战528

20.1.4第三次浏览器大战529

20.2手机端操作系统发展史529

20.2.1诺基亚的世界开始动摇529

20.2.2微软、苹果、谷歌之战530

20.2.3一代霸主陨落530

20.2.4 iOS、安卓高奏凯歌530

20.2.5苹果和Adobe530

20.3 HTML的各种布局531

20.3.1表格布局531

20.3.2 DIV＋CSS531

20.3.3 960栅格531

20.3.4经典的三栏布局——双飞翼531

20.3.5瀑布流布局532

20.3.6响应式布局532

20.3.7单页面无限滚动533

20.3.8移动端的rem自适应布局533

20.3.9其他布局以及未来533

20.4编辑器插件安装与应用533

20.4.1插件安装533

20.4.2关于Emmet插件的相关配置534

20.4.3利用Emmet插件快速编写HTML代码535

20.5开发需要准备的基本软件537

20.5.1基本软件列表537

20.5.2 WAMP软件的安装537

20.5.3初识多人协同开发用的“版本控制管理工具”541

20.6 HTML5学习平台与网站544

20.6.1 HTML5布局之路——官方平台544

20.6.2其他学习类网站544

20.6.3找工作的网站平台544

20.7单词列表545

20.8网页中部分模块的CSS命名参考545

20.9重置代码解析546

20.9.1重置代码546

20.9.2重置代码解析547

20.9.3在重置文件中添加的语句548

20.10开发备忘录548

20.10.1书写基本的需求分析报告548

20.10.2基本的前期准备工作549

20.10.3移动端与PC端的特殊性549

20.10.4整体开发的基本顺序提醒549

20.10.5具体开发中的注意事项550

20.10.6其他550

20.11 Iconfont551

20.11.1什么是Iconfont551

20.11.2 Iconfont中图标的下载551

20.11.3 Iconfont可能出现的问题以及解决办法552

20.11.4实际开发中Iconfont的用途552

参考文献553