怎么用记事本写网页

本文介绍了HTML语言的基础知识,包括HTML文档的基本结构、成对标记与非成对标记的区别及使用方法,同时还详细阐述了<BODY>标记的重要参数及其设置方法。

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

超文本标记语言HTML是当前网页设计领域最基础的应用语言,使用HTML语言所编写超文本文件(或称HTML文档)成为万维网上最普遍的网页形式之一。HTML语言来源于著名的标准通用标记语言SGMLStandard Generalized MarkupLanguage),由万维网之父TimBerners-Lee1990年创建一个基于超文本的分布式应用系统时提出。作为SGML语言的子集,HTML语言摒弃了SGML语言过于复杂、不利于信息传递和解析的不足,选用最基本的元素——标记(Tags)进行超文本描述,达到了简化、易懂的目的。

本章主要介绍HTML语言的基本结构和基本标记。

2.1 HTML概述

2.1.1基本形式

HTML文档主要是由将要显示在网页上的文档内容和一系列标记所组成。当用户浏览HTML文档时,浏览器就会把这些标记解释成它应有的含义,并按照一定的格式,将这些被标识的文档内容显示在浏览器窗口中。

HTML文档中有些标记必须以“<标记>”开始,而以“</标记>”结束,这些标记称之为“成对标记”;有些标记并不需要确定作用域,称之为“非成对标记”。其基本格式如下:

一、成对标记

<标记参数1 参数2 参数3……>内容</标记>

其中,标记与参数、参数与参数之间使用空格分隔,参数可省略。

例如,使用“斜体”标记,<I>上海大学</I>。通过浏览器查看时,“上海大学”是以斜体的形式显示的。

二、非成对标记

<标记参数1 参数2 参数3……>内容

例如,使用“水平分隔”标记,<HR>。通过浏览器查看时,会显示一条水平分隔线。

注意:对于HTML标记,大、小写或混写均可。例如:<HTML>、<html>或<HtmL>,其结果都是一样的。同时如果不特别注明,浏览器会忽略HTML文档中的空格(多个空格认作一个空格)、制表符和回车等符号。

2.1.2 基本结构

一个标准的HTML文档具有如下的结构:


一、<HTML>标记

HTML>标记是成对标记。一个完整的HTML文档是以<HTML>标记开始,以</HTML>标记结束的,用来告知浏览器该成对标记之间的内容是使用HTML格式编写的,浏览器会使用HTML规范来解释和显示其中的内容。

二、<HEAD>标记

HEAD>标记是成对标记。<HEAD>和</HEAD>标记之间的内容是HTML文档的头部分,用来规定该文档的标题(出现在Web浏览器窗口的标题栏中)和文档的一些属性。在<HEAD>标记之间可引用<META>、<TITLE>等标记。

三、<META>标记

META>标记是非成对标记,它位于<HEAD>标记之间,用以记录当前页面的一些重要信息,例如网页所依据的字符集、开发者、开发语言版本、网页关键字等。

四、<TITLE>标记

TITLE>标记是成对标记,用以规定HTML文档的标题。位于该成对标记之间的内容将显示在Web浏览器窗口的标题栏中。

五、<BODY>标记

BODY>标记是成对标记,该成对标记之间的内容将显示在Web浏览器窗口的用户区域内,它是HTML文档的主体部分。

BODY>标记的重要参数:

1BGCOLOR:设置HTML文档的背景色。

2TEXT:设置HTML文档中文字的颜色。

3LINK:设置HTML文档中未被访问过的链接所显示的颜色。

4ALINK:设置HTML文档中链接被激活时链接所显示的颜色。

5VLINK:设置HTML文档中被访问过的链接所显示的颜色。

6BACKGROUND:设置HTML文档的背景图片。

7BGSOUND:设置HTML文档的背景音乐。

其中,在设置颜色时,可以使用颜色的六位十六进制代码(其中,每两位的取值范围均是00~FF,代表ASCII码的0~255;前两位设置红色的深浅,中间两位设置绿色的深浅,最后两位设置蓝色的深浅),也可以直接使用该颜色对应的英文单词。

例如,若需指定HTML文档的背景颜色为“绿色”,文字颜色为“红色”,则直接使用对应英文单词的具体设置为:

BODY BGCOLOR="green" TEXT="red">内容</BODY

而使用六位十六进制代码的具体设置为:

BODY BGCOLOR="#008000" TEXT="#ff0000">内容</BODY

为了便于记忆,建议用户直接使用相应的英文单词指定颜色,常用颜色见表2-1-1

2-1-1 常用颜色表

名称

颜色

十六进制代码

名称

颜色

十六进制代码

Black

黑色

#000000

Red

红色

#ff0000

Lime

黄绿色

#00ff00

Maroon

茶色

#800000

Gray

灰色

#808080

Silver

银色

#c0c0c0

Navy

海蓝色

#000080

Olive

黄褐色

#808000

Purple

紫色

#800080

Yellow

黄色

#ffff00

Aqua

水蓝色

#00ffff

Blue

蓝色

#0000ff

Green

绿色

#008000

Fuchsia

紫红色

#ff00ff

White

白色

#ffffff

Teal

蓝绿色

#008080

2.1.3 注释与特殊字符

为了便于阅读HTML文档,用户可以在文档中适当加入一些注释。放在注释标记中的文本,浏览器是不作处理的。

注释标记格式:<!——注释内容——>

超文本标记语言HTML是当前网页设计领域最基础的应用语言,使用HTML语言所编写超文本文件(或称HTML文档)成为万维网上最普遍的网页形式之一。HTML语言来源于著名的标准通用标记语言SGMLStandard Generalized MarkupLanguage),由万维网之父TimBerners-Lee1990年创建一个基于超文本的分布式应用系统时提出。作为SGML语言的子集,HTML语言摒弃了SGML语言过于复杂、不利于信息传递和解析的不足,选用最基本的元素——标记(Tags)进行超文本描述,达到了简化、易懂的目的。

本章主要介绍HTML语言的基本结构和基本标记。

2.1 HTML概述

2.1.1基本形式

HTML文档主要是由将要显示在网页上的文档内容和一系列标记所组成。当用户浏览HTML文档时,浏览器就会把这些标记解释成它应有的含义,并按照一定的格式,将这些被标识的文档内容显示在浏览器窗口中。

HTML文档中有些标记必须以“<标记>”开始,而以“</标记>”结束,这些标记称之为“成对标记”;有些标记并不需要确定作用域,称之为“非成对标记”。其基本格式如下:

一、成对标记

<标记参数1 参数2 参数3……>内容</标记>

其中,标记与参数、参数与参数之间使用空格分隔,参数可省略。

例如,使用“斜体”标记,<I>上海大学</I>。通过浏览器查看时,“上海大学”是以斜体的形式显示的。

二、非成对标记

<标记参数1 参数2 参数3……>内容

例如,使用“水平分隔”标记,<HR>。通过浏览器查看时,会显示一条水平分隔线。

注意:对于HTML标记,大、小写或混写均可。例如:<HTML>、<html>或<HtmL>,其结果都是一样的。同时如果不特别注明,浏览器会忽略HTML文档中的空格(多个空格认作一个空格)、制表符和回车等符号。

2.1.2 基本结构

一个标准的HTML文档具有如下的结构:


一、<HTML>标记

HTML>标记是成对标记。一个完整的HTML文档是以<HTML>标记开始,以</HTML>标记结束的,用来告知浏览器该成对标记之间的内容是使用HTML格式编写的,浏览器会使用HTML规范来解释和显示其中的内容。

二、<HEAD>标记

HEAD>标记是成对标记。<HEAD>和</HEAD>标记之间的内容是HTML文档的头部分,用来规定该文档的标题(出现在Web浏览器窗口的标题栏中)和文档的一些属性。在<HEAD>标记之间可引用<META>、<TITLE>等标记。

三、<META>标记

META>标记是非成对标记,它位于<HEAD>标记之间,用以记录当前页面的一些重要信息,例如网页所依据的字符集、开发者、开发语言版本、网页关键字等。

四、<TITLE>标记

TITLE>标记是成对标记,用以规定HTML文档的标题。位于该成对标记之间的内容将显示在Web浏览器窗口的标题栏中。

五、<BODY>标记

BODY>标记是成对标记,该成对标记之间的内容将显示在Web浏览器窗口的用户区域内,它是HTML文档的主体部分。

BODY>标记的重要参数:

1BGCOLOR:设置HTML文档的背景色。

2TEXT:设置HTML文档中文字的颜色。

3LINK:设置HTML文档中未被访问过的链接所显示的颜色。

4ALINK:设置HTML文档中链接被激活时链接所显示的颜色。

5VLINK:设置HTML文档中被访问过的链接所显示的颜色。

6BACKGROUND:设置HTML文档的背景图片。

7BGSOUND:设置HTML文档的背景音乐。

其中,在设置颜色时,可以使用颜色的六位十六进制代码(其中,每两位的取值范围均是00~FF,代表ASCII码的0~255;前两位设置红色的深浅,中间两位设置绿色的深浅,最后两位设置蓝色的深浅),也可以直接使用该颜色对应的英文单词。

例如,若需指定HTML文档的背景颜色为“绿色”,文字颜色为“红色”,则直接使用对应英文单词的具体设置为:

BODY BGCOLOR="green" TEXT="red">内容</BODY

而使用六位十六进制代码的具体设置为:

BODY BGCOLOR="#008000" TEXT="#ff0000">内容</BODY

为了便于记忆,建议用户直接使用相应的英文单词指定颜色,常用颜色见表2-1-1

2-1-1 常用颜色表

名称

颜色

十六进制代码

名称

颜色

十六进制代码

Black

黑色

#000000

Red

红色

#ff0000

Lime

黄绿色

#00ff00

Maroon

茶色

#800000

Gray

灰色

#808080

Silver

银色

#c0c0c0

Navy

海蓝色

#000080

Olive

黄褐色

#808000

Purple

紫色

#800080

Yellow

黄色

#ffff00

Aqua

水蓝色

#00ffff

Blue

蓝色

#0000ff

Green

绿色

#008000

Fuchsia

紫红色

#ff00ff

White

白色

#ffffff

Teal

蓝绿色

#008080

2.1.3 注释与特殊字符

为了便于阅读HTML文档,用户可以在文档中适当加入一些注释。放在注释标记中的文本,浏览器是不作处理的。

注释标记格式:<!——注释内容——>

### 如何使用记事本HTML代码制作浪漫的小网页 要通过记事本创建一个简单而浪漫的网页,可以按照以下方法实现: #### 准备工作 首先需要准备的是一个普通的文本编辑器——记事本。这是Windows系统自带的应用程序,无需额外安装任何软件。 #### HTML基础结构 构建一个基本的HTML页面框架是非常重要的。下面是一个标准的HTML文档模板[^1]: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>浪漫表白</title> <!-- 添加自定义样式 --> <style> body { background-color: pink; text-align: center; font-family: Arial, sans-serif; } h1 { color: red; margin-top: 50px; } p { color: darkblue; font-size: 20px; } </style> </head> <body> <h1>亲爱的 [女神的名字]</h1> <p>[你好,七夕快乐]</p> </body> </html> ``` 在这个例子中,`<style>`部分用于设置网页的颜色、字体和其他视觉效果[^2]。你可以修改背景颜色(`background-color`)、文字颜色(`color`)以及字体大小(`font-size`)来达到更个性化的展示效果。 #### 编辑并保存文件 将上述代码复制到记事本里,并替换掉方括号中的占位符为你想要的内容。完成后,点击菜单栏上的“文件”->“另存为...”。在弹出窗口中选择合适的存储位置,在“编码”下拉框中选“UTF-8”,最后重要的一点是更改默认扩展名为`.html`而不是`.txt`[^2]。例如命名为 `romantic.html`. #### 查看成果 保存之后,返回刚才指定的目录找到刚刚建立好的 `.html` 文件,双击它即可利用浏览器打开查看最终的效果。 --- #### 进阶技巧 如果希望进一步提升网站互动性和美观度,则可考虑引入JavaScript脚本或者链接外部CSS文件来进行动态特效处理和更加复杂的布局设计。 ```javascript // JavaScript示例:定时显示消息 window.onload = function() { setTimeout(function(){ alert(&#39;我爱你&#39;); }, 3000); // 延迟三秒执行alert对话框 } ``` 此段JS会在加载完页面后的三秒钟弹出一条告白信息给访问者。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值