初识HTML
认识HTML5
大家好，今天由我来给大家介绍这门新课程，网页设计与制作，学习HTML5和CSS相关的概念和知识。这门课学起来比较轻松，在你们学习了网页设计标签这个概念之后，整个学习过程会很轻松，我们只需要学会使用标签，就可以知道怎样去设计一个静态网页。
在深入学习这门课之前，我们先来简单的了解下网页的相关概念。
Web全称为“World Wide Web”,即全球广域网，通常也被称为万维网，是基于超文本和HTTP开发的一种全球的，动态交互的，跨平台的分布式图形信息系统。对于这个概念呢，首先我们要抽象的理解一下，全球的，因为网页技术在全球都有被使用，无论是中国，美国，亦或是韩国日本等等国家，他们都会有网页技术，所以是全球的，其次动态交互，可能你们现在理解起来还有些困难，网页不可能是静态的，他还需要与用户进行交互，比如说，你用鼠标点击一个链接，网页就会进行一个调转，这个跳转的过程就成为动态交互，我们这学期的课程讲的是HTML和css,只应用在静态网页设计上，至于什么是HTML和CSS，这个我们待会来了解。跨平台这个理解起来也很简单，一个相同的网页，我们可以在不同浏览器打开，或者这个网页的链接你打开又是在其他平台打开，这个就称之为跨平台。分布式图形信息系统我们可以这样来理解，整个网页的图片或者是文本都在用分布式布局，每一个元素的布局都有静态代码来控制，上面还包括了图形和信息。
深究完网页的基本概念之后，我们再来了解一下什么是网页标准。使用的浏览器不同，导致相同的代码在显示或是排版上会呈现出不同的效果，这时开发者需要很长时间为兼容性不同的浏览器开发多个版本程序，这时候，为了兼容不同平台不同的设计标准，我们遵循WEB标准，这个web标准不仅可以使开发人员编写的页面标准统一外，在网页制作中还具有多种优势。具体如下：
1） 开发效率高，维护简单
2） 结构与表现分离可以针对不同的设备设置不同的表现，使信息可以跨平台，跨浏览器展示。
3） 降低网站流量成本
4） 便于改版
5） 提高页面浏览速度
6） 兼容性高，使用结构与表现分离的方式，不必担心后面代码的兼容性。
7） 用户体验更好。
一个简单的Web标准由三个部分组成，分别是结构标准（strucure）（包含XML,HTML,XHTML）,表现（presentation）标准(css)、和行为（behavior）标准(DOME),ECMAScript)
一个用来规范结构，一个人用来规范样式，最后一个是用来用于规范页面内容与用户交互的动作。这就涉及到什么是HTML，什么是CSS，什么又是JS，html用于铺写页面的结构比如第一行是什么，标题又是什么，内容是什么，那些地方是文字，哪些地方是图片，那CSS 是用来规范样式的，比如字体是什么颜色，图片的大小是多少，JS则是用来进行数据交互的，比如网页的增删改查功能，数据进行修改后，如何和后台进行交互，后台处理结束后又如何传递到前端。这里说的后台和前端又是什么意思呢，后台我们可以把它叫做数据处理中心，前端指的就是网页，网页把用户需求获取到，传递到后台，后台处理后又重新存储到数据库，界面可获取到数据库信息，进行展示。这个过程就叫做前端和后台的交互。
接下来我们来深入了解一下HTML，HTML全称为“HyperText Markup Language”即超文本标记语言，为网页创建和其他可在网页浏览器中看到的信息而设计，主要使用标记标签进行网页的描述，统一网络上文档的格式，将分散的网络资源链接为一个网络整体。
我们在 了解HTML这个概念时 不妨通过代码的形式来理解，我先来给大家展示一下简单的HTML代码。
我们在hbuilder中创建一个html文件，首先我们看到整个文件都是由标签组成，我们来依次解释一下代码，
<!DOCTYPE html>/*定义文档类型，用于向浏览器解释当前文档用的是哪种HTML标签*/
<html>/*HTML的根元素，表示文档的开始和结束*/
<head>/*头部标签，用于定义HTML5文档的头部信息，紧跟在<html>标签后，里面包括的内容有<title><meta><link><style>等*/
<meta charset="utf-8" />/*设置编码格式*/
<title></title>/*文件标题*/
</head>
<body>
</body>
</html>/*结束标签*/
简单拓展下头部标签里面几个常用的标签，
1、<title></title>
用于定义文档的标题
该标题会出现在浏览器窗口的标题栏或状态栏上
把该页面加入收藏夹或书签列表时，该标题为页面链接的默认名称
2、<link />
用于定义文档与外部资源的关系，最常用于链接样式表，也常用于给标题添加小图标
<link rel="icon"type="image/png"sizes="144x144" href="./image/favicon.ic
<link />是空元素，仅包含属性，只能存在于head部分
3、<style></style>
用于给文档引入CSS样式信息，将样式表包含在style开始与结束标签之间
4、<script></script>
用于给页面添加脚本
可以直接在script开始和结束标签之间包含JavaScript脚本)
5、<meta />
提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词
6、<base />
用于为页面中的所有相对链接设置默认URL或默认target属性
在简单介绍HTML相关语法时，我们先简单了解一下其他的标记语言，
XML全称为“Extensible Markup Language”即可扩展标记语言，与HTML5类似，但XML的设计宗旨为传输和存储数据，而不是显示数据，是不同应用程序，不同平台之间实现数据共享和通信最常用的工具之一。
XHTMLXHTML全称为“eXtensible HyperText Markup Language”，即可扩展超文本标签语言，是一种基于XML格式开发的HTML。
这些概念我们做一些简单的了解即可，接下来我们重点了解一下css
Css全称为“Cascading Style Shets”,即层叠样式表，可以以HTML或XML为基础，能够针对不同的浏览器设置不同的样式。简单来说就是定义HTML或者XML元素在屏幕、纸张或其他媒体上的显示样式，如文本内容的字体，字号，对齐方式，图片的宽高比例。边框样式，边距以及页面的布局排版。
Css的特点如下
1） 样式丰富
Css提供了丰富的文档样式以及设置文本和背景属性的能力，如设置元素边框，元素间距，文本字号等。
2） 易于维护
如果要进行全局更改，则只需要修改样式，网页中所有元素的样式都将会自动更新。
3） 复用性强
只需编写一次CSS样式，即可通过外部引入方式在多个HTML文件中重复使用。
4） 层叠
对一个元素多次设置同一个样式，都将使用最后一次设置的属性值
5） 多设备兼容
样式表允许针对多种不同类型的设备优化内容
HTML5简介
HTML5是HTML的第五次重大修改，也就是第五个版本，是最新的HTML标准，为承载丰富的WEB内容而设计，拥有新的语义、图形以及多媒体元素等，并为简化WEB应用程序的搭建而提供了新元素和新的API
HTML5的优点
1） 及时更新
Html5在上线或者更新时，只需将代码更新并保存，不需要经过各种审核，即可随时更新，随时上线，减少时间开销。
2） 跨平台性
HTML5编写的页面。可以支持多种端口，如PC端移动端，而不需要针对不同端口做专门开发，不仅节约时间，还可以大幅提升开发效率。
3） 代码简洁
Html5代码简单清晰，带有明确释义的的标签，不仅方面开发人员使用，也 容易让浏览器识别。
HTML5基本结构
一个简单的HTML5页面主要由标签和属性构成，它们一起用于标识各个文档部件。
一个HTML文档包含两部分组成，分别是头部部分（head）和主体部分（body）具有结构化，与平台无关，简单易维护等特点
Html5基本语法
Html5文档包含了多个用于设置内容内容的标记标签，通常被称为HTML标签，是HTML中最基本的单位，也是HTML最重要的组成部分。Html标签主要指用指y用尖括号包围的关键词，根据标签样式的不同，HTML标签可分为两类，第一类是成对出现的常规标签，也被称为普通标签，对标签，双标签。其中，对标签中的第一个标签是开始标签，也称为开放标签，如<div>,而对标签中的第二个标签是结束标签，也称闭合闭合标签，如</div>
接下来我们再来看看标签设置需遵守的规则
1）匹配的对标签以及他们包围的内容称为元素，即“元素=开始标签+内容+结束标签”
2）开始标签中以名称和值成堆出现的内容成为属性，如charset=”UTF-8”中，charset为属性，UTF-8为属性对应的值。
3）标记和属性用空格隔开，属性和属性值用等号连接，属性值必须放在引号内
4）一个标记可以没有属性也可以有多个属性，属性和属性之间不分先后顺序
