课程简介、网页简史、HTML简介、编写第一个网页、自结束标签和注释、标签中的属性、文档声明、关于进制、字符编码、文档的使用——HTML

嘻嘻哈哈二郎神

已于 2023-02-09 13:46:38 修改

阅读量292

点赞数 1

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

于 2022-12-11 19:59:34 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_70320000/article/details/128275686

版权

HTML 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了网页开发的基础概念，包括客户端与服务器的区别、网页的特点及发展历程，并详细讲解了HTML的基本用法，适合初学者快速掌握网页制作的基础知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、课程简介

1.客户端与服务器

通常情况下，现在的软件一般由两个部分组成:

- 客户端：用户通过客户端来使用软件。

- 服务器：服务器负责在远程处理业务逻辑。

服务器开发的语言：Java、PHP、C#、Python、Node.js ……

2.客户端的形式

- 文字客户端

古老的方式，通过命令行来使用软件

- 图形化界面

通过点击拖动等来使用软件。windows中、macOS中、Android、iOS中的大部分应用。（C/S架构）client / server

- 网页

通过访问网页来使用软件。所有网站都属于这个范畴（B/S架构）Browser / Server

3.网页的特点

相较于传统的图形化界面，网页具有如下一些有点：

- 不需要安装

- 无需更新

- 跨平台

网页中使用的语言：HTML、CSS、JavaScript

二、网页简史

1.历史

蒂姆.伯纳斯-李爵士万维网的发明人

1991年8月6日，世界上第一个服务器和第一个网站在欧洲核子研究中心上线。

2.浏览器和网页

有了浏览器我们只需要一个网址便可以访问任何网站

而浏览器中所显示的内容正是我们所说的网页

网页原本的样子：

浏览器渲染后的样子：

前端工程师负责编写网页的源代码

浏览器负责将网页渲染成我们想要的样子。

3.浏览器的问题

市面上存在很多不同的浏览器。

在万维网的初期，网页编写并没有标准，于是会出现在不同浏览器上渲染后结果不同。

4.W3C的建立

伯纳斯李1994年建立万维网联盟（W3C）

W3C的出现为了制定网页开发的标准，以使同一个网页在不同浏览器中有相同的效果。

所以，我们编写网页都需要遵守W3C的规范！

5.网页的结构

根据W3C标准，一个网页主要由三部分组成：结构、表现还有行为。

结构： HTML用于描述页面的结构

表现： CSS用于控制页面中元素的样式

行为： JavaScript 用于响应用户操作。

三、HTML简介

HTML

HTML(Hypertext Markup Language) 超文本标记语言

它负责网页的三个要素中的结构

HTML使用标签的形式来标识网页中的不同组成部分

所谓超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面

四、编写你的第一个网页

默认扩展名是隐藏起来的，先把扩展名打开：

win10: 打开一个文件夹 —— 最上面的“查看” —— 文件扩展名处勾选

五、自结束标签和注释

标签一般成对出现，但是也存在一些自结束标签

自结束标签：如

<img>

<img /> //两种写法都可

<input>

HTML的注释：

注释中的内容会被浏览器所忽略，不会在网页中直接显示，但是可以在源码中查看注释，注释用来对代码进行解释说明的。

开发中一定要养成良好的编写注释的习惯，注释要求简单明了。

注释还可以将一些不希望显示的内容隐藏

注释不能嵌套

基本语法概述：

1.HTML标签是由尖括号包围的关键词，如<html>

2.HTML标签通常是成对出现的，例如<html>和</html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个是结束标签。

3.有些特殊的标签必须是单个标签（极少情况），例如<br/>，我们称为单标签。

六、标签中的属性

在标签中（开始标签或者自结束标签）还可以设置属性

属性是一个名值对（x = y）

属性用来设置标签中的内容如何显示

属性和标签名或者其他属性应该使用空格隔开

属性名（值）不能瞎写，应该根据文档中的规定来编写

有些属性有属性值，有些没有，如果有属性值，属性值应该使用引号引起来

<html>
    <head>
        <title></title>
    </head>
    <body>
        <h1>这是我的<font color="red" size="18">第三个</font>网页</h1>
        <!-- font 字体 -->
    </body>
</html>

七、文档声明

迭代

网页的版本

HTML4

XHTML2.0

HTML5

……

文档声明（doctype）

- 文档声明用来告诉浏览器当前网页的版本

- Html5的文档声明 <!doctype html>或<!Doctype HTML>

- 写在第一行，html标签的上面

八、关于进制

十进制 decimal (日常使用)

特点：满10进1

计数： 0 1 2 3 4 5 6 7 8 9 10 11…

单位数字：10个（0-9）

二进制 binary (计算机底层机制)

特点：满2进1

计数： 0 1 10 11 100 101

单位数字：2个（0-1）

扩展：

所有数据在计算机底层都会以二进制的形式保存

可以将内存想象为一个由多个小格子组成的容器，每一个小格子中可以存储一个1或一个0

这一个小格子在内存中被称为1位（bit）

8bit = 1byte（字节）

1024byte =1kb（千字节）

1024kb = 1mb（兆字节）

1024mb = 1gb（吉字节）

1024gb = 1tb（特字节）

1024tb = 1pb

八进制 octal（很少用）

特点：满8进1

计数： 0 1 2 3 4 5 6 7 10 11 12

单位数字：8个（0-7）

十六进制 hexadecimal（一般显示一个二进制数字时，都会转换为十六进制）

特点：满16进1

计数： 0 1 2 3 4 5 6 7 8 9 a b c d e f 10 11 12…1a 1b 1c 1d 1e 1f 20…

单位数字：16个（0-f）

九、字符编码

所有数据在计算机中存储时都是以二进制形式存储的，文字也不例外。

所以一段文字在存储到内存时，都需要转换为二进制编码

当我们读取这段文字时，计算机会将编码转换为字符，供我们阅读

-编码

将字符转换为二进制码的过程称为编码

-解码

将二进制码转换为字符的过程称为解码

- 字符集（charset）

编码和解码所采用的规则称为字符集

- 乱码问题

如果编码和解码所采用的字符集不同就会出现乱码问题

-常见的字符集：

ASCII

ISO8859-1

GB2312

GBK

UTF-8: 在开发时我们使用的字符集都是UTF-8

-可以通过meta标签来设置网页的字符集，避免乱码问题，meta标签写在head标签内

十、文档的使用

标签就是元素，元素就是标签

网页的结构：

<!-- 文档声明 -->
<!DOCTYPE html>
<!-- html根标签（元素） ，网页中的所有内容都要写在根元素的里边-->
<html>
<!-- head是网页的头部，head中的内容不会在网页中直接出现，主要用来帮助浏览器或搜索引擎来解析网页 -->
<head>
    <!-- meta标签用来设置网页的元数据，这里用来设置网页的字符集，避免乱码问题 -->
    <meta charset="UTF-8">
    <!-- title的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容-->
    <title>网页的标题</title>
</head>
<!-- body是html的子元素，表示网页的主体，网页中所有可见内容都应该写在body里 -->
<body>
    <!-- h1网页的一级标题 -->
    <h1>网页的大标题</h1>
</body>
</html>

可以使用离线的文档：zeal软件

打开——tools——available

也可以w3cschool： w3school 在线教程