第一章 新一代WEB前端技术 HTML5

第1章新一代WEB前端 技术HTML51.1       HTML的基本概念互联网上的信息是以网页形式展示给我们的，网页是网络信息传递的载体。网页文件是用标记语言书写的，这种语言称为超文本标记语言（Hyper Text Markup, HTML）。1.1.1  HTML的发展历程

1.1.2 什么是HTMLHTML5不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中的内容和结构。HTML基本语法：<标记符>。1.1.3基本结构完整的HTML文件包括：标题、段落、列表、表格、绘制的图形及各种嵌入对象，统称为元素。基本结构如下：                                               声明语句                                                         文件开始的标记                                                        文件头部开始的标记......                                                                文件头部的内容                                                       文件头部结束的标记                                                        文件主体开始的标记......                                                                文件主体的内容                                                       文件主体结束的标记                                                        文件结束的标记

1.2HTML5的优势1.2.1解决了跨浏览器问题1.2.2新增了多个新特性1、新增了语义化标签，使文档结构明确。2、新的文档对象模型（DOM）。3、实现了2D绘图的Canvas对象。4、可控媒体播放。5、离线存储。6、文档编辑。7、拖放。8、跨文档消息。9、浏览历史管理。10、MIME类型和协议注册。1.2.3用户优先的原则HTML5的标准制定都是以用户优先为原则的。加强的设计：1、安全机制的设计2、表现和内容分离1.2.4化繁为简的优势1、新的简化的字符集声明。2、新的简化的DOCTYPE。3、简单而强大的HTML5API。4、用浏览器原生能力替代复杂的JavaScript代码。

1.3HTML5网页的开发环境产生HTML文件既可以手工编写也可以使用HTML编辑器。1.3.1  案例1——使用记事本手工编写HTML5具体操作步骤：step 01    单击“开始”   > 程序  > 附件  > 记事本 > 输入HTML代码step 02    文件 > 保存；保存类型设为“所有文件”，后缀名为.html或.htm。step 03    保存。图示：

1.3.2 案例——使用Dreamweaver编写HTML文件1.文档窗口      代码视图                        设计视图                        拆分视图2.“插入”面板3.“属性”面板

操作步骤：step  01   在欢迎界面“新建”栏中选择HTML。step  02   新建文档对话框选择创建新项目中的“HTML模板”setp  03  单击“创建”按钮，创建HTML文件setp  04  单击“代码”按钮setp  05  修改HTML文档标题setp  06  保存文件setp  07  查看

1.4.1  案例3——查看页面效果今天我编写了第一个简单网页，感觉很兴奋。1.4.2  案例4——查看源文件右击页面，选择查看网页源代码。

1.5高手解惑1、为何使用记事本编辑的HTML文件无法在浏览器中预览，而是直接在记事本中打开？答：很多初学者，在保存文件时，未将文件扩展名.html或htm作为后缀,导致文件还是.txt为扩展名.2、如何显示或隐藏Dreamweaver  CC的欢迎屏幕？答：Dreamweaver  CC的欢迎屏幕可以帮助使用者快速进行打开文件、新建文件和获取相关的操作。如果不希望显示该欢迎屏幕，可以按CTRL+U组合键，在弹出的窗口中选择左侧的“常规”页，将右侧“文档欢迎屏幕”复选框取消勾选。