小白的Html入门学习计划(一) -- Html基本知识

本文链接：https://blog.youkuaiyun.com/WonderfulMTF/article/details/80719495

作为一个Android开发者，现在越来越多的场景使用到了混合开发，Html在移动设备上也展现了其优势，为了符合市场的需求，提升我们的能力，了解一定的前端知识还是很有必要的，现开始做一份自己的Html+js的记录博客，参考经典书籍《Html5+CSS3+JavaScript从入门到精通》及个人学习过程中一些查阅的资料，记录属于自己的知识博客。

Html的文档结构和基本语法

在html文档中，一般包含两个部分，头部和主体区域，主要有三个标签进行规划区分，<html>、<head>、<body>。

<html>标签标记整个文档，<head>包裹头部区域，而<body>负责主体区域，基本的写法如下：

<html><!--表示语法开始-->
	<head>
		<!--这里是头部信息，如<title>表示设置网页标题-->
	</head>
	<body>
		<!--这里是主体区域，包含网页要显示的内容-->
	</body>
</html>

tips:html中  表示注释。

Html4的基本语法（后续均摘自《Html5+CSS3+JavaScript从入门到精通》）

所有标签都包含在“<”和“>”起止标识符中，构成一个标签。如<style>、<head>、<body>等。

在HTML文档中，绝大多数元素都有起始标签和结束标签，在起始标签和结束标签之间包含的是元素主体。

起始标签包含元素的名称以及可选属性，也就是说，元素的名称和属性都必须在起始标签中。结束标签以反斜杠开始，然后附加上元素名称。例如：

<tag>元素主体</tag>

元素的属性包含属性名称和属性值两部分，中间通过等号进行连接，多个属性之间通过空格进行分割。属性与元素名称之间也是通过空格进行分隔，例如：

<tag a1="v1" a2="v2" a3="v3"></tag>

少数元素的属性也可以不包函数性质，仅包含一个属性名称。例如：

<tag a1 a2 a3></tag>

一般属性值应该包含在引号内，虽然不加引号，浏览器也能够解析，但是应养成良好的编码习惯。

属性是可选的，元素包含多少个属性，也是不确定的，这主要根据不同元素而定。不同的元素会包含不同的属性。HTML也为所有元素定义了公共属性，如title。id、class、style等。

标签可以相互嵌套，形成文档结构，嵌套必须匹配，不能交错嵌套。

HTML翁当所有信息必须包含在<html>标签中，所有文档元信息应包含在<head>子标签中，而HTML传递信息和网页显示内容应包含在<body>子标签中。

Tips：虽然大部分标签都成对出现，但是也有少数标签是不成对的，这些孤立的标签，被称为空标签。空标签仅包含起始标签，没有结束标签。同样，空标签也可以包含很多属性，用来表示特殊效果或者功能。

html4文档结构的完整性

必须在首行定义文档的类型，过渡性文档可省略。

<html>标签应该设置文档名字空间，过渡性文档可省略。

必须定义文档的字符编码，一般使用<meta>标签在头部定义，常用字符编码包括中文简体(gb2312)、中文繁体(big5)和通用字符编码(utf-8)。

应该设置文档的标题，可以使用<title>标签在头部定义。

一个完整的文档结构应该是这样的：

<!DOCTYPE html PUBLIC  "-//W3C//DTD  XHTML1.0  Transitional//EN" "http;//www.w1.org/TR/xhtml1/DTD/xhtml-transitionall.dtd">
<html xhtmls="http://www.w1.org/1999/xhtml"><!--表示语法开始-->
	<head>
		<!--这里是头部信息，如<title>表示设置网页标题-->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>文档标题</title>
	</head>
	<body>
		<!--这里是主体区域，包含网页要显示的内容-->
		<tag>元素主体</tag>
		<tag a1="v1" a2="v2" a3></tag>
	</body>
</html>

XHTML的文档基本结构

XHTML可以理解未是HTML4的升级版本，和HTML4区别不大。XHTML有下面这两个特点：

用户可以扩展元素，从而扩展功能，但是在目前1.1版本下，用户只能够使用固定的与定义元素，这些元素基本上与HTML4版本元素相同，但删除了部分属性描述性元素。

能够与HTML很好地沟通，可以兼容当前不同的网页浏览器，实现XHTML页面的正确浏览。

XHTML的基本语法

在文档的开头必须定义文档类型

在根元素中应声明命名空间，即设置xhtmls属性

所有标签都必须是闭合的。

所有元素和属性都必须小写。

所有的属性必须用引号括起来。

所有的标签都必须合理嵌套。

所有属性都必须被赋值。

所有特殊符号都用编码表示。

不要在注释内容中使用“--”，“--”自己能在XHTML的注释的开头和结束，也就是说，在内容中，他们不再有效

XHTML规范废除了name属性，而使用id属性作为统一的名称。

HTML5文档基本结构

最新的规范就是HTML5了，我们来看HTML5文档结构是什么样的。

HTML5文档省略了<html>、<head>、<body>等元素，使用HTML5的DOCTYPE声明文档类型。简化meta元素的charset值，省略元素结束标记，使用<元素/>的方式结束<meta>元素，以及 元素等语法知识要点。

一个简单的Html5示例如下：

<!DOCTYPE html>
<meta charset="UTF-8">
<title>HTML5基本语法</title>
<h1>HTML5的目标</h1>
<p>HTML5的目标是为了能够创建更简单的Web程序，书写出更简洁的Html代码
<br/>例如：为了使Web应用的开发更加容易，提供了很多API

HTML5的基本语法

Html5的语法与Html4相比有了很大的变化。

HTML5的文件扩展名和内容类型保持不变。文件扩展名仍然是“.html”或“.htm”，内容类型（ContentType）仍然为text/html。

DOCTYPE声明文档类型，它是HTML文档必不可少的组成部分，且必须我与代码的第一行。根据化繁为简的设计原则，HTML5对文档类型和字符说明都进行了简化。

在HTML5中，可以不使用版本声明，一份文档将会适用于所有版本的HTML。在HTML5中，文档类型的声明方法如下：

<!DOCTYPE html>

当使用工具是，也可以在DOCTYPE生命中加入SYSTEM识别服，声明方法如下：

<!DOCTYPE HTML SYSTEM "about:legacy-compat">

tips:在HTML5中，DOCTYPE声明方式是不区分大小写的，引号也不区分是单引号还是双引号。

在HTML5中，继续沿用meta元素定义文档的字符编码，但是简化了charset属性的写法，如下所示：

<meta charset="UTF-8">

tips：对于HTML5来说，之前HTML4通过content元素的属性这种声明方式仍然是有效的。

在HTML5中，元素的标记可以省略。具体分为三种类型：

不允许写结束标记的元素：area。base、br、col。command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。

可以省略结束标记的元素：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。

可以省略全部标记的元素：html、head、body、colfroup、tbody。

tips：不允许写结束标记的元素是指，不允许使用开始标记与结束标记将元素括起来的形式，只允许使用<元素/>的形式进行书写。比如：

错误的写法

正确的写法

可以省略全部标记的元素是指，钙元素可以完全被省略，注意，即使标记被省略了，钙元素还是以饮食的方式存在的。例如，将body元素省略不写时，它在文档结构中还是存在的，可以使用document.body进行访问。

对于具有boolean值得属性，如disable遇readonly等，当只写属性而不指定属性时，表示属性值为true；如果想要将属性值设为false，可以不使用该属性。另外，要想将属性值设定为true时，也可以将属性名设定为属性值，或将空字符串设定为属性值。

<!--只写属性，不写属性值，代表属性为true-->
<input type="checkbox" checked>
<!--不写属性，代表属性为false-->
<input type="checkbox">
<!--属性值=属性名，代表属性为true-->
<input type="checkbox" checked="checked">
<!--属性值=空字符串，代表属性为true-->
<input type="checkbox" checked="">

属性值两边既可以用双引号，也可以用单引号。HTML5在此基础上做了一些改进，当属性值不包括空字符串、<、>、+、单引号、双引号等字符时，属性值两边的引号可以省略。

<!--下面这些写法都是合法的-->
<input type="text">
<input type='text'>
<input type=text>

关于HTML相关的文档结构和语法就到此为止了，下一篇将会详细介绍HTML4和HTML5的元素及属性。