新書推薦：
《
无端欢喜
》
售價：HK$
76.2
《
股票大作手操盘术
》
售價：HK$
53.8
《
何以中国·何谓唐代：东欧亚帝国的兴亡与转型
》
售價：HK$
87.4
《
一间只属于自己的房间 女性主义先锋伍尔夫代表作 女性精神独立与经济独立的象征，做自己，比任何事都更重要
》
售價：HK$
44.6
《
泉舆日志 幻想世界宝石生物图鉴
》
售價：HK$
134.2
《
养育女孩 ： 官方升级版
》
售價：HK$
50.4
《
跨界：蒂利希思想研究
》
售價：HK$
109.8
《
千万别喝南瓜汤（遵守规则绘本）
》
售價：HK$
44.7
|
| 編輯推薦： |
|
1. 借助生活中的实例，让技术变得通俗易懂2. 拒绝字典式的知识排布，注重学习流程与逻辑，依据实战顺序进行讲解3. 由浅入深，循序渐进，注重理论与实践相结合4. 融入开发经验，项目实战贯穿全程5. 每个环节均有相关总结、问题答疑6. 内容紧跟行业发展，取其精华并融入*的知识
|
| 內容簡介： |
|
本书从开发实战的视角，介绍了网站制作知识和开发流程。首章当中，针对HTML5的基本知识及本书所涉及的所有内容进行整体概括。主要内容包括： HTML5入门知识，网页整体布局，盒模型，浮动布局，定位布局，代码语义性，扩展性，文本样式的处理，表格表单，PC端网站开发实战与复习方法，移动端开发方法，HTML5新增结构标签，CSS3新增样式，响应式布局等。
|
| 目錄：
|
目录
第1章旅途之前
1.1讲解方法与旅途指南
1.1.1和其他技术书籍相比，本书到底有何不同
1.1.2书籍概览
1.1.3推荐学习流程
1.1.4旅途指南
1.2HTML5学习的前期准备
1.3认识HTML5
1.3.1HTML5是做什么的
1.3.2HTML5的由来
1.3.3HTML5的基本组成
1.3.4专业化角度认识HTML5
1.3.5容易混淆的概念
1.4了解HTML5行业前景与基本概念
1.4.1一些行业词汇
1.4.2HTML5的行业并非一劳永逸
1.4.3近几年来HTML5行业的变化
1.4.4到底是什么决定着薪资
1.4.5是谁决定你的去留
1.5HTML与CSS的学法
1.5.1方法1整体到局部，骨架到血肉
1.5.2方法2类比
1.5.3方法3记忆很重要
1.5.4方法4聚沙成塔
1.5.5方法5循序渐进
1.5.6方法6知识的迁移
1.5.7方法7生活辅助学习
1.5.8方法8实践出真知
1.6开发工程师与Photoshop
1.6.1图片切图
1.6.2认识软件
1.7切图与Photoshop相关用法
1.7.1切图的基本流程
1.7.2打开文件
1.7.3找到切图目标
1.7.4整理好要处理的图层
1.7.5新建文件存储目标图像
1.7.6在新文件中调整图像位置
1.7.7修改画布大小
1.7.8将图片按照最佳格式类型进行存储
1.7.9图片大小处理与压缩
1.8使用Photoshop获取图层信息
1.8.1获取颜色
1.8.2文字内容与特点
1.8.3撤销
1.8.4圆角大小的测量
1.8.5阴影的测量
1.8.6将文字处理成图像
1.8.7Photoshop快捷键总结
1.9代码编辑器
1.9.1Sublime Text
1.9.2其他代码编辑器
1.10浏览器调试
1.10.1为何要进行浏览器调试
1.10.2浏览器调试的基本要求
1.10.3浏览器调试方法
第2章HTML5入门
2.1网站开发流程
2.1.1网站开发流程图
2.1.2网站需求调查阶段
2.1.3网站技术分析阶段
2.1.4网站页面策划阶段
2.1.5网站设计开发阶段
2.1.6网站测试改进阶段
2.1.7前端工程师负责的部分
2.2第一个HTML文件
2.2.1创建基本的网站文件夹
2.2.2创建第一个HTML文件
2.2.3HTML标签的书写规则
2.2.4HTML书写规则的问题区
2.3基本的HTML结构
2.3.1一个HTML文件的基本组成
2.3.2文档声明
2.3.3title标题
2.3.4meta元信息
2.3.5HTML文件的内容区
2.3.6HTML注释
2.3.7网站开发常用标签
2.3.8基本HTML结构的问题区
第3章整体布局（上）标签尺寸处理
3.1整体布局与整体布局中使用的标签
3.1.1整体布局
3.1.2div元素
3.2什么是CSS
3.2.1没有CSS时代的网页
3.2.2什么是CSS
3.3CSS引入方式
3.3.1行内书写最简单的样式操作方法
3.3.2内部书写简化样式操作
3.3.3外部引入控制多页面样式
3.3.4CSS三种常见引入方式比较
3.3.5外部引入CSS的扩展知识
3.3.6CSS引入方式的问题区
3.4CSS选择器
3.4.1生活中的选择器找人
3.4.2CSS选择器的基本语法
3.4.3CSS基本选择器
3.4.4样式冲突的问题
3.4.5生活中的优先级谁是老大
3.4.6CSS选择器优先级
3.4.7行内的style属性
3.4.8选择器的使用原则
3.4.9CSS选择器的问题区
3.5CSS编码规范
3.5.1CSS注释
3.5.2书写风格
3.5.3关于类名命名
3.5.4样式书写顺序
3.5.5CSS编码规范的问题区
3.6CSS样式重置
3.6.1什么是样式重置
3.6.2为何需要样式重置
3.6.3样式重置文件
3.7盒模型
3.7.1生活中的盒模型鱼缸
3.7.2盒模型基本知识
3.7.3盒模型width与height属性
3.7.4盒模型margin属性
3.7.5盒模型padding属性
3.7.6盒模型border属性
3.7.7盒模型的问题区
第4章整体布局（下）浮动布局
4.1浮动
4.1.1为何要浮动
4.1.2生活中的浮动水槽
4.1.3浮动float属性
4.1.4浮动特效分析
4.1.5浮动的问题区
4.2浮动的影响
4.2.1文档流
4.2.2浮动元素对父级元素高度的影响
4.2.3浮动元素对兄弟级元素布局的影响
4.3清除浮动
4.3.1浮动clear属性
4.3.2清除浮动的不同类型
4.3.3为兄弟元素设置clear样式
4.3.4空标签清除浮动
4.3.5br标签清除浮动
4.3.6父元素浮动
4.3.7父元素设置overflow： hidden或auto
4.3.8利用after伪元素清除浮动
4.3.9after伪元素清除浮动的实际用法
4.4关于清除浮动的问题区
4.4.1clear： both的兼容问题
4.4.2为父级设置高度是不是清除浮动的方法
4.4.3浮动元素与非浮动元素处于同一行时会出现的问题
4.4.4清除浮动方法的选择
4.5较为复杂的浮动布局
4.5.1功能需求
4.5.2需求分析
第5章模块布局（上）选择标签
5.1为何要选择标签
5.2开发时可以选用的标签以及功能
5.2.1h1~h6标题类标签
5.2.2hr分隔线
5.2.3p与br段落与换行
5.2.4无序列表与有序列表
5.2.5自定义列表
5.2.6行内标签
5.2.7代码范例的显示效果图
5.3标签选择时的影响因素
5.4标签的默认显示样式
5.4.1显示属性display
5.4.2根据标签默认display属性划分类别
5.4.3显示样式影响的标签选用
5.4.4display的问题区
5.5标签的合理嵌套
5.5.1标签嵌套基本规则
5.5.2错误嵌套时的表现情况
5.6SEO搜索引擎优化标签语义性
5.6.1为何要谈SEO
5.6.2SEO是什么
5.6.3搜索爬虫工作原理
5.6.4爬虫抓取的是什么
5.6.5什么样的网站才能够被快速收录
5.6.6针对SEO，前端开发要注意什么
5.6.7SEO中表示强调的标签
5.6.8关于SEO的问题区
5.7嵌套层数与深度
5.8标签选择实战（1）确定标签
5.8.1功能需求
5.8.2提出实现方案
5.8.3标签选择思路分析
5.8.4实现方案的对比分析
5.9样式的可控性
5.9.1原有选择器对样式的控制问题
5.9.2加强版选择器后代选择器
5.9.3加强版选择器子代选择器
5.9.4加强版选择器群组选择器
5.9.5加强版选择器优先级算法
5.9.6关于样式可控性的问题区
5.10标签选择实战（2）样式控制
5.10.1方案1使用ul无序列表
5.10.2方案2使用dl自定义列表
5.10.3当前最优方案
第6章模块布局（下）可用性与扩展性
6.1a标签
6.1.1超链接
6.1.2超链接的属性
6.1.3锚链接
6.1.4超链接的基本样式
6.1.5关于a标签的问题区
6.2光标样式
6.2.1光标效果
6.2.2cursor相关属性
6.2.3关于cursor： hand
6.2.4关于自定义光标样式的支持程度
6.3标签选择实战（3）添加链接
6.3.1为实例添加a标签
6.3.2调整可触区
6.3.3当前方案的具体代码
6.3.4方案结束了吗
6.4img标签的选用
6.4.1img标签基本语法
6.4.2数据图与背景图
6.4.3img问题的规避
6.4.4img中alt与title的区别
6.4.5href与src的区别
6.5后台维护对前端的影响
6.5.1图像加载对页面布局的影响
6.5.2文字超出造成的页面混乱
6.6网页中哪里需控制高度或超出隐藏
6.6.1不同页面的不同需求
6.6.2关于高度设定的基本结论
6.6.3何时考虑超出隐藏
6.6.4关于高度控制与超出隐藏的问题区
6.7内容的超出处理overflow
6.7.1基本语法与功能
6.7.2实现文本超出隐藏
6.7.3实现文本超出显示为省略号
6.7.4关于overflow的问题区
6.8代码扩展性关于margin负值
6.8.1前后台数据整合方式
6.8.2比数据条数少一个的虚线如何实现
6.8.3特殊情况的类名设置详析
6.8.4扩展性曾经的救世主margin负值
6.8.5margin负值的问题区
6.9标签选择实战（4）完成开发
6.9.1考虑超出和margin负值
6.9.2完整版代码
6.9.3总结
第7章文本等细节类样式处理
7.1背景类样式
7.1.1背景颜色backgroundcolor属性
7.1.2背景图片backgroundimage属性
7.1.3背景重复backgroundrepeat属性
7.1.4背景定位backgroundposition属性
7.1.5背景关联backgroundattachment属性
7.1.6复合写法background属性
7.1.7背景类样式的相关问题
7.2透明背景
7.2.1opacity与filter
7.2.2rgba控制
7.2.3transparent
7.2.4透明背景的问题区
7.3背景图合并
7.3.1什么是背景图合并
7.3.2为何进行背景图合并
7.3.3背景图合并的核心技术与操作方法
7.3.4CSS Sprite
7.3.5背景图合并的问题区
7.4段落样式
7.4.1lineheight
7.4.2textdecoration
7.4.3textindent
7.4.4textalign
7.4.5verticalalign
7.4.6wordspacing与letterspacing
7.4.7wordwrap与wordbreak
7.4.8段落样式的问题区
7.5字体类样式
7.5.1color
7.5.2fontfamily
7.5.3fontsize
7.5.4fontstyle
7.5.5fontweight
7.5.6font复合样式
7.5.7网络字体
7.5.8字体类样式的问题区
第8章特殊布局情况定位布局
8.1定位属性
8.1.1为何要使用定位
8.1.2生活中的定位便携贴
8.1.3定位position属性
8.1.4定位对文档流的影响
8.2绝对定位的位置控制
8.2.1设置绝对定位的元素的基本特点
8.2.2定位left等属性
8.3层级覆盖关系
8.3.1定位zindex属性
8.3.2多级别的层叠关系比较
8.4固定定位
第9章特殊布局情况界限控制与伪元素的妙用
9.1未设置固定宽高元素的界限控制
9.1.1何处需要考虑界限控制
9.1.2最小高度
9.1.3最小宽度
9.1.4最大宽度与最大高度
9.2伪元素
9.2.1什么是伪元素
9.2.2伪元素的种类
9.2.3伪元素的书写格式
9.2.4after与before伪元素
9.2.5让伪元素按照块元素特性渲染
9.2.6伪元素实现背景图
9.2.7伪元素的问题区
第10章表格
10.1table布局的兴衰
10.1.1表格的发展历史
10.1.2表格的应用
10.2table各类元素以及用法
10.2.1基本标签
10.2.2表格的嵌套规则
10.2.3行列合并控制
10.2.4关于表格元素的问题区
10.3基本数据表的开发与制作
10.3.1基本数据表的功能需求
10.3.2基本数据表的实现思路
10.3.3基本数据表的需求分析
10.3.4基本数据表的实现
10.4table元素的属性
10.4.1table的常见属性
10.4.2width与height宽度与高度
10.4.3border表格边框设置
10.4.4cellspacing与cellpadding空白区设置
10.5表格特有的CSS属性
10.5.1合并单元格之间的边框bordercollapse
10.5.2边框之间的空隙borderspacing
10.5.3空白单元格emptycells
10.6表格属性与样式选用原则
第11章表单
11.1认识表单
11.1.1表单的作用实现对话
11.1.2向服务端发送数据的场景示例
11.1.3表单的基本结构
11.1.4各类表单元素通用属性
11.2表单常用元素
11.2.1form
11.2.2input
11.2.3label
11.2.4select、option与optgroup
11.2.5textarea
11.2.6button
11.2.7fieldset与legend元素
11.2.8表单元素的问题区
11.3表单嵌套规则
11.4表单元素的特殊状态属性
11.5属性选择器
11.5.1属性选择器的应用场景
11.5.2基本的属性选择器
11.5.3模糊类属性选择器
11.6表单元素的实际应用
11.6.1去掉表单元素外部的聚焦线
11.6.2textarea的尺寸控制
11.6.3自定义样式的表单元素
第12章停下来回头看路
12.1从〇开始
12.1.1〇是什么
12.1.2最常见的答案
12.1.3让结果变得更优秀
12.2网状复习法
12.2.1网状复习法的特点
12.2.2网状复习法的实现方式
12.2.3网状复习法的简单案例
12.2.4网状复习HTML与CSS
12.3归纳整理法
12.3.1归纳整理法的特点
12.3.2归纳整理法的实现方式
12.3.3归纳整理复习HTML与CSS
12.4hack技术
12.4.1什么是hack技术
12.4.2常用IE hack
12.4.3IE条件注释
12.5实现网页开发之后要考虑的东西
12.6PC端浏览器的兼容问题
第13章HTML5新标签与CSS3基础
13.1HTML5新增元素
13.1.1新增结构元素及含义
13.1.2使用HTML5新结构元素完成页面搭建
13.1.3HTML5新元素的问题区
13.2浏览器内核
13.2.1浏览器主要内核
13.2.2常见浏览器内核前缀
13.2.3浏览器内核的问题区
13.3CSS3选择器
13.3.1CSS2.0选择器回顾
13.3.2CSS3选择器通用兄弟选择器
13.3.3CSS3选择器伪类选择器
13.3.4CSS3选择器的问题区
13.4CSS3圆角边框
13.4.1圆角边框borderradius
13.4.2圆角边框效果实例
13.4.3CSS3圆角带来的变革
13.4.4CSS3圆角边框的问题区
13.5CSS3文本阴影
13.5.1文本阴影textshadow
13.5.2文本阴影效果实例
13.5.3文本阴影的问题区
13.6CSS3盒阴影
13.6.1盒阴影boxshadow
13.6.2盒阴影的效果实例
13.6.3关于盒阴影的问题区
13.7CSS3背景新属性
13.7.1背景尺寸backgroundsize
13.7.2背景切割backgroundclip
13.7.3背景原点backgroundorigin
13.7.4背景切割与背景原点的区别
13.8渐变背景
13.8.1什么是渐变
13.8.2渐变的种类
13.8.3如何书写CSS3渐变
13.9新元素和CSS3基础属性为网站带来了什么
第14章转战移动端（上）百分比与rem
14.1移动端发展
14.1.1智能手机热潮
14.1.2针对移动端的探索
14.1.3分辨率初变
14.1.4多分辨率的处理
14.1.5移动端的未来
14.1.6移动端发展总结&开发移动端的基本流程
14.2设备调试方法
14.2.1设备调试方法的种类
14.2.2调试的基本原则： 多台真机测试
14.3视口viewport
14.3.1视口以及常见数值
14.3.2调整视口大小命令类
14.3.3viewport元标签以及属性
14.3.4视口调整的各种命令
14.3.5对待视口的基本原则
14.4当盒模型与行高遇到百分比
14.4.1盒模型单位如何选择
14.4.2margin和padding使用百分比作为单位
14.4.3height使用百分比作为单位
14.4.4border使用百分比作为单位
14.4.5lineheight使用百分比作为单位
14.5CSS3新增度量单位
14.5.1新度量单位
14.5.2rem与em
14.5.3vw与vh
14.6字体处理不容小觑
14.6.1美工图设计的基准字体
14.6.2移动端网络字体使用更加频繁
14.7盒阴影的妙用
14.8背景图的处理
14.9使用JS配合rem让页面适应各个分辨率
14.9.1Step1查看设计图，确定需要兼容的分辨率
14.9.2Step2调整视口
14.9.3Step3确定设计图的最小字体
14.9.4Step4按照设计图的像素进行开发
14.9.5Step5使用百分比和rem替换px
14.9.6Step6使用JS控制基准字体
第15章转战移动端（下）响应式&移动端的探索
15.1响应式布局
15.1.1理解响应式布局
15.1.2响应式布局的优劣势
15.1.3响应式布局的核心技术
15.2媒体查询
15.2.1什么是媒体查询
15.2.2媒体查询书写方法
15.2.3常见媒体类型
15.2.4关于媒体的特性
15.3让移动端开发变得更好关于高清屏幕
15.3.1高清分辨率
15.3.2此前移动端开发存在的一些不足
15.3.3按照高清分辨率解读的想法
15.3.4flexible.js的用法
15.3.5flexible框架使用的注意事项
15.4让移动端开发变得更快固定像素的实现方法
15.4.1MetaHandler.js
15.4.2框架当前还存在的问题
15.5移动端兼容
15.5.1CSS3媒体查询兼容问题
15.5.2HTML与CSS的基本兼容问题
15.5.3默认样式处理
第16章CSS3变形与动画
16.1CSS3二维变形
16.1.1二维变形基本语法
16.1.2具体变形方式语法详析
16.1.3变形顺序对最终结果是否会造成影响
16.2CSS3三维变形
16.2.1如何触发三维变形
16.2.2Z轴的位置
16.2.3三维变形的变形属性
16.2.4视角
16.2.5旋转带来的问题
16.2.6关于三维变形的应用
16.2.7关于变形的问题区
16.3CSS3过渡
16.3.1过渡的基本属性
16.3.2过渡的合写方法transition
16.3.3多属性过渡时，各个属性的书写方法
16.3.4过渡得以实现的必备要素
16.3.5关于过渡的问题区
16.4CSS3动画
16.4.1帧与关键帧
16.4.2CSS3动画的基本语法
16.4.3animation动画的基本属性
16.4.4动画命令的合写方法animation
16.4.5动画与过渡的比较
第17章各章节自评习题集
17.1习题集01
17.1.1习题内容
17.1.2习题答案
17.2习题集02
17.2.1习题内容
17.2.2习题答案
17.3习题集03
17.3.1习题内容
17.3.2习题答案
17.4习题集04
17.4.1习题内容
17.4.2习题答案
17.5习题集05
17.5.1习题内容
17.5.2习题答案
17.6习题集06
17.6.1习题内容
17.6.2习题答案
17.7习题集07
17.7.1习题内容
17.7.2习题答案
17.8习题集08
17.8.1习题内容
17.8.2习题答案
17.9习题集09
17.9.1习题内容
17.9.2习题答案
17.10习题集10
17.10.1习题内容
17.10.2习题答案
17.11习题集11
17.11.1习题内容
17.11.2习题答案
17.12习题集12
17.12.1习题内容
17.12.2习题答案
17.13习题集13
17.13.1习题内容
17.13.2习题答案
17.14习题集14
17.14.1习题内容
17.14.2习题答案
第18章各章节代码实战
18.1代码检错［第2、3章］
18.1.1实战题目
18.1.2实战答案
18.2为元素设置盒模型样式［第3章］
18.2.1实战题目
18.2.2实战答案
18.3使用浮动实现网页布局［第4章］
18.3.1实战题目
18.3.2实战答案
18.4合理选择标签［第5、6章］
18.4.1实战题目
18.4.2实战答案
18.5文本样式处理［第7章］
18.5.1实战题目
18.5.2实战答案
18.6定位布局［第8章］
18.6.1实战题目
18.6.2实战答案
18.7伪元素的应用［第9章］
18.7.1实战题目
18.7.2实战答案
18.8课程表与表格简历制作［第10章］
18.8.1实战题目
18.8.2实战答案
18.9CSS3阴影特效［第13章］
18.9.1实战题目
18.9.2实战答案
18.10响应式布局［第15章］
18.10.1实战题目
18.10.2实战答案
18.11二维三维特效动画［第16章］
18.11.1实战题目
18.11.2实战答案
第19章网页案例实战
19.1PC端网页开发实战
19.1.1功能需求
19.1.2整体测绘
19.1.3实现整体布局
19.1.4实现头部模块（含LOGO与微信）部分
19.1.5实现导航模块部分
19.1.6实现内容左侧最新文章部分
19.1.7实现内容右侧广告区部分
19.1.8实现tab区域标题部分
19.1.9实现tab区域内容部分
19.1.10实现底部（版权）区域部分
19.1.11实现大图部分
19.1.12考虑超出隐藏以及光标移入状态
19.1.13考虑临界值
19.1.14代码优化
19.2移动端网页开发实战
19.2.1功能需求
19.2.2整体测绘
19.2.3实现整体布局
19.2.4添加JS控制，实现多分辨率自适应
19.2.5实现热门与推荐部分
19.2.6实现具体文章模块部分
19.2.7实现顶部区域
19.2.8实现底部版权部分
19.2.9代码优化
第20章附录
20.1HTML5发展史
20.1.1萌芽
20.1.2第一次浏览器大战
20.1.3第二次浏览器大战
20.1.4第三次浏览器大战
20.2手机端操作系统发展史
20.2.1诺基亚的世界开始动摇
20.2.2微软、苹果、谷歌之战
20.2.3一代霸主陨落
20.2.4iOS、安卓高奏凯歌
20.2.5苹果和Adobe
20.3HTML的各种布局
20.3.1表格布局
20.3.2DIV CSS
20.3.3960栅格
20.3.4经典的三栏布局双飞翼
20.3.5瀑布流布局
20.3.6响应式布局
20.3.7单页面无限滚动
20.3.8移动端的rem自适应布局
20.3.9其他布局以及未来
20.4编辑器插件安装与应用
20.4.1插件安装
20.4.2关于Emmet插件的相关配置
20.4.3利用Emmet插件快速编写HTML代码
20.5开发需要准备的基本软件
20.5.1基本软件列表
20.5.2WAMP软件的安装
20.5.3初识多人协同开发用的版本控制管理工具
20.6HTML5学习平台与网站
20.6.1HTML5布局之路官方平台
20.6.2其他学习类网站
20.6.3找工作的网站平台
20.7单词列表
20.8网页中部分模块的CSS命名参考
20.9重置代码解析
20.9.1重置代码
20.9.2重置代码解析
20.9.3在重置文件中添加的语句
20.10开发备忘录
20.10.1书写基本的需求分析报告
20.10.2基本的前期准备工作
20.10.3移动端与PC端的特殊性
20.10.4整体开发的基本顺序提醒
20.10.5具体开发中的注意事项
20.10.6其他
20.11Iconfont
20.11.1什么是Iconfont
20.11.2Iconfont中图标的下载
20.11.3Iconfont可能出现的问题以及解决办法
20.11.4实际开发中Iconfont的用途
参考文献
|
| 內容試閱：
|
前言
从2009年开始，HTML5逐渐进入人们的视野，2012年，HTML5开发在北京崭露头角，随着2015年微信公众号的推广、国家对创业的大力扶持，各类企业对网站以及移动网站的依赖性越来越强，HTML5开发在各个二线城市飞速发展。通过HTML与CSS进行网页布局，是实现网站开发的第一步，良好的HTML与CSS有助于我们更好地书写出企业需要的前端页面。本书从实战角度出发，基于行业特点和要求，将知识按照开发的流程和顺序进行拆分，然后逐步实现网页的开发，伴随着网页的实现过程讲解相应的知识点，并在适当章节进行总结，以保证在知识、方法和流程得到突出的前提下，让知识点网络化体系化。适用人群本书适用于每一个希望自学HTML5的人、拥有一定计算机基础的初学者、希望学习HTML5的大学生、希望夯实基础的HTML5开发工程师阅读。此外，也可以作为计算机相关专业的师生学习用书和培训机构的教材。本书结构本书共由19章以及附录组成，各章简介如下。第1章旅途之前，介绍本书的学习方法与流程、HTML5的基本概念、HTML5行业的前景、在HTML5开发中与切图相关的工作、Photoshop工具的具体用法、Sublime编辑器的使用方法以及浏览器的调试方法。第2章HTML5入门，讲解网站开发的基本流程，探讨前端开发工程师在流程中的位置和作用，包括认识并创建HTML文件，HTML结构中的文档声明、标题、元信息、注释、常见的HTML标签等。第3章整体布局上标签尺寸处理，介绍CSS技术，并借助代码实例探讨不同引入方式的优劣势，介绍ID、类名、标签名等三种基本选择器以及它们的使用情景，CSS编码规范，浏览器默认样式与样式重置，盒模型的各个属性。第4章整体布局下浮动布局，讲解各类标签在布局时存在的不足，引出浮动的基本知识和概念，探讨浮动对元素布局的影响，如何清除浮动以及各种清除浮动方法的优劣势。第5章模块布局上选择标签，首先介绍在模块布局当中会使用到的各类标签，之后探讨为何选取标签，包括在选取标签时需要考虑的具体因素，标签的默认样式、嵌套规则、标签的语义性、样式的可控性等。第6章模块布局下可用性与扩展性，讨论在模块布局的标签选择时要考虑的扩展性和可用性，包括超链接a标签、鼠标样式的处理、img标签的选用与处理、超出隐藏设置等。第7章文本等细节类样式处理，讲解关于具体文本的各类样式，包括背景样式、字体样式、段落样式、背景图合并技术以及网络字体设置的相关知识。第8章特殊布局情况定位布局，介绍定位布局这种比较特殊的布局方式，讨论元素针对哪个元素进行定位，多个定位元素之间的层叠关系等。第9章特殊布局情况界限控制与伪元素的妙用，探讨网页开发中的一些界限问题，对于存在界限的布局应当如何实现和处理，此外还介绍了伪元素的知识及应用。第10章表格，介绍表格布局的兴衰、当前开发中表格布局的具体用法、表格包含的各类标签、表格标签专有的属性和样式。第11章表单，讲解表单的主要功能、基本用法，表单包含的各类常用元素，表单元素的特殊状态和属性，此外还介绍了属性选择器，讨论了表单元素的实际应用。第12章停下来回头看路，探讨复习的方式方法，介绍网状复习法与归纳整理法的基本概念，并以实例的方式针对HTML与CSS的PC端开发知识进行整理和归纳。此外，对hack技术以及网页开发之后的优化方法进行介绍。第13章HTML5新标签与CSS3基础，讲解HTML5新增结构元素、浏览器内核以及浏览器内核前缀、CSS3的新增选择器、CSS3圆角边框、CSS3文本阴影、CSS3盒阴影、CSS3背景类样式等。第14章转战移动端上百分比与rem，探讨移动端的发展历程，并依据移动端的发展，讲解设备调试的基本方法，视口viewport，盒模型、行高等属性设置百分比时存在的问题，CSS3新增的度量单位rem等、盒阴影背景尺寸等技术在移动端的应用等。第15章转战移动端下响应式&移动端的探索，介绍响应式布局及媒体查询的基本知识，讨论优化移动端开发的方法与框架，包括flexible、Metahandler。此外，还介绍移动端较为常见的兼容问题。第16章CSS3变形与动画，讲解CSS3二维变形、CSS3三维变形、CSS3过渡与CSS3动画，探讨二维变形与三维变形在属性上的区别，过渡与动画在用法与含义上的区别。第17章各章节自评习题集，针对第1~16章，出于加强理论知识基础的考虑，设置了相对应的习题集，主要用于考查理论类知识和比较基础的小型实战类知识。第18章各章节代码实战，针对第1~16章的大部分章节，设置了与之相对应的代码实战题。第19章网页案例实战，针对第1~16章，设置了两个较大型的网页案例，分别是PC端网页和移动端网页的实战开发。第20章附录，介绍HTML5的发展史，手机端操作系统发展史，HTML的各种布局，编辑器插件安装与应用，开发需要准备的基本软件，HTML5学习平台与网站，学习HTML5技术涉及的部分单词，CSS样式重置代码解析，开发备忘录，Iconfont等。源代码在学习本书示例代码时，可以手工输入所有完整案例，也可以使用随书的源代码文件。本书所有完整案例的源代码、涉及的一些软件、文件，均可以在本书的电子资料库当中下载。
图5.9通过搜索引擎寻找资料
5） 通过各大媒体的分享链接通过各大媒体的文章链接跳转到网站中如图5.10所示。
图5.10通过各大媒体的文章链接跳转到网站当中
大部分人寻找信息、网站的方式通常是后两种方式搜索引擎和各大媒体网站的分享链接。对于这两种来说，浏览者在访问时还有两个共同的特性，那就是能看第一个就看第一个，能看第一页就看第一页。通常情况下，很少有浏览者会翻到搜索结果的第二页或第三页，几乎没有多少人会翻到搜索结果的第四页以及之后。此外，大部分浏览者都比较钟情于第一页的前几个搜索结果。由于浏览者的浏览习惯，对于企业来说，网站在搜索引擎的排名就显得至关重要。让一个网站在搜索引擎中排名靠前，主要有两种方式方法，第一种是在用户使用搜索引擎进行某些相关词语搜索时，能够直接在搜索引擎中显示出这个网站，用户通过单击链接跳转到这个网站； 另一种途径则是通过向搜索引擎付费的方式，使用户网站排名在前面。需要注意的是，搜索引擎会先将推广链接付费的企业网站放在前面，而自然排名则放到推广链接的后面。例如，搜索HTML5学堂，可以得到如下的搜索结果，其中第一篇文章就是推广链接，而从第二个链接才是自然排名。HTML5学堂的官网，在这个页面中的自然排名在第二位。需要注意的是： 推广链接，通常与真正的网站没有关系，只是通过付费而实现的排名，在各个搜索引擎当中，推广链接会加上推广的标识，如图5.11所示。
图5.11搜索引擎中的推广链接
如此来看，网站的排名对于一个企业来说至关重要，那么如何让自己的排名提升上去呢？除了可以花钱做推广和宣传之外，还可以努力地提高自然排名，当然也可以两者相结合。关于网站的排名优化，就是接下来要讲到的SEO。5.6.2SEO是什么SEO是Search Engine Optimization（搜索引擎优化）的缩写，是指为了从搜索引擎中获得更多的免费流量，从网站结构、内容建设方案、
图5.12SEM的基本组成
用户互动传播、页面等角度进行合理规划，使网站更适合搜索引擎的检索原则的行为。SEO与PPC按照点击量付费，共同组成了SEMSearch Engine Marketing，搜索引擎营销，如图5.12所示。5.6.3搜索爬虫工作原理搜索引擎构建一个调度程序，来调度蜘蛛的工作，让蜘蛛去和服务器建立连接下载网页，计算的过程都是通过调度来计算的，蜘蛛只是负责下载网页。通过蜘蛛下载回来的网页放到补充数据区，通过各种程序计算过后才放到检索区，之后形成稳定的排名，当网页存在于补充数据区时，是不稳定的，因为它随时都有可能在计算的过程中被PASS掉，而检索区的数据排名是相对比较稳定的。由于数据来源于数据库前面提到的检索区和补充数据区域，而不是当时的链接抓取，这也就很好地解释了快照的含义，这种处理方法能够很好地提升页面打开速度，如图5.13所示。
图5.13搜索引擎爬虫工作原理
5.6.4爬虫抓取的是什么可用两个词来概括爬虫抓取的内容，那就是图片、文字。在2005年之前，前端开发需要负责设计和制作两种工作，因此也可以被称为网页设计与制作，开发的工具被称为网页三剑客，分别是Photoshop、Flash和Dreamweaver。在那个时代，负责网页行为的JavaScript还是一个跳梁小丑的角色，通常就是制作一个当前时间、文字滚动之类的小效果。对于网页中比较大型的动态效果，很多都是由Flash制作出来的，甚至整个网站都采用的是Flash。查阅很多网页设计与制作的书籍时，常常会在附录中找到不少优秀网站的链接地址，打开附录中的各个网站，看到的都是非常酷炫的效果。但是，这些看上去高大上的网站，存在着一个共同的问题使用百度等搜索引擎进行查找时，无法搜索到当前网站，即便使用的是与这个网站内容非常贴切的词语，也无济于事。造成这个问题的根源就是上面提到的，搜索引擎的爬虫，只抓取图片和文字，当使用Flash进行网站制作时，在HTML文件的当中，会有且仅有一个标签object标签中会有一些基本的设置，而由于所有的文本和图片都是封装在Flash当中的，所以在HTML文件当中并不会以任何文字或图片的形式呈现出来。搜索引擎爬虫抓到页面之后一看，没有关于这个网站的什么信息，仅有一个object，爬虫能够明白这个文件引入了一个对象，除此之外，爬虫一无所知。在这样的情况下，无法得到排名也就在情理之中了。5.6.5什么样的网站才能够被快速收录1. 网站内容角度
内容方面，搜索引擎要求网站要更新频繁并且原创。搜索引擎爬虫对一个网站访问的频率，直接与网站的更新频率和原创程度挂钩。更新的相对比较频繁时，搜索引擎爬虫会定期来访，且时间间隔会比较短； 对于更新不频繁的网站，搜索引擎爬虫光临的时间也就相对比较长。这种访问的特点与人的行为特点也比较类似，下面举一个生活上的例子来理解一下。假设我们是一部动漫的爱好者，这部动漫每周更新一次，于是我们会每隔一周去看一下更新的动漫； 但是突然有一周，它没有更新了，这时发现没有更新，我们会想： 什么情况？为什么没有更新？在第二周，可能还会过来看一次。可是，第二周也没有更新，第三周、第四周也没有更新。那么，还有多少人会在第五周的时候光临呢？2. 网站代码角度代码方面，搜索引擎抓取的是网页中的文字和图片，根据抓取到的标签不同，来确定一个网页不同的权重值，因此，网站开发中语义性标签的合理选用、合理的结构至关重要。3. 运营角度运营方面，SEO会检测当前网站是否存在外链和内链。外链和内链的数量、来源、合理性都会有利于SEO。1） 外链外链指的是其他网站中能够跳转到当前网站的链接。这些工作需要公司的推广人员进行，运营百度贴吧、发帖、发评论、运营博客、在各个媒体平台发表相关的文章，并将链接指向需要优化的网站。对于一个网站来说，当它的链接出现在各个其他知名网站时，也就意味着这个网站很有名气，SEO就会认为这个网站权重级别更高。2） 内链内链指的是当前网站自身当中，某一个页面跳转到当前网站其他页面的链接。内链的操作，多数是由公司的运维进行的。当一个网站内部的链接合理，一个网站的各个网页就不再是独立的，而是组成了一个复杂的关系网络，搜索引擎爬虫可以顺着一个链接，查找到更多的网页，也是有利于SEO的。5.6.6针对SEO，前端开发要注意什么1. 代码规范
1） 扩展性良好SEO并不能够像人一样，通过查看代码查看效果从而判断扩展性。但是SEO能够通过审查相关因素来审查代码扩展性。这个相关因素就是代码大小与加载速度。通常情况下，扩展性强的代码，就不会存在重复性的功能代码，而此时，文件大小相对较小，服务器加载速度就会比较快。2） 格式规范此前提到过，每一个级别的标签都需要添加一次Tab键，进行缩进。除了让我们自己能够清晰查看代码之外，还有一点在于： 如果缩进、格式混乱、各种空行、标签书写位置有误等，都会有可能让爬虫认为这段代码是机器生成的，从而影响SEO排名。3） 合理嵌套如果标签没有合理嵌套，出现了最典型的错误，也会影响SEO排名。2. 标签的语义性爬虫抓取的是网页文档中的文字和图片，那么爬虫如何知道某段文字在网页中充当的是什么角色呢？此时，爬虫会读取包含文字的各种标签，由于每种标签都带有一定的含义，因此，不同标签中的不同文字在网站中的地位也就有所不同。地位比较重要的标签如下。（1） 整个网页的标题： 。（2） 网页的描述信息： 元信息meta中的描述信息description。（3） 一级标题~三级标题： ;;。（4） 图片的替代性文本： img标签的alt属性。（5） a标签的提示性文本： a标签的title属性。（6） 列表、表格等元素的合理运用： ol、ul、dl、table等。备注： 四级标题的重要度较低，并不是很常用。常用的各类标签以及含义，请详见此前的2.3节。3. 重要的部分尽量为纯静态有时候，为了追求网页的特殊呈现效果，会使用JavaScript的AJAX技术，实现网页中的部分数据甚至全部数据的动态加载。但是，从爬虫的搜索角度来说，并不能够检查到JavaScript控制的DOM部分所谓的DOM，可以理解为网页中的各个标签和文字内容，因此建议，对于一些比较重要的部分，不要使用JavaScript进行动态加载，而是采用生成好的静态标签。此外，还要注意不要使用图片去替换重要的文本内容。例如，当前存在一个LOGO，LOGO是由一段文本和一个特殊图像组成的，此时，一种操作方法是，将标题和图像作为一个整体，截取成一张图片，之后为截取后的这个图片添加链接； 另一种操作方法是，单独截取这张图像，标题依旧使用HTML的相关标签进行书写，之后通过布局的手段将这个图像和标题恢复为LOGO中的效果。这两种操作方法在最终显示效果上相同，从操作层面上前者要更简单，但是，前者在SEO方面要比后者差很多。4. 锚文本锚文本，指的是标签中的具体文字，锚文本是由页面需要优化的关键字来决定的，如图5.14所示。
|
|
購物車/收銀台(0) | 在線留言板
| 付款方式
| 運費計算
| 聯絡我們
| 幫助中心 |
加入書簽
HOME
新書上架
