html语言培训,HTML5培训技术分享：HTML简介及常用标签（上）

「爱情、让人受尽委屈。」 2022-10-05 12:47 145阅读 0赞

原标题：HTML5培训技术分享：HTML简介及常用标签(上)

我们先来看一下案例：

![90e7cd4fcff217bce3fb12e3e899493c.png][]

![787aa41fe084aa9a33c20566324f219e.png][]

在浏览器中输入网址可以看到需要浏览的网页，那这个网页是怎么生成的呢？那我们先了解一下什么是web(互联网总称):Web：web(World Wide Web)即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。

Web又分为Web前端和Web后端。

什么又是Web前端和Web后端呢？前端：就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。后端：更多的是与数据库进行交互以处理相应的。我们这里着重介绍web前端相关的知识点。

web前端分为网页设计师、web前端开发工程师。

网页设计师是对网页的架构、色彩负责；网站得做的漂亮，客户满意。主要需要有美术功底，会photoshop等。

web前端开发工程师是负责交互设计的，需要和后台程序猿进行交互设计的配合。需要掌握的有脚本技术java、HTML+CSS现下最流行的页面搭建技术，ajax和jquery等。

我们此阶段就是web前端开发工程师。

大家都上过网，都浏览过网页，那什么是网站，什么又是网页，网站或者网页是怎么形成的呢？

网站是用于展示相关内容的网页的集合。

网页是网站中的任何一页面，通常文件扩展名为html、或htm，那我们要实现一个网页首先需要学习哪些技术呢？那就是HTML，其次是CSS，还有还java等一些相关的技术。

![eaa00803c8c239bc542d94ffe90d46df.png][]

![75b035287e61346dd8767d5c85c5a613.png][]

![f58116ec7eeef27ce33692f4975d317a.png][]

![dc7301e6e0211274e67fb6e947defc23.png][]

我们了解了网站从无到有的过程，总之就是设计要给我们一个设计好的效果，我们需要用相关技术把它生成网页。那我们来学习一下如何生成吧。生成网页要从以下几方面入手学习。

√什么是HTML

√HTML的发展史

√HTML的特点

√HTML的基本组成单位

√HTML的基本结构

√HTML的常用标签

√HTML4.0及XHMTL1.0及HTML5的基本规范

√HTML4.0及HTML5.0的区别

√ Photoshop的基本使用

一、什么是HTML

HTML(Hyper Text Mark-up Language)即超文本标记语言或超文本链接标示语言，是目前网络上应用最广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。也就是说文字、图片、表格、音视频都被看成是文本，这些部分都是用HTML的标签生成的。

二、HTML的发展史

![e8d6f4fc2064b1bdc620895b2d711864.png][]

三、HTML的特点

1.简易性

2.可扩展性

3.平台无关

四、HTML的基本组成单位

HTML的基本组成单位-----标签。那什么是标签，标签有那些特点呢？我们一一介绍一下。

标签：“标签”是一些符号，用来区分文档中的不同部分。

标签的分类

–单标签

–双标签

标签的基本写法

单标签：某些标签只需单独使用就能完整地表达意思，控制网页效果，这类标签的语法是：

双标签：标签成对使用，由一个开始标签和一个结束标签构成。开始标签告诉Web浏览器从此处开始执行该标签所代表的功能，而结束标签告诉Web浏览器在这里结束该功能，结束标签的形式是在开始标签前加上一个斜杠。语法：

标签名>

标签属性

在单标签和双标签的开始标签里，还可以包含一些属性，以达到个性化的效果。

内容标签>

标签的组成

标签和标签属性及标签内容组成。

五、HTML的基本结构

了解了以上的知识我们开学习HTML吧。应该那里写HTML呢？在那里运行呢？

HTML的编辑工具:

![ddde1dfefeeb0dd033e65efd0acb2373.png][]

HTML的运行环境：

![655ba89c3de1ca8938cc5d1362150252.png][]

![95a33ff81068f438c637ba2fead7c0d7.png][]

我们可以用这么多的浏览器可以浏览页面，每个浏览器对HTML代码的解析是会有差异的地方的，那我们在写代码的时候要兼容五大主流浏览器(IE、Chrome、FF、Safari、Opera)。看看这些浏览器的市场占有率吧!

![6fd7bb09d20bda283f7264551e7b0a93.png][]

好了开始写HTML吧！首先要先写个HTML的基本结构。

网页的标题、其它的说明信息及不需要在浏览器中显示的内容放在head这对标签中。

在浏览器中需要显示的内容放在body这对标签中。

另外我们在真正写网页时除了以上的标签之外，我们还需要添加其它的标签，比如文档声明，中文编码声明等，为什么加这些呢？因为我们大家都知道浏览器特别多对吧。浏览器对HTML的代码解析不一样，不加文档声明，不同的浏览器会按自己的标准去解析HTML代码！所以我们在HTML最开始的位置加这句话,每个浏览器都会按着符合标准的HTML代码去解析，说到标准，我们还要知道HTML是应该遵循谁的标准，HTML要遵循W3C标准，那W3C标准又是什么呢？

W3C标准：万维网联盟创建于1994年。到目前为止，W3C已发布了200多项影响深远的Web技术标准及实施指南，(W3C)标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构(Structure)、表现(Presentation)和行为(Behavior)。

对应的标准也分三方面：结构化标准语言主要包括和，表现标准语言主要包括CSS，行为标准主要包括对象模型(如W3C DOM)、ECMA等。这些标准大部分由W3C起草和发布。

另外加中文编码声明，是为了浏览器解析中文时以简体中文形式显示。

那中文编码有那些呢？有UTF-8(用在网页上可以统一页面显示中文简体繁体及其它语言)、GB2312(信息交换用汉字编码字符集)等。完整的HTM基本结构如下：

责任编辑：

[90e7cd4fcff217bce3fb12e3e899493c.png]: /images/20221005/0732d7e6806a4910986c015f76d7b349.png
[787aa41fe084aa9a33c20566324f219e.png]: /images/20221005/31908d7cee594aec8c283108127708f6.png
[eaa00803c8c239bc542d94ffe90d46df.png]: /images/20221005/1e54fdf5ee40481b95d04daefc2650ce.png
[75b035287e61346dd8767d5c85c5a613.png]: /images/20221005/bf7672d577414f08a512aa4a86457226.png
[f58116ec7eeef27ce33692f4975d317a.png]: /images/20221005/2e8fff0ab20d458f8b7264c00345a144.png
[dc7301e6e0211274e67fb6e947defc23.png]: /images/20221005/14c49c4a48be4b9f84ce2b8dd09d2bf8.png
[e8d6f4fc2064b1bdc620895b2d711864.png]: /images/20221005/f96c10429bb34194bc1abed840085294.png
[ddde1dfefeeb0dd033e65efd0acb2373.png]: /images/20221005/d82d6f0a1d844f12ac04d95a1debe483.png
[655ba89c3de1ca8938cc5d1362150252.png]: /images/20221005/e66ffc2642f84c7381e4ec72a7926e6c.png
[95a33ff81068f438c637ba2fead7c0d7.png]: /images/20221005/08a244b09347472aadf31bee5fd36dfe.png
[6fd7bb09d20bda283f7264551e7b0a93.png]: /images/20221005/e36ab76e0caf42509a732ab9799b9112.png