描述
开 本: 16开纸 张: 胶版纸包 装: 平装-胶订是否套装: 否国际标准书号ISBN: 9787519239879丛书名: 实用Web前端开发
编辑推荐
因印刷批次不同,图书封面可能与实际展示有所区别,增值服务也可能会有所不同,以读者收到实物为准。
《中公版·实用Web前端开发:轻松学 HTML5+CSS3+JavaScript》分为HTML5、 CSS3、JavaScript三个部分,每一部分都从基础知识入手,逐步深入,结合大量的代码示例,帮助读者在了解理论知识的基础上,提高实战能力,既可作为Web前端开发初学者的入门教材,又可作为中高级开发者进一步学习新技术的参考用书。本书采用双色印刷,图文结合,讲解详细明确,而且大部分章节配有二维码视频进行重难点讲解,使读者在掌握基础知识的基础上,具备较强的实际操作能力,读者扫描二维码即可实现在线学习,操作便捷高效。
内容简介
《中公版·实用Web前端开发:轻松学 HTML5+CSS3+JavaScript》分为HTML5(第1章至第6章)、 CSS3(第7章至第13章)、JavaScript(第14章至第23章)三个部分。HTML5部分主要讲解了HTML5的语法、标签、结构元素、音频视频属性、表单与文件、画布等。CSS3 部分主要介绍了CSS样式文件的引用方法,CSS3属性选择器、字体与文本、盒模型、背景与边框、动画特效等。JavaScript部分介绍了JavaScript的语法、变量作用域、DOM编程、BOM、事件机制、引用类型、面向对象的编程方式、存储与离线应用、创建多线程。
目 录
HTML5篇
1.1HTML历史与HTML
1.1.1HTML发展历史
1.1.2HTML5文件的基本结构
1.2HTML5的优势
1.2.1解决了跨浏览器问题
1.2.2明确的语义支持
1.2.3部分属性代替了原来的JavaScript
1.3HTML5文件的编写方法
1.3.1使用记事本编写HTML文件
1.3.2使用DreamweaverCC编写HTML文件
2.1语法
2.1.1HTML5的语法变化
2.1.2HTML5的标记方法
2.1.3HTML5与其他版本互相兼容
2.2HTML5保留的常用标签
2.2.1基本标签
2.2.2文本格式化标签
2.2.3超链接和锚点
2.2.4列表相关标签
2.2.5图像相关标签
2.2.6表格相关标签
2.2.7框架相关标签
2.3新增的常用标签
2.3.1文档结构标签
2.3.2语义相关标签
2.4HTML5的通用属性
2.4.1contentEditable属性
2.4.2designMode属性
2.4.3hidden属性
2.4.4tabindex属性
2.4.5spellcheck属性
2.5HTML5中新增属性与不再使用的属性
2.5.1新增的属性
2.5.2不再使用的属性
3.1主体结构元素
3.1.1header元素
3.1.2article元素
3.1.3section元素
3.1.4nav元素
3.1.5aside元素
3.1.6footer元素
3.1.7address元素
3.2分组元素
3.2.1hgroup元素
3.2.2figure元素和figcaption元素
3.3文本语义元素
3.3.1mark元素
3.3.2time元素
3.3.3wbr元素
3.3.4ruby元素、rt元素和rp元素
3.4功能元素
3.4.1meter元素
3.4.2progress元素
3.4.3details元素
3.4.4summary元素
3.5音频和视频元素
3.5.1video元素
3.5.2audio元素
3.5.3用JavaScript控制video元素、audio元素
4.1了解表单
4.1.1表单概述
4.1.2表单的基本结构
4.1.3表单的新增属性
4.1.4新增表单元素使用样式的方法
4.2input元素类型
4.2.1email类型
4.2.2url类型
4.2.3number类型
4.2.4range类型
4.2.5date类型和time类型
4.3HTML5为表单控件新增的属性
4.4表单验证
4.4.1自动验证
4.4.2显示验证
4.4.3取消验证
4.4.4自定义错误信息
4.5文件API
4.5.1FileReader接口
4.5.2FileList对象与file对象
4.6拖放API
4.6.1拖放API简介
4.6.2实现拖放的步骤
4.6.3DataTransfer对象的属性与方法
5.1video元素与audio元素简介
5.2video和audio的属性
5.3video和audio的方法
5.4相关事件
5.4.1事件处理方式
5.4.2事件介绍
5.4.3事件监听
6.1canvas基础
6.1.1canvas元素
6.1.2浏览器支持
6.2绘制矩形
6.2.1rect()方法
6.2.2fillRect()方法
6.2.3strokeRect()方法
6.3使用路径
6.3.1绘制圆形
6.3.2moveTo与lineTo
6.3.3绘制基本图形
6.3.4使用bezierCurveTo()方法绘制贝塞尔曲线
6.4绘制颜色渐变
6.4.1线性渐变
6.4.2径向渐变
6.5绘制文本
6.5.1绘制普通文本
6.5.2绘制阴影文本
6.6使用图像
6.6.1绘制图像
6.6.2图像平铺
6.6.3图像裁剪
6.6.4像素处理
6.7图像的保存与恢复
6.7.1保存与恢复状态
6.7.2保存文件
6.8简单动画制作
CSS3篇
7.1了解CSS
7.1.1CSS发展历史
7.1.2CSS3的优缺点
7.2CSS3能做什么
8.1引入外部样式文件
8.2导入外部样式
8.3使用内部CSS样式
8.4使用内联样式
8.5优先级问题
9.1选择器概述
9.2属性选择器
9.2.1属性选择器简介
9.2.2CSS3中的属性选择器
9.2.3灵活运用属性选择器
9.3结构性伪类选择器
9.3.1伪类选择器及伪元素选择器
9.3.2结构性伪类选择器
9.4目标伪类选择器
9.5UI元素状态伪类选择器
9.5.1E:hover、E:active和E:focus伪类选择器
9.5.2E:enabled与E:disabled伪类选择器
9.5.3E:read-only与E:read-write伪类选择器
9.5.4E:checked、E:default和E:indeterminate伪类选择器
9.5.5E::selection伪类选择器
9.6通用兄弟元素选择器
9.7元素选择器
9.8ID选择器
9.9class选择器
9.10ID选择器与class选择器的优先级问题
10.1字体属性
10.1.1字体(font-family)
10.1.2字号(font-size)
10.1.3字体风格(font-style)
10.1.4加粗字体(font-weight)
10.1.5字体的复合属性(font)
10.1.6字体颜色(color)
10.2文本高级样式
10.2.1阴影文本(text-shadow)
10.2.2溢出文本(text-overflow)
10.2.3控制换行(word-wrap)
10.2.4字体尺寸控制(font-size-adjust)
10.3段落设置
10.3.1单词间隔(word-spacing)
10.3.2字符间隔(letter-spacing)
10.3.3文字修饰(text-decoration)
10.3.4水平对齐方式(text-align)
10.3.5垂直对齐方式(vertical-align)
10.3.6文本缩进(text-indent)
10.3.7文本行高(line-height)
10.3.8文本反排(unicode-bidi和direction)
10.4自定义字体
11.1盒的类型
11.1.1基本类型
11.1.2inline-block和inline-table类型
11.1.3表格相关盒模型
11.1.4list-item盒模型
11.2盒属性
11.2.1overflow属性
11.2.2text-overflow属性
11.2.3box-shadow属性
11.2.4box-sizing属性和resize属性
11.2.5box-orient属性
11.2.6box-flex属性
11.2.7box-direction属性
11.3布局介绍
11.3.1float属性及clear属性
11.3.2columns属性
11.3.3弹性盒布局
12.1背景相关属性
12.2新增的背景属性
12.2.1background-clip属性
12.2.2background-origin属性
12.2.3background-size属性
12.2.4background-break属性
12.3多背景图设置
12.4边框的设置
12.4.1border-radius属性
12.4.2border-color属性
12.4.3border-image属性
13.1Transform
13.1.1Transform的基础知识
13.1.2Transform的分类
13.1.3同时进行多种变换
13.2Transition
13.2.1Transition功能的使用方法
13.2.2同时过渡多个属性
13.3Animation
13.3.1Animation功能的使用方法
13.3.2多个属性同时改变的动画
JavaScript篇
14.1JavaScript语言简介
14.2JavaScript开发及运行环境
15.1语法
15.1.1区分大小写
15.1.2注释
15.1.3严格模式
15.1.4标识符
15.2保留关键字
15.3变量
15.3.1变量命名规则
15.3.2变量声明
15.3.3基本类型值和引用类型值
15.4基本数据类型
15.4.1Typeof操作符
15.4.2Undefined类型
15.4.3Null类型
15.4.4Boolean类型
15.4.5Number类型
15.4.6String类型
15.5复合类型
15.5.1对象
15.5.2数组
15.5.3函数
15.6运算符
15.6.1赋值运算符
15.6.2算术运算符
15.6.3位运算符
15.6.4比较运算符
15.6.5逻辑运算符
15.6.6三目运算符
15.6.7逗号运算符
15.7语句
15.7.1if语句
15.7.2do-while语句
15.7.3while语句
15.7.4for语句
15.7.5for-in语句
15.7.6break语句和continue语句
15.7.7with语句
15.7.8switch语句
15.8函数
15.8.1函数定义
15.8.2函数调用
15.8.3函数的实参和形参
15.8.4递归函数
15.8.5闭包
15.8.6函数的实例属性和方法
15.9私有变量
16.1函数作用域
16.2作用域链
17.1DOM概述
17.2节点层次
17.2.1元素节点
17.2.2文本节点
17.2.3属性节点
17.2.4注释节点
17.2.5文档类型节点
17.2.6CSS
17.2.7JavaScript获取元素的方式
17.3DOM的操作技术
17.3.1修改HTML元素
17.3.2表格操作
17.4DOM扩展
17.4.1选择符API
17.4.2元素遍历
17.4.3HTML5中类的操作
17.4.4焦点管理
17.4.5HTMLDocument的变化
17.4.6字符编码
17.4.7自定义数据属性
17.4.8样式的相关特性
18.1window对象
18.1.1全局的window对象
18.1.2访问历史
18.2访问URL
18.3弹出新窗口
18.3.1对话框
18.3.2浏览器和屏幕信息
18.3.3使用定时器
19.1基本事件模型
19.1.1绑定HTML元素属性
19.1.2绑定DOM对象属性
19.1.3事件处理函数和关键字this
19.2事件流
19.2.1事件冒泡
19.2.2事件捕获
19.3事件对象
19.3.1DOM中的事件对象
19.3.2IE中的事件对象
19.3.3跨浏览器事件对象
19.4事件类型
19.4.1鼠标事件
19.4.2键盘事件
19.4.3文本事件
19.4.4HTML5事件
19.4.5设备事件
19.4.6触摸事件
19.5DOM的事件模型
19.5.1绑定的事件处理器
19.5.2访问事件对象
19.5.3转发事件
19.5.4取消事件的默认行为
19.5.5事件委托
19.6表单事件
19.6.1elements[]表单对象集合
19.6.2提交表单
19.6.3重置表单
19.6.4获取焦点事件
19.6.5失去焦点事件
19.7oncontextmenu事件
20.1Object类型
20.2Array类型
20.2.1创建数组的方式
20.2.2操作数组的方法
20.3Date类型
20.4RegExp类型
20.5Function类型
20.5.1使用函数声明定义函数
20.5.2使用函数表达式定义函数
20.5.3函数重载
20.5.4arguments
20.5.5this对象
20.5.6函数的属性和方法
21.1理解对象
21.1.1面向对象的概念
21.1.2属性类型
21.1.3对象和关联数组
21.2创建对象
21.2.1使用构造函数创建对象
21.2.2使用Object直接创建对象
21.2.3使用JSON语法创建对象
21.3继承
21.3.1原型链
21.3.2原型继承
21.3.3多重继承
21.3.4寄生式继承
21.3.5原型继承与属性拷贝的混合应用
21.3.6借用构造函数
21.3.7组合继承
21.3.8对象拷贝
21.3.9constructor属性和instanceof运算符
22.1WebStorage
22.1.1Storage接口
22.1.2简单Web留言本
22.1.3存储结构化数据
22.2cookie
22.3离线应用
22.3.1离线检测
22.3.2本地缓存、浏览器网页缓存与离线应用的区别
22.3.3application对象
22.3.4离线应用的事件与监听
23.1WebWorker可用的API
23.2创建多线程
23.3数据交换
23.3.1主线程与子线程之间的数据交换
23.3.2子线程之间的数据交换
23.4线程嵌套
1.1HTML历史与HTML
1.1.1HTML发展历史
1.1.2HTML5文件的基本结构
1.2HTML5的优势
1.2.1解决了跨浏览器问题
1.2.2明确的语义支持
1.2.3部分属性代替了原来的JavaScript
1.3HTML5文件的编写方法
1.3.1使用记事本编写HTML文件
1.3.2使用DreamweaverCC编写HTML文件
2.1语法
2.1.1HTML5的语法变化
2.1.2HTML5的标记方法
2.1.3HTML5与其他版本互相兼容
2.2HTML5保留的常用标签
2.2.1基本标签
2.2.2文本格式化标签
2.2.3超链接和锚点
2.2.4列表相关标签
2.2.5图像相关标签
2.2.6表格相关标签
2.2.7框架相关标签
2.3新增的常用标签
2.3.1文档结构标签
2.3.2语义相关标签
2.4HTML5的通用属性
2.4.1contentEditable属性
2.4.2designMode属性
2.4.3hidden属性
2.4.4tabindex属性
2.4.5spellcheck属性
2.5HTML5中新增属性与不再使用的属性
2.5.1新增的属性
2.5.2不再使用的属性
3.1主体结构元素
3.1.1header元素
3.1.2article元素
3.1.3section元素
3.1.4nav元素
3.1.5aside元素
3.1.6footer元素
3.1.7address元素
3.2分组元素
3.2.1hgroup元素
3.2.2figure元素和figcaption元素
3.3文本语义元素
3.3.1mark元素
3.3.2time元素
3.3.3wbr元素
3.3.4ruby元素、rt元素和rp元素
3.4功能元素
3.4.1meter元素
3.4.2progress元素
3.4.3details元素
3.4.4summary元素
3.5音频和视频元素
3.5.1video元素
3.5.2audio元素
3.5.3用JavaScript控制video元素、audio元素
4.1了解表单
4.1.1表单概述
4.1.2表单的基本结构
4.1.3表单的新增属性
4.1.4新增表单元素使用样式的方法
4.2input元素类型
4.2.1email类型
4.2.2url类型
4.2.3number类型
4.2.4range类型
4.2.5date类型和time类型
4.3HTML5为表单控件新增的属性
4.4表单验证
4.4.1自动验证
4.4.2显示验证
4.4.3取消验证
4.4.4自定义错误信息
4.5文件API
4.5.1FileReader接口
4.5.2FileList对象与file对象
4.6拖放API
4.6.1拖放API简介
4.6.2实现拖放的步骤
4.6.3DataTransfer对象的属性与方法
5.1video元素与audio元素简介
5.2video和audio的属性
5.3video和audio的方法
5.4相关事件
5.4.1事件处理方式
5.4.2事件介绍
5.4.3事件监听
6.1canvas基础
6.1.1canvas元素
6.1.2浏览器支持
6.2绘制矩形
6.2.1rect()方法
6.2.2fillRect()方法
6.2.3strokeRect()方法
6.3使用路径
6.3.1绘制圆形
6.3.2moveTo与lineTo
6.3.3绘制基本图形
6.3.4使用bezierCurveTo()方法绘制贝塞尔曲线
6.4绘制颜色渐变
6.4.1线性渐变
6.4.2径向渐变
6.5绘制文本
6.5.1绘制普通文本
6.5.2绘制阴影文本
6.6使用图像
6.6.1绘制图像
6.6.2图像平铺
6.6.3图像裁剪
6.6.4像素处理
6.7图像的保存与恢复
6.7.1保存与恢复状态
6.7.2保存文件
6.8简单动画制作
CSS3篇
7.1了解CSS
7.1.1CSS发展历史
7.1.2CSS3的优缺点
7.2CSS3能做什么
8.1引入外部样式文件
8.2导入外部样式
8.3使用内部CSS样式
8.4使用内联样式
8.5优先级问题
9.1选择器概述
9.2属性选择器
9.2.1属性选择器简介
9.2.2CSS3中的属性选择器
9.2.3灵活运用属性选择器
9.3结构性伪类选择器
9.3.1伪类选择器及伪元素选择器
9.3.2结构性伪类选择器
9.4目标伪类选择器
9.5UI元素状态伪类选择器
9.5.1E:hover、E:active和E:focus伪类选择器
9.5.2E:enabled与E:disabled伪类选择器
9.5.3E:read-only与E:read-write伪类选择器
9.5.4E:checked、E:default和E:indeterminate伪类选择器
9.5.5E::selection伪类选择器
9.6通用兄弟元素选择器
9.7元素选择器
9.8ID选择器
9.9class选择器
9.10ID选择器与class选择器的优先级问题
10.1字体属性
10.1.1字体(font-family)
10.1.2字号(font-size)
10.1.3字体风格(font-style)
10.1.4加粗字体(font-weight)
10.1.5字体的复合属性(font)
10.1.6字体颜色(color)
10.2文本高级样式
10.2.1阴影文本(text-shadow)
10.2.2溢出文本(text-overflow)
10.2.3控制换行(word-wrap)
10.2.4字体尺寸控制(font-size-adjust)
10.3段落设置
10.3.1单词间隔(word-spacing)
10.3.2字符间隔(letter-spacing)
10.3.3文字修饰(text-decoration)
10.3.4水平对齐方式(text-align)
10.3.5垂直对齐方式(vertical-align)
10.3.6文本缩进(text-indent)
10.3.7文本行高(line-height)
10.3.8文本反排(unicode-bidi和direction)
10.4自定义字体
11.1盒的类型
11.1.1基本类型
11.1.2inline-block和inline-table类型
11.1.3表格相关盒模型
11.1.4list-item盒模型
11.2盒属性
11.2.1overflow属性
11.2.2text-overflow属性
11.2.3box-shadow属性
11.2.4box-sizing属性和resize属性
11.2.5box-orient属性
11.2.6box-flex属性
11.2.7box-direction属性
11.3布局介绍
11.3.1float属性及clear属性
11.3.2columns属性
11.3.3弹性盒布局
12.1背景相关属性
12.2新增的背景属性
12.2.1background-clip属性
12.2.2background-origin属性
12.2.3background-size属性
12.2.4background-break属性
12.3多背景图设置
12.4边框的设置
12.4.1border-radius属性
12.4.2border-color属性
12.4.3border-image属性
13.1Transform
13.1.1Transform的基础知识
13.1.2Transform的分类
13.1.3同时进行多种变换
13.2Transition
13.2.1Transition功能的使用方法
13.2.2同时过渡多个属性
13.3Animation
13.3.1Animation功能的使用方法
13.3.2多个属性同时改变的动画
JavaScript篇
14.1JavaScript语言简介
14.2JavaScript开发及运行环境
15.1语法
15.1.1区分大小写
15.1.2注释
15.1.3严格模式
15.1.4标识符
15.2保留关键字
15.3变量
15.3.1变量命名规则
15.3.2变量声明
15.3.3基本类型值和引用类型值
15.4基本数据类型
15.4.1Typeof操作符
15.4.2Undefined类型
15.4.3Null类型
15.4.4Boolean类型
15.4.5Number类型
15.4.6String类型
15.5复合类型
15.5.1对象
15.5.2数组
15.5.3函数
15.6运算符
15.6.1赋值运算符
15.6.2算术运算符
15.6.3位运算符
15.6.4比较运算符
15.6.5逻辑运算符
15.6.6三目运算符
15.6.7逗号运算符
15.7语句
15.7.1if语句
15.7.2do-while语句
15.7.3while语句
15.7.4for语句
15.7.5for-in语句
15.7.6break语句和continue语句
15.7.7with语句
15.7.8switch语句
15.8函数
15.8.1函数定义
15.8.2函数调用
15.8.3函数的实参和形参
15.8.4递归函数
15.8.5闭包
15.8.6函数的实例属性和方法
15.9私有变量
16.1函数作用域
16.2作用域链
17.1DOM概述
17.2节点层次
17.2.1元素节点
17.2.2文本节点
17.2.3属性节点
17.2.4注释节点
17.2.5文档类型节点
17.2.6CSS
17.2.7JavaScript获取元素的方式
17.3DOM的操作技术
17.3.1修改HTML元素
17.3.2表格操作
17.4DOM扩展
17.4.1选择符API
17.4.2元素遍历
17.4.3HTML5中类的操作
17.4.4焦点管理
17.4.5HTMLDocument的变化
17.4.6字符编码
17.4.7自定义数据属性
17.4.8样式的相关特性
18.1window对象
18.1.1全局的window对象
18.1.2访问历史
18.2访问URL
18.3弹出新窗口
18.3.1对话框
18.3.2浏览器和屏幕信息
18.3.3使用定时器
19.1基本事件模型
19.1.1绑定HTML元素属性
19.1.2绑定DOM对象属性
19.1.3事件处理函数和关键字this
19.2事件流
19.2.1事件冒泡
19.2.2事件捕获
19.3事件对象
19.3.1DOM中的事件对象
19.3.2IE中的事件对象
19.3.3跨浏览器事件对象
19.4事件类型
19.4.1鼠标事件
19.4.2键盘事件
19.4.3文本事件
19.4.4HTML5事件
19.4.5设备事件
19.4.6触摸事件
19.5DOM的事件模型
19.5.1绑定的事件处理器
19.5.2访问事件对象
19.5.3转发事件
19.5.4取消事件的默认行为
19.5.5事件委托
19.6表单事件
19.6.1elements[]表单对象集合
19.6.2提交表单
19.6.3重置表单
19.6.4获取焦点事件
19.6.5失去焦点事件
19.7oncontextmenu事件
20.1Object类型
20.2Array类型
20.2.1创建数组的方式
20.2.2操作数组的方法
20.3Date类型
20.4RegExp类型
20.5Function类型
20.5.1使用函数声明定义函数
20.5.2使用函数表达式定义函数
20.5.3函数重载
20.5.4arguments
20.5.5this对象
20.5.6函数的属性和方法
21.1理解对象
21.1.1面向对象的概念
21.1.2属性类型
21.1.3对象和关联数组
21.2创建对象
21.2.1使用构造函数创建对象
21.2.2使用Object直接创建对象
21.2.3使用JSON语法创建对象
21.3继承
21.3.1原型链
21.3.2原型继承
21.3.3多重继承
21.3.4寄生式继承
21.3.5原型继承与属性拷贝的混合应用
21.3.6借用构造函数
21.3.7组合继承
21.3.8对象拷贝
21.3.9constructor属性和instanceof运算符
22.1WebStorage
22.1.1Storage接口
22.1.2简单Web留言本
22.1.3存储结构化数据
22.2cookie
22.3离线应用
22.3.1离线检测
22.3.2本地缓存、浏览器网页缓存与离线应用的区别
22.3.3application对象
22.3.4离线应用的事件与监听
23.1WebWorker可用的API
23.2创建多线程
23.3数据交换
23.3.1主线程与子线程之间的数据交换
23.3.2子线程之间的数据交换
23.4线程嵌套
在线试读
第1章HTML5简介
第1章
HTML5简介
视频讲解
1.1HTML历史与HTML5
HTML(超文本标记语言)的全称是HyperTextMarkupLanguage。超文本标记语言是标准通用标记语言下的一个应用,是一种规范,一种标准。它通过标记符号告诉浏览器如何显示其中的内容,如文字如何处理、画面如何安排、图片如何显示等。简单来说,HTML就是用来描述网页的一种语言,为网页创建和其他可在网页浏览器中看到的信息而设计。
HTML不是一种编程语言,而是一种标记语言(markuplanguage),它使用标记标签(markuptag)来描述网页。
1.1.1HTML发展历史
HTML从面世到标准规范终制定完成并公开发布,凝结了大量网络工作者心血。
HTML1.0:1993年6月,HTML1.0作为互联网工程工作小组(IETF)工作草案发布。
HTML2.0:1995年11月,HTML2.0发布,但在2000年6月被宣布已经过时。
HTML3.2:W3C组织于1997年1月14日发布,是W3C推荐标准。
HTML4.0:W3C组织于1997年12月18日发布,是W3C推荐标准。
HTML4.01:基于HTML4.0进行了微小改进,W3C组织于1999年12月24日发布,是W3C推荐标准。
XHTML1.0:W3C组织于2000年1月26日发布,是W3C推荐标准,后来经过修订于2002年8月1日重新发布。
HTML5:2014年10月28日发布,是W3C推荐标准。
HTML语言从1.0到5.0经历了巨大的变化,HTML3.2和HTML4.01是常见的版本。HTML5是HTML的修订版本,是下一代HTML标准。HTML5仍处于完善之中,但大部分现代浏览器已经具备了某些HTML5支持。
1.1.2HTML5文件的基本结构
在学习HTML5相关知识之前,我们必须对HTML5文档结构有初步的了解。代码示例1-1为基本的HTML5文档结构。
页面标题
页面内容
代码示例1-1
在本书的代码示例中,如…间无内容,此后的代码示例只列举代码示例1-1中加粗部分的代码。
从代码示例1-1的基本结构可以看出,HTML5Web页面中的DOCTYPE(文档结构类型声明)相比HTML4.01(代码示例1-2),得到了很大程度的简化。
”-//W3C//DTDHTML4.01Transitional//EN””””http://www.w3.org/TR/html4/loose.dtd””>
代码示例1-2
字符集的声明也由原来的简化为。
HTML5的根元素依然是html,html元素包含标签和标签。标签用来定义文档的头部信息。标签用来定义页面主体,包含页面的文本内容和绝大部分标签。
1.2HTML5的优势
HTML5正式推出以来,便以惊人的速度迅速推广着。各主流浏览器对其表现出了极大的热情和强烈的支持,开始对旗下产品升级更新以支持HTML5的新功能,而浏览器的实质性发展和反馈也促使HTML5规范得以持续完善。HTML5标准规范的完善,也必将开启一个崭新的互联网时代。
1.2.1解决了跨浏览器问题
在之前的HTML版本中,各浏览器对HTML、JavaScript的支持并不统一,这就使同一页面在不同浏览器中的表现不同,解决跨浏览器问题成了前端开发人员的一个重大课题。而HTML5的目标就是将Web带入一个成熟的应用平台,在HTML5平台上,视频、音频、图像、动画,以及电脑的交互都被标准化。
目前,各主流浏览器(如IE、Chrome、Firefox、Safari、Opera)都纷纷采取措施以支持HTML5,微软也对新的互联网通用标准表示了赞同和支持。
HTML5doctype可用于所有的浏览器,甚至包括IE6。虽然老的浏览器可以识别HTML5doctype,但并不意味着它们能够处理所有新的HTML5标签和特性。HTML5会让问题简单化,具备友好的跨浏览器性能。针对不支持新标签的老式IE浏览器,我们只要简单添加JavaScriptshiv代码,就可以让它们使用新的标签。
1.2.2明确的语义支持
我们来看一下HTML4中常见的一种页面结构代码,如代码示例1-3所示。
HTML4文档的头部
第1章
HTML5简介
视频讲解
1.1HTML历史与HTML5
HTML(超文本标记语言)的全称是HyperTextMarkupLanguage。超文本标记语言是标准通用标记语言下的一个应用,是一种规范,一种标准。它通过标记符号告诉浏览器如何显示其中的内容,如文字如何处理、画面如何安排、图片如何显示等。简单来说,HTML就是用来描述网页的一种语言,为网页创建和其他可在网页浏览器中看到的信息而设计。
HTML不是一种编程语言,而是一种标记语言(markuplanguage),它使用标记标签(markuptag)来描述网页。
1.1.1HTML发展历史
HTML从面世到标准规范终制定完成并公开发布,凝结了大量网络工作者心血。
HTML1.0:1993年6月,HTML1.0作为互联网工程工作小组(IETF)工作草案发布。
HTML2.0:1995年11月,HTML2.0发布,但在2000年6月被宣布已经过时。
HTML3.2:W3C组织于1997年1月14日发布,是W3C推荐标准。
HTML4.0:W3C组织于1997年12月18日发布,是W3C推荐标准。
HTML4.01:基于HTML4.0进行了微小改进,W3C组织于1999年12月24日发布,是W3C推荐标准。
XHTML1.0:W3C组织于2000年1月26日发布,是W3C推荐标准,后来经过修订于2002年8月1日重新发布。
HTML5:2014年10月28日发布,是W3C推荐标准。
HTML语言从1.0到5.0经历了巨大的变化,HTML3.2和HTML4.01是常见的版本。HTML5是HTML的修订版本,是下一代HTML标准。HTML5仍处于完善之中,但大部分现代浏览器已经具备了某些HTML5支持。
1.1.2HTML5文件的基本结构
在学习HTML5相关知识之前,我们必须对HTML5文档结构有初步的了解。代码示例1-1为基本的HTML5文档结构。
页面内容
代码示例1-1
在本书的代码示例中,如…间无内容,此后的代码示例只列举代码示例1-1中加粗部分的代码。
从代码示例1-1的基本结构可以看出,HTML5Web页面中的DOCTYPE(文档结构类型声明)相比HTML4.01(代码示例1-2),得到了很大程度的简化。
”-//W3C//DTDHTML4.01Transitional//EN””””http://www.w3.org/TR/html4/loose.dtd””>
代码示例1-2
字符集的声明也由原来的简化为。
HTML5的根元素依然是html,html元素包含标签和标签。标签用来定义文档的头部信息。标签用来定义页面主体,包含页面的文本内容和绝大部分标签。
1.2HTML5的优势
HTML5正式推出以来,便以惊人的速度迅速推广着。各主流浏览器对其表现出了极大的热情和强烈的支持,开始对旗下产品升级更新以支持HTML5的新功能,而浏览器的实质性发展和反馈也促使HTML5规范得以持续完善。HTML5标准规范的完善,也必将开启一个崭新的互联网时代。
1.2.1解决了跨浏览器问题
在之前的HTML版本中,各浏览器对HTML、JavaScript的支持并不统一,这就使同一页面在不同浏览器中的表现不同,解决跨浏览器问题成了前端开发人员的一个重大课题。而HTML5的目标就是将Web带入一个成熟的应用平台,在HTML5平台上,视频、音频、图像、动画,以及电脑的交互都被标准化。
目前,各主流浏览器(如IE、Chrome、Firefox、Safari、Opera)都纷纷采取措施以支持HTML5,微软也对新的互联网通用标准表示了赞同和支持。
HTML5doctype可用于所有的浏览器,甚至包括IE6。虽然老的浏览器可以识别HTML5doctype,但并不意味着它们能够处理所有新的HTML5标签和特性。HTML5会让问题简单化,具备友好的跨浏览器性能。针对不支持新标签的老式IE浏览器,我们只要简单添加JavaScriptshiv代码,就可以让它们使用新的标签。
1.2.2明确的语义支持
我们来看一下HTML4中常见的一种页面结构代码,如代码示例1-3所示。
HTML4文档的头部
HTML4文档的导航
HTML4文档的主要内容
HTML4文档主要内容区域的侧边导航或菜单
HTML4文档的页脚
代码示例1-3
而在HTML5中将以代码示例1-4的形式呈现以上代码块。
代码示例1-4
由代码示例1-3与代码示例1-4对比可知,在之前的HTML版本中,HTML的文档结构主要由标签div元素布局实现,通过class、id的不同来区分元素所在区块的内容含义。但显然,大篇幅div布局的方式并不能把文档的结构表达得很清楚。HTML5则为页面布局提供了更明确的语义元素,如
评论
还没有评论。