HTML入门

1、HTML简介

HTML（Hypertext Markup Language）即超文本标记语言，是用于描述网页文档的一种标记语言。

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML提供了许多标记，如段落标记、标题标记、超链接标记、图片标记等，网页中需要定义什么内容，就用相应的HTML标记描述即可。

2、HTML结构

 1 <!DOCTYPE html><!-- 表示HTML5文档协议声明标签，协议的不同会影响整个页面的显示效果 -->
 2 <html><!-- <html>表示文档标签 -->
 3 <head><!-- <head>标签表示文档的头部标签，在<head>标签中的信息是用于给浏览器识别的内容，如这里的<meta charset="UTF-8">用于告知浏览器该文档的编码为UTF-8 -->
 4     <meta charset="UTF-8">
 5     <!-- 这是注释，不会显示在网页上，注释的内容写在符号之间 -->
 6     <title>第一个HTML文件</title><!-- <title>表示该文档的标题 -->
 7 </head>
 8 
 9 <body><!-- <body>标签为我们在浏览器中看到的内容 -->
10     第一个HTML文件
11 </body> 
12 </html>

注释的内容写在符号之间，在浏览器中的运行效果如下

3、HTML头部标签

3.1、<!DOCTYPE>标记

<!DOCTYPE> 标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范。主要用于浏览器解析文档标签的依据。

<!DOCTYPE>标记和浏览器的兼容性相关，如果删除<!DOCTYPE>，就意味着让浏览器来显示HTML页面的内容。这时，IE6，IE7，IE8，Firefox2，Firefox3，Chrome，有多少种浏览器，页面就有可能有多少种显示效果，这是不被允许的。

3.2、<html>标记

<html>标记位于<!DOCTYPE> 标记之后，也称为根标记，用于告知浏览器其自身是一个 HTML 文档， <html>标记标志着HTML文档的开始，</html>标记标志着HTML文档的结束，在他们之间的是文档的头部和主体内容。所有的标签必须写在<html>与</html>这两个闭合标签之间。可以通过lang属性设置当前文档的主要语言是什么，帮助搜索引擎解析文档，如：<html lang="zh-cn"></html>表示当前文档语言为中文。

3.3、<head>标记

<head>标记用于定义HTML文档的头部信息，也称为头部标记，紧跟在<html>标记之后。head标签定义的内容只是提供给浏览器使用，不用于用户的呈现。主要用来封装其他位于文档头部的标记，例如<title>、<meta>、<link>及<style>等，用来描述文档的标题、作者以及和其他文档的关系等。一个HTML文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

3.4、<meta>标记

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

"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

3.5、<title>标记

<title>标记用于定义HTML页面的标题，即给网页取一个名字，必须位于<head>标记之内。一个HTML文档只能含有一对<title></title>标记，<title></title>之间的内容将显示在浏览器窗口的标题栏中。其基本语法格式如下：

<title>网页标题名称</title>

title标签对于网站SEO至关重要，标题的好坏直接影响网站的SEO。

3.6、<link>标记

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

此外还可以用来引入网站的icon图标

<link rel="shortcut icon" href="http://www.baidu.com/favicon.ico" />

4、HTML内容标签

4.1、标题标签

标题标签用<h1> - <h6> 来表示，其中<h1> 定义最大的标题。<h6> 定义最小的标题，从<h1> - <h6>，相对于当前文档的重要性依次降低。建议h1标签在整个页面中最多出现一次（当然可以超过，但是不利于搜索SEO）。标题标签是用于体现文档内容的重要性，不要仅仅是为了产生粗体或大号的文本而使用标题。