HTML5入门（1）——HTML基础
HTML基础
🏡个人主页 ：@ 守夜人st
🚀系列专栏：
HTML5+CSS3+JavaScript从入门到精通
…持续更新中敬请关注…
🙉博主简介：软件工程专业，在校学生，写博客是为了总结回顾一些所学知识点
前言
跟具W3C规范要求，Web设计应该遵循结构、表现和行为的分离。
三者关系如下：
结构：使用HTML设计网页的结构和内容。
表现： 使用CSS设计网页的样式。
行为： 使用Javascript 和 DOM 设计网页脚本代码。
权威参考：https://www.w3.org/TR/html5/
目录
- HTML基础
- 前言
- HTML文档结构
- HTML5语法
HTML文档结构
一个完整的HTML4文档基本结构：
<html><!--语法开始-->
<head>
<!--头部信息，如<title>标签定义的网页标题-->
</head>
<body>
<!--主题信息，包含网页显示的内容-->
</body>
</html><!--语法结束-->
- 示例中每个标签都是成对出现的
- 一个开始标签和一个结束标签
再来看看一个简单的HTML5文档基本结构：
<!DOCTYPE html>
<meta charset = "UTF-8">
<title>HTML5基本语法</title>
<h1>HTML的目标</h1>
<p>HTML5的目标是为了能够创建更简单的Web程序，书写更简洁的HTML代码。
<br/>例如，为了使Web应用程序的开发变得更容易，提供了很多API；为了使HTML变得更简洁，开发出了新的属性、新的元素等。总体来说，为下一代Web平台提供了许许多多的新功能。
HTML5文档允许省略<html>、<head>、<body>等元素，使用HTML5的DOCTYPE声明文档类型，简化<meta>元素的charset属性值，省略<p>元素的结束标记、使用<元素/>的方式来结束<meta>元素。以及<br>元素等语法知识要点。
HTML5语法
HTML5 以 HTML4 为基础，保证与之前的 HTML4 语法达到最大限度的兼容。同时对 HTML4 进行了全面升级改造。
- 内容类型
HTML5的文件扩展名和内容类型保持不变，扩展名仍为”.html“或”.htm“，内容类型（Content Type）仍为”text/html“
- 文档类型
在HTML4中，文档类型的声明方法如下：
<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
在 HTML 5 中，文档类型的声明方法如下：
<!DOCTYPE html>
当使用工具时，也可以在DOCTYPRE声明中加入SYSTEM识别符，声明方法如下：
<!DOCTYPE HTML SYSTEM "about:legacy-compat">
在 HTML 5 中，DOCTYPE 是不区分大小写的，引号也不区分是单引号还是双引号。
注意：使用 HTML5 的 DOCTYPE 会触发浏览器以标准模式显示页面，浏览器根据DOCTYPE来识别该使用那种解析模式！！！
- 字符编码
在 HTML4 中，使用meta元素定义文档的字符编码：
<meta http-equiv = "Content-Type" content = "text/html;charset = UTF-8">
在 HTML5 中，继续沿用meta元素定义文档的字符编码，但是简化了charset属性的写法：
<meta charset = "UTF-8">
对于HTML5说上述两种方法都有效，用户可以继续使用第一种方式，通过content元素的属性来指定，但是不能同时混用两种方法。
在传统网站中可能会存在以下标记方式，在HTML5中这种字符编码方式将被认为是错误的
<meta charset = "UTF-8" http-equiv="Content-Type" content = "text/html;charset = UTF-8">
- 标记省略
在 HTML5 中，元素的标记可以分为三种类型：不允许写结束标记、可以省略结束标记、开始标记和结束标记全部可以省略。
不允许写结束标记：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr。
可以省略结束标记：li、dt、dd、p、rt、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。
开始标记和结束标记全部可以省略：html、head、body、colgroup、tbody。
- 布尔值
对于布尔值属性，如 disabled 与 readnoly 等，每当只写属性而不指定属性值时，表示属性值为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>
总结
HTML5 相比于 HTML4 不仅有了很多新元素和一些有趣的特性，而且更加简洁的编码方式，目前世界上比较知名的浏览器都支持了 HTML5，这也是HTML5 发展的一大优势。刚开始学习小伙伴就直接可以从 HTML5 开始学习，只需要简单的了解一些HTML的发展历史就可以了。
