HTML5的发展
在HTML5之前，如果要表达一个文档结构，可能只能通过<div.../>元素来实现，例如
<div id="header"> </div>
<div id="nav"> </div>
<div id="article">
<div id="section"> </div>
</div>
<div id="aside"> </div>
<div id="footer"> </div>
在上面的页面结构中，所有的页面元素都采用<div.../>元素来实现，不同id的<div.../>元素代表不同含义，但这种采用<div...>布局的方式导致缺乏明确的语义--因为所有的内容都是<div.../>元素。有点视觉疲劳。。。
HTML5后为上面页面布局提供了更明确的语义元素，此时可以将上面的页面片段改为如下形式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
可以看到语义清晰多了，很方便的知道我们的代码要写在<html></html>之间，整个页面文件的说明要写在<head> </head>之间，而我们的页面正文需要写在<body></body>之间。
HTML5页面基本元素
HTML5页面基本元素有如下几个：
- <!...> 定义了HTML注释，位于<! 与>之间的内容不会被浏览器显示出来。
- <html>是HTML 5文档的根元素，告诉程序员应当在<html>与</html>之间编写代码
- <head>用于定义HTML5文档的页面部分，可以在元素之间定义文档的各种属性，告诉浏览器该文档的属性，让浏览器知道如何解析该文档。
- <title> 用于定义H5文档的页面标题。
- <body> H5文档的页面主题部分，页面的正文内容在此元素之间编写。
- <style>该元素用于引入样式定义，主要用于设置CSS样式。
- <h1...>到<h6...>定义标题字段。
- <p...>定义段落。
- <div>定义文档中的节，是最常用的一个标签。类似于iOS 中的UIView，本身就是一个白板，可以通过指定id, class, style, background-color等核心属性，让该元素呈现出不同的外观。
- <span> 与div基本一样，区别在于span不会自动换行，类似于iOS中的UITextField 和 UITextView，一个会自动换行，一个不会自动换行。
HTML5 头部和元信息
使用<head.../>元素可以定义HTML5文档头，该元素可以包含如下子元素：
- <script>: 用于包含JavaScript脚本。
- <style>: 用于定义内部CSS样式。
- <link>: 用于链接外部CSS样式资源。
- <title>: 用于定义文档标题，通常只用于说明该页面的标题。
- <base>: 用于指定该页面中所有链接的基本链接。
- <meta>: 用于定义HTML页面的元数据。
- href: 指定链接的链接地址，类似于iOS中的URL.
<!DOCTYPE html>
<html lang="en">
<head>
<! meta 是元数据说明,类似于iOS中的请求头信息>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
<title>在这里写页面标题</title>
<base target="_blank" href="http://www.crazyit.org" />
<! HTML5 这个是注释,浏览器不会显示出来的>
</head>
<body>
<! HTML5 文件的正文部分>
<a href="index.php">疯狂Java联盟</a>
</body>
</html>
运行效果如下：
效果图.png
点击疯狂Java联盟后，页面跳转到其论坛
跳转图.png
上面代码中<base.../>指定了基准路径为http://www.crazyit.org, _blank指定了在新窗口中打开链接，href超链接的地址为indx.php，所以实际Url为http://www.crazyit.org/index.php. 类似与iOS使用网络请求时，我们把Url放在path里面，后面的请求参数放在parameters里面一样。
<meta.../>元素里面的内容，指定网页的属性（类型于iOS网络请求中的请求头信息样，告诉服务器我发送过去的内容是什么格式，希望接收什么格式的返回信息样), 帮助浏览器正确处理页面内容。主要可以设置以下三种熟悉：
- http-equiv: 指定元信息名称，是固定值，具有特殊意义。
http-equiv="Content-Type" content="text/html";
http-equiv还可以设置Expires、Pragma、Refresh、Set-cookie等值。
- name： 指定元信息名称，值可以任意。
name="author" content="Hardy_Hu";
- content: 指定元信息的值。
http-equiv 和 content 就类似于iOS中的键值对，浏览器先去通过识别http-equiv里面的内容为Content-Type，再识别content中的内容为text/html，就知道了原来我接收的是一个HTML文件啊，那么我就开始按照html格式的文件开始解析这个文件。
HTML5 开始标签和结束标签
从前面的介绍可以看出H5的标签基本上都是成对出来的，如果以<div>标签 开头，那么就一定有</div>标签结尾。但是H5是一个不严格的规范，它允许部分元素可以不能写结束标签，如<img.../>元素必须写成
img写法.png
这类写法的元素叫空元素语法，类似的元素还有area, base, mata, link等。
网友评论