web前端零基础教学html（html的概念-前端培训入门学习）

web前端零基础教学html（html的概念-前端培训入门学习）具体我们该如何去使用它？4、使用它的目的是什么，它能够做什么事情。3、基本语法中文有语法，英文有语法，html作为一门语言，它也有自己的基本语法，以及如何的使用它。

任何一门语言，我们都需要掌握它的几样东西！

1、概念

我们都知道什么是汉语，什么是中文，什么是英文。那么html这个语言是什么东西呢？我们要明白它的概念。

2、目的

它的目的是什么，它能够做什么事情。

3、基本语法

中文有语法，英文有语法，html作为一门语言，它也有自己的基本语法，以及如何的使用它。

4、使用

具体我们该如何去使用它？

所以任何一门语言，我们都应该要分出这4个方面去了解。

html语言的概念

html语言，又叫超文本标记语言，全称HyperText markup language。它的英文单词可以不用记住，只需要记住html是超文本标记语言。

为了更便于记住，我们可以把它分解成三个部分来讲解，即超文本、标记、语言。

语言是什么？很好理解，它是浏览器的语言。我们和浏览器要沟通，要能让浏览器帮我们显示我们想要的页面，那么我们就得学习浏览器的语言，而这个html，它就属于浏览器可以直接解释的语言。

什么叫标记？

如图所示，＜html＞＜head＞＜meta＞＜title＞＜style＞＜body＞＜h1＞＜p＞，这些都叫标记。

从图中我们还能看到，标记有两种样式，有些标记有头有尾，有些标记却只有开头，没有结束。

不同标记之间可能会有嵌套。比如图中h1标题标记，p段落标记，它们是独立的。但是它们整体所有标记，又放在一个叫body的标记里面。又比如图中的head标记，它里面包含了meta、title、style标记。说明标记具有嵌套性，但是不管它怎么嵌套，不管它有多复杂，它都是由一个一个的标记所构成的。

所以它叫标记语言。

什么叫超文本？或者说为什么叫超文本？这其实与我们网页的发展有关系。

我们都知道，网页提供给用户看的元素有很多。早期的网页常见的元素就只有文字，也就是文本。而超文本，意思就是网页上所有的信息，包括文本、图片、链接、表单、音视频等，不仅限于文字文本。

我们通过对这三个部分的理解，连起来就叫超文本标记语言。

html的目的

构成了网页上所有的结构和内容，展示给用户看的。也就是说网页上所有的内容都可以用合适的标记来描述。这里提到了一个词-结构，其实就是网页的布局、排版。合理的排版布局，构成的网页才美观。就像我们的房子一样，三室一厅，一厨一卫，需要布局结构，不能把所有东西都堆在一个大的空间里面。

我们的标记分为两部分，一部分用来放内容，比如前面说的h1、p标记，就主要是内容式标记，多用于存放内容的。另一部分用来布局的，比如div、li等，就像是把我们的房子划分成很多空间，大盒子里面包含小盒子，小盒子里面放内容。当然这个不是绝对的，盒子里面也可以直接放内容。

所以我们的页面不只是内容，并不是把所有的文字图片都揉到一起，不区分它们的结构，还必须有布局标记，让页面产生一种有组织的结构关系。

html的语法

我认为html的语法可以说是所有语言当中最简单的了。它就只有两种语法结构：

＜标记名称＞内容＜/标记名称＞，两个相同的标记，结尾标记多加一个斜杠，组成一个标记对。

＜标记名称＞，只有开始，没有结束。

以后看到这种尖括号标记，它就一定属于html语言。

在使用中，通常会给标记添加属性，两种语法结构都可以添加属性，样式为

＜标记名称 属性=“属性值” 属性=“属性值”＞内容＜/标记名称＞

html的使用（html文档的基本结构）

＜!DOCTYPE html＞，声明文档的类型，这段语句的意思是告诉浏览器，这是html文档，应当用html语言结构来解释它。

然后接html标记＜html＞＜/html＞，html标记分为两个部分，第一个部分是头部信息标记head，要提供给浏览器的一些基本信息。其中：

＜meta charset="UTF-8"＞声明编码，告诉浏览器使用国际通用编码，能够识别所有语言，不会出现乱码。

＜title＞文档标题＜/title＞声明标题，告诉浏览器这个网页是什么文档，同时也显示在网页导航条上，用户看的到的。这个标题对于SEO是非常有用的，大家都知道搜索引擎是有排名的，这个排名展示的就是标题。

＜meta name="viewport" content="width=device-width initial-scale=1.0"＞

视区，也叫视口。作用是自适应移动端，一般响应式网站都必须有这段代码，如果去掉，则只能作为PC端网站，不能适应移动端。

＜meta http-equiv="X-UA-Compatible" content="ie=edge"＞

为了兼容性问题，只要我们的浏览器有edge内核，不管我们打开的是ie7还是ie8，浏览器都会选择用最新的edge内核来解释，让网页看着不会乱。可以去掉。

＜meta name="keywords" content="关键词"＞我们的网页是关于什么关键词的网页，给搜索引擎抓取，给网页定个性，属于什么类型的网页，如果以后有用户搜索相关关键词，那么搜索引擎可能会罗列出来，给用户去做选择。

＜meta name="description" content="这是一个页面"＞对于网页的一个描述，作用和关键词类似，也是给搜索引擎抓取，辅助用户搜索查看的。

第二部分是用户查看的内容，所有内容都放在body标记里面。我们会把body划分成许多模块，来布局和做内容。不管布局和内容有多复杂，全部都放在body标记里面。

这样就构成了我们html文档的基本机构，任何一个html文档它都是由这个基本机构构成的。

html5也很简单，不用特别指定语言版本，全部兼容的，浏览器都能正常解释。