什么是网页的源代码？网站源代码的种类

么是网页的源代码？

网站源码，也称源代码、源程序，是指未编译的文本代码或一个网站的全部源码文件，是一系列人类可读的计算机语言指令。通过浏览器或服务器翻译后用户最终看到的效果。所有的内容必须通过一些符号来表示，通过这些符号来表示如图像、表格、链接等产生的内容就是网页代码了，每个网页都有它的代码。

网站源代码的种类

一种是动态源码如ASP，PHP，JSP，.NET等，另一种是静态源码如HTML等。网页源代码就是指网页的html代码。

么是 web

web 就是 world wide web 的缩写，称之为全球广域网，俗称 WWW。对于用户来说它其实就是由多个网页组成在一起而形成的一种服务（Web）.

我们可以将 web 理解为就是当前的一种互联网。对于我们来说更多的就是网站服务。网站我们可以认是由多个网页组合在一起而形成一种服务。

而 web 前端就是来负责一个网站当中前台网页里的内容。网页是由前端工程师使用 HTML 语言编写而成的一种文件，它里面会包含文字、图片、超链接、音频、视频等等这些内容。

注：超文本标记语言（Hyper Text Markup Language , HTML）就是用来描述网页内容的一种计算机语言。

什么是 HTML

HTML 超文本标记语言（Hyper Text Markup Language）就是用来描述网页的一种计算机语言。

HTML 发展

在互联网最初的时候是没有 HTML 的，我们只能通过网络传输最简单的文字内容。随着用户的要求越来越多，同时也是我们的技术的不断发展，就出了一种可以表达文字内容之外的语言 HTML1.0。后来又慢慢发展到了现在的 HTML5，也就是我们现在常说的 H5。

HTML 查看工具

在测试过程中，我们有时候需要通过工具去查看对应的 HTML 代码。在这里我们可以用浏览器自带的开发者工具，打开这个工具的快捷键是 F12。

开发者工具是一个相当强大的工具。可以查看修改 HTML，还可以调试 js，可以修改 css，还可以查看网络数据，并且还能进行性能测试。非常的全能。对于咱们 web 测试来说，是一个必须要掌握的工具。

要查看 HTML 源码，我们只需要进入开发者工具的 elements 界面。在这里可以对 web 页面上的元素进行定位，并且查看整个 web 页面的 HTML 源码。

HTML 基本结构

基本结构

网页是我们通过 HTML 语言来书写。用 HTML 语言去书写网页有一些结构是默认必须存在的，这个结构我们就叫做网页（HTML）骨架。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

HTML 基本标签

常见标签

todo：加入 demo（done）

<!DOCTYPE html>：向浏览器声明当前的文档是 HTML 类型
<html> 与 </html> 之间的文本描述网页，<html>是网页当中最大的一个标签，称之为根标签
<head> 与 </head> 描述网页头部，里面的内容是写给浏览器看的
<meta charset="UTF-8"> 表示在设置当前网页的显示编码
<title> 与 </title> 之间文本为网页的标题，里面的内容会在浏览器的标签页上显示
<body> 与 </body> 之间的文本是网页主体，里面的内容会显示在浏览器的空白区域内
<div> 与 </div> 之间定义网页中的一个分隔区块或者一个区域部分
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>网页标题</title>
  </head>
  <body>
    <div>
      <h1>我的第一个网页</h1>
      <p>网页中的内容</p>
    </div>
  </body>
</html>

标签的属性

todo：加入 demo(done)

HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。属性总是以名称/值对的形式出现，比如：name="value"。

属性的基本格式为：<标签名属性1="属性值1" 属性2="属性值2"></标签名>

每个标签都可以拥有多个属性。属性必须写在开始标签中，位于标签名的后面。属性之间不区分顺序。标签名与属性、属性与属性之间使用空格隔开。任何属性都有默认值，省略该属性表示使用默认值。

在 HTML 里，属性也有很多中，比如首先有全局属性，全局属性是所有的标签都可以使用的。然后还有事件属性，事件大家可以理解为不同的操作。在不同的操作中，也有特殊的属性可以定义。最后还有各个标签的一些独有的属性。

比如常见的全局属性有:

class：规定元素的类名
id：规定元素的唯一 id

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>网页标题</title>
  </head>
  <body>
    <div id="first" class="content">网页中的内容</div>
  </body>
</html>

搜索微信公众号：TestingStudio霍格沃兹的干货都很硬核

tml是hypertext markup language的缩写，即超文本标记语言。html是一种简单的标记语言，用于创建超文本文档，可以从一个平台移植到另一个平台，通常用于创建网页。html文件是带有格式标识符和超文本链接的内嵌代码的ascii 文本文件。

HTML文本是由HTML命令组成的描述性文本，可以描述文本、图形、动画、声音、表格、链接等等。HTML页面结构由头部和主体两部分组成。头部描述浏览器所需的信息，主体包含所要说明的具体内容。

html是制作网页的基础。我们在网站建设中谈论的静态网页是基于HTML的网页。早期的网页直接用HTML代码编写，但现在有许多智能网页制作软件（常用的如frontpage，dream weaver等）通常不需要手动编写代码，而是由这些软件自动生成。虽然不需要自己写，但是理解HTML代码仍然是非常重要的。了解HTML是什么？它是学习网站建设的重要技术基础知识。

下面我们自己可以动手创建一个非常简单的网页，首先我们让计算机显示扩展，方法是打开我的电脑，然后现在栏目工具》文件夹选项》查看》高级设置中找到《隐藏已知文件类型的扩展名》将其不勾选，并单击“应用”以确认设置。然后在桌面上创建一个新的TXT文件，将此文件命名为“xxx.html”（扩展名也可以是htm），这样你就可以用浏览器打开它，你就会看到自己制作的最简单的页面。

进一步的简单理解什么是html

html是一种超文本标记语言，即html（hypertext markup language），是一种用来描述网络文档的标记语言。在页面的开头和结尾使用<html></html>标签。

总结：

1），HTML是我们常说的静态网页；

2），HTML是以Html或htm为扩展名的文件；

3），HTML某些标签代码规则，让内容在浏览器中呈现出我们所需要的样式；

4），HTML可以使用记事本创建，并以.html或.htm为扩展名保存。

html文件中的代码由具有一定的规则规律标签与内容组成。以指定的HTML结构和内容形成完整的html文件。我们可以直接使用浏览器来打开，查看网页效果。

如果您想在浏览器中显示各式各样的网页，我们就需要html文件（HTML基本结构+内容+标签）和css文件（css样式）来实现我们需要的漂亮网页。

在线咨询

上一篇：开发者工具怎么导出当前HTML
下一篇：Vue中轻松使模态框支持类窗口操作的增强组件

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商