知识介绍
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>设置页面字符集.
<meta charset="XX">可以设置页面内容所使用的字符编码，浏览器会根据此处的字符编码，来调用相应的字符编码来显示页面内容和标题.
网页有时会出现乱码。出现乱码的原因是<meta charset="XX">里面设置的字符编码和文件保存的字符编码不一致。
为避免出现乱码，推荐大家使用万国码“utf-8”，并且对应在保存的时候，设置文件的编码格式为utf-8。
万国码的好处是，可以的在网页当中显示各个国家的各种文字和字符。如果你确认只需要显示中文和英文，那么，也可以设置字符集为GBK。比如百度使用的是万国码，网易用的是GBK。
<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>
网友评论