四、web 浏览器

五、HTML 属性

章节01 HTML简介

一、什么是HTML

HTML是用来描述网页的一种语言。
HTML指的是超文本标记语言: HyperText Markup Language
HTML不是一种编程语言，而是一种标记语言
标记语言是一套标记标签(markup tag)
HTML使用标记标签来描述网页
HTML文档包含了HTML标签及文本内容
HTML文档也叫做web页面
用该语言编写的文件，以.html或.htm为后缀
HTML不区分大小写,建议小写

二、什么是标签

HTML 标记通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如<html/>

封闭类型标记（也叫双标记），必须成对出现,如<p></p>

标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签非封闭类型标记，也叫作空标记，或者单标记，如<br/>

<标签>内容<标签/>

三、什么是元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思. 但是严格来讲, 一个HTML 元素包含了开始标签与结束标签，如下实例: HTML 元素：

<p>这是一个段落</p>

四、web 浏览器

Web 浏览器（如谷歌浏览器，Internet Explorer，Firefox，Safari）是用于读取 HTML 文件，并将其作为网页显示。浏览器并不是直接显示的 HTML 标签，但可以使用标签来决定如何展现 HTML 页面的内容给用户：

五、HTML 属性

属性是用来修饰元素的，属性必须位于开始标签里，一个元素的属性可能不止一个，多个属性之间用空格隔开，多个属性之间不区分先后顺序。每个属性都有值，属性和属性的值之间用等号链接，属性的值包含在引号当中，属性总是以名称/值对的形式出现。

六、HTML 注释

为代码添加适当的注释是一种良好的编程习惯，注释只在编辑文本情况下可见，在浏览器展示页面是并不会显示，注释标签不支持任何属性。语法：

七、HTML 基本结构

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>标题</title>
	</head>
	<body>
	</body>
</html>

八、doctype

1、作用：

DOCTYPE 是 document type (文档类型) 的缩写。声明位于文档的最前面，处于标签之前，它不是 html 标签。主要作用是告诉浏览器的解析器使用哪种 HTML规范或者 XHTML 规范来解析页面。要建立符合标准的网页,DOCTYPE 声明是必不可少的关键组成部分

2、删除会发生什么

在 W3C 标准出来之前，不同的浏览器对页面渲染有不同的标准，产生了一定的差异。这种渲染方式叫做混杂模式。在 W3C 标准出来之后，浏览器对页面的渲染有了统一的标准，这种渲染方式叫做标准模式。不存在或者形式不正确会导致 HTML 或XHTML 文档以混杂模式呈现，就是把如何渲染 html 页面的权利交给了浏览器，有多少种浏览器就有多少种展示方式。因此要提高浏览器兼容性就必须重视。

3、严格模式和混杂模式

严格模式和混杂模式都是浏览器的呈现模式，浏览器究竟使用混杂模式还是严格模式呈现页面与网页中的 DTD（文件类型定义）有关。

（1）严格模式：又称标准模式，是指浏览器按照 W3C 标准来解析代码，呈现页面

（2)混杂模式：又称为怪异模式或者兼容模式。

是指浏览器按照自己的方式来解析代码，使用一种比较宽松的向后兼容的方式来显示页面。我们写好一份 HTML 文档，这时候全是代码，用户看不懂，是不是得用浏览器里的引擎给翻译一下？用户才看得到界面。关键是 HTML 有好多个版本，浏览器怎么知道按哪个版本解释？你老爸让你去扫地，你老妈让你去洗碗，你是听谁的，都是长辈，这时候如果你们家规定好了，凡事都听你老爸的，这个就很好解决了，去扫地。这个 DTD 文档模型就是这个意思，管它多少个 HTML 版本，我规定好我写的这个 HTML 文档以哪个为准就行，那我就知道我最终页面会被解释成一个什么样子。

DTD 文档模型=DOCTYPE=DOCTYPE 文档声明

4、常见的声明

<!DOCTYPE html>

HTML 4.01 Strict 该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。

不允许框架集（Framesets）。

5、HTML 标签

定义 HTML 文档，这个元素我们浏览器看到后就明白这是个 HTML 文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

6、head 标签

Head 标签用于定义文档的头部，它是所有头部元素的容器。中的元素可以引用脚本、指示浏览器在哪里找到样式表。文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。下面这些标签可用在 head 部分：

应该把<head>标签放在文档的开始处，紧跟在<html>后面，并处于<body>标签之前。

文档的头部经常会包含一些<meta>标签，用来告诉浏览器关于文档的附加信息。

<head lang="en"></head>

lang 是 language 的意思，lang=”en”属性对每张页面中的主要语言进行声明，en代表了英文，只是个声明，声明了它，对搜索引擎和浏览器更友好，并不会更改显示内容。它还有常见的值是 zh-CN，代表了中文。（搜索引擎不会判断该站点是中文还是英文，它让搜索引擎知道你的站点是中文站，这些都是 html 规范，越规范，越容易被收录）

7、title 标签

可定义文档的标题。
它显示在浏览器窗口的标题栏或状态栏上。
当把文档加入用户的收藏夹或书签列表时，标题将成为该文档的默认名称。
标签是<head>标签中唯一必须要求包含的东西，就是说写 head 一定要写 title，不是说其它的不加，而是 title 一定要加。
title 写和你网页相关的关键词有利于 SEO 优化。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>我会显示在收藏栏里面</title>
	</head>
	<body>
	</body>
</html>

SEO 是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求，从而提高自己网站被搜索引擎平台录取的几率，从而把精准用户带到网站。网站都有目标群体，通过 title、meta 标签可以让目标群体通过关键词找到你的网站，所以你定义的关键词决定了会吸引什么样的群体。

8、meta 标签

META 标签用来描述一个 HTML 网页文档的属性，此处的 charset=”utf-8”是说当前使用的是 utf-8 编码格式，在开发中我们经常会看到 utf-8，或是 gbk，这些都是编码格式。国外一般会用 gbk、gb2312，国内通常使用 utf-8。元素可提供有关页面的元信息（meta-information），用来向浏览器或搜索引擎描述页面。比如文档的描述和关键词。它只可以放在 head 中。属于元信息标签。常见的 meta 有： Keywords(关键字) keywords 用来告诉搜索引擎你网页的关键字是什么