HTML入门之——结构，常用标签及其属性，再加上语义化

一，HTML简介（来源HTML百度百科）

HTML：超文本标记语言，是指能够包含链接，图片，程序，视频等非文字元素的页面

二，HTML，XML，XHTML之间有什么区别

HTML：超文本标记语言，语法比较松散，书写格式不是那么规范，用于展示数据；
XML：可扩展标记语言，书写格式类似于HTML，但是标签都是自定义，且书写格式严格，用于传输数据；
XHTML：可扩展超文本标记语言，基于XML，书写格式非常严格的HTML模式，用于展示数据；

之间的区别：
1.XML用于传输数据；
2.HTML和XHTML用于展示数据；
3.相较于XHTML，HTML的书写格式并不那么严谨，其它的和HTML4.0几乎一样；

三：HTML的主要结构

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

<!DOCTYPE html>：声明文档类型，用于告诉浏览器以什么样的方式对该文档进行渲染，如果没有这个声明则使用怪异模式进行渲染，有则使用标准模式进行渲染；
<html>：页面的根标签：限定了页面的开始和结束，在这个标签包裹<head>和<body>标签；
<head>：头部标签，用于定义文档的头部，包裹该文档的头部元素，用于引入脚本、样式、包裹元标签等；
<body>：内容标签，用于展示的内容都写在这个标签以内，定义文档的主体；

注意点：

标签闭合：例如<html>这个标签，闭合就用</html>，也就是添加斜杠完成，除了<html>标签外，其它的除了自闭合标签和空标签以外的标签都可以使用这种方式进行闭合；
添加语言：在<html>标签内，可以添加属性lang属性来告诉浏览器当前文档使用的是何种语言，例如：
lang = "en"就是告诉浏览器当前文档使用的是英语；
3.书写：标签的书写全部使用小写英文；

四：HTML书写规范

行级元素不要包裹块级元素：例如<span><div></div></span>这样是错误的，但是块级元素可以包裹行级元素；
标签闭合：例如：<p></p>,<span></span>；
标签全部用英文小写书写；
标签用尖括号进行包裹：<标签名>；

五：关于`<meta>`标签

在<html>标签内，你会见到一个叫<meta>的标签，例如下面这样：
```
<head>
      <meta>
</head>
```

上面的<meta>就是文档的元标签，它可以通过一些属性提供的值来标示这个文档的元信息，例如解码方式，关键词等，它是一个自闭合标签，不需要闭合，它不提供任何文档的内容；

<meta>标签的常用属性介绍：
1.charset：charset属性有一个值，这个值填写的是编码方式，例如：charset = "UTF-8"就是标明该文档的编码方式是 UTF-8，其它的编码方式还有gbk，Unicode等；
2.http-equiv：http-equiv：该属性可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，要与content属性一起使用，正确的格式是：http-equiv = "参数"，例如：http-equiv = "X-UA-Compatible"；
3.content：用于标示数据传输中的值；
4.name：name属性要与content属性一起使用，name属性常用的值有：
①：viewport：例如：<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
viewport这个值用来限定用户是否能缩放或放大页面，最大和最小多少；
②：keywords：例如：<meta name="keywords" content="前端饥人谷">
keywords值顾名思义，是用来告诉浏览器这个页面的关键词是什么，方便搜索引擎进行关键词抓取；
③：description：例如：<meta name="description" content="最有爱的前端学习社区">
description值用来告诉搜索引擎这个页面大体内容的描述，以及搜索出来检索显示的信息；