百科生活 投稿
关于【html5从入门到精通】，html5基础知识点总结，今天小编给您分享一下，如果对您有所帮助别忘了关注本站哦。
第一章 Web前端技术简介
本章学习目标
- 了解Web前端技术和相关行业信息
- 了解Web前端开发工具
- 理解html基本原理
互联网中的网页大多数都是使用HTML格式展示到浏览者面前，因此，HTML是目前最流行的网页制作语言。为了使网页具有更好的扩展性和用户体验，CSS样式表在网页设计中有着重要的地位。在学习HTML和CSS之前，需要了解一些基本的互联网相关知识，本章将从Web前端概述、Web前端开发工具和HTML入门基本知识开始，带领读者进行Web开发之旅。
1.1 Web前端概述
Web前端即指大家平常上网浏览的网页，如上网浏览新闻、查询快递信息、淘宝购物等都是在浏览网页。但网页制作还需要了解与网页相关的基本概念，下面将对Web前端的相关概念进行详细讲解。
1.1.1 初识Web前端
1991年8月6日，来自欧洲核子研究中心的科学家Tim Berners-Lee，启动了世界上第一个可以正式访问的网站（http: //info. cern. ch/），从此人类宣布了互联网时代的到来。随着互联网的飞速发展，网站开发人员也变得炽手可热，供不应求。据不完全统计截止2016年底，网站开发人员超过2000万 。
Web前端开发是从网页演变而来，名称上有明显的时代特征。随着人们对用户体验的要求越来越高，前端开发的技术难度越来越大，Web前端开发这个职业也从设计和制作不分的局面中独立出来。
图1.1网站开发模式
有一句话非常形象的形容了Web前端工程师的特点，“它是游走在二次元与二进制之间的魔法师!”。
1.1.1 Web前端三大核心技术
首先来了解下W3C组织，即万维网联盟，创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。W3C专门负责制定网页相关的标准，所以Web前端相关技术都是基于W3C标准实现的。
下面来介绍下Web前端开发所包括的三大核心技术，即HTML语言、CSS语言、JavaScript语言。
1.HTML语言
HTML全称“Hyper Text Markup Language”，中文解释为“超文本标记语言”，它是制作网页的标准语言。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分（Head）、和“主体”部分（Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
2. CSS语言
CSS全称“Cascading Style Sheet”，中文解释为“层叠样式表”，它是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
3. JavaScript语言
JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。它的解释器被称为JavaScript引擎，属于浏览器的一部分，因此JavaScript代码由浏览器边解释边执行。 通常JavaScript脚本通过嵌入在HTML中来实现自身的功能。
Web前端三大核心技术就像板凳的三条腿，缺一不可。用图片来表示三者之间的联系，如图1.2所示。
图1.2 三大核心技术
W3C组织规定，web标准需要将网页的结构、样式和行为三者进行分离。HTML CSS Javascript本质上构成一个MVC框架，即HTML用来描述网页的结构（Model）、CSS用来描述网页的结构（VIEw）、Javascript用来描述网页的行为即调度数据和实现某种展现逻辑（Controller）。本书主要讲解HTML CSS。
用一个盖房子的例子来描述下三者之间的关系，首先需要把房子的地基和骨架搭建好，有一个良好的结构（HTML）。然后给房子刷上油漆和添加窗户，对房子样式进行美化（CSS）。最后给房子添加电梯和地暖，与住户进行一些行为上的交互（JavaScript），这样房子才算搭建完毕。下面来看一下在web前端中，三者的体现效果如图1.3、1.4和1.5所示。
图1.3 仅仅使用HTML的文字
图1.4 在HTML基础上加入CSS样式
图1.5 加入JavaScript鼠标划入效果
1.2 Web前端开发工具
俗话说得好，工欲善其事必先利其器。所以在HTML CSS开发过程中，需要先来选择适合的相关开发工具。HTML CSS开发过程中主要涉及到三大类工具：浏览器、网页编辑器、切图软件，本节就来介绍这三大类工具。
1.2.1 浏览器
浏览器是网页的运行平台，即可以把HTML文件展示在网页中，供用户可上网进行浏览的一种软件。目前主流的浏览器有IE、Chrome、Firefox、Safari、Opera等，如图1.6所示，由于某些因素，这些浏览器不能完全采用统一的Web标准，或者说不同的浏览器对同一个CSS样式有不用的解析。这就导致了同样的页面在不同的浏览器下显示效果可能不同。
图1.6 主流浏览器
不同用户使用的浏览器可能不同，因此制作网页时，需要保证该网页兼容所有的主流浏览器。关于网页制作中的兼容性问题及解决方案，会在后面的章节进行讲解。下面介绍几种主流的浏览器。
1. IE浏览器
IE是Internet Explorer简称，它是微软公司推出的一款网页浏览器，采用Trident内核实现，有6.0、7.0、8.0、9.0、10.0、11.0等版本。在IE7以前，中文直译为“网探路者，但在IE7以后官方便直接俗称"IE浏览器"。由于一些用户仍然在使用低版本的浏览器，所以在制作网页时，一般也需要兼容低版本的浏览器。一些其他的浏览器都是基于IE内核的，如360安全浏览器、搜狗浏览器等，只要兼容IE浏览器，这些基于IE内核的浏览器也都兼容。
2. Chrome浏览器
Chrome浏览器一般指Google Chrome，Google Chrome是一款由Google公司开发的一款设计简单、高效的Web浏览器，采用V8引擎，可快速运行复杂的大型网站，从而降低浏览者访问的等待时长。该浏览器基于其他开源软件撰写，采用Webkit、Blink内核实现，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。本书运行环境采用Chrome浏览器，版本为 54.0.2840.5，如图1.7所示。
图1.7 Chrome浏览器首页
3. Firefox浏览器
Firefox浏览器一般指Mozilla Firefox，中文俗称“火狐”，是Mozilla公司出品的一款自由及开放源代码Web浏览器，采用Gecko内核实现，支持多种操作系统，如Windows、Mac OS X及GNU/Linux等。
4. Safari浏览器
Safari是苹果公司出品用于苹果计算机的操作系统Mac OS X中的浏览器，采用Webkit内核实现，使用了KDE的KHTML作为浏览器的运算核心。无论在 Mac、PC 或 iPod touch 上运行，Safari 都可提供极致愉悦的网络体验方式，更不断地改写浏览器的定义。
5. Opera浏览器
Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的Web浏览器，采用Presto内核实现，它是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。
注：浏览器内核负责对网页语法进行解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
1.2.2 网页编辑器
网页编辑器是书写HTML、CSS等代码的工具软件。一般常用的网页编辑器有Dreamweaver、Sublime Text、WebStorm、Hbulider等，如图1.8所示为常用的网页编辑器的图标。本教材采用Dreamweaver网页编辑器 版本为CS6。Dreamweaver简称“DW”，具备完美的代码提示功能和强大的辅助操作，因此它非常容易上手，是一款适合初学者学习和使用的网页编辑器。
图1.8 常用网页编辑器
接下来讲解如何使用Dreamweaver网页编辑器进行网页编程，软件的安装不再介绍，直接讲解软件安装后如何使用。
运行DW软件，进入软件界面， 选择菜单栏中【文件】→【新建】，打开新建文档窗口，在【文档类型】下拉列表中选择HTML5，单击【创建】按钮，如图1.9所示，即可创建一个空白的HTML文档，如图1.10所示。
图1.9 新建文档窗口
图1.10 空白HTML文档
为了让初学者更好的使用DW工具，需要对DW进行一些初始化的设置，具体如下：
a) 工作区布局设置
运行DW软件，进入软件界面，将布局设置成统一的模式，选择菜单栏中选择【窗口】→【工作区布局(w)】→【经典】，如图1.11。
图1.11 初始化工作区布局
2. 必备面板
设置经典模式后，需要调出三个常用的面板，分别选择菜单栏【窗口】菜单下的【插入】、【属性】、【文件】3个命令，如图1.12所示。
图1.12 初始化必备面板
3. 新建默认文档设置
选择菜单栏中【编辑】→【首选参数】（Ctrl U），选中左侧【分类】中的【新建文档】，右边就会出现相应的设置，选择最常用的HTML文档类型和编码类型，本书设置为HTML5，如图1.13所示。
图1.13 默认文档设置
新建文档的首选参数设置后，新建HTML文档时，DW就会按照默认文档设置直接生成所需的代码。
4. 浏览器设置
初学者计算机必备IE浏览器和Chrome浏览器，建议讲DW的默认预览浏览器设置为“Chrome浏览器”，快捷键F12是使用主浏览器预览网页，一般把IE浏览器设为次浏览器，快捷键Ctrl F12，如图1.14所示。
图1.14 默认浏览器设置
5. 代码提示
为了加快写代码的速度，会用到代码提示，DW中就有强大的代码提示的功能，只需在【首选参数】对话框中设置代码提示，选择【代码提示】选项，然后选中【结束标签】选项中的第二项，单击【确定】按钮即可，如图1.15所示。
图1.15 代码提示设置
1.2.3 切图软件
切图软件是对UI设计师设计出的效果图进行切图操作，也可以对网页中涉及到的图片进行修改等处理。常用的切图软件有Photoshop和Fireworks两种。如图1.16为常用切图软件的图标，本教材采用Photoshop进行切图，版本为CS5。Photoshop简称“PS”，它是一款专业性很强的图片处理软件，在第九章中将详细的来学习如何利用Photoshop进行网页的切图操作。
图1.16 常用切图软件
1.3 HTML入门
1.3.1 什么是HTML
HTML的英语意思是：Hypertext Markup Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。接下来将带领读者从语言、超文本、标记三部分进行理解HTML。
1．语言
HTML一种编程语言，有指定的语法规则。超文本传输协议规定了浏览器在运行 HTML 文档时所遵循的规则和进行的操作。协议的制定使浏览器在运行超文本时有了统一的规则和标准。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台，自1990年以来HTML就一直被用作WWW（是World Wide Web的缩写，也可简写WEB、中文叫做万维网) 的信息表示语言，使用HTML语言描述的文件，需要通过WEB浏览器HTTP显示出效果。
2. 超文本
所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。
HTML的普遍应用就是通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面与世界各地主机的文件链接。直接获取相关的主题。如下所示：
通过HTML可以通过图片格式和文字格式的设计实现出丰富多彩的风格：
通过HTML可以实现页面之间的跳转：
〈A HREF="http://www.029ztxx.com/tg/文件路径/文件名">
通过HTML可以展现多媒体的效果：
从上面我们可以看到HTML超文本文件时需要用到的一些标签。
3.标记
对于刚刚接触超文本的读者，可能不能理解一些用“<”和 “>”括起来的句子，它们称为标记，也称标签，是用来划分网页的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。标签通过指定某块信息为段落或标题等来标识文档某个部件。
在HTML中每个用来作标签的符号都是一条命令、它告诉浏览器如何显示文本。这些标签均由"<"和">"符号以及一个字符串组成。如
、 等。而浏览器的功能是对这些标记进行解释，显示出文字、图像、动画、播放声音。这些标签符号用“<标签名字 属性>”来表示。标签分为单标签和双标签两大类，具体介绍如下：- 单标签指的是只存在一个标签的写法，如、等。
- 双标签指的是存在一对标签的写法，如、等。注意在双标签中第一个标签叫做起始标签，第二个标签叫做结束标签，结束标签需要在左尖括号后添加一个关闭符“/”。
HTML只是一个纯文本文件。创建一个HTML文档，需要HTML编辑器和WEB浏览器两个工具。HTML编辑器是用于生成和保存HTML文档的应用程序。WEB浏览器是用来打开WEB网页文件，提供给我们查看WEB资源的客户端程序。
1.3.2 HTML基本结构
HTML文档是由一系列的元素和标签组成。元素名不区分大小写，HTML用标签来规定元素的属性和它在文件中的位置，HTML文档分为头部和主体两部分，在文档头部对文档进行一些必要的定义，主体部分是文档要显示的信息。其基本结构如例1-1所示。
1 2 3
4 5运行结果如图1.17所示。
图1.17 HTML基本结构
一个HTML文档基本结构主要由文档声明（）、HTML文档（）、文档头部（
）和文档主体（）四部分组成。接下来具体介绍这四个部分的内容。1.文档声明
声明必须是 HTML 文档的第一行，位于 标签之前。 声明不是 HTML 标签，它用于向浏览器说明当前文档属于哪种HTML或XHTML标准规范。必须在开头处使用为所有的XHTML文档指定XHTML版本和类型，这样浏览器才能将网页作为有效的XHTML文档，并按照指定文档类型进行解析。
声明与浏览器的兼容性相关，如果没有，就由浏览器决定如何展示HTML页面，这时，不同的浏览器可能有多种显示效果，这样是不允许的。
2.HTML文档
标签位于声明之后，作用相当于在告知浏览器这是一个HTML文档，标签限定了文档的开始点和结束点，其中表示网页的开始，表示网页结束，网页需要展示的所有内容都应该写到标签的内部，标签也被称为根标签，指最外层的意思。
3.文档的头部
用于定义HTML文档头部信息，如图1.17中的标题，也称头部标签，在标签之后，用来封装其他位于文档头部的标签，如表1.1中的标签。一个HTML文档只能有一对标签，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。表1.1 文档头部内的标签
上例中指定网页的编码方式为utf-8。utf-8是一种网页编码规范，可以统一页面显示中文简体繁体及其他语言（如英文，日文，韩文），这样网页就不会出现乱码的情况。它属于国际通用编码方式。
4.文档的主体
包含文档要展示的所有内容，也称主体标签，网页中显示的文本、超链接、图像、表格和列表等信息都必须在内，如图1.17中的内容，就是内的信息，中的内容是最终展示给用户的。HTML语言是不区分大小写的，但建议文档声明采用大写方式，其他部分都采用小写方式。
1.3.3 运行第一个HTML程序
（1）新建一个空白HTML文档，点击“代码”按钮，默认为HTML基本结构。如图1.18所示。
图1.18 代码试图
（2）修改