长沙H5 APP开发入门知识1.1 HTML5概述
由于因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用一种标记语言书写的,这种语言称为HTML(Hyper TextMarkup Language,超文本标记语言)。HTML是一种标记语言,而不是一种编程语言,主要用于描述超文本中内容的显示方式。
HTML最基本的语法是<标记符></标记符>。标记符通常都是成对使用,有一个开头标记和一个结束标记。结束标记只是在开头标记的前面加一个斜杠“/”。当浏览器收到HTML文件后,就会解释里面的标记符,然后把标记符相对应的功能表达出来。
长沙H5 APP开发入门知识1.2 HTML5的文档结构
HTML5文档最基本的结构主要包括文档类型说明、文档开始标记、元信息、主体标记和页面注释标记。
长沙H5 APP开发入门知识1.2.1 文档类型说明
<!DOCTYPE html>
长沙H5 APP开发入门知识1.2.2 HTML标记
HTML标记代表文档的开始,HTML标记以<html>开头,以</html>结尾,文档的所有内容书写在开头和结尾的中间部分。语法格式如下:
<html>
……
</html>
长沙H5 APP开发入门知识1.2.3 头标记head
头标记head用于说明文档头部相关信息,一般包括标题信息、元信息、定义CSS样式和脚本代码等。HTML的头部信息是以<head>开始,以</head>结束,语法格式如下:
<head>
……
</head>
<head>元素的作用范围是整篇文档,定义在HTML文档头部的内容往往不会在网页上直接显示。
长沙H5 APP开发入门知识1. 标题标记title
HTML页面的标题一般是用来说明页面的用途的,它显示在浏览器的标题栏中。在HTML文档中,标题信息设置在<head>与</head>之间。标题标记以<title>开始,以</title>结束,语法格式如下:
<title>
……
</title>
长沙H5 APP开发入门知识2. 元信息标记meta
<meta>标记可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。<meta>标记位于文档的头部,不包含任何内容。<meta>标记的属性定义了与文档相关联的名称/值。
属性 值 描述
charset character encoding 定义文档的字符编码
content some_text 定义与http-equiv或name属性相关的元信息
http-equiv
content-type
expires
refresh
set-cookie
把content属性关联到HTTP头部
name
author
description
keywords
generator
revised
others
把content属性关联到一个名称
长沙H5 APP开发入门知识(1)字符集charset属性
在HTML5中有一个新的charset属性,它使字符集的定义更加容易。例如,下列代码告诉浏览器,网页使用“ISO-8859-1”字符集显示。
<meta charset="ISO-8895-1">
长沙H5 APP开发入门知识(2)搜索引擎的关键字
在早期,meta keywords关键字对搜索引擎的排名算法起到一定的作用,也是很多人进行网页优化的基础。关键字在浏览时是看不到的,使用格式如下:
<meta name="keywords" content="关键字,keywords" />
长沙H5 APP开发入门知识(3)页面描述
meta description(描述元标记)是一种HTML元标记,用来简略描述网页的主要内容,通常被搜索引擎用于搜索结果页上展示给最终用户看的一段文字片段。页面描述在网页中是不显示出来,页面描述的使用格式如下:
<meta name="description" content=“网页的介绍” />
长沙H5 APP开发入门知识(4)页面定时跳转
使用<meta>标记可以使网页在经过一定时间后自动刷新,可以通过将http-equiv属性值设置为refresh来实现。content属性值可以设置为更新时间。
在浏览网页时经常会看到一些欢迎信息的页面,在经过一段时间后,这些页面会自动转到其他页面,这就是网页的跳转。页面定时刷新跳转的语法格式如下:
<meta http-equiv="refresh" content=“秒”;[url=网址]" />
说明:上面的“[url=网址]”部分是可选项,如果有这部分,则页面定时刷新并跳转;如果省略该部分,则页面只定时刷新,不进行跳转。
长沙H5 APP开发入门知识1.2.4 网页的主体标记body
网页所要显示的内容都放在网页的主体标记内,它是HTML文件的重点所在,后面章节所要介绍的HTML标记都将放在这个标记内。然而它并不仅仅是一个形式上的标记,它本身也可以控制网页的背景颜色或背景图像,这会在后面进行介绍。主体标记是以<body>开始,以</body>结束,语法格式如下:
<body>
……
</body>
注意:在构建HTML结构时,标记不允许交错出现,否则会造成错误。
长沙H5 APP开发入门知识1.2.5 页面注释标记<!-- -->
注释是在HTML代码中插入的描述性文本,用来解释该代码或提示其他信息。注释只出现在代码中,浏览器对注释代码不进行解释,并且在浏览器的页面中不显示。在HTML源代码中适当地插入注释语句是一种非常好的习惯。对于设计者日后的代码修改、维护工作很有好处。另外,如果将代码交给其他设计者,其他人也能很快读懂前者所撰写的内容。语法格式如下:
<!--注释的内容-->
长沙H5 APP开发入门知识1.3 HTML5文件的编写方法
有两种方式来产生HTML文件:一种是自己写HTML文件,事实上这并不是很困难,也不需要特别的技巧;另一种是使用HTML编辑器,它可以辅助使用者来做编写的工作。
长沙H5 APP开发入门知识1.使用记事本手工编写HTML文件
长沙H5 APP开发入门知识2.使用Dreamweaver CC编写HTML文件
长沙H5 APP开发入门知识1.4 HTML5语法的新变化
为了兼容各个不统一的页面代码,HTML5的设计在语法方面做了以下变化。
长沙H5 APP开发入门知识1.4.1 标签不再区分大小写
标签不再区分大小写是HTML5语法变化的重要体现。
长沙H5 APP开发入门知识1.4.2 允许属性值不使用引号
在HTML5中,属性值不放在引号中也是正确的。
长沙H5 APP开发入门知识1.4.3 允许部分属性值的属性省略
在HTML5中,部分标志性属性的属性值可以省略。
属性 省略属性值
checked 省略属性值后,等价于checked=“checked”
readonly 省略属性值后,等价于readonly=“readonly”
defer 省略属性值后,等价于defer=“defer”
ismap 省略属性值后,等价于ismap=“ismap”
nohref
省略属性值后,等价于nohref=“nohref“
noshade 省略属性值后,等价于noshade=”noshade“
nowrap 省略属性值后,等价于nowrap=”nowrap“
selected 省略属性值后,等价于selected=”selected“
disabled 省略属性值后,等价于disabled=”disabled“
multiple 省略属性值后,等价于multiple=”multiple“
noresize 省略属性值后,等价于noresize=”noresize”
————————————————