html5学习笔记（1）

一、html介绍

HTML是HyperText Markup Language(超文本标记语言)

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

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及以前的版本不支持。

HTML特点

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

1.简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。

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

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

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

二、HTML结构及代码解析

        在vscode编译器中，新建一个.htm或者.html的文件，在里面打一个!或者html:5即可生成html的基本结构。

html结构及其解析如下：

三、标签属性

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

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

 1.title：描述信息 （即鼠标悬停在该元素上时会显示的信息）

效果展示：

2.style:设置样式

效果展示

3.id：唯一标识 （一个html文件里id不能重复）

快速写法：div#标签id

4.class：标识一类元素

快速写法：div.标签class

四、其他补充

1.空白

在文档中无论出现多少个空白或者换行，浏览器都解析为一个空白

2.实体

在HTML中，某些字符是预留的。例如：不能使用小于号<和大于号>，这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities)，实体以&符开始，以;结尾,实体名称后面一定不能忘记加;。以下是常见的实体 ：

五、块级元素和行内元素

1-块级元素

特点：

• 独占一行空间

• 默认宽度为100%

• 高度由子元素或内容决定

• 可以通过css指定其宽度

元素：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、header、footer、nav、article、section、aside、address...

建议：不要将块级元素嵌套在行内元素中。

2-行内元素

作用：在结构中填充网页内容

特点：

• 与其他行内元素共享一行空间

• 宽高由自身决定

• 由于不用来搭建网页结构，所以也无需通过css指定其宽度

• 行内元素中不可以嵌套块元素

元素：span、a、img、strong、b、i、em、sub、sup...