HTML基础

最新推荐文章于 2024-07-21 17:58:14 发布

GodSinCat

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量673

点赞数

分类专栏： WEB基础文章标签： web服务器 html WEB简介 HTML基础 http协议 web

本文链接：https://blog.csdn.net/Jian_Sir/article/details/46301361

版权

WEB基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. HTML 基础语法

1.1. HTML 概述

1.1.1. Web 的工作原理

主浏览器（客户端）：火狐、IE、谷歌等

客户端的技术（HTML、CSS、JavaScript）最大的问题在于：浏览器的兼容性

Web是基于Internet的一个多媒体信息服务系统，它基于B/S（Browser/Server）模式，整个系统由Web服务器、浏览器（Browser）和通信协议组成。Web服务器上存储文档文件，而浏览器通过特定的通信协议（HTTP协议）与服务器实现交互，从而实现浏览文档的目的。

在Web服务器上，主要以网页文档的形式来存储以及发布多媒体信息。为了使各种不同类型的 Web 服务器都能正确的识别和执行网页文档，这些文件要遵从一个严格的标准，这个标准就是超文本标识语言(HTML：HyperText Markup Language)。

Web中的信息（以超文本的形式）是通过一种一问一答的方式进行交互的，即网络浏览器作为客户端提出访问某个网页的请求，Web服务器作为服务端做出应答并把这个网页发送给浏览器。如图-1所示。

图-1

从一次点击（“click”）到浏览器获得一张网页的过程如下：

1. 浏览器用URL查询DNS，DNS返回IP地址；

2. 浏览器用这个IP地址建立与服务器的连接；

3. 浏览器通过该连接向服务器发送一个HTTP请求；

4. 基于该请求的内容，服务器找到相应的文件，并根据文件的扩展名，形成一个MIME类型的HTTP回答消息，发送给浏览器，关闭本次连接；

5. 根据消息头，浏览器按某种方式显示该文件内容或者执行其他命令。

1.1.2. Web 的相关技术

传统的Web被认为是“静态”的，因为，用户浏览的页面完全由设计者决定，用户只能浏览而没有交互。因此，我们需要“动态”Web。

动态Web是一些技术的总称，最初用来代表页面常见的动态效果，后来，则需要能够执行服务器端程序以及和数据库交互的技术。因此，动态Web通常分为两种：

1. 能够动态地安排Web页面元素的显示方式；

2. 具有动态交互性的 Web 页面。

能够动态地安排Web页面元素的显示方式，通常使用客户端技术实现；而实现页的动态交互性，则通常使用服务器端技术实现。

动态Web的客户端技术，常用于实现页面的一些不需要和服务器发生交互的动态效果，如：动态控制网页中的内容，以实现一些动态效果（比如让文字走动）；响应用户鼠标和键盘消息等。实现这些动态效果的常用技术有脚本语言和可下载组件。它们运行于客户端，由浏览器来解释运行。脚本语言中比较通用的是JavaScript和VBScript。

服务器端技术提供了一种服务器端脚本运行环境，可以和数据库进行交互。服务器端技术大多提供了数据库访问的能力，因为 Web上的数据大多是保存在数据库中的。利用服务器端技术很容易构造一个Web服务器和数据库之间的业务中间层，大大提高了Web的应用范围。目前，主要的服务器端技术有ASP.NET、 PHP和 JSP。

1.1.3. 什么是 HTML

用 HTML 编写的文档我们往往称之为超文本文档，所以， Web 就是一个超文本文件的集合。超文本文件是 Web 的基本组成单元，也称为网页或 HTML 文档、Web 页等，通常是以 .html 或 .htm 为后缀的文件，Web 页之间通过超文本中的超级链接组织在一起。

HTML（HyperText Markup Language，超文本标记语言）是编写Web页面的语言。HTML语言使用带有尖括号的“标记”将网页中的内容逐一标识出来，然后在用户端使用特殊的软件（浏览器）对这些内容进行翻译并按照标识的要求显示出来。它是一个扩展性很强的语言，可以嵌套用脚本语言编写的程序段，如：VBScript，JavaScript等。

因为网页文件本身是一种文本文件，通过在文本文件中添加标记符，以告诉浏览器如何显示其中的内容（如：文档的结构、文字的位置，画面的安排，图片的显示等）。浏览器得到网页文件后，则按顺序阅读网页文件，并一一解释那些标记中的内容，从而展现丰富的页面。比如：

1. <img src="happy.jpg" width="300" />

这就是一段纯文本，但是包含特殊的标记 <img> ，这个标记只有交给专门的浏览器软件解释，才能显示出特定的页面效果（会显示一个宽度为300的图片）。

由此可见，网页的本质就是纯文本的 HTML。但是仅仅使用HTML只能创造出比较普通的页面，通过结合使用其他的Web技术（如：CSS、脚本语言、服务器端技术、组件等），可以创造出功能强大的网页。

其中，CSS 用于为页面添加各种样式效果，而脚本语言可以为页面添加常见的页面交互，服务器端技术用于实现和服务器端数据的交互。因而，HTML、CSS 和脚本语言是Web编程的基础。

1.1.4. Web 浏览器

因为Web文档是包含特定标记的文本，所以需要特定的软件来翻译解释这些标记，以显示为页面，这种特定的Web客户软件，我们通常称为浏览器。它主要用于连接Web服务器、解释执行由HTML 编写的文档，并将执行结果显示在用户的屏幕上。

一个软件能够作为浏览器软件使用，必须包含如下主要功能：

· 代理访问者提交请求

· 作为HTML解释器和内嵌脚本程序执行器

· 用图形化的方式显示HTML文档

目前比较常见的Web浏览器产品有： Mozilla的Firefox、 Microsoft公司的IE（Internet Explorer）、谷歌公司（Google）的 Chrome 、苹果公司（Apple）的Safari 、Netscape通信公司的Navigator 、SUN公司的Hot Java等。

但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

1.2. HTML 基础语法

1.2.1. 标记

HTML用于描述功能的符号称为“标记”，比如<img>、<body>等。标记在使用时必须使用尖括号 <> 括起来，有些标记还必须成对出现。

如果一段文本并没有使用任何标记括起来，则在浏览器显示时会使用默认的样式设置。但是如果将这些文本用某些标记括起来，再使用浏览器显示，则会根据标记的使用显示出特定的效果。例如，如果书写如下代码：

1. Some text here.

2. <h1>Some text here.</h1>

上述代码在浏览器种的显示效果如图－2所示。

图－2

由此可见，两行文本只所以呈现出不同的显示效果，原因就在于标记的使用。因此，学习HTML其实就是在学习各种标记的使用。

HTML的标记有两种表达方式，如下所示：

1、封闭类型标记（双标记）。由开始标记和结束标记组成，必须成对使用，开始和结束标记中间可以包含内容。开始标记告诉浏览器从此处开始执行某标记所特有的功能，而结束标记表示功能的结束，在标记前加一个正斜杠（/）表示。语法为：

1. <标记>内容</标记>

2、非封闭类型标记（单标记或者空标记）：只需要使用开始标记即可，语法为：

1. <标记 />

绝大多数的标记都是封闭类型的标记，而最常用的单标记是<br />，它表示换行。

对于非封闭类型的标记，有两种书写方式：

1. <br> 或者 <br />

在旧的规范中，可以使用 <br> 或者 <br />；而在新的规范中，要求必须使用 <br />。因此，为了保证兼容性，建议大家使用新规范，即使用 <br />，而不是 <br>。

1.2.2. 元素和属性

每一对尖括号包围的部分，我们称为元素。比如由 <body></body> 包围的部分就叫做body元素。元素就像是小标签，用于标识网页文档的不同部分。所以我们经常在分析一个网页文档时会说：这是一个一号标题（h1）、这是一个段落（P）；在修改页面的时候会说：添加一个段落元素，或者P元素。元素可以包含文本内容和其他元素，也可以是空的，比如前面所述的空标记。

元素可以设置书写，语法为：

1. <标记属性1=“值1” 属性2=“值2”>内容</标记>

或者

1. <标记属性1=“值1” 属性2=“值2” />

属性位于开始标记里，属性与属性之间、属性与标记之间用空格隔开。属性和属性的值之间用等号连接。属性必须包含在引号中。属性的定义没有先后顺序的严格区分，如果不定义属性，则使用默认设置；如果属性重复定义，则使用最后一次定义的值。

对于网页文档，我们往往会如图－3所示的来称呼它们：

图－3

一个元素可以包含另一个元素，我们称为元素嵌套，也称为父元素和子元素。外层的元素称为父元素，被包含的元素称为子元素。图－6中， body 元素是 p 元素的父元素，而 p 元素是 body 元素的子元素。

需要注意的是，如果元素中包含其他元素，则每个元素必须正确的嵌套，如下所示：

1. <div>a<p>b</p>c</div> 正确

2. <div>a<p>b</div>c</p> 错误

1.2.3. 通用属性

每个元素都有自己所特有的属性，但是有些属性是绝大多数标签都支持的属性，我们称为标准属性或者通用属性。主要有：

id 属性：定义元素的唯一标识；

title 属性：定义提示标题信息；

class 属性：定义样式类；

style 属性：定义内联样式。

1.2.4. 注释

可以在 HTML文档中添加注释，这些注释只在编辑文档情况下可见，在浏览器展示页面时并不会显示。为代码添加适当的注释是一种良好的编码习惯，特别是在复杂的文档中，适当的注释可以向查看代码的人指示文档的各个部分以及其他注意事项，并帮助理解和维护代码。

在(X)HTML文档中添加注释的语法如下：

1.

“”之间的任何内容都不会显示在浏览器中，但是可以在文档的源代码中看到。可以将注释放置在任何标签之间，甚至可以注释整段代码，但是注释不可以嵌套在其他注释中。例如：

1. <body>

2.

3. <h2> Welcome to my florist website!</h2>

4.

5. </body>

注释尤其适合描述文档的整体结构，以及使用某个标记的原因和希望实现的效果。

1.3. 文档结构

1.3.1. HTML 的文档结构

编写网页文档时，首先需要在文档的开始添加版本声明。除了版本信息，剩下的就是整个页面的内容，而整个页面需要包含在开始标记 <html> 和结束标记 </html> 之间。在 <html> 元素中，包含两个主要的部分，文件头部分（<head>元素）和主体部分（<body>元素）。整体结构如图－4所示：

图－4

1.3.2. 文档类型声明

HTML语言已经存在太久了，目前必然会有一些不同版本的文档存在。为了能够让浏览器清楚你的文档的版本、类型和风格，需要在文档的起始用DOCTYPE声明指定当前文档的版本和风格。目前有三种版本：过渡型、严格型和框架型。

严格型的特点是它禁止使用那些废弃的标记，即严格遵守XHTML1.0的标准，其版本声明为：严格型（strict）

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

在尝试将结构和格式化分开的过程中，W3C标出了一些最终将从规范中删除的元素，而过渡型和框架型都认为废弃标记是有效的。该版本仍允许开发人员使用HTML4中不赞成使用的标记。其版本声明为：过渡性（transitional）

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

框架版主要用于创建使用框架技术的Web页面，其声明如下：框架型（frameset）

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

介绍完三种类型的版本信息后，如何选择就成为了一个问题。事实上，这个问题依然由实际问题来决定。如果你坚持不再使用废弃的标记，则建议选择严格型；反之，如果你依然在使用废弃的标记，则在过渡型和框架型之间选择；如果你的页面没有使用框架则选择过渡型；如果使用了框架技术，则使用框架型。事实上，目前的很多页面都是使用过渡型。

1.3.3. <head> 元素

<head> 元素是所有其他头元素的容器，它紧跟在起始标签 <html> 之后。在头部分中，我们可以为页面定义与当前页面相关的全局信息，比如定义页面的标题，为搜索引擎提供关于页面的信息，添加样式表或者编写脚本等。

每个 <head> 元素应当包含一个 <title> 元素以指定文档的标题，还可以不限顺序的包含一些常用的元素，比如 <meta>、<script>、<link>、<style> 等。

1.3.4. 文档头部内容－-<title>

创建每个页面时，应该给页面指定一个标题。标题内容位于 <title> 元素中，代码如下：

1. <title>我的第一个HTML页面</title>

在大多数浏览器上，页面标题出现在窗口的标题栏上。

注意：标题不能包含格式化信息、图像或者链接，即其中只能包含文本而不能包含其他任何元素。

1.3.5. 文档头部内容 --<meta>

在页面的头部分中，使用 <meta> 元素声明字符编码，代码如下：

1. <meta http-equiv="content-type" content="text/html;charset=utf-8" />

上述代码用于设置页面的编码格式，这样，在具有不同的默认编码的系统上，浏览器就可以根据编码的声明正确的选择，从而更容易正确查看页面中的字符。

还可以使用 <meta> 元素定义页面的刷新频率，代码：

1. <meta http-equiv="refresh" content="10" />

上述代码用于设置页面每隔 10 秒则自动刷新，常用于浏览论坛等需要定时刷新页面的网页。

GodSinCat

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础

1. HTML 基础语法1.1. HTML 概述1.1.1. Web 的工作原理主浏览器（客户端）：火狐、IE、谷歌等客户端的技术（HTML、CSS、JavaScript）最大的问题在于：浏览器的兼容性 Web是基于Internet的一个多媒体信息服务系统，它基于B/S（Browser/Server）模式，整个系统由Web服务器、浏览器（Browser）和通信协议组成。
复制链接

扫一扫