01-HTML介绍

作者: MeWill | 来源:发表于2017-11-27 02:14 被阅读0次

知识介绍

HTML介绍

HTML（Hyper Text Markup Language），中文意思是超文本标记语言。
超文本：超越了普通的文本，网页有文字，有超链接，甚至有图片、音频和视频等。
标记：我们通常使用一对对的标签，来对网页内容进行标记。
语言：是一种体系，html语言是用各种各样的标签组成，描述着网页的视频，音乐和链接等超文本内容。

HTML发展史

W3C管理和维护HTML标准，1993年推HTML1.0，1999年推HTML4.01，2000年推XHTML1.0，还有夭折的XHTML2.0；2005年另外的组织WHATWG推出HTML5草案，2008年，W3C和WHATWG合并，2014年，HTML5定稿推出。

故事：W3C是用于维护和制定html标准的组织，在1999年推出HTML4.01之后觉得HTML已经不必要再维护下去，开始主推XHTML，可是浏览器厂商（如微软、苹果等公司）并不买账，开发者和以前编写的网页也无法适应XHTML。这种情况下，WHATWG（浏览器厂商联合起来的组织）提出HTML5草案抛开W3C自己玩，W3C在XHTML时代发现没人和他玩，只好找WHATWG谈判，于是两派合并，最后于2014年正式推出HTML标准。

HTML5是向上兼容的，他既支持以前的宽松的HTML4.01书写方式，也支持严格的XHTML格式，同时它还有很多新的特性。

<!doctype html> 
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>HTML第一课</title>
 </head>
 <body>
  html介绍
 </body>
</html>

代码介绍

doctype html描述的是文档类型

doctype必须放在文档的第一行。<!doctype html>这句话的作用是，告诉浏览器，用标准模式进行解析，因为浏览器对页面的渲染有两种模式，一种是怪异模式（浏览器使用自己的模式解析渲染页面），还有一种是标准模式（浏览器使用W3C官方标准解析渲染页面）。doctype是不区分大小写的。

<html lang="en"></html>文档开始。

<html>标签是该网页总所有标签的顶层标签，用于表示HTML文档的开始。lang="en"是 <html>标签的属性，表示文档语言是英文。

<head></head>设置网页文档的头部信息

<head>主要用来设置一些与网页相关的信息，与网页标题，网页字符集，网页的描述关键词等等，设置的信息一般不会显示在浏览器窗口中，主要是给浏览器看的，通常不是给用户看的。

<title></title>网页文档的标题。

<title>标签的作用有两个一是设置网页的标题，会显示在浏览器的标签栏当中，告诉浏览者网页的主题是什么。二是用于搜索引擎索引，作为搜索关键字以及搜索结果的标题使用。特别提醒，搜索引擎会根据title标签设置的内容，将网站或文章进行归类。所以一个好的标题，可以使网站获得更好的搜索排名。

<title>百度一下，你就知道</title>

<meta></meta>定义文档元数据。

使用<meta>设置页面字符集.

<meta charset="UTF-8"> | <meta charset="GBK">

使用<meta>设置关键字

网页关键字，是为了方便搜索引擎搜索而设置的，用户在网页中是看不到的，它的主要作用是用于搜索引擎优化，可以有多个关键字,关键字之间用空格或者英文逗号隔开，需要注意的是，设定多个关键字，可以提高被搜索到的几率，但是大多数的搜索引擎在检索时，都会限制关键词的数量，一般10个以内比较合理.

<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺">

使用<meta>设置网页描述信息

网页的描述信息，主要用于描述网页的主要内容.是对关键词的补充性描述，并且会作为搜索结果返回给用户。同时，像关键字一样，搜索引擎对描述信息的字数也有限制，一般不超过100个，所以描述信息的内容，也应尽量简明扼要。
下图红色箭头指向的是百度搜索引擎返回网易首页的描述信息。

<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。">

image.png

<body></body>页面主体内容

<body>代表了页面的主体部分，用于放置页面内容，按照html标准，需要在浏览器窗口中显示的内容，都必须放在<body></body>标签之间。不过需要提醒的是，html是一个很宽松的标准，你即使把内容放在 <body></body>之外，也能正常显示，但是不符合标准。

总结

上面讲的是html的介绍和基本结构标签的含义和使用，我们可以总结出:

html是由标签组成
标签，是由尖括号包围起来的有一定作用和意义的关键词，如 <html>.
标签通常是成对出现的，称为双标签，有开始和结束标签<body></body>。内容放在开始标签和结束标签之间，即开始标签和结束标签标明该标签的作用范围.
少量标签是单标签，只有开头没有结尾<meta charset="utf-8" />，什么时候使用单标签呢？不需要指定标签作用范围的时候。
标签的属性，标签通常含有若干个属性，每个属性的格式是：属姓名="属性值"。<meta name="keyword" content="淘宝,掏宝">中，meta是标签，它有两个属性，属性名分别是name和content。属性之间用空格隔开。

测试

小组讨论或自问自答每行代码含义和作用。

<html >
 <head>
  <title>HTML第一课</title>
 </head>
 <body>
  html练习：01-a
 </body>
</html>

练习

请大家打开记事本，在记事本中输入下列代码，保存为01-a.html和01-b.html，保存时字符集选择UTF-8。

image.png

<html >
 <head>
  <title>HTML第一课</title>
 </head>
 <body>
  html练习：01-a
 </body>
</html>

<!doctype html> 
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="HTML,CSS,JS,Bootstrap,Node.js,VUE,网页设计,前端设计">
  <meta name="Description" content="MeWill老师，多年企业和学校工作经验，如果你想学习网页，请收藏，这里将为你提供系统而详细的前端设计知识，联系QQ:10090119">
  <title>HTML第一课</title>
 </head>
 <body>
   html练习：01-b
 </body>
</html>

网友评论

本文标题：01-HTML介绍

本文链接：https://www.haomeiwen.com/subject/ftnlbxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！