HTML基础知识及其元素结构概括总结

HTML基础知识

1.什么是HTML？

HTML是HyperText Markup Language(超文本标记语言)，它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。
它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。可以使用.html与.htm作为HTML文件的后缀名（扩展名）

​ 2.HTML的历史版本发展
​ ①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。

​ ②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。

​ ③HTML 3.2：1997年1月14日，W3C推荐标准。

​ ④HTML 4.0：1997年12月18日，W3C推荐标准。

​ ⑤HTML 4.01：1999年12月24日，W3C推荐标准。

​ ⑥HTML 5：2014年10月，HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。

​ 3.HTML特点

​ 超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一。

主要特点如下：
①简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。

②可扩展性：超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。

③平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。

④通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

开发环境搭建

HTML的编译工具

• 记事本：特点：无代码提示、无代码高亮显示、用户界面不友好；
• Sublime（推荐）：特点：运行速度快、代码提示、高亮显示、插件拓展、html 插件emmet、sublime text3 安装emmet插件；
• VSCode（推荐）：特点：丰富的插件支持、可进行git管理；
• Idea：特点：集成开发工具、类似DW,node,npm…运行速度较慢；

推荐浏览器
Google Chrome（谷歌）、Firefox（火狐）、Opera、Safari、Microsoft Edge。

VSCode插件推荐

• HTML CSS Support - Html提示Css自动补全
• HTML Preview - 提供预览HTML文档的功能
• HTML Snippets - 完整的HTML标签，包括HTML5片段
• Live Server - 启动一个开发本地服务器，为静态和动态页面提供实时重载功能
• open in browser - 可以在默认浏览器或应用程序中打开当前文件。

HTML元素

单标签元素，仅有一个标签

<meta /> 、<img />、<br/>

双标签元素，由开始标签和结束标签组成

<div></div>
<p></p>

标签可以进行嵌套使用，即可以将一个标签写入到另外一个标签内。建议镜面嵌套。

推荐：镜面嵌套

<p>段落<strong>加强</strong>标签</p>

以下是非法的：交叉嵌套

<p>非法<strong>交叉</p>嵌套</strong>

属性

​ HTML标签都拥有自己的属性，属性应该出现在元素的开始标签内部，属性名和属性值通过"="分割，属性与属性之间通过空格分割，属性名不区分大小写，属性值区分大小写并且属性值可以使用双引号引起来。

​ 核心属性：绝大多数标签都具有的属性。title、id、class、style。

title：描述信息

<div title="div1">div1</div>

id：唯一标识

<div id="div1">div1