你知道HTML是干什么的吗？

．什么是HTML？

HTML（Hyper Text Mark-up Language ）即超文本标记语言，是万维网的核心语言，标准通用标记语言下的一个应用，由 Tim Berners-lee提出。

HTML文本是由 HTML命令组成的描述性文本，HTML 命令可以说明文字、图形、动画、声音、表格、链接等。

HTML的结构包括头部 (Head)、主体 (Body) 两大部分。头部描述浏览器所需的信息，主体包含所要说明的具体内容。

2．HTML的由来

HTML是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。

万维网上的一个超媒体文档称之为一个页面（page）。作为一个组织或者个人在万维网上放置开始点的页面称为主页（Homepage）或首页，主页中通常包括有指向其他相关页面或其他节点的指针（超级链接）。超级链接，就是一种统一资源定位器（Uniform Resource Locator，缩写：URL）指针，通过激活（点击）它，可使浏览器方便地获取新的网页。

这是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列页面的有机集合称为网站（Website或Site）。

3．HTML的功能和作用

设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。这样，你只要使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。

4．HTML的特点

4.1 HTML是用来制作网页的标记语言，不需要编译，直接由浏览器执行。

1）HTML其实是一个文本文件，包含了一些HTML元素、标签等，它需要浏览器的解释。

2）HTML文件必须使用html或htm为文件名后缀。出现2个后缀的原因是过去的老软件只支持3个字母的后缀，所以.html的文件只能写成写成.htm，这是长久以来形成的习惯。现在不存在软件不支持的情况，使用哪种后缀看你的喜好。

3）HTML对大小写不敏感，HTML与html是一样的。

4.2 HTML文档制作不是很复杂，且功能强大，支持不同数据格式的文件镶入。

1）HTML的简易性，HTML版本升级采用超集方式，从而更加灵活方便。

2）HTML的可扩展性，HTML语言的广泛应用带来了加强功能，增加标识符等要求，HTML采取子类元素的方式，为系统扩展带来保证。

3）HTML的平台无关性。HTML可以使用在广泛的平台上，包括PC机和MAC等机不同类型的机器。

4.3 HTML是网络的通用语言，一种简单、通用的全置标记语言，具有通用性。

HTML允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

5．HTML的发展历史

超文本标记语言（第一版）——在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）。

HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时

HTML 3.2——1997年1月14日，W3C推荐标准

HTML 4.0——1997年12月18日，W3C推荐标准

HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准

HTML 5——2014年10月28日，W3C推荐标准

　HTML是最流行的Web前端开发技术之一，它是一种用于创建网页和 Web 应用程序的标记语言。HTML与CSS和JavaScript结合使用以创建有吸引力且响应迅速的前端网页。

　　HTML 提供了几个不同的元素，如 <head>、<body>、<p>、<img>、<a> 等，它们充当网站的构建块，浏览器使用这些 HTML 元素来解释和表示网页上的内容。

　　HTML 概述

　　HTML(超文本标记语言)是Web浏览器理解并用于呈现网页的语言。在不同元素的帮助下，HTML 决定了网页的外观和显示内容。超文本标记语言 (HTML) 是一种用于创建独立于平台的超文本文档的简单标记语言。

　　HTML 文档是具有通用语义的 SGML(标准通用标记语言)文档，可用于表示来自各种学科的数据。HTML 标记可用于创建超文本邮件、文档、新闻和超媒体;选项菜单;数据库查询结果;带有内嵌图形的简单结构化文档;和现有数据集的超文本视图。

　　HTML 语言的主要用途

　　轻松浏览互联网

　　超文本允许你访问 Internet 上的不同页面，尤其是在你没有记住所有 URL 的情况下。你只需单击链接或在地址字段中输入 URL 即可浏览互联网。超文本对于引导用户浏览你的网站并充当网关至关重要，以便他们知道存在不同的页面并可以在它们之间导航。如果不使用超文本，用户很难检测到网站上是否还有其他网页。

　　尖端功能

　　HTML 支持 Polyfill 功能，它是一种允许你在 HTML 中本地使用不同技术的代码。你可以使用此功能复制未来的API，同时为过时版本的浏览器提供回退功能;你可以自定义polyfill库以满足你的特定要求并执行其他人从未做过的事情。HTML 的这些尖端特性是HTML有如此多用途的原因。

　　创建 Web 文档

　　网页只是一个Web文档，你可以在其中编写你希望用户看到的材料，然后将其包装在指示机器如何格式化整个内容的代码中。这会告诉你的浏览器标题、正文和元数据中的文本，它带有标签，因此计算机知道如何处理你提供的信息。

　　数据输入

　　你拥有执行任何数据输入任务所需的所有 API。作为开发人员，你只需在相关字段中添加标签，例如文本和数据格式，你甚至可以提供屏幕键盘和验证，确保为用户提供流畅和愉快的体验。

　　游戏开发

　　游戏开发是 HTML 的重要用途之一。尽管不再支持Flash，但HTML仍可用于创建基于浏览器的游戏。你使用的API不必完全实现，但可以使用最必要的组件，同时去掉了其余的功能，带来了更轻松的体验。由于HTML5的进步，HTML正迅速成为最流行的游戏编程语言之一。

　　离线存储

　　如果你的一些用户不在线怎么办?在最新版本的HTML中找到的应用程序缓存方法的帮助下，你仍然可以使你的应用程序运行。应用程序缓存负责各种离线功能，包括各种组件，包括需要更新的API调用。通过清单文件，你可以控制浏览器对其离线使用的操作，甚至它使用的资源。

　　原生API使用

　　API代表“应用程序编程接口”，这是两个不同应用程序相互通信的一种方式。通过使用API，HTML包括地理定位、事件管理、拖放和更多功能，HTML编程现在比以往任何时候都更强大。开发人员还可以使用具有异步特性的现代在线应用程序。

　　在客户端存储东西

　　IndexDB和Localstorage 使在客户端存储文件更简单、更高效，这些都有自己的一套强大的功能。

　　Localstorage支持setItem、getItem 和removeItem方法，以及基于字符串的哈希表存储。IndexDB带有更多的存储空间，你可以在用户许可的情况下增加。

　　方便使用的

　　与其他编程语言不同，HTML以用户友好而闻名，即使对于初学者也是如此，所以，这也是HTML的主要用途之一。HTML中有语义组件来描述它们所具有的内容类型，例如，页眉、页脚、主要、摘要和时间等HTML常用标签是自描述的。

　　可访问的富Internet应用程序

　　HTML5语义标签的使用使网站搜索引擎和屏幕阅读器友好，如果正确使用语义标签，视障人士可以使用屏幕阅读器从网页中获取信息。

　　结论

　　在这篇博客中，我们讲述了HTML的所有重要用途，它通常是Web开发人员学习的第一语言，所以，如果你想学习Web编程并且害怕学习HTML的难度，你不必担心，HTML非常容易学习。

eb标准：

由于不同浏览器解析出来的网页效果可能不同，所以需要通过web标准对其进行约束使其一致，主要包括三个方面：

结构标准：

结构用于对网页元素进行整理和分类，主要指的是HTML。

表现标准：

表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。

行为标准：

行为是指网页模型的定义及交互的编写，主要指的是 JavaScript。

初识HTML：

html 全称 Hyper Text Markup Language ，中文译为：“超文本标记语言” ，描述网页的一种语言。

HTML发展：

XHTML 是一个 W3C 标准，可扩展超文本标签语言（EXtensible HyperText Markup Language），更严格更纯净的 HTML 版本，作为一种 XML 应用被重新定义的 HTML。

HTML中的注释：

 <!-- 注释标签：注释的内容 -->

条件注释：

条件注释的作用是：定义只有Internet Explorer才执行条件注释中的html标签。


    <!--[if IE 8]>
        .... some HTML here ....
    <![endif]-->

HTML骨架：

<!DOCTYPE html> <!-- 声明文档类型版本为html5 -->
<html lang="en"> <!-- 网页的跟标签,lang=""用来设置网页语言，其值还有zh-CN中文简体、fr法语等，设置后当系统设置语言和网页语言发生冲突时会提示是否翻译网页 -->
    <head> <!-- 网页的头部 -->
        <meta charset='UTF-8'> <!-- 声明字符编码，其值还有gbk和gb2312 -->
        <meta name="viewport" content="width=device-width,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,initial-scale=1.0"> <!-- 开启移动端视口 -->
        <meta name="apple-mobile-web-app-capable" content="yes"> <!-- 开启ios快捷启动方式 -->
        <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!-- 设置iOS顶部通栏样式 -->
        <meta name="format-detection" content="telephone=no"> <!-- 遇到数字不转成电话号码 -->
        <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- X-UA-Compatible是针对IE浏览器做兼容的，ie=edge表示兼容edge，若后面ie=7，则表示兼容IE7 -->
        <meta name='keywords' content='This is a key words'> <!-- 网站搜索关键字 -->
        <meta name='description' content='this is description'> <!-- 描述网站的信息 -->
        <link rel="shortcut icon" type="image/x-icon" href="图片路径 "/> <!--  网站的图标，如果图标是gif图，则需要改：type="image/gif"，引入网站图标另一种方法：命名为favicon.ico文件放到网站根目录下 -->
        <link rel="stylesheet" type="text/css" href="css文件路径"/> <!-- 引用css文件 -->
        <base target="_blank"/> <!-- base标签，定义这个网页中a链接打开窗口的方式，其值还有_self -->
        <title>标题</title> <!-- 网站的标题 -->
        <style type="text/CSS">  /* 用来写CSS代码，type="text/CSS"可以省略 */
            div{width:100px; height:100px; color:white;}
        </style>
    </head>
    <body> <!-- 网页的主体 -->
        <h1>标题</h1> <!-- 标题标签，共六个级，分别为：h1~h6,大小逐级递减，h1在一个网页中只允许出现一次。 -->
        <p>段落</p> <!-- 段落标签 -->
        <hr/> <!-- 单线标签,所有单标签后面的关闭符均可以省略 -->
        <br/> <!-- 换行标签 -->
        </div></div> <!-- 无语义化标签布局用,上面的标签是语义化标签 -->
        <span>span</span> <!-- 无语义化标签分割用 -->                
        <strong>加粗</strong> <!-- 加粗标签 -->
        <b>加粗</b> <!-- 加粗标签 -->
        <i>倾斜</i> <!-- 倾斜标签 -->
        <em>倾斜</em> <!-- 倾斜标签 -->
        <s>删除线</s> <!-- 删除标签 -->
        <del>删除线</del> <!-- 删除标签 -->
        <u>下划线</u> <!-- 下划线标签 -->
        <ins>下划线</ins> <!-- 下划线标签 -->
        <img src="图片路径" alt="图片无法加载，提示文字" title="鼠标悬停，提示文体" border="2"/> <!-- 图像标签，border是边框属性，width和height属性设置图像的宽度和高度 -->
        <a href="跳转目标" target="_self">链接的命名</a> <!-- 链接标签，target属性为链接页面打开的方式，默认值_self为自身打开；_blank为新窗口打开；_new为新窗口打开，相同页面只会打开一个;_top跳出框架-->
        <ul> <!-- 无序列表 -->
            <li>列表项1</li>
            <li>列表项2</li>
            <li>列表项3</li>
        </ul>
        <ol type="A"> <!-- 有序列表,属性type可以控制li序号的样式，其属性值有：1、A、a、I、i-->
            <li>中国</li>
            <li>美国</li>
            <li>英国</li>
        </ol>
        <dl> <!-- 自定义列表 -->
            <dt>分类1</dt> <!-- 分类名称 -->
            <dd>分类1第1项</dd> <!-- 类的项 -->
            <dd>分类1第2项</dd>
            <dt>分类2</dt>
            <dd>分类2第1项</dd>
            <dd>分类2第2项</dd>
        </dl>
        <table> <!-- 定义表格，table标签实际就是一个四方块框框，里面有单元格才会显示出表格的样子 -->
        <caption>信息表</caption> <!-- 表格标题 -->
        <tr> <!-- 定义行 -->
            <th>姓名</th> <!-- 定义表头，表头文本有加粗居中效果 -->
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr> <!-- 定义行 -->
            <td>小明</td> <!-- 定义单元格，表格里面没有列-->
            <td>18</td>
            <td>男</td>
        </tr>
        </table>
    </body>
</html>

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者删除。

笔者：苦海123

其它问题可通过以下方式联系本人咨询：

QQ：810665436

微信：ConstancyMan

在线咨询

上一篇：20、rem 适配方法如何计算 HTML 跟字号及适配方案？（必会）
下一篇：项目管理工具dhtmlxGantt入门教程（九）：支持的数据格式（下）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

你知道HTML是干什么的吗？

您的项目需求