01_认识网页及HTML

软件开发初学者

于 2022-08-04 16:25:12 发布

阅读量246

点赞数

分类专栏： # HTML 文章标签： html 前端

本文链接：https://blog.csdn.net/u011743790/article/details/126161825

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

相关概念

1. 什么是网页？

摘自百度百科：https://baike.baidu.com/item/%E7%BD%91%E9%A1%B5/99347?fr=aladdin

网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，您的网站就是由网页组成的，如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。

网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一“页”，是超文本标记语言格式（标准通用标记语言的一个应用，文件扩展名为.html或.htm）。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读。

2. 什么是HTML？

摘自百度百科：https://baike.baidu.com/item/HTML/97049?fr=aladdin

HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。

3. 常用浏览器及其内核

统计数据来源：https://tongji.baidu.com/research/site?source=index

在这里插入图片描述

常用浏览器内核

内核	相关浏览器	说明
Trident内核	IE浏览器	IE、猎豹安全、360极速浏览器、百度浏览器
Webkit、Blink内核	Chrome浏览器、Safari浏览器	Blink其实是WebKit的分支
Gecko内核	Firefox浏览器

目前国内一般浏览器都会采用Webkit/Blink内核，如360、UC、QQ、搜狗等。

4. Web标准

4.1 什么是Web标准？

Web 标准也称网页标准，它由一系列标准组成，这些标准大部分由 W3C 负责制订，也有一些标准由其他标准组织制定的，如 ECMA 的 ECMAScript 标准等。

4.2 为什么需要Web标准？

浏览器不同，它们显示页面或者排版就有些差异。

在这里插入图片描述

遵循web标准除了可以让不同的开发人员写出的页面更标准、更统一，方便后期维护和变更。
统一标准的网页更容易被搜索引擎给检索。

4.3 Web标准的构成

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

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

Web标准提出的最佳体验方案：结构、样式、行为相分离。简单来说就是：结构写到HTML文件中，表现写到CSS文件中，行为写到Javascript中。

在这里插入图片描述

HTML语法规范

1. HTML标签

HTML标签是由尖括号包围的关键词，例如：<html></html>。
HTML标签通常是成对出现的，例如<html>和</html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
有些特殊的标签必须是单个标签（极少情况），例如<br/>，我们称为单标签。
双标签之间关系有两种，如下：
- 包含关系：一个标签包含另外一个标签。
```
<html>
    <head></head>
</html>
```
- 并列关系：两个标签是并列存在的。
```
<head></head>
<body></body>
```

2. 网页基本结构

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。HTML页面也称为HTML文档。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
</head>

<body>
    这是网页内容显示区域，我们可以在此编写网页代码
</body>

</html>

在这里插入图片描述

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

在这里插入图片描述

2.1 相关属性解析

声明标签
- 文档类型声明标签，作用就是告诉浏览器使用哪种HTML版本来显示网页。
- 上面示例表示当前页面采取的是HTML5版本来显示网页。
- 它声明位于HTML文档中的最前面位置，处于html标签之前。
- 它不是一个HTML标签，它就是文档类型声明标签。
lang语言
- 用来定义当前文档显示的语言。
- en定义语言为英语。
- zh-CN定义语言为中文。
- 有时候浏览器会根据这个定义来控制是否可需要翻译。
charset字符集
- 字符集（character set）是多个字符的集合。以便计算机能够识别和存储各种文字。
- 在head标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码。
- 常用的值有：GB2312、BIG5、GBK和UTF-8，其中UTF8也被称为万国码，基本包含了全世界所有国家需要用到的字符。
- 网页编码设置是必须要写的，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”。