初识HTML

爱被打了一巴掌 2024-05-05 06:45 70阅读 0赞

> 不为失败找理由，只为成功找方法。所有的不甘，都是因为还心存梦想，在你放弃之前，好好拼一把，只怕心老，不怕路长。

#### 文章目录 ####

*  一、 三个疑问
 *   *  1.HTML是什么？
     *  2.为什么要学习HTML？
     *  3.怎么学好HTML
 *  二、HTML的发展历史与特点
 *   *  1.历史背景
     *  2.特点
 *  三、HTML入门
 *  四、标签
 *   *  1.双标签
     *  2.单标签
 *  五、属性
 *  六、总结

--------------------

## 一、 三个疑问 ##

**学习一样东西，特别是技术型的，在学习之前一个有这几个疑问。第1个：是什么？第2个：为什么？第3个：怎么学？** 那么在本章中讲的是HTML，那么HTML是什么？为什么要学习HTML？学这个有什么用？那么接下来我们来聊一聊这三个问题。

### 1.HTML是什么？ ###

HTML的全称叫 Hyper Text Markup Language，即超文本标记语言，是应用在web即浏览器上的。我们都知道文本吧，普通的文本自能存放文字，那么这里有个“超”字可以看见这语言和普通文本的不同之处，没错，超文本不仅可以存放文字，还可以存放图片、音频、视频等。那么标记语言是什么呢？标记标记，就是带有标记的，或者说是带有标签性的，由此就可以理解什么叫HTML，即超文本标记语言了吧。

### 2.为什么要学习HTML？ ###

现在是科技高速发展的时代，而网络我们每天都是需要的，那么我们现在来看几张图片：  
![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAR3VhcmRpbmcgYW5kIHRydXN0_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAR3VhcmRpbmcgYW5kIHRydXN0_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]  
这上面的图片我相信大家都不陌生吧，那么这图片和HTML有什么联系呢？这个联系就大着了，其实我们每天浏览的网页都是以HTML为基础编写出现的，到这应该明白为啥要学习HTML了吧，不过有一点不要误解了，学好HTML就不能代表能做出我们日常所浏览器网页，只是说HTML是网页的一部分。

### 3.怎么学好HTML ###

前面两点已经分析好什么是HTML和为啥要学习HTML了，那么接下来怎么学习HTML呢？学一样东西一般要了解它的历史背景，知道背景，那么这东西是怎么诞生的，之后就是特性，从特性入手学习。接下来我们就正式来学习学习HTML。

## 二、HTML的发展历史与特点 ##

### 1.历史背景 ###

HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由CERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。  
HTML历史上有如下版本：  
①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。  
②HTML 2.0：1995年1 1月作为RFC 1866发布，于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：HTML5是目前主流的web标记语言，学习的话也是建议学习HTML5，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持。  
这里的历史背景作为了解即可。

### 2.特点 ###

<table> 
 <thead> 
  <tr> 
   <th>简易性</th> 
   <th>超文本标记语言版本升级采用超集方式，从而更加灵活方便。</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>可扩展性</td> 
   <td>超文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超文本标记语言采取子类元素的方式，为系统扩展带来保证。</td> 
  </tr> 
  <tr> 
   <td>平台无关性</td> 
   <td>虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。</td> 
  </tr> 
  <tr> 
   <td>通用性</td> 
   <td>HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。</td> 
  </tr> 
 </tbody> 
</table>

## 三、HTML入门 ##

了解了那么多HTML的基本概念，那么接下来我们来一个快速入门，直接上代码：

<!DOCTYPE html>  
    <html lang="en"> 
    
    <head>
        <meta charset="UTF-8"/> 
        <title>第一个网页</title> 
    </head>
    
    <body> 
    <h1>hello world！<h1>
    </body>
    </html>

把上面的代码复制到一个记事本里，然后后缀名为.html 或htm之后用双击就会在浏览器中显示出如下内容：  
![在这里插入图片描述][fa81fb8e99284a7789de8501cf6851a6.png_pic_center]

## 四、标签 ##

**刚才来了个html快速入门，里面的一些什么html，head，body都给整懵了吧？没关系，接下来就讲解一下，不过在此之前得会两个知识，单标签和双标签。**

### 1.双标签 ###

什么是双标签？不知你是否发现上面的入门案例里每一个单词有这个符号：“<>”或“</>”，这样两个和起来就是一对了吧？比如`<body></body>`这样就双标签类的，以`<>`开始，以`</>`结束。

### 2.单标签 ###

刚才已经介绍了双标签，那么聪明的你应该可以联想到单标签了吧。单个的标签，就是单标签了，比如入门案例中的`<!DOCTYPE html>` 和 `<meta charset="UTF-8"/>` 都是单标签，不过建议后者的写法，就是有闭合的标签`</>`。  
学到这里，那么html里的标签就有所了解了，而且现在再回头看入门案例就比较轻松了。

## 五、属性 ##

明白什么是标签，那么接下来再来学习有个知识点，就是属性，什么是属性？我们来看入门案例中的这个标签`<meta charset="UTF-8"/>` charset 就是属性，而后面双引号的UTF-8是属性的值，即属性值。每一个标签都有自己的属性，随着后面的学习会越来越了解。

--------------------

## 六、总结 ##

本篇文章讲解了什么是HTML，HTML的简单入门，介绍了什么是标签，标签有几种和标签里是有属性的。

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAR3VhcmRpbmcgYW5kIHRydXN0_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/bf2f94e527ec4322898453deb196244c.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAR3VhcmRpbmcgYW5kIHRydXN0_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/1bb6475c68ec42cc978370089bfad471.png
[fa81fb8e99284a7789de8501cf6851a6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/a2177d8b86d643f8b68a757d42653f6d.png