简单入门HTML

浏览器	内核	备注
IE	Trident	IE、猎豹、360极速浏览器、百度浏览器等内核
Firefox	Gecko	火狐浏览器内核
Safari	Webkit	苹果浏览器内核
Chrome / Opera	Blink	Chrome/Opera浏览器内核。Blink是Webkit的分支

Web标准

Web标准是有W3C组织和其他标准化组织制定的一系列标准集合。W3C（万维网联盟）是国际最著名的标准化组织

1.为什么需要Web标准

浏览器不同，他们可能显示页面或者排版就有些许差异。制定Web标准，使得浏览器解析出的内容一致。除此之外还有许多优点：

让Web的发展前景更广阔。
内容能被更广泛的设备访问。
更容易被搜寻引擎搜索。
降低网站流量费用。
使网站更易于维护。
提高页面浏览速度。

2.Web标准的构成

主要包括结构（Structure）、表现（Presentation）、行为（Behavior）三个方面

标准	说明
结构	结构用于对网页元素进行整理和分类（HTML）
表现	表现用于设置网页元素的版式、颜色、大小等外观样式（CSS）
行为	行为是指网页模型的定义及交互方式的编写（JavaScript）

Web标准提出的最佳体验方案：结构、样式、行为相分离。

即，结构写到HTML文件中，表现写在CSS文件中，行为写在JavaScript文件中。

相较而言，结构更重要。

HTML语法

1.基本语法

所有的标签都是写在尖括号（“< >”）里。

<html></html>

大多数的标签都是成对出现的，其中，第一个（“ <html> ”）称为开始标签，第二个（“ </html> ”）称为结束标签。开始标签与结束标签唯一的区别就是结束标签有一个斜杠（“ / ”）

当然，大多数标签都是成对的，也有单独出现的标签

如

<br />

为单标签，单标签非常少

2.标签关系

标签关系分为包含关系与并列关系

包含关系

如

<head>
    <title></title>
</head>

其中<title></title>包含在<head></head>之中，因此它们的关系为包含关系（类似于嵌套）

并列关系

如

<head> </head>
<body> </body>

<head></head>与<body></body>的关系为并列关系

如

<html>
    <head></head>
    <body></body>
</html>

<html></html>与<head></head>、<html></html>与 <body></body>均为包含关系，而<body></body>与<head></head>为并列关系。

HTML基本结构标签

1.第一个HTML网页

每一个网页都有基本的结构标签（骨架标签），页面内容也在这些标签上书写

HTML页面也称为HTML文档

<html>
  <head>
    <title>呵呵</title>
  </head>
  <body>
      床前明月光，疑是地上霜。举头望明月，低头思故乡。
  </body>
</html>

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，称为根标签
<head></head>	文档的头部	注意在head标签中我们必须要设置的标签title
<title></title>	文档的标题	让页面有一个网页标题
<body></body>	文档的主体	元素包含文档的所有内容，页面内容基本都放在body类面

可以在记事本中写下以上代码，并将尾缀改为.html

完成后用浏览器打开

即可看到以上网页，这就第一个网页。

其中红色方框为<title></title>内容，黑色方框为 <head></head>的内容，<body></body>为黄色方框的内容

2.开发工具

有Dreamweave（Dw）、Sublime Text，WebStorm、Visual Studio code（VS code）等等。其中Visual Studio Code最为常用

VS Code的使用

打开VS Code，出现以下界面，并点击新建文件

即可创建一个文件，如下图

此时单击文件，保存，如下（或ctrl+s）

得到如下界面

此时可以选择保存位置，但注意，一定要将尾缀改为.html！一定要将尾缀改为.html！一定要将尾缀改为.html！一定要将尾缀改为.html！

点击保存后即可得到这个界面

现在就可以编写HTML了。

写下如下代码后，保存。

在点击刚才保存的HTML文件，用浏览器打开，即可得到HTML网页。

或者直接右击鼠标，点击open in default browser，即可进入网页

可以直接输入“ ！”，在选择第一个“ ！”，就可以获得骨架标签。

选择第一个“ ！”，获得的骨架标签如下：

vs code使用总结

双击打开软件。
新建文件（Ctrl+N）。
保存（Ctrl+S），注意尾缀改为.html。
右击鼠标，选择Open in Default Browser，即可进入网页。
可以输入“ ！”，即可快速获得骨架标签。

DOCTYPE和long以及字符集的作用

由上可知，VS Code工具会生成骨架标签以及一些其他代码

1.<!DOCTYPE>标签

2.long语言

3.charset字符集

1.文档类型声明标签

<!DOCTYPE>文档类型声明，作用就是告诉浏览器使用哪种HTML版本显示网页。

其中DOC指的是document（文档），TYPE就是type（类型）。

<!DOCTYPE html>

这句代码就是告诉我们，当前网页采取的是HTML 5版本显示网页。

注意：

1.<!DOCTYPE html>声明位置一定在最前面的位置，位于<html>标签之前。

2.<!DOCTYPE html>不是HTML标签，是文档声明标签。

3.处于<html> </html>之间的标签是HTML标签

2.lang 语言种类

<html lang="en">，其中lang，就是language（语言），en就是English（英语）

<html lang="en">

这局代码表明当前网页是英文网页。

1.en定义语言是英语。

2.zh-CN定义语言为中文。

3.字符集

字符集是多个字符的集合，以便计算机能够识别和存储各种文字

在<head>标签内,可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。

<meta charset="UTF-8">

charset常用的值有：GB2312，BIG5和UTF-8等，UTF-8称为万国码，基本包含了全世界所有国家所需要的字符

注意UTF-8不要写成utf-8或UTF8。

为防止出现乱码，<meta charset="UTF-8">一定要写。

4.总结

1.以上三个代码VS Code会自动生成。

2.<!DOCTYPE html>文档类型声明标签，告诉浏览器这个页面是采取HTML5显示的。

3.<html lang="en">告诉浏览器或者搜索引擎这是一个英文网站，采取英文显示。

4.<meta charset="UTF-8">告诉我们采取UTF-8来保存文字，若不写，可能会出现乱码。

噜噜噜噜鲁先生

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
2
评论
简单入门HTML

目录HTML简单介绍1.什么是网页？2.什么是HTML ？3.网页怎么形成的？常用浏览器及其内核浏览器浏览器内核Web标准1.为什么需要Web标准2.Web标准的构成HTML简单介绍现在，我们经常可以用到网页，小游戏，app等等，这些都是得益于前端开发的技术发展。而HTML正是完成这些的基础这里的编译器，我选择功能强大visual studio。学习HTML前，需要了解三个问题：什么是网页？什么是HTML ？网页怎么形成？
复制链接

扫一扫