HTML5 --基本语法

2017-04-11 本文已影响0人 Hardy_Hu

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里面一样。

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等。

HTML5 --基本语法

HTML5的发展

HTML5页面基本元素

HTML5 头部和元信息

HTML5 开始标签和结束标签

猜你喜欢

热点阅读