HTML及CSS学习笔记 01 - 走进HTML

最新推荐文章于 2022-05-23 23:19:26 发布

chodenke

最新推荐文章于 2022-05-23 23:19:26 发布

阅读量499

点赞数

分类专栏： HTML及CSS学习笔记文章标签： html html5 css css3 html入门

本文链接：https://blog.csdn.net/cgl125167016/article/details/88952787

版权

HTML及CSS学习笔记专栏收录该内容

16 篇文章 5 订阅

订阅专栏

本文是HTML及CSS课程的第一课，简单介绍一些关于HTML的背景知识，并通过Hello World 小例子带领读者快速进入HTML的世界

一、一些知识

1、web的由来

1980年，英国计算机科学家Tim Berners-Lee（蒂姆·伯纳斯·李）提议建立一个科技项目，使科学家之间能够更方便的随时随地地分享和更新他们的研究成果。
出生地：欧洲核子研究组织(CERN)，位于瑞士日内瓦。
1984年，Tim Berners-Lee建立了一个系统叫做ENQUIRE，这个系统由文档（Document）和使文档互相连接起来的超链（Hyperlink）组成。
1990年，在Robert Cailliau的帮助下，Tim创建了万维网（World Wide Web），世界上第一个浏览器（World Wide Web浏览器）和世界上第一个网站。

2、浏览器

2.1、简介

浏览器，是一种用于检索并展示万维网信息资源的应用程序。这些信息资源可为网页、图片、影音或其他内容，它们由统一资源标志符标志。信息资源中的超链接可使用户方便地浏览相关信息。主流网页浏览器有Mozilla Firefox、Internet Explorer、Microsoft Edge、Google Chrome、Opera及Safari等。

2.2、历史

世界上第一个浏览器WorldWideWeb（后改为Nexus）由Tim Berners-Lee创建于欧洲核子物理实验室。
1993年,伊利诺伊大学厄巴纳-香槟分校的NCSA组织发表NCSA Mosaic，简称Mosaic。是互联网历史上第一个获普遍使用和能够显示图片的网页浏览器。
1994年，Netscape公司发布了Navigator浏览器。其在网上免费发布产品，建立了广泛的用户基础。Navigator迅速取代了Mosaic，成为了用户的首选。
1995年微软发布了IE(Internet Explorer)浏览器。并与Windows操作系统进行捆绑销售。随着Windows操作系统用户数量不断增多，Internet Explorer的用户群开始持续增长，不断蚕食Netscape公司所占有的浏览器市场。微软和网景之间的浏览器大战，加快了万维网发展。
Netscape随后调整了自身战略，开放其源代码，成立了Mozilla，来应对微软的挑战。此举虽然未能挽回Netscape的市场占有率，但却催生了今天广受欢迎的Firefox浏览器（Firefox 1.0在2004年正式发布）。
开源浏览器引擎WebKit也被许多浏览器产品所使用。WebKit的前身是KDE项目的HTML渲染引擎（KHTML）和JavaScript执行引擎。苹果公司将WebKit移植到了Mac OS上，并于2003年发布了基于WebKit的Safari浏览器。
Google于2008年推出的Chrome浏览器，也采用了WebKit内核。

3、W3C

W3C

3.1、W3C的由来

万维网联盟（World Wide Web Consortium，W3C），又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。建立者是万维网的发明者Tim Berners-Lee（蒂姆·伯纳斯·李）。
1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。

3.2、W3C的贡献

为解决 Web 应用中不同平台、技术和开发者带来的不兼容问题，保障 Web 信息的顺利和完整流通，W3C制定了一系列标准并督促 Web 应用开发者和内容提供者遵循这些标准。标准的内容包括使用语言的规范，开发中使用的导则和解释引擎的行为等等。
W3C也制定了包括XML和CSS等的众多影响深远的标准规范。

但是，W3C 制定的 web 标准似乎并非强制而只是推荐标准。因此部分网站仍然不能完全实现这些标准。特别是使用早期所见即所得网页编辑软件设计的网页往往会包含大量非标准代码。

4、HTML

4.1、HTML的概念

HTML：HyperText Markup Language （超文本标记语言）。
HyperText：超文本，是指具有交互功能的文本。
Markup：通过特定的“Markup（标记）”表示或描述相应的内容，如标题、段落、图片、表格、链接等。

4.2、HTML文件

HTML 文件是包含一些标签的文本文件。这些标签告诉WEB浏览器如何显示页面。
HTML 文件必须使用 htm 或者 html 作为文件扩展名。
HTML 文件可以通过简单的文本编辑器来创建。如记事本等。

4.3、HTML版本发展历史

时间	事件
1993年6月	HTML 1.0—作为互联网工程工作小组（IETF）工作草案发布（并非标准）
1995年11月	HTML 2.0—作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
1997年1月14日	HTML 3.2—W3C推荐标准
1997年12月18日	HTML 4.0—W3C推荐标准
1999年12月24日	HTML 4.01（微小改进）—W3C推荐标准
2000年1月	XHTML 1.0，W3C推荐标准
2001年5月	XHTML 1.1，W3C推荐标准
2014年10月28日	HTML 5—W3C推荐标准

4.4、HTML5

在这里插入图片描述
HTML5简称为H5，表示HTML的第5个版本。上一代的HTML的标准HTML4.01和XHTML 1.1，距离今天已经发布了接近20年的时间，而Web端的应用也已经翻天覆地的变换。而且Web前端没有一个统一的通用的互联网标准，各个浏览器间拥有太多的不兼容，在维护这些浏览器兼容性浪费了太多的时间。HTML4的多媒体操作、动画等都需要第三方的插件的支持，而这就造成多平台的兼容性的问题，而这一切在HTML5中都将成为标准，这样就在根本上解决了浏览器的差异以及一些第三方插件的问题，让Web应用更加标准，通用性更强，而且更加的独立于设备，如PC、手机、平板电脑等。

HTML5的目标是：它通过一些新标签，新功能为开发更加简、独立、标准的通用Web应用提供了标准。新的标准解决了三大问题：浏览器兼容问题，文档结构不明确的问题，Web应用程序功能受限等问题。

二、走进HTML

1、HelloWorld

打开记事本
输入以下代码

<html>
   <head>
   	<title>hello world</title>
   </head>
   <body bgcolor="#F0F0F0">
   Hello World !
   </body>
</html>

将文件保存为myPage.html
在浏览器中打开myPage.html

2、标签语法

HTML所遵循的基本标签语法是<标签属性="值">内容</标签>，例如：

<p align="center">我是一个段落</p>

说明：

标签通常是成对出现的，分为开始标签<p>和结束标签</p>，结束标签只是在开始标签前加一个斜杠“/”。
标签可以有属性（上例中是align），属性必须有值（上例中是center）
开始标签与结束标签中包含的内容称之为标签体，或者区域。
一个完成的标签，即包含开始标签、结束标签和标签体，形成一个HTML页面元素。
标签不区分大小写，<p>和<P>是相同的。但建议写成小写字母。

3、基本结构

观察HelloWorld例子中的代码

HTML文件中的第一个标签是 <html>，这个标签告诉浏览器这个HTML文件的开始点；文件中最后一个标签是</html>，这个标签告诉浏览器，这是HTML文件的结束点。
HTML文档有明确的基本结构，包括两个部分，即在<html>中包含<head>部分和<body>部分。
位于<head>标签和</head>标签之间的文本是头信息，头信息不会显示在浏览器窗口中。
<title>标签和</title>标签中的文本是文件的标题，标题会显示在浏览器的标题栏。
<body>标签和</body>标签中是HTML的主体部分，需要在浏览器中显示的内容写在<body></body>中。
<body bgcolor="#F0F0F0">中bgcolor是<body>标签的中的一个属性名称，#F0F0F0是bgcolor属性的值。例子中该属性及值表示<body>部分的背景颜色（bgcolor）是灰色（#F0F0F0）

4、文档类型声明<!DOCTYPE>

4.1、什么是文档类型声明

HTML文件中的第一行通常为文档类型声明：<!DOCTYPE>
它不是HTML标签，只是为浏览器提供一项信息（声明），即HTML是用什么版本编写的。因为
1. Web 世界中存在许多不同类型的文档。只有了解文档的类型，浏览器才能正确地显示文档。
2. HTML 也有多个不同的版本，只有完全明白页面中使用的确切HTML版本，浏览器才能完全正确地渲染出 HTML 页面。

4.2、常见<!DOCTYPE>

HTML5的文档声明

<!DOCTYPE html>

HTML 4.01的文档声明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0的文档声明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

5、元信息标签<meta>

5.1、什么是元信息

元数据是指从信息资源中抽取出来的用于说明其特征、内容的结构化的数据，用于组织、描述、检索、保存、管理信息和知识资源。
<meta> 标签可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。故<meta> 有时也被称为头信息。
<meta> 标签的属性定义了与文档相关联的名称/值对。

5.2、一些基本元信息示例

下面是一个设置一些常用元信息的例子：

<!DOCTYPE html>
<html>
 <head>
  <title>meta标签</title>
  <meta charset="utf-8">
  <meta name="keywords" content="软件,开发">
  <meta name="description" content="软件开发,软件设计,技术支持,技术服务">
  <meta http-equiv="refresh" content="2;URL=http://www.baidu.com">
 </head>
 <body>
 </body>
</html>

说明：

charset=utf-8元信息就是告诉浏览器当前网页使用utf-8编码显示。utf-8是通用字符集，可以显示中文。常用的中文字符集还包括gb2312，gbk等。

编码	描述
GB2312	是简体中文字符集，主要用于中国大陆和新加坡
UTF-8	是为通用字符集
GBK	是GB2312的后续标准，添加了更多的汉字和特殊符号
BIG5	是繁体中文字符集，主要在台湾和香港地区使用

keywords元信息是设置搜索引擎关键字。
description元信息是设置搜索引擎描述信息。
refresh是设置页面跳转，有两种用法

代码描述
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com"> 页面加载2秒钟后跳转到百度页面
<meta http-equiv="refresh" content="5"> 每5秒钟刷新一次当前页面

代码	描述
`<meta http-equiv="refresh" content="2;URL=http://www.baidu.com">`	页面加载2秒钟后跳转到百度页面
`<meta http-equiv="refresh" content="5">`	每5秒钟刷新一次当前页面