HTML创作简单网页

article/2025/10/9 7:51:09

        今天一天的学习,了解的html基本的网页制作,可以通过一些简单的命令来制作一个简单的网

页,但是我们要先了解这些知识

什么是HTML?

        HTML 是用来描述网页的一种语言。

        HTML 指的是超文本标记语言: HyperText Markup Language

        HTML 不是一种编程语言,而是一种标记语言

        标记语言是一套标记标签 (markup tag)

        HTML 使用标记标签来描述网页

        HTML 文档包含了HTML 标签文本内容

        HTML文档也叫做 web 页面

HTML 编辑器推荐

可以使用专业的 HTML 编辑器来编辑 HTML,菜鸟教程为大家推荐几款常用的编辑器:

 VS Code

Sublime Text 

notepad++.exe

你可以从以上软件的官网中下载对应的软件,按步骤安装即可。

接下来我们将为大家演示如何使用notepad++.exe 工具来创建 HTML 文件。

HTML简单网页制作

步骤 1: 新建 HTML 文件

        一个简单的网页由一个网页标注声明开始的可以有也可以没有,具体的组成有响应函;响应头;响应体。

        其中的尖括号里的东西要有头有尾,前后对应前面用什么后面用什么在后面记得加上/,如在做

简单网页之前先在桌面上新建一个文本文档然后文件后缀记得改成htm,或者html

        如图

步骤2:打开新建的html

        在 notepad++.exe 安装完成后,选择以 notepad++.exe 打开,进去就会出现一个白板,这个

时候我们输入命令即可

 步骤3:创建网页名称

        在软件里面输入以下命令,注意这里的往下就是这个网页的名称,输入以后点击左上角的保

存,然后点击桌面上面我们一开始创好的HTML,就会出现这个页面

  步骤4:插入超链接

        这里的H表示标题的意思,3是字的大小,数字不同,最后网页的标题字大小就不同,然后下面插入超链接的命令

        <a href="链接”>一个名称</a>

        这里我用的是我博客的地址,可以看见下面的图,点击名字,即可进入我的网页,这个就是超链接

 步骤5:水平线

        水平线很好理解,就是在网页里面插入几个线条,来区分内容

          <hr/>

          <p></p>

          <hr/>

这个是一个水平线的代码,这里取决你要几个,这里我输了三条

        

 

步骤6:表单

        创建两条可以输入东西的表单,可以在里面输入我们想要输入的东西

 步骤7:密码

        这个好理解,就是一个密码,往密码里面输东西,不显示就是正确

 

 步骤8:单选还有多选

        单选输入上面的命令,多选是下面,这个时候我们进入网页,会发现我们可以进行选择

步骤9:搜索框

        搜索框这个命令输入是可以搜文件的,因为我们还没有学习如何添加路径

最终效果

 这个就是一个简单的网页创建


http://chatgpt.dhexx.cn/article/biKUNUxC.shtml

相关文章

简单的网页

制作一个简单的网页&#xff0c;首先需要下载安装好Dw软件&#xff0c;因为太简单就直接跳过进入正题。 1.首先打开Dw软件&#xff0c;在最上面的栏目中找到站点 2.点击选择新建站点 3.可以看到里面有一个站点名称&#xff0c;我命名为简单的网页站点。下方的本地站名文件夹最右…

Web入门(1)——制作简单的网页

文章目录 安装基础软件设计网站外观做出计划绘制草图选定内容文本主题颜色图像字体 处理文件网站应保存在何处&#xff1f;关于大小写和空格的提示网站应该使用什么结构&#xff1f;文件路径 安装基础软件 计算机WebStormWeb浏览器&#xff1a;Microsoft Edge图像编辑器版本控…

使用HTML+CSS制作一个简单的网页

简单学习了一下HTML和CSS&#xff0c;制作了下面这个网页&#xff08;第一次做还在学习中&#xff09;&#xff0c;里面包含一些基础的布局包括导航条、分页栏、悬浮列表等内容。 网页预览&#xff08;网页中的图片与图标均来自阿里巴巴矢量图标库&#xff09; CSS代码 里面…

简单HTML网页制作 实例

HTML网页制作 1.新建文本文档&#xff0c;以“html”结尾。 2.用html网页逻辑器打开&#xff0c;这里我们用Sublime Text打开。 Tips&#xff1a;使用 &#xff01;Tab 按键 那么就可以自动生成HTML文档模板 推荐大家使用的前端工具有 Vscode hbuilder sublime_text 等等 …

简单网页的制作

传送门链接&#xff1a; 聊聊制作网站那些事 开头先开个小灶&#xff1a;响应式网站 响应式网站就是让网页自适应手机端和PC端&#xff0c;是一种网络页面设计布局&#xff0c;其理念是:集中创建页面的图片排版大小&#xff0c;可以智能地根据用户行为以及使用的设备环境进行…

用html制作简易网页

一.案例展示 案例图展与项目位置如下&#xff1a; 二、使用步骤 1.HTML代码&#xff1a; 代码如下&#xff1a; 圣诞节案例&#xff1a;<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta http-equiv&…

html简单的网页制作

1.用html做一个简单的网页&#xff0c;需要注意布局&#xff0c;布局就需要好好运用css 下面是我做的一个页面效果图&#xff1a; 还有一些不够完善的地方&#xff0c;需要继续摸索努力。下面上代码: <html> <head><meta charset"utf-8"><ti…

一个简单完整的网页

获得源码链接&#xff0c;点击这里https://github.com/suviwang312/SimpleFullPage 网页头部banner和信息部分新闻部分底部 一 头部 效果&#xff1a; 先对css进行初始化 分析&#xff1a;头部有一张图片和一个input输入框还有一个按钮下面的通栏 因为用到左浮&#xff0c…

【手把手】制作一个简单的HTML网页

前些天发现了一个巨牛的人工智能学习博客&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转 新建一个html文件&#xff1a; 我要给body添加一些样式&#xff0c;就在head元素上挂载一个style元素。 然后&#xff0c;写样式表&#xff1a; 效…

HTML写一个简单网页

最近学习了一点HTML&#xff0c;闲来无事写个网页看看&#xff0c; 欢迎、改进、留言。 演示地点&#xff1a;跳转到演示地点 一、初始化页面 body,button,dd,dl, dt,form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul,a,div,span {m…

HTML-01-最简单的网页

一、&#xff08;1&#xff09; 首先&#xff0c;新建一个文本文档 &#xff08;2&#xff09;完成后&#xff0c;在里面输入你想写入的内容 &#xff08;3&#xff09;最后&#xff0c;把文件拓展名改为html&#xff0c;更改之后&#xff0c;我们会发现文本图标会变成浏览器的…

如何用html制作一个简单的网页

哈喽&#xff0c;大家好&#xff01;我是小张。大家在浏览网页的时候有没有好奇过这个网页是怎么制作&#xff0c;其实只是制作一个简单的网页是很简单的。今天我就教一下大家如何用HTML制作一个简单的网页。 了解html 1. 学习html之前先要知道html是什么 HTML的全称为超文本标…

制作一个简单的网页(入门篇)

使用HTML和CSS来制作一个简单的网页 前言一、HTML1.1常见元素介绍1.2借助工具&#xff0c;浏览器开发者工具 二、实现个人名片1.基本框架2.使用CSS美化1.CSS书写位置1、以元素的style 属性来指定 &#xff08;内联样式&#xff09;2、以style 标签包裹 &#xff08;内部样式&am…

一个简单的HTML网页

一个简单的HTML网页&#xff0c;这是朋友写的&#xff0c;里面没有什么内容的&#xff0c;和大家分享一下&#xff0c;不喜勿喷。 先看下效果图 这里的登录和注册都是没有实际功能的&#xff0c;只是一个样式 下面来看看代码 登录 <!DOCTYPE html> <html><h…

return的使用方法

这里是修真院前端小课堂&#xff0c;每篇分享文从 【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】 八个方面深度解析前端知识/技能&#xff0c;本篇分享的是&#xff1a; 【return的使用方法 】 今天给大家分享一下&am…

if中return的用法

C#编程中&#xff0c;在if语句中&#xff0c;使用return语句&#xff0c;用于退出该if语句所在类的所在方法。例如程序&#xff1a; namespace RETU {class Program{static void Main(string[] args){IFR ifr new IFR();ifr.Kan();//Console.Read();}}class IFR{public stati…

【Java SE】return的用法(快速扫盲)

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔&#x1f93a;&#x1f93a;&#x1f93a; 目录 前言 1.定义 2.return的用法 3.break和retur…

python中 return 的用法

# 说明&#xff1a; 1&#xff0c;return 语句后面跟的表达式可以省略&#xff0c;省略后相当于 &#xff08;返回&#xff09;return None # 2&#xff0c;如果函数没有retur…

Java中return的两种用法

一、return语句总是用在方法中&#xff0c;有两个作用。 一个是返回方法指定类型的值&#xff08;这个值总是确定的&#xff09;。 一个是结束方法的执行&#xff08;仅仅一个return语句&#xff09;。 一般的就百是用在有反回值的方法中&#xff0c;用来返回方度法指定问类…

return的四种用法

return的四种用法 &#xff08;1&#xff09;return跳出函数 def num1():print(欢迎练习return !)print(hello!) num1() #跳出函数&#xff1a; def num1():print(欢迎练习return !)returnprint(hello!) num1()(2)return从函数返回一个值&#xff0c;并且这个值可以赋值给他变…