HTML基础（上）

闲扯加介绍

什么是HTML？

HTML是一种超文本标记语言

广泛应用于web前端开发

有如下四个显著特点：

1、不需编译直接由浏览器执行

2、HTML文件是一个文本文件

3、HTML文件必须使用html或htm作为文件名后缀

4、HTML大小写不敏感。

为什么要发关于HTML的文章？

因为HTML很有用，我回家后在学，整理总结了一些东西，分享给大家的同时，重新温习一下加深印象。（还是说我发的文章内容不保证知识点全，但保证正确好理解）

HTML有什么用？

1：很轻松的修改你的网站、博客的网页结构。

2：对SEO网站优化很有用处。

3：拿来主义，通过保存其他网站页面源代码，适当的修改，可以仿制出你想要的模板。

4：当你有一张漂亮的PSD源文件图片时，你可以很轻易的把图片切割制作成网页。

5：无论是PHP、ASP、.NET、JSP等网站编程语言，都要用到HTML。

6：可以轻松检测出网站是否中了网页木马.和预防网页木马。

7：可以向更高一层次进阶：DIV+CSS网页设计。

反正记住一点，很有用，学计算机就得学！

如何学习HTML？

前面说那么多好像整的HTML挺难，其实不然，HTML相对比较简单，它是一种标记语言，都是结构化的，只要边学边练，理解每个标签，多练两遍就OK了！

工欲善其事，必先利其器

虽然说HTML用记事本编写也行，但是总是没有那些个比较好的编辑器用的舒服。

这里给大家推荐一款编译器Atom。

HTML基本结构

在说HTML基本结构之前，我要先说说HTML在网页开发中的作用，提到网页开发都能够想到的是H5+CSS+JS，分别对应的作用是，结构+表现+行为。就是HTML5构建框架，CSS负责美化，JavaScript确定功能。

说完这些也算是给HTML做好了一个定位。

下面开始说HTML的基本结构：

如图我们可以看出一个HTML文件内容要包含在这对标签内，其中为开始标签，自然就是结束标签，不难看出结束标签相比于开始标签多了一个“/”，大多数HTML标签都有开始和结束标签，但也有一部分是单标签如

换行标签，大家需要注意单标签和成对出现的标签“/”位置的不同。（练两遍就明白）

在这对标签内包含了头部信息和网页信息，

头部信息不会在网页上出现更多的是一种说明和设置，包含在这对标签内。

网页信息是整个网页的主体部分，及用户看到的内容，包含在这对标签内。

这些相信大家一看就能够明白，但我还是要说一点，html标签对head和body两个标签是包含关系，head和body两个标签是同级平行关系，或者可以理解为没有关系，明白两个标签之间的关系，对程序的书写尤为重要，一定要时刻想着！

HTML最基本的结构就是这个，是不是很简单，最后对于它的基本结构还有一点要说，一个HTML文件html标签head标签body标签包括title标签都是唯一的！

下面接着来说；

一个HTML文件的最前面还需要有一个文档类型的说明（说真的我感觉没啥用，结构化的东西写上就好）这只是声明不是标签

head标签里的内容

1、标题

2、网页编码设置

标题就是title标签，用法呢就是把标题写到内容标签里面，那么这个标题是在哪显示的呢？

没错就是网页的名称（如图所示）

再来说网页编码设置meta标签，其实呢也就是一段相对固定的代码，一般不会变就是这样一段代码。http-equiv属性表示文档行类型；

content属性就是内容，charset是编码格式。

Utf-8是一般常用的编码格式，这段代码呢，直接多打两遍记住就行。

这里面我提到一个词是属性，一个标签可以有很多个属性，属性是用来描述和修饰标签的。

总以“属性名=属性值”这种名值对的形式出现就是在开始标签后空一格，开始写需要的这个标签的属性，属性与属性之间呢也是由空格隔开，一个标签可以有多个属性，当然单标签虽然没有开始标签，但也可以有属性，如meta的属性http-equiv和content。

上面说的所有内容也就构成了一个整体的外部框架，我将其的代码表示展现出来。

图中的p标签我还没有说，大家先不用细想，下载好Atom后，把这段代码敲出来吧！

最后格式性的东西我就不再说了，我重复一下我认为很重要的一点：注意标签之间的关系（以后标签越来越多，千万不要忘了这点）

说在最后

HTML基础大概还会有三篇文章：分别来说“文字段落标签”“列表标签”和“图像和超链接标签”其实·今天明白了，之后这三个都一样，希望大家能够喜欢。

明天周六我会整理一下我在使用pr时常用的插件分享给大家！

好了明天见！！！