HTML学习心得（1）

认识HTML

在这我做一些简单的HTML的总结核一些常见的，简单的标签或属性编辑的例子。

什么是超文本语言

超文本语言，从字面来理解，它就是超级文本。它不像C，C++，java这一类编程语言，它没有过多的复杂的运行环境，抛弃了庞大的后台资源支持和有关于集成功能，UI美化，独特运行环境等一系列的会使语言本身变得庞大的因素。与其说它是一门语言，我觉得它倒更像一个功能更加完善的markdown类型的标记语法。异常简洁的文件内容和更小的占用加载，以及简单的语法带来的解析难度极低，我觉得这是它能成为当下网页的载体的很重要的一部分原因。

什么是HTML

HTML，就是我们所说的网页，网页的文件格式就是.html格式。在我们眼里，它既可以是一种超文本语言，同时，它也是一个实实在在能打开的网页。不需要额外的编译或者处理，写好，打开，就是一个网页。这种神奇的现象，其实就是源自它的最大特点：简单。

其次我们要介绍的就是HTML的一个最重要的组成部分–标签。其作用类似于其他语言的关键字，是撑起一个HTML文件的全部。没有标签，就没有网页。

快捷简单的编写和生效方式

既然有了这篇有关于HTML的总结，我想不得不说一下它的编写和生效。HTML的编写我认为更多的是一种排列和规划，而不是算法和语法。单纯的写一个HTML文件并不难，我认为它真正有难度地方在于页面的UI设计，框架的布局搭建，以及CSS和JS的后期填充。做一个网页很简单，但做一个好看好用的网页难。超文本标记语言的写法还是很简单的，使用元素标签把你要写的东西包裹在里面就可以了，不需要其它的特定语法要求。而生效方式只需要把你写的东西保存，用浏览器打开就可以看到了。

HTML的编译环境

电脑
版本正常的浏览器
记事本
本人使用的较为方便的软件：Sublime text

HTML结构

什么是HTML的结构

HTML的结构，主要分为5个部分DOCTYPE，html，head，title，body。一个HTML文件就是由这五个部分来作为底部桥梁进行搭建。

doctype

DOCTYPE，其作用主要在于对自身的文件格式进行声明，就是让浏览器知道这是一个HTML的文件，以HTML的454格式来翻译显示它。其一般格式为<!DOCTYPE html>

html

在html标签包裹下的内容就是整个html文件的所有内容，也可以理解为一整张网页，都在html的包裹下。其一般格式为:

<html>
 ····
</html>

head

就像它的名字一样，head的作用就是在文件的前面将一些外部文件，格式引入，或者对文件的格式，风格等做出一些规划标准的地方，它在我看来可以类似于C语言的#include ，但head要比它功能更多一点。其一般格式为：

<head>
  ····  
</head>

title

为什么把title作为head的子项呢，因为title的位置是在head标签包裹下的，如其名，title的作用就是为这个网页起一个名字或者说是标题，需要注意的是这个标题是在浏览器上显示的网页的名字，和本身的文件名没什么关系。即修改的名字。

其一般格式为：

    <title>
      ····
    </title>

body

body标签下包裹的，就是整个网页的主体部分，也就是能显示在网页中的基本上所有元素的存放点了。也可以理解为一个网页的身体，主体。其一般格式为：

<body>
  ····
</body>

实例

<!DOCTYPE html>
<html>
<head>   
    <title>
        ···
    </title>    
</head>
<body>
   ···
</body>
</html>

HTML基础元素标签

什么是标签

标签作为html里最基本也是最要的组成部分，在前面我们也提到了标签。

标签就是一种html里的关键字 ,它标识声明使用了某些特殊作用或者特殊组成的部件，以达成规划，分割，填充，美化页面的目的。一是标签的一些特点：

通常成对出现
格式一般为<····> </····>
一对标签包裹的内容即为该部件下的内容
标签可以嵌套

结构标签

HTML框架

HTML框架的最基本方面已经在上文的结构上有所提及了，但要注意的是。HTML的框架并不是只有五大结构这么简单，对于需要中文作为显示文字的网页，在<head></head>标签中加入<meta charset="utf-8">才能使网页显示中文。而作为一个标准的网页，对于<body> </body>中区域的划分的区，<div></div>域划分是必不可少的。所以，一个健康的网页，我认为最基本的HTML构架应该是类似下面这样的：

<!DOCTYPE html>
<html>
<head>   
  <meta charset="utf-8">
    <title>
        ···
    </title>
  <style>
      ···
    </style>
</head>
<body>
   <div>

  </div>
  <div>

  </div>
      ····  
</body>
</html>

即除了主题的基本五大结构以外，应在主题中至少有一个以上的<div> </div>组成，对页面进行分割编辑，且在<head> </head>部分要存在对网页的文字形式及风格，引用等部件的声明。

HTML预处理文件标签

HTML的预处理文件，其实只是我自己对这部分的理解，用C的概念进行一个类似的阐述。

在HTML里有类似与处理效果的标签有：

<link/>
<style></style>
<script></script>
<meta>

下面我们来详细介绍这些标签在<head> </head>中时起到了什么样的作用：

<link/>
此标签为一个单标签，即不是成对出现的标签对。其在<head></head>中的作用是定义文档与外部资源的关系。也就是将HTML文件外的类似于CSS文件，JS文件等外部文件连接进该网页中，标签中所带的属性值可见下表：

属性值描述

charset char_encoding HTML5 中不支持.

hrrf URL 规定被链接文档的位置。

hreflang language_code 规定被链接文档中文本的语言。

media media_query 规定被链接文档将被显示在什么设备上。

rel alternate.author.help.icon licence .next pingback .prefetch prev .search .sidebar .stylesheet .tag 规定当前文档与被链接文档之间的关系。

rev reversed .relationship HTML5 中不支持。

sizes heightxwidth any 规定被链接资源的尺寸。仅适用于 rel=”icon”。

target _blank ._self ._top ._parent .frame_name HTML5 中不支持。

type MIME_type 规定被链接文档的 MIME 类型。

属性	值	描述
charset	char_encoding	HTML5 中不支持.
hrrf	URL	规定被链接文档的位置。
hreflang	language_code	规定被链接文档中文本的语言。
media	media_query	规定被链接文档将被显示在什么设备上。
rel	alternate.author.help.icon licence .next pingback .prefetch prev .search .sidebar .stylesheet .tag	规定当前文档与被链接文档之间的关系。
rev	reversed .relationship	HTML5 中不支持。
sizes	heightxwidth any	规定被链接资源的尺寸。仅适用于 rel=”icon”。
target	_blank ._self ._top ._parent .frame_name	HTML5 中不支持。
type	MIME_type	规定被链接文档的 MIME 类型。

我们用一个最常规的引用CSS文件例子来看：

<link rel="stylesheet" type="text/css" href="mystyle.css" />

rel*属性下的stylesheet表示我们使用的是一个改变网页布局风格类型的填充文件,type属性下的text/css表示引入的是一个CSS文件，href属性下的mystyle.css指明了它的文件地址。
<style> </style>

在这里我们只解释它在<head</head>中的作用，有关于它作为部件内部的控件风格属性我们在后面再解释。

<style></style> 在<head></head>中出现时主要有两个作用：
为文件规定外链样式表的类型
在 <style></style>中可以写入HTML文件的全局属性或者class，id的属性9。

必需的属性

属性值描述

type text/css 规定样式表的 MIME 类型。

可选的属性

属性值描述

media screen .tty .tv .projection .handheld. print .braille .aural .all 为样式表规定不同的媒介类型。

属性	值	描述
type	text/css	规定样式表的 MIME 类型。

属性	值	描述
media	screen .tty .tv .projection .handheld. print .braille .aural .all	为样式表规定不同的媒介类型。

我们同样来举例说明：

<style type="text/css"> </style>

在一个<link/>元素标签对外部CSS格式文件进行引入后，我们在<style>中就要使用“type”属性对这个样式表的类型进行规定，而且在<style> </style>中也可以加入例如上例中显示的规定布局样式的属性内容。

<script></script>

在<head> </head>中的<script></script>标签也起到一部分类似于<style> </style>的作用–即对外部的JS格式文件或JQ数据库进行引入和类型规定，但与CSS文件不同的是JS文件的外部链接也是用<script></script>完成的，并不是<link/>进行链接。

必选的属性

属性值描述

type MIME-type 指示脚本的 MIME 类型。

可选的属性

属性值描述

async async 规定异步执行脚本（仅适用于外部脚本）。

charset charset 规定在外部脚本文件中使用的字符编码。

defer defer 规定是否对脚本执行进行延迟，直到页面加载为止。

language script 不赞成使用。规定脚本语言。请使用 type 属性代替它。

src URL 规定外部脚本文件的 URL。

xml:space preserve 规定是否保留代码中的空白。

属性	值	描述
type	MIME-type	指示脚本的 MIME 类型。

属性	值	描述
async	async	规定异步执行脚本（仅适用于外部脚本）。
charset	charset	规定在外部脚本文件中使用的字符编码。
defer	defer	规定是否对脚本执行进行延迟，直到页面加载为止。
language	script	不赞成使用。规定脚本语言。请使用 type 属性代替它。
src	URL	规定外部脚本文件的 URL。
xml:space	preserve	规定是否保留代码中的空白。

同样我们用一个简单的例子来看：

<script type="text/javascript" src="js_for_test.js" ></script>

<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>

<script>
  ···
</script>

第一个例子中我们指定一个javascript类型的文件，并在src属性中指定这个本地文件的地址。

第二个例子中我们并没有使用type，因为我们在src中提供的是一个JQ的数据库，也就是将一个网上的数据库导入HTML文件中。

第三个例子其实就是类似于<style> </style>的全局属性设置，但它对应的是javascript的代码块。

<meta>

与<link/>相似的，<meta>也是一个单标签。与<style> </style>和<script></script>不同，<link/>与<meta>是只能存在于<head> </head>中的元素标签。

<meta>元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词和网页的字节编码方式等。对于元信息我的理解就是一些隐性的网页配置，在后台带动网页运行的一些配置亦或是支持网页正常显示正常运转的资源文件。

必需的属性

属性值描述

content some_text 定义与 http-equiv 或 name 属性相关的元信息

可选的属性

属性	值	描述
content	some_text	定义与 http-equiv 或 name 属性相关的元信息

属性	值	描述
http-equiv	content-typeexpiresrefreshset-cookie	把 content 属性关联到 HTTP 头部。
name	authordescriptionkeywordsgeneratorrevisedothers	把 content 属性关联到一个名称。
scheme	some_text	定义用于翻译 content 属性值的格式。

同样我们举简单例子来看：

<meta charset="utf-8">

<meta name="keywords" content="HTML,ASP,PHP,SQL">

第一个例子是我们要显示中文网页时必要加入的UTF-8字节编码，就是在标签中对它进行声明调用。

第二个例子是引用别处的例子12,其作用是使用name属性来帮助搜索引擎完成索引工作。

END